【HarmonyOS NEXT】Web 组件的基础用法以及 H5 侧与原生侧的双向数据通讯

​

关键词：鸿蒙、ArkTs、Web组件、通讯、数据

官方文档Web组件用法介绍：文档中心

Web 组件加载沙箱中页面可参考我的另一篇文章：【HarmonyOS NEXT】 如何将rawfile中文件复制到沙箱中_鸿蒙rawfile 复制到沙箱-CSDN博客

目录

如何在鸿蒙应用中加载一个Web页面

一、加载网络地址页面

二、加载本地H5页面

实现Web组件H5层与应用层进行相互通讯

一、鸿蒙应用向H5页面发送数据

鸿蒙侧

H5侧

案例效果

二、H5页面向鸿蒙应用发送数据（附代码）

H5侧 （附代码）

鸿蒙侧（附代码）

案例效果

---

如何在鸿蒙应用中加载一个Web页面

一、加载网络地址页面

---

1. 导入webview

import web_webview from '@ohos.web.webview'

2. 创建WebviewController

controller: web_webview.WebviewController = new web_webview.WebviewController();

3. 创建Web组件

Web({ src: "http://www.example.com/", controller: this.controller })

4. 在module.json5中添加网络权限

"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]

案例效果：

​编辑​

二、加载本地H5页面

---

1. 在项目的 rowfile 中存放 html 代码

​编辑​

2. 在 Web组件 中使用 $rawfile 加载本地html

Web({ src: $rawfile('webTo.html'), controller: this.controller })

实现Web组件H5层与应用层进行相互通讯

一、鸿蒙应用向H5页面发送数据

---

在创建的WebviewController中使用 runJavaScript() 方法可直接触发 H5 页面中的方法

鸿蒙侧

​编辑​

同样也可以使用模板字符串拼接参数进行传参

​编辑​

H5侧

​编辑​

案例效果

​编辑​

二、H5页面向鸿蒙应用发送数据（附代码）

---

在原生代码侧使用 javaScriptProxy 方法向 h5 的 window 对象中注册方法，此处我注册的对象名叫 JSBridge ，在该对象中写入了一个 nativeMethod 方法，h5 中直接调用 nativeMethod() 方法即可向原生发送消息。

H5侧 （附代码）

h5侧直接调用 window 对象下的 JSBridge.nativeMethod 方法，第一个参数对应原生侧对应的 channelName 方法名，第二个参数为 h5 自定义参数，可带入回调方法，供原生侧完成调用的回调结果。

​编辑

附代码：

JSBridge演示

跳转原生页面

当前城市：

获取当前定位

鸿蒙侧（附代码）

​编辑

附代码：

import { webview } from '@kit.ArkWeb';

export interface IParamsCallback {
name: string
key: string
success: (data?: string) => void
fail: (data?: string) => void
}

@Entry
@Component
export struct MyWeb {
webController: WebviewController = new webview.WebviewController()
webUrl: string | Resource = "";

build() {
Column() {
Web({ src: this.webUrl, controller: this.webController })
.javaScriptProxy({
object: {
nativeMethod: (channelName: string, paramsCallback: IParamsCallback) => {
if (!channelName || !paramsCallback) {
return
}
switch (channelName) {
case "openNativePage":
paramsCallback.success()
console.log("luvi > h5调用 openNativePage 方法，携带参数" + paramsCallback.name)
break;
case "getCity":
paramsCallback.success()
console.log("luvi > h5调用 getCity 方法，携带参数" + paramsCallback.name)
break;
default:
break;
}
},
},
name: 'JSBridge',
methodList: ['nativeMethod'],
controller: this.webController,
})
.fileAccess(true)
.domStorageAccess(true)
.zoomAccess(false)
.width("100%")
.height("100%")
}
}
}

案例效果

​编辑​

​