原生注册方法到window下面，使用系统提供的API“javaScriptProxy”
下面是鸿蒙官方文档的说明即示例，什么都说了，但好像什么又都没说
javaScriptProxy
javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Array<string>,
controller: WebviewController | WebController})
注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。所有参数不支持更新。
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| object | object | 是 | - | 参与注册的对象。只能声明方法，不能声明属性。 |
| name | string | 是 | - | 注册对象的名称，与window中调用的对象名一致。 |
| methodList | Array<string> | 是 | - | 参与注册的应用侧JavaScript对象的方法。 |
| controller | WebviewController/WebController | 是 | - | 控制器。从API Version 9开始，WebController不再维护，建议使用WebviewController替代。 |
示例
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
testObj = {
test: (data1, data2, data3) => {
console.log("data1:" + data1)
console.log("data2:" + data2)
console.log("data3:" + data3)
return "AceString"
},
toString: () => {
console.log('toString' + "interface instead.")
}
}
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.javaScriptAccess(true)
.javaScriptProxy({
object: this.testObj,
name: "objName",
methodList: ["test", "toString"],
controller: this.controller,
})
}
}
}
说明一：Web初始化时候的链接可以直接使用“https://www.example.com”这种形式。
说明二：name是注册到window下面，所有注入原生方法的一个总集合。也就是后面在window调用的时候需要这样调用window.name.methodListElement
完整示例
HarmonyOS原生代码
import webview from '@ohos.web.webview'
import Logger from '../../common/utils/Logger'
@Entry
@Component
struct CustomWeb {
controller: webview.WebviewController = new webview.WebviewController()
h5CallNativeMethod = { // 自定义方法组名称，与下面object中的值对应
showToast: (data) => {
Logger.info(data)
this.controller.runJavaScript('h5Test()') // 调用H5页面中的js方法
}
}
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
.zoomAccess(false) // 设置是否支持手势进行缩放，默认允许执行缩放。
.width('100%')
.height('100%')
.onConsole((event) => { // h5中所有的console.log打印的内容会在这个方法中被日志输出
Logger.info(event.message.getMessage())
return false
})
.javaScriptProxy({
object: this.h5CallNativeMethod, // 此对象名称对应上面定义的方法组名称
name: 'callOhosNative', // 用来统一注入到window的方法集合名称
methodList: ["showToast"], // 注入到h5中的方法，统一会注入到callOhosNative里面
controller: this.controller
})
}
}
}
H5代码
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<script type="text/javascript">
window.onload = function() {
console.log('page finish load');
setTimeout(() => {
window.callOhosNative.showToast('native nice to meet you');
}, 1000); // 延迟一秒调用原生方法
}
// 提供给原生调用的js方法
function h5Test() {
console.log('h5 receive native message');
}
</script>
</head>
<body>
</body>
</html>
网友评论