小悟：H5和native利用JsBridge交互

淩亂°似流年 2022-06-08 05:58 414阅读 0赞

## 一.基本用法使用 ##

### bridge文件 ###

bridge文件是原生调用native的基础，大致需要这么几步完成:  
1.建立AppClient对象

function AppClient(appObj, isAndroid) { 
        this.appObj = appObj;
        this.isAndroid = isAndroid;
    };

2.建立js文件调用native的方法

AppClient.prototype.closePage = function() { 
      if (this.isAndroid) {
        this.appObj.closePageAction();
      } else {
        this.appObj.callHandler("closePageAction");
      }
    }

注：closePage()就是js文件调用native关闭页面的方法，”closePageAction”是native端暴露给js端关闭  
页面的操作。

### js调用文件 ###

1.init AppClient对象

if(window.android) {
        appClient = new AppClient(window.android, true);
        // 此处可以调用一些init的方法
      } else {
        function setupWebViewJavascriptBridge(callback) {
          if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
          if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
          window.WVJBCallbacks = [callback];
          var WVJBIframe = document.createElement('iframe');
          WVJBIframe.style.display = 'none';
          WVJBIframe.src = 'https://__bridge_loaded__';
          document.documentElement.appendChild(WVJBIframe);
          setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
        }
    
        setupWebViewJavascriptBridge(function(bridge) {
          appClient = new AppClient(bridge, false);
          // 此处可以调用一些init的方法
        });
      }

2.调用，依旧closePage()为例：

appClient.closePage();

## 二.重点 ##

### 数据 ###

1.native存在多线程，所以在js端h5页面在获取接口数据时，需要设置ajax异步(以jQuery为例：async：true)  
2.js实现异步的几种途径：  
(1) 在异步获取数据成功之后，再去继续下一步操作，以jQuery为例：  
在success回调函数里面，执行接下来的操作

$.ajax({
        headers: {
          Accept: "application/json; charset=utf-8",
          basicParams: JSON.stringify(appData),
        },
        url:staticUrl + url,
        type:'POST',
        dataType:"json",
        data: params,
        async:true,
        cache:false,
        contentType:'application/json',
        processData:false,
        success:function(data){ 
            // 你的下一步操作
        },
        error:function(data){ 
          console.log("---出现错误---"+ JSON.stringify(data));
        }
      });

(2)ES6原生提供的Promise对象，将异步操作以同步操作的流程表达出来

### js端调用native需要native回传数据 ###

1.定义native回调js端的函数  
(1)invokeJsPassCompanyCodeAndName()即native调用js的函数，必须放在window全局对象下,  
否则native可能会调不到；  
(2)ios端利用callHandler框架回传的数据只能是json对象的形式

window.invokeJsPassCompanyCodeAndName = function(_params) { 
      companyCode = _params.companyCode;
      companyName = _params.companyName;
      var jsonStr = "";
      getSign(jsonStr);
    }

2.js端调用native

appClient.getSignedParams("jsDataAction", jsDataAction, ajaxRequestStr);

注：三个参数（callbackName, callback, params）回调函数名称，回调函数，给native传的参数

3.bridge文件

AppClient.prototype.getSignedParams = function (callbackName, callback, jsonStr) { 
      var dataParams = "";
      if(isJson(jsonStr)){
        dataParams = JSON.parse(jsonStr);
      }
      var iOSData = {
        from: 'H5',
        params: dataParams
      };
    
      if (this.isAndroid) {
        this.appObj.getSignedParamsAction('H5', jsonStr);
      } else {
        this.appObj.callHandler("getSignedParamsAction", iOSData, callback);
      }
    };

注：利用callHandler给native传参数时，iOSData必须是一个json对象