一、背景

最近接觸公司專案，需要和原生app做互動，由此業務需求，開始了學習探索之路。

二、解決方案之WebViewJavascriptBridge 

想要和app互動，必須在app上先把bridge進行例項化，這是先決條件。

oc解決方案

步驟

1、引入檔案

#import "WebViewJavascriptBridge.h"

2、例項化WebViewJavascriptBridge 

self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];

3、在oc中註冊一個函式，並呼叫一個js處理函式 

[self.bridge registerHandler:@"ObjC Echo" handler:^(id data, WVJBResponseCallback responseCallback) {
    NSLog(@"ObjC Echo called with: %@", data);
    responseCallback(data);
}];
[self.bridge callHandler:@"JS Echo" data:nil responseCallback:^(id responseData) {
    NSLog(@"ObjC received response: %@", responseData);
}];
 

4、把這段js程式碼放入前端js或者頁面中 

 1 function setupWebViewJavascriptBridge(callback) {
 2     if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
 3     if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
 4     window.WVJBCallbacks = [callback];
 5 // 建立iframe 物件， 在網頁中，iframe的用法非常多，主要應用於偽ajax、巢狀頁面、頁面重用。
 6     var WVJBIframe = document.createElement('iframe');
 7     WVJBIframe.style.display = 'none';
 8     WVJBIframe.src = 'https://__bridge_loaded__';
 9     document.documentElement.appendChild(WVJBIframe);
10 //保證前面的程式碼執行完再刪除這個iframe節點，
11 //setTimeout (fn,0)
12 //同步程式碼轉非同步程式碼，這是為了手動調配優先順序不高的程式碼靠後執行。保證當前處於事件佇列中的任務全部執行完後該任務(函式)立刻得到執行。
13     setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
14 }
 

5、在前端呼叫

setupWebViewJavascriptBridge(function(bridge) {
    
    /* Initialize your app here */

    bridge.registerHandler('JS Echo', function(data, responseCallback) {
        console.log("JS Echo called with:", data)
        responseCallback(data)
    })
    bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
        console.log("JS received response:", responseData)
    })
})
 

API

oc呼叫js

// OC端 向 JS端 傳資料的回撥函式， 註冊 registerHandler（識別符號， 資料回撥閉包）， 當OC端發起資料傳送，會呼叫 function(資料, OC端給的回撥函式) --------->handlerName要和OC端保持一致

js呼叫oc

bridge.callHandler("handlerName", data)

總結

互動前需要先對OC環境和JS環境進行初始化，JS環境的初始化通過Web頁面載入時傳送特定的URL來完成。

WebViewJavascriptBridge在OC端和JS端各自維護一個bridge物件來儲存開放給另一端的方法，以及自身呼叫另一端後的回撥方法。前者通過handlerName來對映，後者通過callBackId標識唯一性。方法呼叫時必定攜帶handlerName，若需要回調，還需攜帶callBackId。

WebViewJavascriptBridge中OC呼叫JS採用的是WebView提供的JS執行方法；而JS呼叫OC採用的是URL攔截的方式，OC端通過識別特定的URL來區分是否需要攔截，並做相應的邏輯處理。

android解決方案

安卓版外掛傳送門https://github.com/gzsll/WebViewJavascriptBridge，原理基本一致，沒有深入研究。

思考

WebViewJavascriptBridge還需要做IOS和Android的相容，那麼，還有沒有更好的方案呢？功夫不負有心人，我找到了DSBridge

三、解決方案之DSBridge

dsbridge最大的特點就是支援同步！中文文件傳送門：https://github.com/wendux/DSBridge-Android/blob/master/readme-chs.md

文章寫的比較淺，如有紕漏，歡迎指正，如果有更好方案，歡迎留言。