鸿蒙（HarmonyOS）性能优化—Web开辟常见标题

H5页面怎样与ArkTS交互(API 10)

标题征象
现在javaScriptProxy仅支持同步调用，异步调用无法获取实行结果。
办理步伐
对javaScriptProxy和runJavaScript封装，实现JSBridge通讯方案。实用于H5调用原生侧函数。利用Web组件javaScriptProxy将原生侧接口注入到H5的window对象上，通过runJavaScript接口实行JS脚本到H5中，并在回调中获取脚本实行结果。详细调用流程如下图所示：

  

• 起首通过Web组件的javaScriptProxy属性，将JSBridgeHandle对象注册到H5的window上，作为H5调用原生的通道。当H5开始加载时，在onPageBegin生命周期中调用initJSBridge()方法初始化JSBridge。
  
  1. // javaScriptProxy对象
  2. public get javaScriptProxy() {
  3.     return {
  4.         object: {
  5.             call: this.call
  6.         },
  7.         name: "JSBridgeHandle",
  8.         methodList: ['call'],
  9.         controller: this.controller,
  10.     }
  11. }

  复制代码
  1. // 使用Web组件加载H5页面
  2. @Component
  3. struct JsProxy {
  4.   private controller: WebviewController = new WebView.WebviewController()
  5.   private jsBridge: JSBridge = new JSBridge(this.controller)
  6.   build() {
  7.     Column(){
  8.       Web({ src: $rawfile('index.html'), controller: this.controller })
  9.         .javaScriptProxy(this.jsBridge.javaScriptProxy)
  10.         .onPageBegin(() => {
  11.           this.jsBridge.initJSBridge()
  12.         })
  13.     }
  14.   }
  15. }

  复制代码
  
  
• 在initJSBridge方法中，通过webviewControll.runJavaScript()将JSBridge初始化脚本注入H5实行。当H5调用时，天生window.callID标识回调函数，将callID与调用参数利用JSBridgeHandle.call传到原生侧。通过JSBridgeCallback汲取原生侧实行的结果，根据callID找到对应callback实行而且开释内存。
  
  1. // bridgeKey与bridgeMethod动态生成H5侧调用的入口
  2. bridgeKey: string = 'JSBridge'
  3. bridgeMethod: string = 'call'
  4. // 初始化脚本注入H5侧
  5. public initJSBridge() {
  6.     try {
  7.         this.controller.runJavaScript(`
  8.             // 接收原生侧结果，执行callback
  9.             function JSBridgeCallback(id, params){
  10.                 window.JSBridgeMap[id](params)
  11.             };
  12.             // 声明调用入口
  13.             window.${this.bridgeKey} = {
  14.                 ${this.bridgeMethod}(method, params, callback){
  15.                     window.JSBridgeMap[id] = callback || (() => {});
  16.                     JSBridgeHandle.call(method, JSON.stringify(paramsObj));
  17.                 },
  18.             }`)
  19.     }
  20. }

  复制代码
  
  
• JSBridgeHandle.call()是H5调用原生接口的同一入口，在该方法中根据H5调用的方法名，匹配到对应接口去调用。调用竣事后通过this.callback()方法将调用结果返回H5。callback方法中利用webviewControll.runJavaScript()调用H5的JSBridgeCallback回传callID和调用结果。
  
  1. // call方法调用原生侧方法，接收结果
  2. private call = (fun, params) => {
  3.     try {
  4.         const paramsObj = JSON.parse(params)
  5.         const events = this.exposeManage.methodMap.get(fun)
  6.         const results = []
  7.         events.forEach(callFun => {
  8.             results.push(callFun(paramsObj.data))
  9.         })
  10.         Promise.all(results.filter(i => !!i)).then(res => {
  11.             this.callback(paramsObj.callID, res.length > 1 ? res : res[0])
  12.         })
  13.     }
  14. }
  16. // 通过runJavaScript调用JSBridgeCallback执行回调
  17. private callback(id, data) {
  18.     this.controller.runJavaScript(`__JSBridge

  复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金