What is JsBridge
近期在做一個項目，使用的是Native+H5的方式實現(xiàn)的搬葬。眾所周知的是在Android中，Webview所實現(xiàn)的java與js的交互存在一些安全問題，并且這樣的使用方式，沒法讓一套H5同時適配Android和iOS兩個平臺抛猫，因此，就需要有一個中間組件來實現(xiàn)js與本地的代碼的交互孩灯，也就是JsBridge闺金。
在Android平臺我們選用了開源項目。整個庫的結(jié)構(gòu)也比較簡單：一個用來注入的js文件峰档，一個自定義的Webview（包括webViewClient）败匹，以及作為載體的BridgeHandler。
JsBridge的使用
在介紹JsBridge的原理之前讥巡，先簡單介紹下JsBridge的使用掀亩，也可以看github上的表述。
JsBridge庫集成
集成的方式有很多種:
- 使用作者推薦方式：
repositories {
maven {url "https://jitpack.io"}
}
dependencies {
compile 'com.github.lzyzsd:jsbridge:1.0.4'
}
- 使用源碼集成
下載源碼尚卫，將源碼拷貝至自己的工程內(nèi)归榕，作為工程的文件尸红。 - 自定義Module
下載源碼吱涉，新建Module刹泄，將源碼導入Module，并將項目依賴自定義的Module
使用JsBridge庫
-
提供操作給Js調(diào)用
webView.registerHandler("submitFromWeb", new BridgeHandler(){ @Override public void handler(String data, CallBackFunction function){ function.onCallBack("submitFrom web exe, response data from java"); } }
Js如果需要調(diào)用Java提供的方法時候怎爵，則需要調(diào)用這個Handler特石，而在注冊時參數(shù)submitFromWeb將作為Js調(diào)用時使用的Key值。調(diào)用方式如下：
WebViewJavascriptBridge.callHandler(
'submitFromWeb',
{'param':str1},
function(responseData){
//這里打印的應該是上面Handler實現(xiàn)方法中的callback的入?yún)ⅲ簊ubmitFrom web exe, response data from java
document.getElementById("show").innerHTML = "response data from java, data = "+responseData
}
)
另外鳖链，庫也提供了一個簡單的沒有回調(diào)的調(diào)用方式：
webView.setDefaultHandler(new DefaultHandler());
Js調(diào)用的方式也可以簡化為：
WebViewJavascriptBridge.send(
data,
function(responseData){
//java中DefaultHandler所實現(xiàn)的方法中callback所定義的入?yún)? }
)
-
提供操作給Java調(diào)用
注冊方法與Java雷同：WebViewJavascriptBridge.registerHandler("functionInJs", function(data, responseCallback) { document.getElementById("show").innerHTML = ("data from Java: = " + data); var responseData = "Javascript Says Right back aka!"; responseCallback(responseData); });
Java調(diào)用Handler時姆蘸，也跟Js一樣：
webView.callHandler("functionInJs", new Gson().toJson(user),
new CallBackFunction(){
@Override
public void onCallBack(String data){
}
}
);
同樣的，在JS中也可以注冊默認的Handler芙委，以方便Java調(diào)用時逞敷，通過send方法發(fā)送數(shù)據(jù)
bridge.init(function(message, responseCallback) {
console.log('JS got a message', message);
var data = {
'Javascript Responds': 'Wee!'
};
console.log('JS responding with', data);
responseCallback(data);
});
java調(diào)用send方法：
webView.send("hello");
JsBridge使用原理
在講JsBridge的實現(xiàn)之前，首先要講下各個文件的作用：
- WebViewJavascriptBridge.js 被注入到各個頁面的js文件灌侣；提供初始化推捐，注冊Handler，調(diào)用Handler等方法侧啼。
- WebViewJavascriptBridge.java bridge接口文件,定義了發(fā)送信息的方法牛柒，由BridgeWebView來實現(xiàn)。
- BridgeWebView.java WebView的子類痊乾，提供了注冊Handler皮壁，調(diào)用Handler等方法。
- BridgeWebViewClient.java WebViewClient的子類哪审，重寫了ShouldOverrideUrlLoading蛾魄，onPageFinish，onPageStart等方法协饲。
- BridgeHandler.java 作為Java與Js交互的載體畏腕。Java&Js通過Handler的名稱來找到響應的Handler來操作。
- DefaultBridgeHandler.java BridgeHandler的子類茉稠，不做任何操作描馅。僅為Java提供默認的接收數(shù)據(jù)的Handler。
- CallBackFunction.java 回調(diào)函數(shù)而线，Handler處理完成后铭污，用來給Js發(fā)送消息。
- Message.java 消息對象膀篮，用來封裝與js交互時的json數(shù)據(jù)嘹狞，callid，responseid等誓竿。
- BridgeUtil.java 工具類磅网，提供從Url中提取數(shù)據(jù)，獲取回調(diào)方法筷屡，注入js等方法涧偷。
JsBridge調(diào)用過程
- Native初始化webview簸喂，注冊Handler；加載頁面完成后燎潮，將WebViewJavascriptBridge.js文件注入頁面喻鳄。查詢消息隊列是否有信息需要被接收。
- H5頁面初始化确封，注冊Handler除呵，查詢消息隊列是否有信息需要別接收。
- 用戶操作爪喘，H5調(diào)用本地功能：Js將消息內(nèi)容放在
sendMessageQueue中颜曾，并設(shè)置iframe的src為yy://__QUEUE_MESSAGE__/ - Webview設(shè)置的WebViewClient攔截到約定url，調(diào)用Webview的刷新消息隊列的方法
flushMessageQueue秉剑，此方法就是加載了一個url：javascript:WebViewJavascriptBridge._fetchQueue();,這也是Js中定義的方法泛啸，另外定義了一個回調(diào)；回調(diào)方法主要做了兩件事：①判斷Native是否為此返回數(shù)據(jù)保有響應回調(diào)操作秃症，若有候址，則執(zhí)行，若沒有种柑，則為判斷callId岗仑，不為空時為這個callId初始化一個回調(diào)。②通過handlername判斷是否為默認的Handler還是自定義的Handler聚请，調(diào)用相應Handler的handler方法荠雕，入?yún)橄?shù)據(jù)內(nèi)容和第一步中定義的回調(diào)∈簧停【這段較為難消化炸卑，需要閱讀代碼來理解】 - Js中
_fetchQueue設(shè)置了iframe的src，內(nèi)容為：yy://return/_fetchQueue/+第二步中放入sendMessageQueue中的消息內(nèi)容煤傍。 - WebViewClient攔截到url為
yy://return/盖文，調(diào)用WebView的handlerReturnData方法；通過url中定義的方法名蚯姆，找到第四個步驟中定義的回調(diào)五续，并調(diào)用×淞担回調(diào)方法走完后疙驾，刪除此回調(diào)方法。 - 如果Js在調(diào)用Handler的時候設(shè)置了回調(diào)方法郭毕，也就是在第四步驟中的含有callId它碎，就會調(diào)用queueMessage的方法，然后往下就是走Native給Js發(fā)送消息的步驟。
Ps: Native給Js發(fā)送消息的步驟跟上述從第三步驟到第七步驟完全相同扳肛，只不過Native和Js對象調(diào)換位置即可偏竟。
JsBridge的核心
JsBridge之所以能實現(xiàn)Native與Js相互調(diào)用的功能，其核心實現(xiàn)其實就是：
- 攔截Url
- load url("javascript:js_method()");
先說第二點敞峭，Native調(diào)用Js，通過加載以javascript:開頭的url即可實現(xiàn)調(diào)用Js的方法蝉仇。這個很好理解旋讹，在web中也是通過這種方式調(diào)用Js的方法的。
然后細說下第一點的實現(xiàn)：
- 向body中添加一個不可見的iframe元素轿衔。通過攔截url的方法來執(zhí)行相應的操作沉迹，但是頁面本身不能跳轉(zhuǎn)，所以改變一個不可見的iframe的src就可以讓webview攔截到url害驹，而用戶是無感知的鞭呕。
- 攔截url。通過
shouldOverrideUrlLoading來攔截約定規(guī)則的Url宛官，再做具體操作葫松。
Ps： 添加iframe是H5自身可實現(xiàn)的，但是如果H5來實現(xiàn)的話底洗，需要每個頁面實現(xiàn)腋么，且耦合較高；因此放在庫里亥揖，通過加載完成注入的方式珊擂，則會降低耦合
先就這么多~~
留個思考的問題：無論是js發(fā)送消息給Native，還是Native發(fā)送消息給Js费变，首先都會發(fā)送一個_fetchQueue摧扇，然后再發(fā)送return;那這兩步是否可以合并成一步呢？
