DSBridge是目前地球上使用最简单并且支持同步调用的跨平台(IOS/Android)javascript bridge(native和js的桥梁),DSBridge 2.0更新之后,支持了“native多次返回”,极大的方便了js调用native方法时,natvie需要多次向js返回数据的场景。
先贴出DSBridge github地址
DSBridge-IOS:https://github.com/wendux/DSBridge-IOS
DSBridge-Android:[https://github.com/wendux/DSBridge-Android
“多次返回”是什么?
通常情况下,调用一个方法结束后会返回一个结果,是一一对应的,现在,我们来思考如下场景:
有一个嵌入到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:https://github.com/wendux/DSBridge-IOS
DSBridge-Android:https://github.com/wendux/DSBridge-Android
最后
如果你喜欢DSBridge , 欢迎star!