鸿蒙与h5的交互
一 、对象注入，h5调用鸿蒙方法--javaScriptProxy
// xxx.ets
import web_webview from '@ohos.web.webview';class WebViewModel {constructor() {}webCallBack() {console.log('webCallBack')}
}@Entry
@ComponentV2
struct WebComponent {webviewController: web_webview.WebviewController = new web_webview.WebviewController();// 声明需要注册的对象@Local vm: WebViewModel = new WebViewModel();build() {Column() {// web组件加载本地index.html页面Web({ src: $rawfile('test1.html'), controller: this.webviewController }).domStorageAccess(true).javaScriptAccess(true)// 将对象注入到web端.javaScriptProxy({object: this.vm,name: "harmony",methodList: ["webCallBack"],controller: this.webviewController})}}
}html代码：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0" name="viewport">
</head><body>
<div class="btn-box"><button class="btn" onclick="callArkTS()" type="button">Click Me!</button><p id="demo"></p>
</div></body>
<script>function callArkTS() {window.harmony.webCallBack();}
</script></html>二、对象注入，方式二---javaScriptProxy
// xxx.ets
import web_webview from '@ohos.web.webview';@Entry
@ComponentV2
struct WebComponent {webviewController: web_webview.WebviewController = new web_webview.WebviewController();build() {Column() {// web组件加载本地index.html页面Web({ src: $rawfile('test1.html'), controller: this.webviewController }).domStorageAccess(true).javaScriptAccess(true)// 将对象注入到web端.javaScriptProxy({object: {nativeMethod: (channelName: string, paramsCallback: number) => {console.log('paramsCallback' + paramsCallback)if (!channelName || !paramsCallback) {return}if (paramsCallback) {}},},name: "harmony",methodList: ["nativeMethod"],controller: this.webviewController})}}
}html代码：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0" name="viewport">
</head><body>
<div class="btn-box"><button class="btn" onclick="callArkTS()" type="button">Click Me!</button><p id="demo"></p>
</div></body>
<script>function callArkTS() {window.harmony.nativeMethod( "callArkTS", "params");}
</script></html>三、原生调用h5的方法--runJavaScript
// xxx.ets
import web_webview from '@ohos.web.webview';@Entry
@ComponentV2
struct WebComponent {webviewController: web_webview.WebviewController = new web_webview.WebviewController();@Local value1: string = 'value1'@Local value2: string = 'value2'build() {Column() {// web组件加载本地index.html页面Web({ src: $rawfile('test1.html'), controller: this.webviewController }).fileAccess(true).domStorageAccess(true).zoomAccess(false).onPageEnd(() => {this.webviewController.runJavaScript(`nativeFn("${this.value1}","${this.value2}")`)})}}
}html代码：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0" name="viewport">
</head><body>
<div class="btn-box"><button class="btn" onclick="callArkTS()" type="button">Click Me!</button><p id="demo"></p>
</div></body>
<script>function nativeFn(value1, value2) {console.log('原生调用' + value1 + '--' + value2);}
</script></html>