使用jsBridge实现H5与原生App交互

var u = navigator.userAgent;
window.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
window.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

window.jsbridge = function (callback) {

    if(window.isAndroid){
        if (window.WebViewJavascriptBridge) {
            return callback(WebViewJavascriptBridge);
        } else {
            document.addEventListener(
                'WebViewJavascriptBridgeReady',
                function () {
                    callback(WebViewJavascriptBridge)
                },
                false
            );
        }
    }




    if (window.isIOS) {
        // new ios method
        // if (window.WKWebViewJavascriptBridge) { return callback(WKWebViewJavascriptBridge); }
        // if (window.WKWVJBCallbacks) { return window.WKWVJBCallbacks.push(callback); }
        // window.WKWVJBCallbacks = [callback];
        // window.webkit.messageHandlers.iOS_Native_InjectJavascript.postMessage(null)

        setupWebViewJavascriptBridge(callback);
    }

}

//初始化 这段代码的意思就是执行加载WebViewJavascriptBridge_JS.js中代码的作用
function setupWebViewJavascriptBridge(callback) {

    console.log("setupWebViewJavascriptBridge");
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    console.log("WebViewJavascriptBridge complte");
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    console.log("WVJBCallbacks complte");
    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)
  }


if (!window.isIOS) {
    jsbridge(function (bridge) {
        bridge.init(function (message, responseCallback) {
            var data = {};
            responseCallback(data);
        });
    })
}

/**
 * @param  {option对象}
 * method: 调用的方法
 * data: 传递的参数
 * callback: 回掉方法
 * @return {[type]}
 */
function bridgeCallHandler(option) {
    // alert(option.method)
    jsbridge(function (bridge) {
        bridge.callHandler(
            option.method,
            option.data || {},
            function (responseData) {
                if (option.callback) {
                    option.callback(responseData)
                }
            }
        );
    })
}

//原生调js
let registerHandler = function (method, callback) {
    // alert(option.method);
    jsbridge(function (bridge) {
        bridge.registerHandler(
            method,
            function (data, responseCallback) {
                if (callback) {
                    callback(data);
                }
                responseCallback(data || {});
            }
        );
    })
}

/**
 * 传入的option对象格式
 * {
 *    method:[String],
 *    data:[Object],
 *    callback:[Function]
 * }
 */

// js调用原生

let callHandler = function (method, data, callback) {
    bridgeCallHandler({
        method,
        data,
        callback: function (responseData) {
            if (callback) {
                callback(responseData);
            }
        }
    })
}


export default{
    registerHandler,
    callHandler
}











//在main.js中引入
import jsBridge from "@/utils/jsBridge"
Vue.prototype.$jsBridge=jsBridge




//在页面中使用

mounted(){
    //监听app触发signatureSuccess,进行监听接收数据
    this.$jsBridge.registerHandler("signatureSuccess", (data)=>{
        console.log("监听获得的数据", data)
    })
}





methods:{
   signature(){
        // showCaBoard: js与原生约定的方法， params: js传递给原生的参数，
        this.$jsBridge.callHandler("showCaBoard", params, (data)=>{
           console.log(data)
        })
    }


}