改为页面跳转

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

@@ -1,34 +1,24 @@
-import { WebView, ComponentConst,  CommonRes, TitleBar, WebViewController } from '@devwiki/common_ui';
+import { ComponentConst, TitleBar } from '@devwiki/common_ui';
+import { TitleBarMenuType } from '@devwiki/common_ui/src/main/ets/component/TitleBar';
+import { router } from '@kit.ArkUI';
+import { PageRouter } from './PageRouter';
 
 @Entry
 @Component
 struct Index {
+  @State title: string = "Home";
 
-  @State viewModel: IndexViewModel = new IndexViewModel();
+  onTitleBarLeftClick(_event: ClickEvent) {
-  private webViewController?: IndexWebViewController;
-
-  aboutToAppear(): void {
-    this.webViewController = new IndexWebViewController(this.viewModel);
-  }
-
-  onTitleBarLeftClick(event: ClickEvent) {
     this.getUIContext().getRouter().back();
   }
 
-  onTitleBarRightClick(event: ClickEvent) {
-    this.webViewController?.refresh();
-  }
-
   build() {
     Column() {
       RelativeContainer() {
         TitleBar({
-          title: this.viewModel.pageTitle,
+          title: this.title,
           onLeftClicked: this.onTitleBarLeftClick,
-          rightIcon: CommonRes.getIconRefresh(),
+          rightMenuType: TitleBarMenuType.None
-          // 必须这么写 onTitleBarRightClick内部的代码才执行,
-          // 直接 onRightClicked: this.onTitleBarRightClick 这么写, 代码不执行
-          onRightClicked: (event: ClickEvent) => { this.onTitleBarRightClick(event)},
         })
           .width('100%')
           .alignRules({
@@ -41,39 +31,23 @@ struct Index {
           left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start }
         }).width('100%').id("divider")
 
-        WebView({ webUrl: this.viewModel?.webUrl, controller: this.webViewController }).width('100%')
+        Column() {
-          .alignRules({
+          Button("WebPage").align(Alignment.Center).height(36).width(80).onClick(() => {
-            top: { anchor: "divider", align: VerticalAlign.Bottom },
+            router.pushUrl({
-            left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start },
+              // 两种方式都可以加载Page, 一个是和 resources/base/profile/main_pages.ets中的配置相同
-            bottom: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Bottom }
+              // 一个是绝对路径
-          }).id("host_web")
+              // url: "pages/WebPage",
+              url: PageRouter.WebPage
+            }, router.RouterMode.Single);
+          })
+        }
+        .width('100%')
+        .alignRules({
+          top: { anchor: "divider", align: VerticalAlign.Bottom },
+          left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start },
+          bottom: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Bottom }
+        }).id("host_web")
       }.width('100%').height('100%')
     }.width('100%').height('100%')
   }
-}
-
-class IndexWebViewController extends WebViewController {
-  private viewModel: IndexViewModel;
-
-  constructor(viewModel: IndexViewModel) {
-    super()
-    this.viewModel = viewModel;
-  }
-
-  onPageEnd(title: string): void {
-    this.viewModel.pageTitle = title;
-  }
-
-}
-
-class IndexViewModel {
-  webUrl: string = "https://devwiki.net";
-  pageTitle: ResourceStr = "";
-
-  constructor() {
-  }
-
-  onTitleChanged(title: string) {
-    this.pageTitle = title;
-  }
 }

app/src/main/ets/pages/PageRouter.ets

@@ -0,0 +1,4 @@
+
+export class PageRouter{
+  static readonly WebPage: string = "@bundle:net.devwiki.hm4demo/app/ets/pages/WebPage"
+}

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

@@ -0,0 +1,83 @@
+import { WebView, ComponentConst,  CommonRes, TitleBar, WebViewController } from '@devwiki/common_ui';
+
+@Entry
+@Component
+export struct WebPage {
+
+  @State viewModel: WebPageViewModel = new WebPageViewModel();
+  private webViewController?: WebPageController;
+
+  aboutToAppear(): void {
+    this.webViewController = new WebPageController(this.viewModel);
+  }
+
+  onTitleBarLeftClick(event: ClickEvent) {
+    this.getUIContext().getRouter().back();
+  }
+
+  onTitleBarRightClick(event: ClickEvent) {
+    this.webViewController?.refresh();
+  }
+
+  build() {
+    Column() {
+      RelativeContainer() {
+        TitleBar({
+          title: this.viewModel.pageTitle,
+          onLeftClicked: this.onTitleBarLeftClick,
+          rightIcon: CommonRes.getIconRefresh(),
+          // 必须这么写 onTitleBarRightClick内部的代码才执行,
+          // 直接 onRightClicked: this.onTitleBarRightClick 这么写, 代码不执行
+          onRightClicked: (event: ClickEvent) => { this.onTitleBarRightClick(event)},
+        })
+          .width('100%')
+          .alignRules({
+            top: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Top },
+            left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start }
+          }).id("title_bar");
+
+        Divider().alignRules({
+          top: { anchor: "title_bar", align: VerticalAlign.Bottom },
+          left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start }
+        }).width('100%').id("divider")
+
+        WebView({ webUrl: this.viewModel?.webUrl, controller: this.webViewController }).width('100%')
+          .alignRules({
+            top: { anchor: "divider", align: VerticalAlign.Bottom },
+            left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start },
+            bottom: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Bottom }
+          }).id("host_web")
+      }.width('100%').height('100%')
+    }.width('100%').height('100%')
+  }
+}
+
+class WebPageController extends WebViewController {
+  private viewModel: WebPageViewModel;
+
+  constructor(viewModel: WebPageViewModel) {
+    super()
+    this.viewModel = viewModel;
+  }
+
+  onPageEnd(title: string): void {
+    this.viewModel.pageTitle = title;
+  }
+
+  getNativePageFileName(): string {
+    return "Index.ets";
+  }
+
+}
+
+class WebPageViewModel {
+  webUrl: string = "https://devwiki.net";
+  pageTitle: ResourceStr = "";
+
+  constructor() {
+  }
+
+  onTitleChanged(title: string) {
+    this.pageTitle = title;
+  }
+}

app/src/main/resources/base/profile/main_pages.json

@@ -1,5 +1,6 @@
 {
   "src": [
-    "pages/Index"
+    "pages/Index",
+    "pages/WebPage"
   ]
 }

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

@@ -3,7 +3,7 @@
  * H5 调用 native的函数
  */
 export interface WebScriptCallback {
-  getCount(): number;
+  getNativePageFileName(): string;
 }
 
 /**

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

@@ -51,8 +51,8 @@ export class WebViewController implements WebScriptCallback, WebScriptFunction,
     return this.webviewController?.getUrl() ?? "";
   }
 
-  getCount(): number {
+  getNativePageFileName(): string {
-    return 0;
+    return "";
   }
 
   alert(message: string): void {