H5页面如何与ArkTS交互

// javaScriptProxy对象 
public get javaScriptProxy() { 
    return { 
        object: { 
            call: this.call 
        }, 
        name: "JSBridgeHandle", 
        methodList: ['call'], 
        controller: this.controller, 
    } 
}
// 使用Web组件加载H5页面 
@Component 
struct JsProxy { 
  private controller: WebviewController = new WebView.WebviewController() 
  private jsBridge: JSBridge = new JSBridge(this.controller) 
  build() { 
    Column(){ 
      Web({ src: $rawfile('index.html'), controller: this.controller }) 
        .javaScriptProxy(this.jsBridge.javaScriptProxy) 
        .onPageBegin(() => { 
          this.jsBridge.initJSBridge() 
        }) 
    } 
  } 
}

// bridgeKey与bridgeMethod动态生成H5侧调用的入口 
bridgeKey: string = 'JSBridge' 
bridgeMethod: string = 'call' 
// 初始化脚本注入H5侧 
public initJSBridge() { 
    try { 
        this.controller.runJavaScript(` 
            // 接收原生侧结果，执行callback 
            function JSBridgeCallback(id, params){ 
                window.JSBridgeMap[id](params) 
            }; 
            // 声明调用入口 
            window.${this.bridgeKey} = { 
                ${this.bridgeMethod}(method, params, callback){ 
                    window.JSBridgeMap[id] = callback || (() => {}); 
                    JSBridgeHandle.call(method, JSON.stringify(paramsObj)); 
                }, 
            }`) 
    } 
}

// call方法调用原生侧方法，接收结果 
private call = (fun, params) => { 
    try { 
        const paramsObj = JSON.parse(params) 
        const events = this.exposeManage.methodMap.get(fun) 
        const results = [] 
        events.forEach(callFun => { 
            results.push(callFun(paramsObj.data)) 
        }) 
        Promise.all(results.filter(i => !!i)).then(res => { 
            this.callback(paramsObj.callID, res.length > 1 ? res : res[0]) 
        }) 
    } 
} 
 
// 通过runJavaScript调用JSBridgeCallback执行回调 
private callback(id, data) { 
    this.controller.runJavaScript(`__JSBridgeCallback__("${id}", ${JSON.stringify(data)})`); 
}