DSBridge實例－在網頁中展現Native進度

DSBridge是目前地球上使用最簡單而且支持同步調用的跨平臺（IOS/Android）javascript bridge（native和js的橋樑），DSBridge 2.0更新以後，支持了「native屢次返回」，極大的方便了js調用native方法時，natvie須要屢次向js返回數據的場景。

先貼出DSBridge github地址

DSBridge-IOS:github.com/wendux/DSBr…

DSBridge-Android:[github.com/wendux/DSBr…

「屢次返回」是什麼？

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

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

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

示例

咱們來模擬一個調用計時器的功能：

Native：提供一個倒計時的API, 命名爲callProgress, 它的功能是起動一個計時器，倒計時10秒，每過一秒向js輸出剩餘的時間。

JS: 調用native提供的倒計時API，將剩餘時間（秒）更新到網頁。

咱們看看點擊後的效果：

倒計時

Web端：

<div class="btn" onclick="callProgress()">屢次回調 <span id='progress'></span></div>

 function callProgress(){
      //調用Native提供的callProgress
       dsBridge.call("callProgress", function (value) {
             //顯示剩餘的時間
             document.getElementById("progress").innerText=value
      })
 }複製代碼

Natvie端:

Android

@JavascriptInterface
public void callProgress(JSONObject jsonObject, final CompletionHandler handler) throws JSONException {

        new CountDownTimer(11000, 1000) {
            int i=10;
            @Override
            public void onTick(long millisUntilFinished) {
               // 返回剩餘的時間，會屢次調用
                handler.setProgressData((i--)+"");
            }
            @Override
            public void onFinish() {
                //結束調用
                handler.complete("");
            }
        }.start();
 }複製代碼

注：setProgressData能夠屢次調用，每調用一次，js端就會收到一次數據。complete調用以後則表明本次調用結束，handler將失效，調用complete以後將不能再調用setProgressData。

IOS

//下面代碼中value、handler爲全局變量

- ( void )callProgress:(NSDictionary *) args :(void (^)(NSString * _Nullable result,BOOL complete))completionHandler
{
    value=10;
    //保存handler
    hanlder=completionHandler;
    //起動計時器
    timer =  [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(onTimer:) userInfo:nil repeats:YES];
}

-(void)onTimer:t{
    if(value!=-1){
        //返回剩餘的時間，可屢次調用
        hanlder([NSString stringWithFormat:@"%d",value--],NO);
    }else{
       //結束調用
        hanlder(@"",YES);
        [timer invalidate];
    }
}
...複製代碼

注：
handler(NSString * _Nullable result,BOOL complete)

result: 返回給js的數據。

complete:表示調用是否結束；complete爲YES, 調用以後則表明本次調用結束，handler將失效。

完整的示例請參考DSBridge自帶的demo:

DSBridge-IOS:github.com/wendux/DSBr…

DSBridge-Android:github.com/wendux/DSBr…

最後

若是你喜歡DSBridge , 歡迎star!