HarmonyOS h5与原生交互, 在原生实现的js方法中怎么获取到webController,用于调用runJavaScript方法?
HarmonyOS端定义js方法,提供给前端调用,之后需要通过webController的runJavaScript的方法调用h5的方法,但是JavaScriptObjTest在struct UI类外部,获取不到webController,HarmonyOS这边应该如何跟UI线程通信呢?
class JavaScriptObjTest { 
  mUnlineLocationCallBack: string = ''; 
  jssdkCallSystemInfo(param: string) { 
    PiccLog.info('js参数' + param); 
    let unLineJsBirdgeReq: UnLineJsBirdgeReq = WebImp.parse(param); 
    if (unLineJsBirdgeReq == null) { 
      return; 
    } 
    switch (unLineJsBirdgeReq.method) { 
      case WebviewConstant.METHOD_SYSTEMINFO_SYSTEMINFO: 
        let systemInfo = WebImp.getSystemInfo(); 
        let loadSystemInfoScriptUrl = "javascript:" + unLineJsBirdgeReq.callback + "('" + systemInfo + "')"; 
        break; 
    } 
  } 
}; 
@Entry 
@Component 
struct WebViewPage { 
  webParam: WebParam = router.getParams() as WebParam; 
  url: string = this.webParam.webUrl; 
  webController: webview.WebviewController = new webview.WebviewController(); 
 
  build() { 
    Web({ src: this.url, controller: this.webController }) 
      .javaScriptAccess(true) 
      .javaScriptProxy({ 
        object: this.javascript, 
        name: 'PICAppModel', 
        methodList: ['jssdkCallSystemInfo'], 
        controller: this.webController 
      }) 
  } 
}
        HarmonyOS
      
        赞
        
 收藏 0
 回答 1
 
        待解决
        
相关问题
 HarmonyOS  怎么实现webview暴露方法与H5交互 
1270浏览  • 1回复 待解决
HarmonyOS  H5和原生交互 
1372浏览  • 1回复 待解决
HarmonyOS ArkTS与H5交互方法 
1302浏览  • 1回复 待解决
如何桥接鸿蒙原生与H5之间的交互? 
1880浏览  • 2回复 已解决
HarmonyOS  web原生和H5如何交互? 
1836浏览  • 1回复 待解决
HarmonyOS webview加载H5页面与原生交互jsBrige的实现方式 
1086浏览  • 1回复 待解决
HarmonyOS h5原生交互、页面状态机 
1147浏览  • 1回复 待解决
HarmonyOS webview与原生交互方法重名 
1048浏览  • 1回复 待解决
HarmonyOS 原生与webview中的H5消息通信 
1189浏览  • 1回复 待解决
HarmonyOS H5与原生通信,如何直接将方法挂载到window上 
981浏览  • 1回复 待解决
HarmonyOS 原生与js交互 
1530浏览  • 1回复 待解决
HarmonyOS  原生和H5页面交互 
1109浏览  • 1回复 待解决
HarmonyOS H5调用原生扫码功能 
1482浏览  • 1回复 待解决
HarmonyOS 原生跟h5交互现在有没有合适的框架,只使用webview不行,功能受限,h5不能调用原生的功能 
1367浏览  • 1回复 待解决
HarmonyOS  H5中触发原生的调用定位相关的示例实现 
1669浏览  • 1回复 待解决
H5和ArkTS交互,H5页面首次获取不到原生侧接口返回数据 
1790浏览  • 1回复 待解决
HarmonyOS Web js与原生交互 
1855浏览  • 1回复 待解决
怎样在H5不传对象名的情况下原生收到对方要调用的方法? 
871浏览  • 1回复 待解决
前端代码如何调用原生中的方法并获取到返回值? 
1531浏览  • 1回复 待解决
H5调用相机、相册使用哪个原生接口? 
1619浏览  • 1回复 待解决
HarmonyOS H5页面怎么调用原生自定义键盘 
1730浏览  • 1回复 待解决
HarmonyOS h5和原生的交互,h5页面跳转很多层,是否支持拦截H5返回手势 
1404浏览  • 1回复 待解决
HarmonyOS  在h5前端侧调用应用侧方法 
949浏览  • 1回复 待解决
HarmonyOS 怎么能收到H5调用的window方法? 
1645浏览  • 1回复 待解决
HarmonyOS  web与H5交互 
2039浏览  • 1回复 待解决





















可以对javaScriptProxy和runJavaScript封装,实现JSBridge通信方案。使用Web组件javaScriptProxy将原生侧接口注入到H5的window对象上,通过runJavaScript接口执行JS脚本到H5中,并在回调中获取脚本执行结果。首先通过Web组件的javaScriptProxy属性,将JSBridgeHandle对象注册到H5的window上,作为H5调用原生的通道。当H5开始加载时,在onPageBegin生命周期中调用initJSBridge()方法初始化JSBridge。
在initJSBridge方法中,通过webviewControll.runJavaScript()将JSBridge初始化脚本注入H5执行。当H5调用时,生成window.callID标识回调函数,将callID与调用参数使用JSBridgeHandle.call传到原生侧。通过JSBridgeCallback接收原生侧执行的结果,根据callID找到对应callback执行并且释放内存。
JSBridgeHandle.call()是H5调用原生接口的统一入口,在该方法中根据H5调用的方法名,匹配到对应接口去调用。调用结束后通过this.callback()方法将调用结果返回H5。callback方法中使用webviewControll.runJavaScript()调用H5的JSBridgeCallback回传callID和调用结果。
完整demo参考链接如下:https://gitee.com/harmonyos/codelabs/tree/master/SelectContact