DSBridge例項－在網頁中展示Native進度

wendux發表於2019-03-01
網頁

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，將剩餘時間（秒）更新到網頁。

我們看看點選後的效果：

DSBridge例項－在網頁中展示Native進度
倒數計時

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!

相關文章