H5同andriod、ios交互的桥梁webview

首先,webview是什么呢？webview的中文名叫网络视图，其实它就相当于一个浏览器，用来加载html页面的，它起源于andriod手机中内置的一款高性能webkit内核浏览器，在SDK中封装为一个叫做WebView的组件。现在，在实际工作中，一些公司需要H5来做一些App的页面，然后嵌入源生App中，那么怎么嵌入呢？没错就是通过webview来实现的，那么废话少说直接讲代码吧。
      一、首先我们得判断设备的类型，我在项目中用的是navigator.userAgent这个方法，代码如下：
var sysPlatform;
var ua = navigator.userAgent.toLowerCase();//判断浏览器类型
if (/iphone|ipad|ipod/.test(ua)) {//调用设备对象的test方法判断设备类型
    sysPlatform = "IOS";
} else if (/android/.test(ua)) {
    sysPlatform = "ANDROID";
}
      二、接下来就是一大段不需要深入理解的固定代码了，我就直接copy上来供需要的人参考一下：
function connectWebViewJavascriptBridgeIOS (callback){//connectWebViewJavascriptBridge目前流行的于js交互的一个库名
    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);
}


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


var webViewCallHandler={
    callHandler:function(handlerName,data){
        if(sysPlatform == "IOS"){
            base.birdge.callHandler(handlerName,data, function(response) {
                return response;
            });
        }else if(sysPlatform == "ANDROID"){
            window.WebViewJavascriptBridge.callHandler(
                handlerName, data, function(response) {
                    return response;
                });
        }
    }
};
      三、我们应该怎样调用andriod和ios的方法传参呢？当然这个方法名在js里面定义，在andriod和ios里面定义都可以的，举个例子：
function showSysMsg(msg,type){
    webViewCallHandler.callHandler("showMessage",{"msg":msg,"msgType":type});
}
      上面这个方法就是我作为H5调用源生的方法，这个方法名在他们那边都已经定义好的叫showMessage,然后后面的就是参数对象，这样就很容易的实现H5调用源生的方法，给他们传参了；
      四、
$(function(){
    if(sysPlatform == "IOS"){
        connectWebViewJavascriptBridgeIOS(function(bridge) {
            base.birdge = bridge;
            webViewRegisterHandler.initWeb();
        });
    }else if(sysPlatform == "ANDROID"){
        connectWebViewJavascriptBridgeANDROID(function(bridge) {
            base.birdge = bridge;
            webViewRegisterHandler.initWeb();
        });
    }
});
var webViewRegisterHandler={
    initWeb:function(){
        base.birdge.registerHandler('initWeb', function(d) {
            var data = eval('('+d+')');
            token=data.token;
            goodsId = data.goodsId;
            init();
        });
    }
};
上面这段代码就是H5调用源生方法，他们给我们传参，像这边源生就给我传了两个参数一个token，一个goodsId,然后再把这两个参数传给init函数，就可以了；
主体的代码就是这些，当然如果有没明白的可以给我留言，本人尽力为您解答，说几句勉励的话吧：人总是在接触新东西的时候，会不知所措，但没关系，一步步走，一步步摸索，不积跬步，何以至千里呢？对吧，H5的小伙伴们加油，一起努力，一起前进，哈哈哈哈。。。。。