WebViewJavascriptBridge（H5與原生交互）

https://github.com/wangjiaojiao77/WebViewJavascriptBridge（IOS）和

https://github.com/wangjiaojiao77/JsBridge（安卓）。

分批說，先說IOS吧。

1、IOS

先把下面這段代碼（這段代碼可是會更新的哦，注意及時更新就ok啦）copy到你的JS中。

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 = 'https://__bridge_loaded__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

然后直接寫交互就ok啦（交互無非也就2種：注冊一個方法 和 調用已經注冊好的方法）。

setupWebViewJavascriptBridge(function(bridge) {

    //注冊一個方法（方法名是“JS Echo”），客戶端進行調用（方法名也是“JS Echo”），responseCallback是回調函數
    bridge.registerHandler('JS Echo', function(data, responseCallback) {
        console.log("JS Echo called with:", data)
        responseCallback(data)
    })

    //客戶端已經注冊好一個名為“ObjC Echo”的方法，H5直接進行調用（方法名也為“ObjC Echo”）就行，調用的時候可以傳客戶端需要的參數
    bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
        console.log("JS received response:", responseData)
    })
})

2、Android

so，安卓也很easy啦。

先把下面這段代碼（這段代碼可是會更新的哦，注意及時更新就ok啦）copy到你的JS中。

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

然后直接寫交互就ok啦（其實和IOS一樣）。

connectWebViewJavascriptBridge (function(bridge) {

    //注冊一個方法（方法名是“JS Echo”），客戶端進行調用（方法名也是“JS Echo”），responseCallback是回調函數
    bridge.registerHandler('JS Echo', function(data, responseCallback) {
        console.log("JS Echo called with:", data)
        responseCallback(data)
    })

    //客戶端已經注冊好一個名為“ObjC Echo”的方法，H5直接進行調用（方法名也為“ObjC Echo”）就行，調用的時候可以傳客戶端需要的參數
    bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
        console.log("JS received response:", responseData)
    })
})

基本的就是這么寫就完啦，詳細的可以參照我上面發的網址~~~

作者：嬌嬌jojo
鏈接：http://www.imooc.com/article/23258
來源：慕課網
本文原創發布於慕課網 ，轉載請注明出處，謝謝合作