Harmony/HMDemo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

改为页面跳转

Browse Source
This commit is contained in:
DevWiki 2024-04-02 21:30:05 +08:00
parent 4d58059063
commit 68a08d785e
6 changed files with 116 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
app/src/main/ets/pages/Index.ets
View File

@ -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;
}
}

4
app/src/main/ets/pages/PageRouter.ets Normal file
View File

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

83
app/src/main/ets/pages/WebPage.ets Normal file
View File

@ -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;
}
}

3
app/src/main/resources/base/profile/main_pages.json
View File

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

2
common_ui/src/main/ets/component/web/WebScript.ets
View File

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

4
common_ui/src/main/ets/component/web/WebView.ets
View File

@ -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 {