From 68a08d785ed13022aad8e3a0ba2bc4d41cb915ee Mon Sep 17 00:00:00 2001 From: DevWiki Date: Tue, 2 Apr 2024 21:30:05 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E4=B8=BA=E9=A1=B5=E9=9D=A2=E8=B7=B3?= =?UTF-8?q?=E8=BD=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/src/main/ets/pages/Index.ets | 74 ++++++----------- app/src/main/ets/pages/PageRouter.ets | 4 + app/src/main/ets/pages/WebPage.ets | 83 +++++++++++++++++++ .../resources/base/profile/main_pages.json | 3 +- .../src/main/ets/component/web/WebScript.ets | 2 +- .../src/main/ets/component/web/WebView.ets | 4 +- 6 files changed, 116 insertions(+), 54 deletions(-) create mode 100644 app/src/main/ets/pages/PageRouter.ets create mode 100644 app/src/main/ets/pages/WebPage.ets diff --git a/app/src/main/ets/pages/Index.ets b/app/src/main/ets/pages/Index.ets index 3964695..4c6e796 100644 --- a/app/src/main/ets/pages/Index.ets +++ b/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(); - private webViewController?: IndexWebViewController; - - aboutToAppear(): void { - this.webViewController = new IndexWebViewController(this.viewModel); - } - - onTitleBarLeftClick(event: ClickEvent) { + 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(), - // 必须这么写 onTitleBarRightClick内部的代码才执行, - // 直接 onRightClicked: this.onTitleBarRightClick 这么写, 代码不执行 - onRightClicked: (event: ClickEvent) => { this.onTitleBarRightClick(event)}, + rightMenuType: TitleBarMenuType.None }) .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%') - .alignRules({ - top: { anchor: "divider", align: VerticalAlign.Bottom }, - left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start }, - bottom: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Bottom } - }).id("host_web") + Column() { + Button("WebPage").align(Alignment.Center).height(36).width(80).onClick(() => { + router.pushUrl({ + // 两种方式都可以加载Page, 一个是和 resources/base/profile/main_pages.ets中的配置相同 + // 一个是绝对路径 + // 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; - } } \ No newline at end of file diff --git a/app/src/main/ets/pages/PageRouter.ets b/app/src/main/ets/pages/PageRouter.ets new file mode 100644 index 0000000..42a72d2 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/app/src/main/ets/pages/WebPage.ets b/app/src/main/ets/pages/WebPage.ets new file mode 100644 index 0000000..4da3da0 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/app/src/main/resources/base/profile/main_pages.json b/app/src/main/resources/base/profile/main_pages.json index 1898d94..eacfa98 100644 --- a/app/src/main/resources/base/profile/main_pages.json +++ b/app/src/main/resources/base/profile/main_pages.json @@ -1,5 +1,6 @@ { "src": [ - "pages/Index" + "pages/Index", + "pages/WebPage" ] } diff --git a/common_ui/src/main/ets/component/web/WebScript.ets b/common_ui/src/main/ets/component/web/WebScript.ets index cdf0cf5..13b28d1 100644 --- a/common_ui/src/main/ets/component/web/WebScript.ets +++ b/common_ui/src/main/ets/component/web/WebScript.ets @@ -3,7 +3,7 @@ * H5 调用 native的函数 */ export interface WebScriptCallback { - getCount(): number; + getNativePageFileName(): string; } /** diff --git a/common_ui/src/main/ets/component/web/WebView.ets b/common_ui/src/main/ets/component/web/WebView.ets index cb9d2f2..abbe7d5 100644 --- a/common_ui/src/main/ets/component/web/WebView.ets +++ b/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 { - return 0; + getNativePageFileName(): string { + return ""; } alert(message: string): void {