原生注冊(cè)方法到window下面，使用系統(tǒng)提供的API“javaScriptProxy”
下面是鴻蒙官方文檔的說明即示例，什么都說了，但好像什么又都沒說
javaScriptProxy
javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Array<string>,
controller: WebviewController | WebController})
注入JavaScript對(duì)象到window對(duì)象中学密，并在window對(duì)象中調(diào)用該對(duì)象的方法。所有參數(shù)不支持更新传藏。
參數(shù)：
| 參數(shù)名 | 參數(shù)類型 | 必填 | 默認(rèn)值 | 參數(shù)描述 |
|---|---|---|---|---|
| object | object | 是 | - | 參與注冊(cè)的對(duì)象腻暮。只能聲明方法，不能聲明屬性毯侦。 |
| name | string | 是 | - | 注冊(cè)對(duì)象的名稱哭靖，與window中調(diào)用的對(duì)象名一致。 |
| methodList | Array<string> | 是 | - | 參與注冊(cè)的應(yīng)用側(cè)JavaScript對(duì)象的方法侈离。 |
| controller | WebviewController/WebController | 是 | - | 控制器试幽。從API Version 9開始，WebController不再維護(hù)卦碾，建議使用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初始化時(shí)候的鏈接可以直接使用“https://www.example.com”這種形式。
說明二：name是注冊(cè)到window下面洲胖，所有注入原生方法的一個(gè)總集合济榨。也就是后面在window調(diào)用的時(shí)候需要這樣調(diào)用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中的值對(duì)應(yīng)
showToast: (data) => {
Logger.info(data)
this.controller.runJavaScript('h5Test()') // 調(diào)用H5頁(yè)面中的js方法
}
}
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
.zoomAccess(false) // 設(shè)置是否支持手勢(shì)進(jìn)行縮放绿映，默認(rèn)允許執(zhí)行縮放擒滑。
.width('100%')
.height('100%')
.onConsole((event) => { // h5中所有的console.log打印的內(nèi)容會(huì)在這個(gè)方法中被日志輸出
Logger.info(event.message.getMessage())
return false
})
.javaScriptProxy({
object: this.h5CallNativeMethod, // 此對(duì)象名稱對(duì)應(yīng)上面定義的方法組名稱
name: 'callOhosNative', // 用來統(tǒng)一注入到window的方法集合名稱
methodList: ["showToast"], // 注入到h5中的方法，統(tǒng)一會(huì)注入到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); // 延遲一秒調(diào)用原生方法
}
// 提供給原生調(diào)用的js方法
function h5Test() {
console.log('h5 receive native message');
}
</script>
</head>
<body>
</body>
</html>
