跨平臺Js bridge新秀-DSBridge Android篇

DSBridge是目前地球上最好的IOS/Android javascript bridge. 沒有之一！

DSBridge

DSBridge 是H5頁面與Native之間通訊的橋樑，它有以下特色：

1. 跨平臺；同時支持ios和android。
2. 雙向調用；js能夠調用native， native能夠調用js
3. 不只支持異步調用，並且頁支持同步調用（dsbridge是惟一一個支持同步調用的javascript bridge）
4. 支持進度回調，屢次返回（經常使用於文件下載進度、計時器等）
5. Android支持騰訊x5內核
6. 三端易用；不管是前端仍是android或ios，使用都很是簡單，極大的下降集成／學習成本

與WebViewJavascriptBridge的對比請移步 DSBridge VS WebViewJavascriptBridge

安裝

1. 添加 JitPack repository

   allprojects {
     repositories {
      ...
      maven { url 'https://jitpack.io' }
     }
   }
   複製代碼

2. 添加依賴

   dependencies {
   	
   	 compile 'com.github.wendux:DSBridge-Android:2.0-SNAPSHOT'
   
   	// 使用騰訊x5內核的使用該版本
   	// compile 'com.github.wendux:DSBridge-Android:x5-SNAPSHOT'
       
       // 主線版本
   	//compile 'com.github.wendux:DSBridge-Android:master-SNAPSHOT'
   }
   複製代碼

使用

假設Native端實現了兩個api: testSyn、testAsyn。參數以json傳遞， testSyn爲同步api,執行結束後會直接返回結果，而testAsyn爲一個異步api(可能會執行耗時操做)，執行結束後，結果異步返回。

Android

1. Java中實現 API

   public class JsApi{
       //用於同步調用
       @JavascriptInterface
       String testSyn(JSONObject jsonObject) throws JSONException {
           // The return value type can only be String
           return jsonObject.getString("msg") + "［syn call］";
       }
       //用於異步調用
       @JavascriptInterface
       void testAsyn(JSONObject jsonObject, CompletionHandler handler) throws JSONException {
           handler.complete(jsonObject.getString("msg")+" [asyn call]");
       }
   }
   複製代碼

   爲了安全起見，全部的API都必須有 「JavascriptInterface」 標註。

2. 將實現的API安裝到 DWebView

   import wendu.dsbridge.DWebView
   ...
   DWebView dwebView= (DWebView) findViewById(R.id.dwebview);
   dwebView.setJavascriptInterface(new JsApi());
   複製代碼

3. 在h5頁面中調用 Java API

   • 初始化 dsBridge

   //cdn
   //<script src="https://unpkg.com/dsbridge/dist/dsbridge.js"> </script>
   //npm
   //npm install dsbridge
   var dsBridge=require("dsbridge")
   複製代碼

   • 調用 API

     // 同步調用
     var str=dsBridge.call("testSyn", {msg: "testSyn"});
     
     // 異步調用
     dsBridge.call("testAsyn", {msg: "testAsyn"}, function (v) {
       alert(v);
     })
     
     複製代碼

4. Native 調用 h5 中的 javascript API

   • Javascript 註冊供 Native調用的 API

     // 註冊一個加法函數供 Native 調用
      dsBridge.register('addValue',function(l,r){
          return l+r;
      })
     複製代碼

   • 在 Java 中調用 javascript API

     webView.callHandler("addValue",new Object[]{1,"hello"},new OnReturnValue(){
            @Override
            public void onValue(String retValue) {
               Log.d("jsbridge","call succeed,return value is "+retValue);
            }
     });
     複製代碼

     注意：Native調用javascript API時必須在 "PageFinished"以後進行

IOS

IOS中的使用方式請參考 DSBridge-IOS 。

Javascript API

dsBridge

"dsBridge" 是一個全局對象, 在h5頁面中初始化DSBridge後便會可用，它有兩個方法 "call" 和 "register";

bridge.call(method,[args,callback])

功能：調用Native api

method: api函數名

args:參數，類型：json, 可選參數

callback(String returnValue):僅調用異步api時須要.

同步調用

若是你是一名經驗豐富的開發者，想必看到第二行時已然眼睛一亮，想一想node最被詬病的是什麼，目前跨平臺的jsbridge中沒有一個能支持同步，全部須要獲取值的調用都必須傳一個回調，若是調用邏輯比較複雜，必將會出現「callback hell」。然而，DSBridge完全改變了這一點。支持同步是DSBridge的最大亮點之一。

異步調用

對於一些比較耗時的api, DSBridge提供了異步支持，正如上例第三行代碼所示，此時你須要傳一個回調（若是沒有參數，回調可做爲第二個參數），當api完成時回調將會被調用，結果以字符串的形式傳遞。

dsBridge.register(methodName,function)

註冊 javascript API 供Native調用

注意

爲了兼容 Android和IOS ，DSBridge對Native API的簽名有兩個要求：

1. 返回值必須是String， 若是沒有返回值，直接返回null就行

2. API的參數經過 JSONObject傳遞，若是有些API沒有參數，你也須要申明。

   ​

屢次返回

一般狀況下，調用一個方法結束後會返回一個結果，是一一對應的，如今，咱們來思考以下場景：

有一個嵌入到app中顯示文檔下載列表的網頁。要求點擊網頁中相應文件對應的下載按鈕後，開始下載文件，並在該網頁中顯示下載進度。

思考：咱們將文件下載的功能在natvie端實現，當點擊網頁上的某項時，咱們經過js調用native的下載方法，native在下載的過程當中，不斷的向js返回進度, 而後js更新網頁上的進度條，等到下載任務結束時，纔算本次調用結束。而這種調用的特徵就是js的一次調用，對應native的「屢次返回」，考慮到native不少耗時任務均可能會屢次返回（好比返回進度），DSBridge 對「屢次返回」進行了支持，使用DSBridge 就能夠很是方便的應對這種case了。

詳細的示例請參考 DSBridge實例－在網頁中展現Native進度

調用Javascript

DWebView提供了三個api用於調用js

void callHandler(String method, Object[] args) void callHandler(String method, Object[] args, CompletionHandler handler) void evaluateJavascript(String script) 複製代碼

前兩個api中，method 爲函數名，args爲參數數組，能夠接受String 、int 、long、float、double等。

第一個api用於調用沒有返回值的js函數，沒有參數時傳null便可。

第二個api用於須要返回值的場景，須要傳遞一個CompletionHandler接口對象，在complete(String returnValue)方法中處理返回值便可。

第三個api用於執行任意js代碼，內部已作版本兼容處理。

調用時機

DWebview只有在javascript context初始化成功後才能正確執行js代碼，而javascript context初始化完成的時機通常都比整個頁面加載完畢要早，隨然DSBridge能捕獲到javascript context初始化完成的時機，可是一些js api可能聲明在頁面尾部，甚至單獨的js文件中（請務必不要這麼作），若是在javascript context剛初始化完成就調用js api, 此時js api 可能尚未註冊，因此會失敗，綜上所述，若是是客戶端主動調用 js應該在onPageFinished後調用。簡單的示例以下：

webView.setWebViewClient(new WebViewClient(){
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        //指望返回值
        webView.callHandler("test",new Object[]{1,"hello"},new CompletionHandler(){
            @Override
            public void complete(String retValue) {
                Log.d("jsbridge","call succeed,return value is "+retValue);
            }
        });
        //不指望返回值
        webView.callHandler("test",null);
    }
});
複製代碼

DWebview更多

DWebview中下列函數會在主線程中執行，您沒必要在手動切換線程

void loadUrl( String url) void loadUrl(final String url, Map<String, String> additionalHttpHeaders) void evaluateJavascript(String script) 複製代碼

DWebview已經實現 alert、prompt、comfirm對話框，您能夠不作處理，也能夠自定義。值得一提的是js 在調用alert函數正常狀況下只要用戶沒有關閉alert對話框，js代碼是會阻塞的，可是考慮到alert 對話框只有一個肯定按鈕，也就是說不管用戶關閉仍是肯定都不會影響js代碼流程，因此DWebview中在彈出alert對話框時會先給js返回，這樣一來js就能夠繼續執行，而提示框等用戶關閉時在關閉便可。若是你就是想要阻塞的alert，能夠自定義。而DWebview的prompt、comfirm實現徹底符合ecma標準，都是阻塞的。

最後

若是你喜歡，歡迎star！github: https://github.com/wendux/DSBridge-Android