关于混合APP开发使用WebViewJavascriptBridge进行桥连接总结

1.创建bridge.js文件，代码如下:

//用于和APP的原生方法交互（在H5的项目中主要调用isapp的方法判定是否在APP中来判断是否显示导航栏）let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);//这是必须要写的，用来创建一些设置function setupWebViewJavascriptBridge(callback) {  //Android使用  if (isAndroid) {    if (window.WebViewJavascriptBridge) {      callback(WebViewJavascriptBridge)    } else {      document.addEventListener(        'WebViewJavascriptBridgeReady',        function () {          callback(WebViewJavascriptBridge)        },        false      );    }    console.log('tag', '安卓')    sessionStorage.phoneType = 'android'  }  //iOS使用  if (isiOS) {    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 = 'wvjbscheme://__BRIDGE_LOADED__';    document.documentElement.appendChild(WVJBIframe);    setTimeout(function () {      document.documentElement.removeChild(WVJBIframe)    }, 0);    console.log('tag', 'ios');    sessionStorage.phoneType = 'ios'  }}//注册回调函数，第一次连接时调用 初始化函数(android需要初始化,ios不用)setupWebViewJavascriptBridge(function (bridge) {  if (isAndroid) {    //初始化    bridge.init(function (message, responseCallback) {      var data = {        'Javascript Responds': 'Wee!'      };      responseCallback(data);    })  }})export default {  // js调APP方法 （参数分别为:app提供的方法名  传给app的数据  回调）  callHandler(name, data, callback) {    setupWebViewJavascriptBridge(function (bridge) {      bridge.callHandler(name, data, callback)    })  },  // APP调js方法 （参数分别为:js提供的方法名  回调）  registerHandler(name, callback) {    setupWebViewJavascriptBridge(function (bridge) {      bridge.registerHandler(name, function (data, responseCallback) {        callback(data, responseCallback)      })    })  }}

2.在main.js中引入bridge.js文件，使其成为vue实例对象的属性方法

// 引入桥进行app通信import Bridge from './utils/bridge';//相关路径根据项目结构变更Vue.prototype.$bridge = Bridge;

3.在需要通信的地方使用app及web端定义的方法

例：

 this.$bridge.callHandler('定义的方法名称',需要传递的数据,(resp) => {//resp为app端返回的数据//此处可根据业务需要进行相关操作});