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

增加文件选择

Browse Source
This commit is contained in:
DevWiki 2024-06-24 17:09:46 +08:00
parent 1d6e5653c3
commit 793324640e
2 changed files with 40 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
app/src/main/ets/pages/web/WebPage.ets
View File

@ -30,39 +30,28 @@ export struct WebPage {
build() {
Column() {
RelativeContainer() {
TitleBar({
title: this.viewModel.pageTitle,
onLeftClicked: () => {
if (this.onTitleBarLeftClick) {
this.onTitleBarLeftClick();
} else {
this.getUIContext().getRouter().back()
}
},
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");
TitleBar({
title: this.viewModel.pageTitle,
onLeftClicked: () => {
if (this.onTitleBarLeftClick) {
this.onTitleBarLeftClick();
} else {
this.getUIContext().getRouter().back()
}
},
rightIcon: CommonRes.getIconRefresh(),
// 必须这么写 onTitleBarRightClick内部的代码才执行,
// 直接 onRightClicked: this.onTitleBarRightClick 这么写, 代码不执行
onRightClicked: (event: ClickEvent) => { this.onTitleBarRightClick(event)},
}).width('100%')
Divider().alignRules({
top: { anchor: "title_bar", align: VerticalAlign.Bottom },
left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start }
}).width('100%').id("divider")
Divider().alignRules({
top: { anchor: "title_bar", align: VerticalAlign.Bottom },
left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start }
}).width('100%').id("divider")
WebView({ param: this.viewModel.webParam, 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%')
WebView({ param: this.viewModel.webParam, controller: this.webViewController }).width('100%')
.layoutWeight(1).borderWidth(1).borderColor(Color.Red)
}.width('100%').height('100%')
}
}
@ -88,7 +77,7 @@ class WebPageController extends WebViewController {
class WebPageViewModel {
webParam: WebViewParam = {
webUrl: "https://devwiki.net"
webUrl: "https://baidu.com"
};
pageTitle: ResourceStr = "WebPage";

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

@ -1,5 +1,7 @@
import web_webview from '@ohos.web.webview';
import { WebScriptCallback, WebScriptFunction } from './WebScript';
import { picker } from '@kit.CoreFileKit';
import { BusinessError } from '@kit.BasicServicesKit';
export class WebViewParam {
webUrl: string = "";
@ -9,6 +11,8 @@ export class WebViewParam {
export struct WebView {
private webviewController: web_webview.WebviewController = new web_webview.WebviewController();
selectOptions?: picker.PhotoSelectOptions | picker.DocumentSelectOptions;
viewPicker?: picker.PhotoViewPicker | picker.DocumentViewPicker;
controller: WebViewController = new WebViewController();
@Prop @Watch("onParamChanged")param: WebViewParam = new WebViewParam();
@ -33,6 +37,21 @@ export struct WebView {
controller: this.webviewController
})
.onPageEnd(() => { this.controller.onPageEnd(this.webviewController.getTitle()) })
.onShowFileSelector( (event) =>{
let uri: string[] | null = null;
this.selectOptions = new picker.DocumentSelectOptions();
this.viewPicker = new picker.DocumentViewPicker();
this.viewPicker.select(this.selectOptions).then((result) => {
uri = result;
console.info('DocumentViewPicker.select to file succeed and uri is:' + uri);
if (event) {
event.result.handleFileList(uri);
}
}).catch((err: BusinessError) => {
console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
})
return true;
})
.width('100%')
.height('100%');
}