DSBridge應用之在網(wǎng)頁中展示Native進度

DSBridge是目前地球上使用最簡單并且支持同步調(diào)用的跨平臺(IOS/Android)javascript bridge(native和js的橋梁)狱意,DSBridge 2.0更新之后,支持了“native多次返回”,極大的方便了js調(diào)用native方法時久又,natvie需要多次向js返回數(shù)據(jù)的場景。

先貼出DSBridge github地址

DSBridge-IOS:https://github.com/wendux/DSBridge-IOS

DSBridge-Android:[https://github.com/wendux/DSBridge-Android

“多次返回”是什么豆励?

通常情況下拳芙,調(diào)用一個方法結(jié)束后會返回一個結(jié)果,是一一對應的埂息,現(xiàn)在技潘,我們來思考如下場景:

有一個嵌入到app中,顯示文檔下載列表的網(wǎng)頁千康。要求當點擊網(wǎng)頁中的相應文件對應的下載按鈕后享幽,開始下載文件,并在該文件顯示項的底部顯示下載進度拾弃。

思考:我們將文件下載的功能在natvie端實現(xiàn)值桩,當點擊網(wǎng)頁上的某項時,我們通過js調(diào)用native的下載方法豪椿,native在下載的過程中奔坟,不斷的向js返回進度, 然后js更新網(wǎng)頁上的進度條斯入,等到下載任務結(jié)束時,才算本次調(diào)用結(jié)束蛀蜜。而這種調(diào)用的特征就是js的一次調(diào)用刻两,對應native的“多次返回”,考慮到native很多耗時任務都可能會多次返回(比如返回進度)滴某,DSBridge 2.0對“多次返回”進行了支持磅摹,使用DSBridge 就可以非常方便的應對這種case了了。

示例

我們來模擬一個調(diào)用計時器的功能:

Native:提供一個倒計時的API, 命名為callProgress, 它的功能是起動一個計時器霎奢,倒計時10秒户誓,每過一秒向js輸出剩余的時間。

JS: 調(diào)用native提供的倒計時API幕侠,將剩余時間(秒)更新到網(wǎng)頁帝美。

我們看看點擊后的效果:

倒計時
倒計時

Web端:

<div class="btn" onclick="callProgress()">多次回調(diào) <span id='progress'></span></div>

 function callProgress(){
      //調(diào)用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) {
               // 返回剩余的時間,會多次調(diào)用
                handler.setProgressData((i--)+"");
            }
            @Override
            public void onFinish() {
                //結(jié)束調(diào)用
                handler.complete("");
            }
        }.start();
 }

注:setProgressData可以多次調(diào)用晤硕,每調(diào)用一次悼潭,js端就會收到一次數(shù)據(jù)。complete調(diào)用之后則代表本次調(diào)用結(jié)束舞箍,handler將失效舰褪,調(diào)用complete之后將不能再調(diào)用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){
        //返回剩余的時間占拍,可多次調(diào)用
        hanlder([NSString stringWithFormat:@"%d",value--],NO);
    }else{
       //結(jié)束調(diào)用
        hanlder(@"",YES);
        [timer invalidate];
    }
}
...

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

result: 返回給js的數(shù)據(jù)。

complete:表示調(diào)用是否結(jié)束捎迫;complete為YES, 調(diào)用之后則代表本次調(diào)用結(jié)束晃酒,handler將失效。

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

DSBridge-IOS:https://github.com/wendux/DSBridge-IOS

DSBridge-Android:https://github.com/wendux/DSBridge-Android

最后

如果你喜歡DSBridge , 歡迎star!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末窄绒,一起剝皮案震驚了整個濱河市贝次,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌颗祝,老刑警劉巖浊闪,帶你破解...
    沈念sama閱讀 216,919評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異螺戳,居然都是意外死亡,警方通過查閱死者的電腦和手機折汞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評論 3 392
  • 文/潘曉璐 我一進店門倔幼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人爽待,你說我怎么就攤上這事损同◆娓” “怎么了?”我有些...
    開封第一講書人閱讀 163,316評論 0 353
  • 文/不壞的土叔 我叫張陵膏燃,是天一觀的道長茂卦。 經(jīng)常有香客問我,道長组哩,這世上最難降的妖魔是什么等龙? 我笑而不...
    開封第一講書人閱讀 58,294評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮伶贰,結(jié)果婚禮上蛛砰,老公的妹妹穿的比我還像新娘。我一直安慰自己黍衙,他們只是感情好泥畅,可當我...
    茶點故事閱讀 67,318評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著琅翻,像睡著了一般位仁。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上方椎,一...
    開封第一講書人閱讀 51,245評論 1 299
  • 那天障癌,我揣著相機與錄音,去河邊找鬼辩尊。 笑死涛浙,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的摄欲。 我是一名探鬼主播轿亮,決...
    沈念sama閱讀 40,120評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼胸墙!你這毒婦竟也來了我注?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,964評論 0 275
  • 序言:老撾萬榮一對情侶失蹤迟隅,失蹤者是張志新(化名)和其女友劉穎但骨,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體智袭,經(jīng)...
    沈念sama閱讀 45,376評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡奔缠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,592評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了吼野。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片校哎。...
    茶點故事閱讀 39,764評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出闷哆,到底是詐尸還是另有隱情腰奋,我是刑警寧澤,帶...
    沈念sama閱讀 35,460評論 5 344
  • 正文 年R本政府宣布抱怔,位于F島的核電站劣坊,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏屈留。R本人自食惡果不足惜局冰,卻給世界環(huán)境...
    茶點故事閱讀 41,070評論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望绕沈。 院中可真熱鬧锐想,春花似錦、人聲如沸乍狐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽浅蚪。三九已至藕帜,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間惜傲,已是汗流浹背洽故。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留盗誊,地道東北人时甚。 一個月前我還...
    沈念sama閱讀 47,819評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像哈踱,于是被迫代替她去往敵國和親荒适。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,665評論 2 354

推薦閱讀更多精彩內(nèi)容