H5与原生互相调用，WebViewJavaScriptBridge使用

为了提高开发效率，开发人员往往会使用原生app里面嵌套前端h5页面的快速开发方式，这就要涉及到h5和原生的相互调用，互相传递数据，接下来就实践项目中的交互方式做一个简单的记录分享，废话不多说，直接上正文：

先贴上判断访问终端的代码，直接拿去使用：

//判断访问终端
function browserVersion(){
    var u = navigator.userAgent;
    return {
        trident: u.indexOf('Trident') > -1, //IE内核
        presto: u.indexOf('Presto') > -1, //opera内核
        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
        mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
        iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
        iPad: u.indexOf('iPad') > -1, //是否iPad
        webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
        weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
        qq: u.match(/\sQQ/i) == " qq" //是否QQ
    };
}

一.与原生安卓的交互：

1.安卓调用js传递数据，js接收数据：最原始的安卓调用方式，js全局写一个方法，供安卓原生调用，接收数据，js处理数据，页面渲染，例如：

function testMessage(data){
    console.log(data);
    //业务逻辑。。。
}
//接受到的data即为原生安卓调用js的方法，传递过来的数据，js拿到数据，处理业务逻辑

2.js调用原生的方法，执行原生的业务逻辑，例如：执行原生的方法，跳转到原生的页面

$(document).on("click",".testButten",function(){
        console.log("跳转原生页面")
        window.Android.goTestPage();
        //安卓直接调用，用来处理简单的逻辑
})

如果业务逻辑比较复杂，建议使用WebViewJavaScriptBridge交互封装，统一管理，方便维护。

二.使用WebViewJavaScriptBridge完成H5和原生的交互（ios）

// IOS
// 互相调用都要加这个方法
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) }, 0)
}
setupWebViewJavascriptBridge(function(bridge) {

    //注册一个方法（方法名是“registerJSmethod”），客户端进行调用（方法名也是“registerJSmethod”），responseCallback是回调函数
    bridge.registerHandler('registerJSmethod', function(data, responseCallback) {
        console.log(data)
        responseCallback(data)
    })

    //客户端已经注册好一个名为“registerOCmethod”的方法，H5直接进行调用（方法名也为“registerOCmethod”）就行，调用的时候可以传客户端需要的参数
    bridge.callHandler('registerOCmethod', {'key':'value'}, function responseCallback(responseData) {
        console.log("registerOCmethod:", responseData)
    })
})

三.使用WebViewJavaScriptBridge完成H5和原生的交互（andriod）安卓提供两种方法，第一使用原始的调用方法，第二使用WebViewJavaScriptBridge方法，各取所需：

1.根据设备类型判断设备是android还是ios，执行相应的操作：

function toPageJS(paramData){
            if(browserVersion().ios){
                //ios执行ios的方法，调用原生
                WebViewJavascriptBridge.callHandler('jumpPage',url, function(response){})
            }else if(browserVersion().android){
                //安卓，执行android方法，调用原生
                window.Android.toPage(url);
            }
        }
    }
}

2.WebViewJavaScriptBridge方法,和ios的方式一样：复制下面代码到你的js中

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

执行相互调用：

connectWebViewJavascriptBridge (function(bridge) {

    //注册一个方法（方法名是“registerJSmethod”），客户端进行调用（方法名也是“registerJSmethod”），responseCallback是回调函数
    bridge.registerHandler('registerJSmethod', function(data, responseCallback) {
        console.log("registerJSmethod:", data)
        responseCallback(data)
    })

    //客户端已经注册好一个名为“registerOCmethod”的方法，H5直接进行调用（方法名也为“registerOCmethod”）就行，调用的时候可以传客户端需要的参数
    bridge.callHandler('registerOCmethod', {'key':'value'}, function responseCallback(responseData) {
        console.log("registerOCmethod:", responseData)
    })
})

完活！有错误欢迎指正。