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() { build() {
Column() { Column() {
RelativeContainer() { TitleBar({
TitleBar({ title: this.viewModel.pageTitle,
title: this.viewModel.pageTitle, onLeftClicked: () => {
onLeftClicked: () => { if (this.onTitleBarLeftClick) {
if (this.onTitleBarLeftClick) { this.onTitleBarLeftClick();
this.onTitleBarLeftClick(); } else {
} else { this.getUIContext().getRouter().back()
this.getUIContext().getRouter().back() }
} },
}, rightIcon: CommonRes.getIconRefresh(),
rightIcon: CommonRes.getIconRefresh(), // 必须这么写 onTitleBarRightClick内部的代码才执行,
// 必须这么写 onTitleBarRightClick内部的代码才执行, // 直接 onRightClicked: this.onTitleBarRightClick 这么写, 代码不执行
// 直接 onRightClicked: this.onTitleBarRightClick 这么写, 代码不执行 onRightClicked: (event: ClickEvent) => { this.onTitleBarRightClick(event)},
onRightClicked: (event: ClickEvent) => { this.onTitleBarRightClick(event)}, }).width('100%')
})
.width('100%')
.alignRules({
top: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Top },
left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start }
}).id("title_bar");
Divider().alignRules({ Divider().alignRules({
top: { anchor: "title_bar", align: VerticalAlign.Bottom }, top: { anchor: "title_bar", align: VerticalAlign.Bottom },
left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start } left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start }
}).width('100%').id("divider") }).width('100%').id("divider")
WebView({ param: this.viewModel.webParam, controller: this.webViewController }).width('100%') WebView({ param: this.viewModel.webParam, controller: this.webViewController }).width('100%')
.alignRules({ .layoutWeight(1).borderWidth(1).borderColor(Color.Red)
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%') }.width('100%').height('100%')
} }
} }
@ -88,7 +77,7 @@ class WebPageController extends WebViewController {
class WebPageViewModel { class WebPageViewModel {
webParam: WebViewParam = { webParam: WebViewParam = {
webUrl: "https://devwiki.net" webUrl: "https://baidu.com"
}; };
pageTitle: ResourceStr = "WebPage"; 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 web_webview from '@ohos.web.webview';
import { WebScriptCallback, WebScriptFunction } from './WebScript'; import { WebScriptCallback, WebScriptFunction } from './WebScript';
import { picker } from '@kit.CoreFileKit';
import { BusinessError } from '@kit.BasicServicesKit';
export class WebViewParam { export class WebViewParam {
webUrl: string = ""; webUrl: string = "";
@ -9,6 +11,8 @@ export class WebViewParam {
export struct WebView { export struct WebView {
private webviewController: web_webview.WebviewController = new web_webview.WebviewController(); private webviewController: web_webview.WebviewController = new web_webview.WebviewController();
selectOptions?: picker.PhotoSelectOptions | picker.DocumentSelectOptions;
viewPicker?: picker.PhotoViewPicker | picker.DocumentViewPicker;
controller: WebViewController = new WebViewController(); controller: WebViewController = new WebViewController();
@Prop @Watch("onParamChanged")param: WebViewParam = new WebViewParam(); @Prop @Watch("onParamChanged")param: WebViewParam = new WebViewParam();
@ -33,6 +37,21 @@ export struct WebView {
controller: this.webviewController controller: this.webviewController
}) })
.onPageEnd(() => { this.controller.onPageEnd(this.webviewController.getTitle()) }) .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%') .width('100%')
.height('100%'); .height('100%');
} }