H5和native交互之jsbridge(兼容iOS、Android)

在混合开发中，很多情况下我们需要和native进行交互。那么我们怎么和native进行交互呢。。我自己也是研究了很久，最终搞好了一套稳定的，记下当笔记，遇到相同问题的筒子门可以参考一下

1.url传参，在一些简单的页面开发中，可以通过url?key1=value1&key2=value2 进行一些简单的数据交互，但是这种交互是单项的。
而且native端筒子很烦躁处理每一条跳转。

2.hybrid ，hybrid则是利用跳转协议。native和h5端，约定一个共同的协议进行虚拟跳转，每次跳转时检测是否为约定协议，不是则放行，是的话则拦截处理。

3.jsbridge，jsbridge原理是通过 :H5触发url scheme，Native捕获url scheme，分析并执行对应的方法。
源码地址https://github.com/marcuswestin/WebViewJavascriptBridge

简单说只需两步，第一建立桥接，第二注册方法。

function setupWebViewJavascriptBridge(callback) {
    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)
    }, 100)
}
function connectWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge)
    } else {
        document.addEventListener(
        'WebViewJavascriptBridgeReady'
        , function () {
            callback(WebViewJavascriptBridge)
        }, false);
    }
}

兼容安卓ios

if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //ios
    setupWebViewJavascriptBridge(function (bridge) {
        bridge.callHandler(funcName, data,callback );
    });
} else if (navigator.userAgent.match(/android/i)) {
    connectWebViewJavascriptBridge(function(bridge) {
        if(window.WebViewJavascriptBridge){
            window.WebViewJavascriptBridge.callHandler(
               funcName
               , data,
               callback
            );
        }else{
            bridge.callHandler(funcName, data, callback);
        }
   });
} else {

}

Android 初次加载是需要初始化

bridge.init(function(message, responseCallback) {responseCallback(data)});

h5调用native
iOS在setupWebViewJavascriptBridge里注册
android在connectWebViewJavascriptBridge里注册

bridge.callHandler(funcName, data, callback);

native调用js

bridge.registerHandler(funcName, function(responseData, responseCallback) {
});