前言
最近接觸android中js與java互動的東西很多，當然它們之間的互動方式有幾種，但是我覺得這幾種互動方式都存在一定的不足，這是我決定編寫SimpleJavaJsBridge這個庫的關鍵原因。
我會按以下順序進行本文章：
- 現有js與java通訊方案及不足
- js與java完美通訊方案設計
- SimpleJavaJsBridge
現在進入正題
1. 現有js與java通訊方案及不足
先來說明一點js與java通訊，指的是js既可以給java傳送訊息，同時java也可以給js傳送訊息。那就來屢屢它們之間的通訊方案。
1.1 java給js傳送訊息
官方唯一指定方法是通過webview的loadUrl(String)方法進行的，看下的虛擬碼:
|
1 2 |
//例子：呼叫js的test(param)方法 webView.loadUrl("javascript:test(1)"); |
呼叫方法非常的簡單，”javascript:”+js方法的名字＋方法的引數值拼接成一個字串就可以給js傳送訊息了，猶如是在直接呼叫js的方法。
1.2 js給java傳送訊息
js給java傳送訊息實際上只有2種方案，依次來分析下這2種方案。
1.2.1 官方方法
先看下虛擬碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//該類封裝了提供給js呼叫的方法 public class JSBridge{ //提供給js的方法 public void invokeByJs(String msg){ } } //把JSBridge物件注入WebView中，同時起一個別名 webView.addJavascriptInterface(new JSBridge(),"jsBridge"); //js呼叫java方法 window.jsBridge.invokeByJs('hello java'); |
這種方法其實是把一個物件注入到WebView中，js給java傳送訊息的方式是
|
1 |
window.注入WebView的java物件的所對應name值.javaMethod(param...); |
這其實也猶如在java程式碼中呼叫java的方法，因為java提供給js的方法名，方法引數是啥，js在傳送訊息時，方法名與引數必須保持一致，這也是這些java程式碼不能進行混淆的原因。
但是這種方法存在一個嚴重的漏洞，雖然官方在android4.4的時候給出了相應的解決方案，但是android4.4以下的版本還得解決該漏洞，因此一些巨人們就開始琢磨著解決這個坑，第二種方法由此誕生。
1.2.2 js傳遞約定好的字串給java
這種方案的主要原理是：
- 找到一個js可以給java傳送訊息的入口（這個入口有onJsPrompt,onJsAlert等等)
- js通過入口把訊息按既定好的規則拼接成字串傳遞給java
- java按照既定好的規則對字串進行解析
- 根據解析資料，通過反射來呼叫自己相應方法
這種方法使用起來要比官方方法（第一種方法）麻煩。
1.3 存在的不足
上面介紹了js與java的通訊方法，那我就來分析下我認為存在的不足。
1.3.1 java給js傳送訊息方法和js給java傳送訊息的官方方法存在的不足
1.3.1.1 強依賴
java給js傳送訊息的方法，和js給java傳送訊息的官方方法都存在著強依賴的問題，都要高度依賴對方的方法名字，方法引數。強依賴發生於同一模組內，個人覺得不是問題甚至是高內聚的體現。但是java與js可以說是處於兩個不同的模組或者叫兩個不同世界，只要js提供給java的方法發生變化，java也得改動，同理java提供給js的方法也如此。處於兩個不同模組知道對方的細節越少越好，這樣耦合性就會降低，耦合性降低的好處就不用說了。
1.3.1.2 強依賴導致js需要相容不同的系統
先看段虛擬碼：
|
1 2 3 4 5 6 7 8 |
function location(){ //是ios系統，採用給ios傳送訊息的方法 if(isIOS){ 給ios傳送訊息； }else if(isAndroid){ 給android傳送訊息； } } |
上面的程式碼展示的是js使用native的定位功能的程式碼，因為js在給不同的系統傳送訊息的方式不一樣，就會出現if else if 這樣的相容語句。當前js程式碼只被ios和android使用，假如還會被wp或pc來使用，那if else if豈不是要噁心死。產生該問題的主要原因是：js程式碼在針對不同的系統自己獨有的通訊方式進行通訊。
1.3.1.3 給不存在的介面傳送訊息沒反饋
java在給js的一個不存在介面傳送訊息時，java根本不知道該介面不存在，java只會傻傻的等待。同理js在給java的一個不存在介面傳送訊息時，js是可以通過捕獲異常來知道該介面不存在，但是這不是最好的解決方案。
給不存在介面傳送訊息沒反饋會導致js程式碼充斥著if else if語句，看段虛擬碼：
|
1 2 3 4 5 6 7 8 9 |
//呼叫java的定位方法 function location(){ //1.1版本以上才會呼叫定位功能 if(androidAppVersion > '1.1'){ 傳送訊息給java； }else{ 給使用者提示，暫不支援定位功能； } } |
這是一段呼叫java進行定位的js程式碼，android app在版本1.1的時候才增加了定位的功能，因此對於1.1以下版本是不支援這功能的，因此js程式碼裡面非常有必要根據版本號進行判斷。這只是由於版本問題導致if else if的一個小小的縮影。還有一些其他情況導致if else if的產生比如一份js程式碼被多個業務使用。
1.3.2 js給java傳送訊息的第二種方法存在不足
上文提到的js給java傳送訊息的第二種方法，它解決了存在的漏洞，但是這種方法，使用起來要比第一種方法複雜，java會多做以下工作：
- 解析js傳遞給java的字串，把呼叫的介面，引數解析出來
- 把呼叫的介面，引數對映到相應的方法
不論js傳遞給java的字串是json格式還是其他格式，解析這樣的字串肯定是一件無趣的重複的體力勞動。
若想解決以上的問題，我們有必要設計一套完美的通訊方案。
2. js與java完美通訊方案設計
2.1 一套完美的js與java的通訊方案應滿足以下幾點:
- js與java知道對方的細節越少越好，越少它們的耦合性越低。那到底多少為好呢？我個人覺得互相暴漏給對方一個介面足矣。這樣js與native的通訊就類似於通過一個管道通訊或者說類似於socket通訊(降低強依賴)
- js與java之間通訊，需要定義好一套通訊協議或者叫通訊規則，在管道之間傳遞通訊協議。這樣它們之間的通訊是針對一套定義好的協議進行的，而不是針對每個系統自己獨有的通訊方式（好處js就不會出現相容不同的系統的if else if程式碼）
- 主動傳送訊息給對方時，對方必須對該訊息予以反饋，即使主動傳送訊息者對反饋訊息不感興趣，（反饋資訊可以去掉由於版本相容等帶來的if else if相容程式碼）
2.2 那我們就開始設計js與java之間的通訊方案
2.2.1 互相暴漏給對方一個介面
- js為java提供一個唯一的介面，這個介面可以是在java端寫死的，也可以是js傳遞過來的（這樣更靈活）。所有傳送給js的訊息（請求訊息和反饋訊息）都通過該介面
- java為js提供的一個唯一的介面，因為官方的方法存在漏洞，我們採用在onJsPrompt方法中接收js傳送的所有訊息，當然大家還可以選擇其他方法來接收js的訊息，這不是重點。
2.2.2 js與java之間通訊協議的制定
js與java之間的通訊特別類似於網路請求，主動發起訊息的行為可以稱為request（請求訊息），對該訊息的反饋可以稱為response（響應訊息）。
request
一個request封裝了請求對方的哪個介面，以及該介面所需要的引數。
response
一個response封裝了狀態資訊（可以知道處理的結果是成功還是失敗）和處理結果。
如何接收對方傳送的response訊息?
大家都應該都會想到，在傳送訊息的時候傳遞一個回撥介面就行了，但是因為js與java之間是跨語言的，尤其是java是不可能把回撥介面傳遞給js，js雖然可以傳遞過來但是會有問題，所以這時候有一種解決辦法：
- 在給對方傳送request訊息時，為回撥介面生成一個唯一的id值，把id值存入request中發出。
- 同時把回撥介面快取起來。
- 在接收到response時，從response解析這個id值，根據id值查詢到回撥介面。
因此request和response中還得包含回撥id這個值。
通訊協議的格式
request資料格式：
|
1 2 3 4 5 6 7 8 9 10 |
{ //介面名稱 "interfaceName":"test", //回撥id值 "callbackId":"c_111111", //傳遞的引數 "params":{ .... } } |
response資料格式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ //回撥id，同時這也是response的標誌 "responseId":"c_111111", //response資料 "data":{ //狀態資料 "status":"1", "msg":"ok", //response的處理結果資料 "values":{ ...... } } } |
到此通訊協議就已經定義好了。
2.2.3 讓繁瑣的無趣的重複的苦力活兒不再有
大家可以看到通訊協議request和response都是json格式，從json中解析資料或者把資料封裝為json都是重複的苦力活兒。
這也是我一直想著力解決的痛點，解決之道是從retrofit中獲得啟發的，應用註解來解決以上問題。
關於js與java完美通訊的設計思想到此為止，這也是SimpleJavaJsBridge這個庫的核心思想，那我們就來看下SimpleJavaJsBridge。
3. SimpleJavaJsBridge
SimpleJavaJsBridge我為什麼要起一個這樣的名字，首先它解決了上文中提到的讓繁瑣的無趣的重複的苦力活兒不再有的問題，對於不管是從json中解析資料還是把資料封裝成json，使用者都不需要關心，讓使用者很省心；並且它使用起來也非常的簡單，在稍後的例子中大家會體會到，所以用了simple這個詞兒。通過它java可以給js傳送訊息，並且接收js的響應訊息；同時js也可以給java傳送訊息，同樣接收java的響應訊息。因此它是java與js之間通訊的橋樑，因此它的名字叫為SimpleJavaJsBridge。
3.1 如何解決繁瑣的無趣的重複的苦力活兒？
解決這個問題思路來自於鼎鼎有名的Retrofit，Retrofit通過註解的方式解決了構建request和解析response的問題，因此註解也可以解決我現在遇到的問題。那我們就來認識下這些註解。
InvokeJSInterface
用來標註java給js傳送訊息的方法，它的value值代表js提供的功能的介面名字
JavaCallback4JS
用來標註java提供給js的回撥方法的
JavaInterface4JS
用來標註java提供給js的介面，它的value值代表功能的介面名字
Param
用來標註引數或者類的例項屬性，它的value值代表引數被存入json中的key值，它的needConvert代表當前的引數是否需要進行轉換，因為通過JsonObject類往json中存放的資料是有要求的，JsonObject中只能存放基本資料和JsonObject和JsonArray這些資料型別，對於其他的型別就得進行轉換了。因此只要是不能直接通過JsonObject存放的型別該值必須為true
ParamCallback
用來標註回撥型別的引數，比如傳送request給js的方法中，需要有一個回撥引數，那這個引數必須用它來標註
ParamResponseStatus
用來標註響應狀態型別的引數，比如：statusCode，StatusMsg這些引數，它的value值是json中的key值。
3.2 SimpleJavaJsBridge使用
3.2.1 構建一個SimpleJavaJsBridge例項
|
1 2 3 4 5 |
SimpleJavaJsBridge instance = new SimpleJavaJsBridge.Builder() .addJavaInterface4JS(javaInterfaces4JS) .setWebView(webView) .setJSMethodName4Java("_JSBridge._handleMessageFromNative") .setProtocol("niu","receive_msg").create(); |
通過SimpleJavaJsBridge.Builder來構建一個SimpleJavaJsBridge物件，
- addJavaInterface4JS用來新增java提供給js的介面
- setWebView 設定WebView這是必須進行設定的
- setJSMethodName4Java 設定js為java唯一暴漏的方法名字
- setProtocol設定協議欄位，這也是必須的，這個欄位主要是為了ios而設定的
當然還可以呼叫其他的一些方法對SimpleJavaJsBridge進行設定
3.2.2 java給js提供介面
java給js提供一個無參的介面
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/** * 給js傳送響應訊息的介面*/ public interface IResponseStatusCallback { void callbackResponse(@ParamResponseStatus("status") int status, @ParamResponseStatus("msg") String msg); } //java提供給js的"tes4"介面，@ParamCallback標註的是給js傳送訊息的回撥 @JavaInterface4JS("test4") public void test3(@ParamCallback IResponseStatusCallback jsCallback) { 進行相應處理...; //給js傳送響應訊息 jsCallback.callbackResponse(1, "ok"); } //下面是js程式碼,js給java的"test4"介面傳送訊息 _JSNativeBridge._doSendRequest("test4", {}, function(responseData){ }); |
java給js提供帶有引數的介面
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
/** * 給js傳送響應訊息的介面*/ public interface IResponseStatusCallback { void callbackResponse(@ParamResponseStatus("status") int status, @ParamResponseStatus("msg") String msg); } /** * 必須有無參建構函式 ，只有被@Param註解的屬性才會存入json中*/ public static class Person { @Param("name") String name; @Param("age") public int age; public Person() { } public Person(String name, int age) { this.name = name; this.age = age; } } //java提供給js的“test1”介面，Person是無法直接往JsonObject中存放的， //所以needConvert必須為true，會自動把Person中用註解標註的屬性放入json中 @JavaInterface4JS("test1") public void test(@Param(needConvert = true) Person personInfo, @ParamCallback IResponseStatusCallback jsCallback) { 對收到的資料進行處理....; jsCallback.callback(1, "ok"); } //下面是js程式碼,js給java的"test1"介面傳送訊息 _JSNativeBridge._doSendRequest("test1", {"name":"niu","age":10}, function(responseData){ }); |
3.2.3 給js傳送訊息
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
//給js傳送訊息的方法要定義在一個interface中，因為這個過程是模仿Retrofit的 public interface IInvokeJS { //複雜型別，只有用@Param標註的屬性才會放入json中 public static class City{ @Param("cityName") public String cityName; @Param("cityProvince") public String cityProvince; public int cityId; } //給js的“exam”介面傳送資料，引數是需要傳遞的資料 @InvokeJSInterface("exam") void exam(@Param("test") String testContent, @Param("id") int id,@ParamCallback IJavaCallback2JS iJavaCallback2JS); //給js的“exam1”介面傳送資料，引數同樣也是需要傳遞的資料 @InvokeJSInterface("exam1") void exam1(@Param(needConvert = true) City city, @ParamCallback IJavaCallback2JS iJavaCallback2JS); ｝ //使用，使用方式和Retrofit一樣，先使用SimpleJavaJsBridge的 //createInvokJSCommand例項方法生成一個IInvokeJS例項 IInvokeJS invokeJs = simpleJavaJsBridge.createInvokJSCommand(IInvokeJS.class); //給js的"exam"傳送訊息，傳送的是基本資料型別 invokeJs.exam("hello js",20, new IJavaCallback2JS{ //接收js傳送的響應資料的回撥方法，該方法的名字可以任意，但必須用@JavaCallback4JS標註 @JavaCallback4JS public void callback(@ParamResponseStatus("msg")String statusMsg,@Param("msg") String msg) { } }); City city = new City(); city.cityName = "長治"; city.cityId = 11; city.cityProvince = "山西"; //給js的“exam1”傳送訊息，city是一個複雜物件 invokeJs.exam1(city, new IJavaCallback2JS{ @JavaCallback4JS public void callback(@ParamResponseStatus("msg")String statusMsg,@Param("msg") String msg) { } }); |
總結
SimpleJavaJsBridge庫在js與java的通訊中帶來以下優點：
- js程式碼中不再有由於系統或者app版本甚至業務原因產生的if else if的相容語句
- java不需要再關心資料封裝為json或者從json中解析資料的繁瑣工作
- 讓js與java之間的通訊更簡單
若你動心了可以下載來試用下:SimpleJavaJsBridge
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
