Vue使用jsBridge与APP交互

jsBridge 介绍

JSBridge是一座用JavaScript搭建起来的桥，一端是web，一端是native。我们搭建这座桥的目的也很简单，让native可以调用web的js代码，让web可以 “调用” 原生的代码。

编写jsBridge文件

/* eslint-disable */
function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
        return callback(WebViewJavascriptBridge);
    } else {
        document.addEventListener('WebViewJavascriptBridgeReady', function () {
            callback(WebViewJavascriptBridge)
        }, false);
        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) {
    try {
        bridge.init(function (message, callback) {
            callback(null);
        })
    } catch (e) { }
});

export default {
    //js调APP方法 （参数分别为:app提供的方法名  传给app的数据  回调）
    callhandler: function (method, params, callback) {
        setupWebViewJavascriptBridge(function (bridge) {
            bridge.callHandler(method, params, callback)
        })
    },

    // APP调js方法 （参数分别为:js提供的方法名  回调）
    registerHandler(method, callback) {
        setupWebViewJavascriptBridge((bridge) => {
            bridge.registerHandler(method, (data, responseCallback) => {
                callback(data, responseCallback)
            })
        })
    }
}

引入

//注册jsBridge 并挂载全局
import Bridge from './http/jsBridge.js'
Vue.prototype.$bridge = Bridge;

调用

 H5调用APP方法
    this.$bridge.callhandler("getTID", "", responseData => {
      let res = JSON.parse(responseData);
      console.log(res,'res');
    });

 APP调用H5方法
    this.$bridge.registerHandler("getTimes", (datas, responseCallback) => {
         console.log(datas);
      });
注意：
1.不管是APP调用js还是js调用APP方法，方法名需要沟通好否则接受不到
2.APP调用js方法时，H5页面初始化的时候就需要调用后续APP调用js的方法。
例如在mounted生命周期内调用getTimes这个方法，初始化不调用后期APP调用后H5接收不到