鸿蒙HarmonyOS实战-Web组件（基本使用和属性）_harmonyos web交互

最新推荐文章于 2024-08-26 15:43:46 发布

2123程序媛

最新推荐文章于 2024-08-26 15:43:46 发布

阅读量748

点赞数 23

分类专栏： 2024年程序员学习文章标签： harmonyos 前端交互

本文链接：https://blog.csdn.net/weixin_58085973/article/details/137634810

版权

2024年程序员学习专栏收录该内容

226 篇文章 0 订阅

订阅专栏

// xxx.ets
import web_webview from ‘@ohos.web.webview’;

@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();

build() {
Column() {
Button(‘loadData’)
.onClick(() => {
try {
// 点击按钮时，通过loadData，加载HTML格式的文本数据
this.controller.loadData(
“<body bgcolor=“white”>Source:

source

”,
“text/html”,
“UTF-8”
);
} catch (error) {
console.error( ErrorCode: ${error.code}, Message: ${error.message});
}
})
// 组件创建时，加载www.example.com
Web({ src: ‘www.example.com’, controller: this.controller })
}
}
}

在这里插入图片描述

3.设置基本属性和事件

🦋3.1 设置深色模式

通过darkMode()接口可以配置不同的深色模式。

WebDarkMode.Off模式表示关闭深色模式。
WebDarkMode.On表示开启深色模式，且深色模式跟随前端页面。
WebDarkMode.Auto表示开启深色模式，且深色模式跟随系统。
forceDarkAccess()接口可将前端页面强制配置深色模式，且深色模式不跟随前端页面和系统。配置该模式时候，需要将深色模式配置成WebDarkMode.On。

// xxx.ets
import web_webview from ‘@ohos.web.webview’;

@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State mode: WebDarkMode = WebDarkMode.On;
@State access: boolean = true;
build() {
Column() {
Web({ src: ‘www.example.com’, controller: this.controller })
.darkMode(this.mode)
.forceDarkAccess(this.access)
}
}
}

在这里插入图片描述

🦋3.2 上传文件

HarmonyOS中Web组件的onShowFileSelector()方法用于显示文件选择器，让用户选择文件。它可以用于在应用中上传文件或选择本地文件等操作。

// xxx.ets
import web_webview from ‘@ohos.web.webview’;
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
// 加载本地local.html页面
Web({ src: $rawfile(‘local.html’), controller: this.controller })
.onShowFileSelector((event) => {
// 开发者设置要上传的文件路径
let fileList: Array = [
‘xxx/test.png’,
]
event.result.handleFileList(fileList)
return true;
})
}
}
}

Document // 点击文件上传按钮

在这里插入图片描述

🦋3.3 在新窗口中打开页面

开发者可以使用multiWindowAccess()接口来设置网页是否可以在新窗口中打开。通过调用此接口并传入相应的参数，可以控制网页是否允许使用新窗口。

当网页请求在新窗口中打开时，应用将收到Web组件的新窗口事件，可以通过onWindowNew()接口来处理此事件。在此接口中，开发者可以根据需要创建新的窗口来处理Web组件的窗口请求。

// xxx.ets
import web_webview from ‘@ohos.web.webview’

//在同一page页有两个web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。
@CustomDialog
struct NewWebViewComp {
controller?: CustomDialogController
webviewController1: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: “”, controller: this.webviewController1 })
.javaScriptAccess(true)
.multiWindowAccess(false)
.onWindowExit(()=> {
console.info(“NewWebViewComp onWindowExit”)
if (this.controller) {
this.controller.close()
}
})
}
}
}

@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
dialogController: CustomDialogController | null = null
build() {
Column() {
Web({ src:$rawfile(“window.html”), controller: this.controller })
.javaScriptAccess(true)
//需要使能multiWindowAccess
.multiWindowAccess(true)
.allowWindowOpenMethod(true)
.onWindowNew((event) => {
if (this.dialogController) {
this.dialogController.close()
}
let popController:web_webview.WebviewController = new web_webview.WebviewController()
this.dialogController = new CustomDialogController({
builder: NewWebViewComp({webviewController1: popController})
})
this.dialogController.open()
//将新窗口对应WebviewController返回给Web内核。
//如果不需要打开新窗口请调用event.handler.setWebController接口设置成null。
//若不调用event.handler.setWebController接口，会造成render进程阻塞。
event.handler.setWebController(popController)
})
}
}
}