dsBridge 是一个三端 (AndroidIOSJavaScript) 易用的现代跨平台 JavaScript bridge, 通过它, 你可以在 Javascript 和原生之间同步或异步的调用彼此的函数.
Github: github.com/wendux/DSBr
特性
AndroidIOSJavascript 三端易用, 轻量且强大安全且健壮
同时支持同步调用和异步调用
支持以类的方式集中统一管理 API
支持 API 命名空间
支持调试模式
支持 API 存在性检测
支持进度回调: 一次调用, 多次返回
支持 Javascript 关闭页面事件回调
支持 Javascript 模态 / 非模态对话框
Android 端支持腾讯 X5 内核
安装
pod "dsBridge"
示例
请参考工程目录下的 dsbridgedemo/ 文件夹. 运行并查看示例交互.
如果要在你自己的项目中使用 dsBridge :
使用
新建一个类, 实现 API
- @implementation JsApiTest
- // 同步 API
- - (NSString *) testSyn:(NSString *) msg
- {
- return [msg stringByAppendingString:@"[ syn call]"];
- }
- // 异步 API
- - (void) testAsyn:(NSString *) msg :(void (^)(NSString * _Nullable result,BOOL complete))completionHandler
- {
- completionHandler([msg stringByAppendingString:@"[ asyn call]"],YES);
- }
- @end
可以看到, DSBridge 正式通过 API 类的方式集中统一地管理 API
添加 API 类实例到 DWKwebView
- DWKWebView * dwebview=[[DWKWebView alloc] initWithFrame:bounds];
- // register api object without namespace
- [dwebview addJavascriptObject:[[JsApiTest alloc] init] namespace:nil];
在 Javascript 中调用原生 (Java/Object-c/swift) API , 并注册一个 javascript API 供原生调用.
初始化 dsBridge
- //cdn 方式引入初始化代码(中国地区慢, 建议下载到本地工程)
- //<script src="https://unpkg.com/dsbridge@3.0.7/dist/dsbridge.js"> </script>
- //npm 方式安装初始化代码
- //npm install dsbridge@3.0.7
- var dsBridge=require("dsbridge")
调用原生 API , 并注册一个 javascript API 供原生调用.
- // 同步调用
- var str=dsBridge.call("testSyn","testSyn");
- // 异步调用
- dsBridge.call("testAsyn","testAsyn", function (v) {
- alert(v);
- })
- // 注册 javascript API
- dsBridge.register('addValue',function(l,r){
- return l+r;
- })
在 Object-c 中调用 Javascript API
- [dwebview callHandler:@"addValue" arguments:@[@3,@4] completionHandler:^(NSNumber* value){
- NSLog(@"%@",value);
- }];
命名空间
命名空间可以帮助你更好的管理 API, 这在 API 数量多的时候非常实用, 比如在混合应用中 DSBridge (>= v3.0.0) 支持你通过命名空间将 API 分类管理, 并且命名空间支持多级的, 不同级之间只需用'.' 分隔即可
调试模式
在调试模式时, 发生一些错误时, 将会以弹窗形式提示, 并且原生 API 如果触发异常将不会被自动捕获, 因为在调试阶段应该将问题暴露出来如果调试模式关闭, 错误将不会弹窗, 并且会自动捕获 API 触发的异常, 防止 crash 强烈建议在开发阶段开启调试模式, 可以通过如下代码开启调试模式:
- // open debug mode
- [dwebview setDebugMode:true];
进度回调
通常情况下, 调用一个方法结束后会返回一个结果, 是一一对应的但是有时会遇到一次调用需要多次返回的场景, 比如在 javascript 钟调用端上的一个下载文件功能, 端上在下载过程中会多次通知 javascript 进度, 然后 javascript 将进度信息展示在 h5 页面上, 这是一个典型的一次调用, 多次返回的场景, 如果使用其它 Javascript bridge, 你将会发现要实现这个功能会比较麻烦, 而 DSBridge 本省支持进度回调, 你可以非常简单方便的实现一次调用需要多次返回的场景, 下面我们实现一个倒计时的例子:
- In Object-c
- - ( void )callProgress:(NSDictionary *) args :(void (^)(NSNumber * _Nullable result,BOOL complete))completionHandler
- {
- value=10;
- hanlder=completionHandler;
- timer = [NSTimer scheduledTimerWithTimeInterval:1.0
- target:self
- selector:@selector(onTimer:)
- userInfo:nil
- repeats:YES];
- }
- -(void)onTimer:t{
- if(value!=-1){
- hanlder([NSNumber numberWithInt:value--],NO);
- }else{
- hanlder(@"",YES);
- [timer invalidate];
- }
- }
- In javascript
- dsBridge.call("callProgress", function (value) {
- document.getElementById("progress").innerText = value
- })
完整的示例代码请参考 demo 工程
Javascript 弹出框
DSBridge 已经实现了 Javascript 的弹出框函数(alert/confirm/prompt), 这些对话框按钮标签文字默认都是中文的, 如果你想自定义这些文本可以参考
customJavascriptDialogLabelTitles
API, 如果你不想使用 DSBridge 实现的对话框, 你可以通过设置 DSUIDelegate 属性 (是 WKUIDelegate 的代理属性) 完全自定义
另外注意, DSBridge 实现的弹出框都是模态的, 这会阻塞 UI 线程, 如果你需要非模态的对话框, 请参考
- disableJavascriptDialogBlock
- API.
API 详细列表
下面是完整的 API 列表, 详细的文档请移步: github.com/wendux/DSBr
- Object-C API
- addJavascriptObject:(id) object namespace:(NSString *) namespace
- removeJavascriptObject:(NSString *) namespace
- callHandler:(NSString *) methodName arguments:(NSArray *) args
- ]
- callHandler:(NSString *) methodName completionHandler:(void (^)(id value))completionHandler
- callHandler:(NSString *) methodName arguments:(NSArray *) args completionHandler:(void (^ )(id value))completionHandler
- disableJavascriptDialogBlock:(bool) disable
- setJavascriptCloseWindowListener:(void(^_Nullable)(void))callback
- hasJavascriptMethod:(NSString*) handlerName
- setDebugMode:(bool) debug
- customJavascriptDialogLabelTitles:(NSDictionary*) dic
- Javascript API
- dsBridge.call(method,[arg,callback])
- dsBridge.register(methodName|namespace,function|synApiObject)
- dsBridge.registerAsyn(methodName|namespace,function|asyApiObject)
- dsBridge.hasNativeMethod(handlerName,[type])
- dsBridge.disableJavascriptDialogBlock(disable)
和 fly.js 一起使用
当 dsBridge 遇见 Fly.js 时, 将会打开一个新的世界 fly.js 传送门
正如我们所知, 在浏览器中, ajax 请求受同源策略限制, 不能跨域请求资源然而, Fly.js 有一个强大的功能就是支持请求重定向: 将 ajax 请求通过任何 Javascript bridge 重定向到端上, 并且 Fly.js 官方已经提供的 dsBridge 的 adapter, 可以非常方便的协同 dsBridge 一起使用由于端上没有同源策略的限制, 所以 fly.js 可以请求任何域的资源
另一个典型的使用场景是在混合 APP 中, 由于 Fly.js 可以将所有 ajax 请求转发到端上, 所以, 开发者就可以在端上进行统一的请求管理证书校验 cookie 管理访问控制等
详情请参考 https://github.com/wendux/fly. (DSBridge Android 版 demo 中包含 fly.js 的示例)
最后
如果你喜欢 DSBridge, 欢迎 star, 以便更多的人知道它, 谢谢 ! 再次贴出 DSBridge 仓库链接:
- DSBridge for IOS:github.com/wendux/DSBr
- DSBridge for Android: github.com/wendux/DSBr
来源: https://juejin.im/post/5a939b55f265da4e7c18a7d1