最近新开源了一个新项目DSBridge,号称最好用的javascript bridge。笔者仔细对比了一下,DSBridge分分钟秒杀所有啊。
DSBridge的主要特点:
- DSBridge真正跨平台,官方同时支持ios和android。
- DSBridge支持同步调用。
- 三端友好;无论是在ios、android或者web,使用起来都非常简单优雅,这一点和WebViewJavascriptBridge相比,简直就是艺术。
- DSBridge为国人项目,有详细中文文档和问题反馈渠道。
DSBridge 是H5页面与Native之间通信的桥梁,它有如下特点:
- 跨平台;同时支持ios和android。
- 双向调用;js可以调用native, native可以调用js
- 不仅支持异步调用,而且页支持同步调用(dsbridge是唯一一个支持同步调用的javascript bridge)
- 支持进度回调,多次返回(常用于文件下载进度、计时器等)
- Android支持腾讯x5内核
- 三端易用;无论是前端还是android或ios,使用都非常简单,极大的降低集成/学习成本
DSBridge之原生传递值给js
通过webView.callHandler()方法调用
第一个参数是约定注册的名称,与js接受处一致;
第二个参数是要传递的值,这里将data转成了json String的传给前端;
第三个参数是接受js返回的回调,可用于js接受成功后,再去通知原生。
HtmlData data = new HtmlData();
data.html = txt;
webView.callHandler("nativeToJs", new Object[]{new Gson().toJson(data)}, new OnReturnValue<String>() {
@Override
public void onValue(String o) {
}
});
复制代码
js接受传值,直接通过dsBridge.register()方法接受
第一个参数是上面的注册名,与原生保持一致;
第二个是js的方法,参数data就是传递的值,这里通过JSON.parse()格式化,方法的return返回值就是传递给原生的,对应上面的第三个参数。
<script>
dsBridge.register('nativeToJs', function (data) {
var value = JSON.parse(data);
document.getElementById("test").innerHtml = value.html;
return "success";
});
</script>
复制代码
DSBridge之js传值给原生
js通过dsBridge.call()方法传值,简单模拟了点击事件来传递。
第一个参数是约定注册的名称,与原生接受处方法名一致;
第二个参数是要传递的值;
第三个参数是接受原生返回的回调。
function myClick(){
dsBridge.call("jsToNative", "testVal", function(res) {
console.log(res);
});
}
复制代码
原生接受,通过JavascriptInterface注解,方法名与注册名一致。 第一个参数是传递的值; 第二个参数可回调信息给js;
webView.addJavascriptObject(new JsApi(), null);
public class JaApi {
@JavascriptInterface
public void jsToNative(Object msg, CompletionHandler<String> handler){
handler.complete(msg+"回调给js");
}
}
复制代码
转载于:https://juejin.im/post/5d0b3126e51d45776031b013