vue项目通过WebViewJavascriptBridge实现Hybrid APP

一、前言

为了开发Hybrid App，在vue项目中通过对WebViewJavaScriptBridge第三方库的封装，创建一个桥梁，实现H5和android、ios的通信。
也可以去github查看详细的WebViewJavascriptBridge介绍

二、创建文件

创建 src/utils/jsBridge.js 文件，用于封装 WebViewJavascriptBridge

const App = {}
// 计数
let failNum = 0; 

// 获取型号
App.userAgent = navigator.userAgent

// 是否在android APP中运行
App.isAndroidApp = /application_ccicAndroid/i.test(App.userAgent);

// 是否在iPhone APP中运行
App.isiPhoneApp = /application_ccicIos/i.test(App.userAgent);

// 这里主要是注册 OC 将要调用的 JS 方法。
App.setupWebViewJavascriptBridge = function(callback) {
    // 执行监听 && 检测 JSBridge需要一个契机去告诉JS，我准备好了，你可以来调用我的方法了
    if (window.WebViewJavascriptBridge) {
        return callback(WebViewJavascriptBridge);
    } else {
        document.addEventListener('WebViewJavascriptBridgeReady',function() { callback(WebViewJavascriptBridge);},false);
    }
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback]; // 创建一个 WVJBCallbacks 全局属性数组，并将 callback 插入到数组中。
    var WVJBIframe = document.createElement('iframe'); // 创建一个 iframe 元素
    WVJBIframe.style.display = 'none'; // 不显示
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'; // 设置 iframe 的 src 属性
    document.documentElement.appendChild(WVJBIframe); // 把 iframe 添加到当前文导航上。
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
};

// 与原生交互方法
App.callNative = function(data) {
    if (App.isiPhoneApp) {
        App.setupWebViewJavascriptBridge(function(bridge) {
        /* 
        * 封装 JS 调用了 OC 的方法
        * data.fun  是传递给 OC 的方法名
        * data.data 是传递给 OC 的数据
        * function  是 JS 调用完毕之后OC的回调
        * responseData 是 OC 传递过来的数据.
        */
       // jsbridge.callHandler是JS调Native方法的核心
        bridge.callHandler(data.fun, data.data, function responseCallback(responseData) {
            if (typeof data.callback === 'function') { 
                data.callback(responseData);
            }
        });
    });
  } else if (App.isAndroidApp) {
    /* 
    *andorid从老系统返回时偶尔报错callHandler不是一个function，
    *应该是还未注入到webview，使用setTimeout反复调用
    */
    if ((!window.WebViewJavascriptBridge) || (!window.WebViewJavascriptBridge.callHandler)) {
      failNum++;
      if (failNum > 50) {return;} // 设置失败超过50次后停止
      setTimeout(() => {App.callNative(data);}, 300) 
      return;
    }
    /*
    * 封装 JS 调用了安卓方法
    */
    window.WebViewJavascriptBridge.callHandler(data.fun, data.data, function(res) {
      let responseDataJson = {};
      if (res) {responseDataJson = JSON.parse(res);}
      if (typeof data.callback === 'function') {data.callback(responseDataJson);}
    });
  }
};

export default App

三、在jsBridge.js中封装设置调取原生的方法

这里的fun方法名是需要跟原生小伙伴商量确定的，这里封装的app.方法名习惯性的和调取原生的方法名一致，方便管理。

app.fun方法名 = function(req){
  app.callNative({
    fun: 'fun方法名',
    data: {
      参数1: req.aaa,
    },
    callback: req.fun
  });
}

四、项目引用

在main.js中引入封装的jsBridge.js

import bridge from '/utils/jsBridge';
Vue.prototype.$bridge = bridge;

五、js调原生使用

let data = {
  aaa:'',
  bbb:''
}
this.$bridge.fun方法名( data )

六、OC主动调用 JS 的方法

//声明 OC 需要主动调用 JS 的方法
app.setupWebViewJavascriptBridge(function(bridge) {
/*
* testFun： 是注入到桥梁中 JS 函数的别名。以供 OC 端调用。
* data：    OC 端传递过来的数据。
* responseCallback：JS 调用在被 OC 调用完毕之后，向 OC 端传递的数据的一个回调。
*/
    bridge.registerHandler('testFun ', function(data,responseCallback){
        testFun (data)  // 此处用的方法名和桥梁中注册的方法名一致，个人习惯，也方便管理
    });
}
// 官方给出下面两种调用方式，可以根据自己项目情况来选择合适的方法：
bridge.registerHandler("showAlert", function(data) { alert(data) })
bridge.registerHandler("getCurrentPageUrl", function(data, responseCallback) {
    responseCallback(document.location.toString())
})