H5页面如何与ArkTS交互

目前javaScriptProxy仅支持同步调用,异步调用无法获取执行结果。

HarmonyOS
2024-01-19 16:28:10
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
tomorrowdreamer

对javaScriptProxy和runJavaScript封装,实现JSBridge通信方案。适用于H5调用原生侧函数。使用Web组件javaScriptProxy将原生侧接口注入到H5的window对象上,通过runJavaScript接口执行JS脚本到H5中,并在回调中获取脚本执行结果。具体调用流程如下图所示:

  • 首先通过Web组件的javaScriptProxy属性,将JSBridgeHandle对象注册到H5的window上,作为H5调用原生的通道。当H5开始加载时,在onPageBegin生命周期中调用initJSBridge()方法初始化JSBridge。
// 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() 
        }) 
    } 
  } 
}
  • 在initJSBridge方法中,通过webviewControll.runJavaScript()将JSBridge初始化脚本注入H5执行。当H5调用时,生成window.callID标识回调函数,将callID与调用参数使用JSBridgeHandle.call传到原生侧。通过JSBridgeCallback接收原生侧执行的结果,根据callID找到对应callback执行并且释放内存。
// 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)); 
                }, 
            }`) 
    } 
}
  • JSBridgeHandle.call()是H5调用原生接口的统一入口,在该方法中根据H5调用的方法名,匹配到对应接口去调用。调用结束后通过this.callback()方法将调用结果返回H5。callback方法中使用webviewControll.runJavaScript()调用H5的JSBridgeCallback回传callID和调用结果。
// 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)})`); 
}
分享
微博
QQ
微信
回复
2024-01-19 21:59:38
相关问题
如何实现H5自定义事件
137浏览 • 1回复 待解决
webview加载Vue h5失败
15341浏览 • 5回复 待解决
如何加载字符串形式H5数据
125浏览 • 1回复 待解决
FA里内嵌H5是怎么保持登录状态?
4964浏览 • 1回复 待解决
如何实现列表的单选效果
288浏览 • 0回复 待解决
FA卡片如何进行数据交互
324浏览 • 1回复 待解决
如何启动应用的系统设置详情
128浏览 • 1回复 待解决
卡片和app之间的数据是如何交互
110浏览 • 1回复 待解决
Android端和mySQL端如何进行交互?
273浏览 • 1回复 待解决