OC&H5交互-WebViewJavascriptBridge

前段时间，因项目要求，需要在APP(android/ios)中嵌套H5页面，这样就牵涉到原生与H5的交互，本文只记录前端在和原生交互时，前端所作的代码工作。

• ios、android系统判断

  common文件夹中新建 tool.js,添加系统判断代码，如下：

  ```js
  //判断是否是iOS设备
  export let isIos = () => {
  	const ua = navigator.userAgent.toLowerCase();
  	if (/(iPhone|iPad|iPod|iOS)/i.test(ua)) return true;
  	else return false;
  };
  //判断是否是Android环境
  export let isAndroid = function () {
  	var ua = navigator.userAgent.toLowerCase();
  	if (/Android/i.test(ua)) return true;
  	else return false;
  }; 
  ```
  

• WebViewJavascriptBridge 初始化

  这段代码是H5与原生交互时，js 必须添加的代码：

  ```js
      //OC与H5交互必需代码
      setupWebViewJavascriptBridge(callback){
  		if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
  		if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
  		window.WVJBCallbacks = [callback];//创建一个 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)            
      }
  ```
  

• OC与H5方法注册及调用

  ```js
  情况一、H5注册方法，供OC调用
  setupWebViewJavascriptBridge(function(bridge){
      // 声明 OC 需要调用的 JS 方法。
      bridge.registerHanlder('testJavaScriptFunction',function(data,responseCallback){
          // data 是 OC 传递过来的数据.
          // responseCallback 是 JS 调用完毕之后传递给 OC 的数据
          alert("JS 被 OC 调用了.");
          responseCallback({data: "js 的数据",from : "JS"});
      })
  });  
  //代码注解：
  1.testJavaScriptFunction 是供OC调用使用的函数方法名；
  2.回调函数中参数data:是OC传递过来的数据；
  3.responseCallback:js调用在被OC调用完毕后，向OC端传递的数据。
  
  情况二、OC注册方法，供H5调用；
  // JS 单纯的调用 OC 的 block
  WebViewJavascriptBridge.callHandler('scanClick');
  
  // JS 调用 OC 的 block，并传递 JS 参数
  WebViewJavascriptBridge.callHandler('scanClick',"JS 参数");
  
  // JS 调用 OC 的 block，传递 JS 参数，并接受 OC 的返回值。
  WebViewJavascriptBridge.callHandler('scanClick',{data : "这是 JS 传递到 OC 的扫描数据"},function(dataFromOC){
          alert("JS 调用了 OC 的扫描方法!");
          document.getElementById("returnValue").value = dataFromOC;
  });
  //代码注解：
  1.scanClick方法：OC注册方法名；
  2.对象参数{data:"这是JS传给OC"}：该参数是JS 需要传递给OC的参数;
  3.回调函数中dataFromOC：OC传递给JS的参数；
  
  ```
  

需要注意的是：在开发过程中，我们需要与APP技术沟通，他们是否是使用了WebViewJavascriptBridge框架，IOS一般会使用这个，但是android 原生webView自带的javascriptInterface，具体android 使用原理可以参看：[android与H5交互](http://www.imooc.com/article/79496)