H5和native利用JSBridge交互，其中涉及到了一些和ios交互的callHandler框架，WebViewJavascriptBridge相关的原理还待补充…

一.基本用法使用

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对象，将异步操作以同步操作的流程表达出来

var promise = new Promise(function(resolve, reject) {
 if (/* 异步操作成功 */){
 resolve(value);
 } else {
 reject(error);
 }
});

promise.then(function(value) {
 // success  你的下一步操作
}, function(value) {
 // failure
});

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对象

最后， 希望大家早日实现：成为编程高手的伟大梦想！
欢迎交流~

微信公众号