摘要：第一個(gè)用于調(diào)用沒(méi)有返回值的函數(shù)，沒(méi)有參數(shù)時(shí)傳即可。第二個(gè)用于需要返回值的場(chǎng)景，需要傳遞一個(gè)接口對(duì)象，在方法中處理返回值即可。

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

DSBridge 是H5頁(yè)面與Native之間通信的橋梁，它有如下特點(diǎn)：

跨平臺(tái)；同時(shí)支持ios和android。

雙向調(diào)用；js可以調(diào)用native， native可以調(diào)用js

不僅支持異步調(diào)用，而且頁(yè)支持同步調(diào)用（dsbridge是唯一一個(gè)支持同步調(diào)用的javascript bridge）

支持進(jìn)度回調(diào)，多次返回（常用于文件下載進(jìn)度、計(jì)時(shí)器等）

Android支持騰訊x5內(nèi)核

三端易用；無(wú)論是前端還是android或ios，使用都非常簡(jiǎn)單，極大的降低集成／學(xué)習(xí)成本

與WebViewJavascriptBridge的對(duì)比請(qǐng)移步 DSBridge VS WebViewJavascriptBridge

添加 JitPack repository

allprojects {
  repositories {
   ...
   maven { url "https://jitpack.io" }
  }
}

添加依賴

dependencies {
    
     compile "com.github.wendux:DSBridge-Android:2.0-SNAPSHOT"

    //  使用騰訊x5內(nèi)核的使用該版本
    // compile "com.github.wendux:DSBridge-Android:x5-SNAPSHOT"
    
    // 主線版本
    //compile "com.github.wendux:DSBridge-Android:master-SNAPSHOT"
}

假設(shè)Native端實(shí)現(xiàn)了兩個(gè)api: testSyn、testAsyn。參數(shù)以json傳遞， testSyn為同步api,執(zhí)行結(jié)束后會(huì)直接返回結(jié)果，而testAsyn為一個(gè)異步api(可能會(huì)執(zhí)行耗時(shí)操作)，執(zhí)行結(jié)束后，結(jié)果異步返回。

Java中實(shí)現(xiàn) API

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

為了安全起見(jiàn)，所有的API都必須有 “JavascriptInterface” 標(biāo)注。

將實(shí)現(xiàn)的API安裝到 DWebView

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

在h5頁(yè)面中調(diào)用 Java API

初始化 dsBridge

//cdn
//
//npm
//npm install dsbridge
var dsBridge=require("dsbridge")

調(diào)用 API

// 同步調(diào)用
var str=dsBridge.call("testSyn", {msg: "testSyn"});

// 異步調(diào)用
dsBridge.call("testAsyn", {msg: "testAsyn"}, function (v) {
  alert(v);
})

Native 調(diào)用 h5 中的 javascript API

Javascript 注冊(cè)供 Native調(diào)用的 API

// 注冊(cè)一個(gè)加法函數(shù)供 Native 調(diào)用
 dsBridge.register("addValue",function(l,r){
     return l+r;
 })

在 Java 中調(diào)用 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調(diào)用javascript API時(shí)必須在 "PageFinished"之后進(jìn)行

IOS中的使用方式請(qǐng)參考 DSBridge-IOS 。

"dsBridge" 是一個(gè)全局對(duì)象, 在h5頁(yè)面中初始化DSBridge后便會(huì)可用，它有兩個(gè)方法 "call" 和 "register";

功能：調(diào)用Native api

method: api函數(shù)名

args:參數(shù)，類型：json, 可選參數(shù)

callback(String returnValue):僅調(diào)用異步api時(shí)需要.

同步調(diào)用

如果你是一名經(jīng)驗(yàn)豐富的開(kāi)發(fā)者，想必看到第二行時(shí)已然眼睛一亮，想想node最被詬病的是什么，目前跨平臺(tái)的jsbridge中沒(méi)有一個(gè)能支持同步，所有需要獲取值的調(diào)用都必須傳一個(gè)回調(diào)，如果調(diào)用邏輯比較復(fù)雜，必將會(huì)出現(xiàn)“callback hell”。然而，DSBridge徹底改變了這一點(diǎn)。支持同步是DSBridge的最大亮點(diǎn)之一。

異步調(diào)用

對(duì)于一些比較耗時(shí)的api, DSBridge提供了異步支持，正如上例第三行代碼所示，此時(shí)你需要傳一個(gè)回調(diào)（如果沒(méi)有參數(shù)，回調(diào)可作為第二個(gè)參數(shù)），當(dāng)api完成時(shí)回調(diào)將會(huì)被調(diào)用，結(jié)果以字符串的形式傳遞。

注冊(cè) javascript API 供Native調(diào)用

為了兼容 Android和IOS?，DSBridge對(duì)Native API的簽名有兩個(gè)要求：

返回值必須是 String， 如果沒(méi)有返回值，直接返回null就行

API的參數(shù)通過(guò) JSONObject傳遞，如果有些API沒(méi)有參數(shù)，你也需要申明。

?

通常情況下，調(diào)用一個(gè)方法結(jié)束后會(huì)返回一個(gè)結(jié)果，是一一對(duì)應(yīng)的，現(xiàn)在，我們來(lái)思考如下場(chǎng)景：

有一個(gè)嵌入到app中顯示文檔下載列表的網(wǎng)頁(yè)。要求點(diǎn)擊網(wǎng)頁(yè)中相應(yīng)文件對(duì)應(yīng)的下載按鈕后，開(kāi)始下載文件，并在該網(wǎng)頁(yè)中顯示下載進(jìn)度。

思考：我們將文件下載的功能在natvie端實(shí)現(xiàn)，當(dāng)點(diǎn)擊網(wǎng)頁(yè)上的某項(xiàng)時(shí)，我們通過(guò)js調(diào)用native的下載方法，native在下載的過(guò)程中，不斷的向js返回進(jìn)度, 然后js更新網(wǎng)頁(yè)上的進(jìn)度條，等到下載任務(wù)結(jié)束時(shí)，才算本次調(diào)用結(jié)束。而這種調(diào)用的特征就是js的一次調(diào)用，對(duì)應(yīng)native的“多次返回”，考慮到native很多耗時(shí)任務(wù)都可能會(huì)多次返回（比如返回進(jìn)度），DSBridge 對(duì)“多次返回”進(jìn)行了支持，使用DSBridge 就可以非常方便的應(yīng)對(duì)這種case了。

詳細(xì)的示例請(qǐng)參考 DSBridge實(shí)例－在網(wǎng)頁(yè)中展示Native進(jìn)度

DWebView提供了三個(gè)api用于調(diào)用js

void callHandler(String method, Object[] args) 
void callHandler(String method, Object[] args, CompletionHandler handler)
void evaluateJavascript(String script)

前兩個(gè)api中，method 為函數(shù)名，args為參數(shù)數(shù)組，可以接受String 、int 、long、float、double等。

第一個(gè)api用于調(diào)用沒(méi)有返回值的js函數(shù)，沒(méi)有參數(shù)時(shí)傳null即可。

第二個(gè)api用于需要返回值的場(chǎng)景，需要傳遞一個(gè)CompletionHandler接口對(duì)象，在complete(String returnValue)方法中處理返回值即可。

第三個(gè)api用于執(zhí)行任意js代碼，內(nèi)部已做版本兼容處理。

調(diào)用時(shí)機(jī)

DWebview只有在javascript context初始化成功后才能正確執(zhí)行js代碼，而javascript context初始化完成的時(shí)機(jī)一般都比整個(gè)頁(yè)面加載完畢要早，隨然DSBridge能捕獲到j(luò)avascript context初始化完成的時(shí)機(jī)，但是一些js api可能聲明在頁(yè)面尾部，甚至多帶帶的js文件中（請(qǐng)務(wù)必不要這么做），如果在javascript context剛初始化完成就調(diào)用js api, 此時(shí)js api 可能還沒(méi)有注冊(cè)，所以會(huì)失敗，綜上所述，如果是客戶端主動(dòng)調(diào)用 js應(yīng)該在onPageFinished后調(diào)用。簡(jiǎn)單的示例如下：

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中下列函數(shù)會(huì)在主線程中執(zhí)行，您不必在手動(dòng)切換線程

void loadUrl( String url) 
void loadUrl(final String url, Map additionalHttpHeaders)
void evaluateJavascript(String script) 

DWebview已經(jīng)實(shí)現(xiàn) alert、prompt、comfirm對(duì)話框，您可以不做處理，也可以自定義。

如果你喜歡，歡迎star！
github:
android: https://github.com/wendux/DSB...
ios: https://github.com/wendux/DSB...