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
};