首页设置壁纸及修改部分WebView

app/src/main/ets/pages/Index.ets

@@ -54,7 +54,7 @@ struct Index {
           .width('100%')
           .alignRules({
             top: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Top },
-            left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start }
+            left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start },
           }).id("title_bar"); //必须要设置id 否则不显示
 
         Divider().alignRules({
@@ -84,7 +84,7 @@ struct Index {
             Button("1").type(ButtonType.Capsule).height(32).width(80);
           }.rowStart(1).rowEnd(1).columnStart(0).columnEnd(0)
         }
-        .width('100%').backgroundColor('#FF005566')
+        .width('100%')
         .columnsTemplate('1fr 1fr 1fr 1fr').columnsGap(8)
         .rowsTemplate('repeat(auto-fill, 36)').rowsGap(8)
         .alignRules({
@@ -93,6 +93,6 @@ struct Index {
           bottom: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Bottom }
         }).id("host_web") //必须要设置id 否则不显示
       }.width('100%').height('100%')
-    }.width('100%').height('100%')
+    }.width('100%').height('100%').backgroundImage($r("app.media.bg_sky")).backgroundImageSize(ImageSize.Cover)
   }
 }

app/src/main/ets/pages/WebPage.ets

@@ -1,4 +1,5 @@
 import { WebView, ComponentConst,  CommonRes, TitleBar, WebViewController, ScreenUtil } from '@devwiki/common_ui';
+import { WebViewParam } from '@devwiki/common_ui/src/main/ets/component/web/WebView';
 
 @Entry
 @Component
@@ -40,7 +41,7 @@ export struct WebPage {
           left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start }
         }).width('100%').id("divider")
 
-        WebView({ webUrl: this.isPortrait? this.viewModel?.webUrl : "https://blog.devwiki.net", controller: this.webViewController }).width('100%')
+        WebView({ param: this.viewModel.webParam, controller: this.webViewController }).width('100%')
           .alignRules({
             top: { anchor: "divider", align: VerticalAlign.Bottom },
             left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start },
@@ -70,7 +71,11 @@ class WebPageController extends WebViewController {
 }
 
 class WebPageViewModel {
-  webUrl: string = "https://devwiki.net";
+
+  webParam: WebViewParam = {
+    webUrl: "https://devwiki.net"
+  };
+
   pageTitle: ResourceStr = "";
 
   constructor() {

common_ui/src/main/ets/component/TitleBar.ets

@@ -85,8 +85,8 @@ export struct TitleBar {
                 align: this.leftMenuType != TitleBarMenuType.None ? HorizontalAlign.End : HorizontalAlign.Start
               },
               right: {
-                anchor: this.leftMenuType != TitleBarMenuType.None ? "right_menu" : ComponentConst.ContainerId,
+                anchor: this.rightMenuType != TitleBarMenuType.None ? "right_menu" : ComponentConst.ContainerId,
-                align: this.leftMenuType != TitleBarMenuType.None ? HorizontalAlign.Start : HorizontalAlign.End
+                align: this.rightMenuType != TitleBarMenuType.None ? HorizontalAlign.Start : HorizontalAlign.End
               },
               bottom: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Bottom }
             })

common_ui/src/main/ets/component/web/WebView.ets

@@ -1,24 +1,34 @@
 import web_webview from '@ohos.web.webview';
 import { WebScriptCallback, WebScriptFunction } from './WebScript';
 
+export class WebViewParam {
+  webUrl: string = "";
+}
+
 @Component
 export struct WebView {
 
   private webviewController: web_webview.WebviewController = new web_webview.WebviewController();
   controller: WebViewController = new WebViewController();
-  @Prop webUrl: string = "";
+  @Prop @Watch("onParamChanged")param: WebViewParam = new WebViewParam();
+
+  onParamChanged() {
+    if (this.param.webUrl != this.webviewController.getUrl()) {
+      this.controller.loadUrl(this.param.webUrl);
+    }
+  }
 
   aboutToAppear(): void {
     this.controller.setWebviewController(this.webviewController);
   }
 
   build() {
-    Web({ src: this.webUrl, controller: this.webviewController })
+    Web({ src: this.param.webUrl, controller: this.webviewController })
       .javaScriptAccess(true)// 允许使用 js
       .javaScriptProxy({
-        object: null,
+        object: this.controller,
-        name: "",
+        name: WebViewController.JsBridgeName,
-        methodList: [],
+        methodList: WebViewController.JsMethodName,
         controller: this.webviewController
       })
       .onPageEnd(() => { this.controller.onPageEnd(this.webviewController.getTitle()) })
@@ -34,6 +44,9 @@ interface WebViewCallback {
 
 export class WebViewController implements WebScriptCallback, WebScriptFunction, WebViewCallback {
 
+  static readonly JsBridgeName = "devwiki";
+  static readonly JsMethodName = [""];
+
   private webviewController?: web_webview.WebviewController
 
   constructor() {