vuejs裏封裝的和IOS,Android通訊模塊

　　項目須要，在vuejs開發的web項目中與APP進行通訊，實現原理和cordova一致。使用WebViewJavascriptBridge。

其實也是經過攔截url scheme，支持ios6往前的系統

iOS與H5交互的方案

縱觀全部iOS與H5交互的方案，有如下幾種：

• 第一種：有不少的app直接使用在webview的代理中經過攔截的方式與native進行交互，一般是經過攔截url scheme判斷是不是咱們須要攔截處理的url及其所對應的要處理的功能是什麼。任意版本都支持。
• 第二種：iOS7以後出了JavaScriptCore.framework用於與JS交互，可是不支持iOS6，對於還須要支持iOS6的app，就不能考慮這個了。
• 第三種：WebViewJavascriptBridge開源庫使用，本質上，它也是經過webview的代理攔截scheme，而後注入相應的JS。
• 第四種：react-native

　

/**
 * 函數描述：js調用webview事件
 *
 * jsBridge.callHandler(method, data, callBack(response));
 * @param method {string} 方法名
 * @param data {Object} 參數
 * @return {Object} 回調
 */

/**
 * 函數描述：webView調用JS事件
 *
 * jsBridge.registerHandler(method, callBack(response));
 * @param method {string} 方法名
 * @return {Object} 回調
 */

var JsBridge = {
    init: function(callback) {
        var u = navigator.userAgent;
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        if (!isiOS) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady',
                    function() {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        } else {
            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)
        }
    },

    first: function() {
        var u = navigator.userAgent;
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        if (!isiOS) {
            var _this = this;
            _this.init(function(bridge) {
                bridge.init(function(message, responseCallback) {
                    responseCallback(data);
                })
            })
        }
    },

    registerHandler: function(name, fun) {
        var _this = this;
        _this.init(function(bridge) {
            bridge.registerHandler(name, fun);
        })
    },

    callHandler: function(name, data, fun) {
        var _this = this;
        _this.init(function(bridge) {
            bridge.callHandler(name, data, fun);
        })
    }
}

JsBridge.first();

export {
    JsBridge
};