原生注冊方法到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>
