DSBridge 和 iOS原生的交互

最新推荐文章于 2024-04-03 06:14:04 发布

放飞梦想512

最新推荐文章于 2024-04-03 06:14:04 发布

阅读量671

点赞数

分类专栏： iOS OC 文章标签： ios web app DSBridge

本文链接：https://blog.csdn.net/u010774394/article/details/110001490

版权

iOS 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

DSBridge是一个用来用来原生和h5交互的轻量级框架,下面我说一下在iOS端DSBridge的使用

安装

使用cocoapods来进行安装

pod "dsBridge"

使用

新建一个用于和JavaScript交互的类

#import "JsApiTest.h"
#import "dsbridge.h"
 
@implementation JsApiTest
 //  同步
- (NSString *)testSyn: (NSString *) msg
{
    NSLog(@"我被同步调用了");
    return [msg stringByAppendingString:@"[ syn call]"];
}
 // 异步
- (void)testAsyn:(NSString *) msg :(JSCallback) completionHandler
{
    NSLog(@"我被异步调用了");
    completionHandler([msg stringByAppendingString:@" [ asyn call]"],YES);
}
@end

初始化DWKWebView,并将此View添加到控制器的View上,同时向DWKWebView中注册自JsApiTest

self.dwebview = [[DWKWebView alloc] initWithFrame:self.view.bounds];
[self.dwebview addJavascriptObject:[[JsApiTest alloc] init] namespace:nil];
[self.view addSubview:self.dwebview];

在js代码中引入dsbridge.js,可以采用cdn方式引入,也可通过npm方式引入,我这边采用的是cdn的方式引入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: yellow
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/dsbridge@3.1.4/dist/dsbridge.js"> </script>
    <script>
        window.onload = function () {
            var button1 = document.getElementById("test1");
            var button2 = document.getElementById("test2");
            button1.onclick = function () {
                //同步调用
                var str = bridge.call("testSyn", "testSyn");
            }
            button2.onclick = function () {
                //异步调用
                bridge.call("testAsyn", "testAsyn", function (v) {
                    alert(v);
                })
            }
            //注册 javascript API 
            bridge.register('addValue', function (l, r) {
                return l + r;
            })
        }
    </script>
</head>

<body>
    <button id="test1">同步调用原生方法</button>
    <button id="test2">异步调用原生方法</button>

</body>

</html>

同时我在js中注册了addValue方法来供原生的调用,在iOS代码中可以通过callHandler来调用js中的注册的方法

[self.dwebview callHandler:@"addValue" arguments:@[@3,@4] completionHandler:^(NSNumber* value){
     NSLog(@"%@",value);
}];

支持进度的回调

通常情况下，调用一个方法结束后会返回一个结果，是一一对应的。但是有时会遇到一次调用需要多次返回的场景，比如在javascript钟调用端上的一个下载文件功能，端上在下载过程中会多次通知javascript进度, 然后javascript将进度信息展示在h5页面上，这是一个典型的一次调用，多次返回的场景，如果使用其它Javascript bridge, 你将会发现要实现这个功能会比较麻烦，而DSBridge本省支持进度回调，你可以非常简单方便的实现一次调用需要多次返回的场景，下面我们实现一个倒计时的例子：

oc中的代码:

- (void)callProgress:(NSDictionary *)args callback:(JSCallback)completionHandler
{
    self.value=10;
    self.hanlder=completionHandler;
    self.timer =  [NSTimer scheduledTimerWithTimeInterval:1.0
                                              target:self
                                            selector:@selector(onTimer)
                                            userInfo:nil
                                             repeats:YES];
}
-(void)onTimer{
    NSLog(@"开始调用");
    if(self.value!=-1){
        self.hanlder([NSNumber numberWithInt:self.value--],NO);
    }else{
        self.hanlder(@"",YES);
        [self.timer invalidate];
    }
}

JavaScript中的代码的实现:

button3.onclick = function () {
      bridge.call("callProgress", function (value) {
            ocument.getElementById("progress").innerText = value
        })
}

OC中的方法签名

注意: DSBridge对OC中的方法有严格的要求必须符合以下格式

同步api

(id) handler:(id) msg

参数可以是任何类型, 但是返回值类型不能为 void。如果不需要参数，也必须声明，声明后不使用就行。

(void) handler:(id)arg :(void (^)( id result,BOOL complete))completionHandler）

js中通过命名空间来调用OC中的方法

示例如下:

            // 通过命名空间来调用
            button4.onclick = function () {
                var ret = dsBridge.call("echo.syn", {
                    msg: " I am echoSyn call",
                    tag: 1
                })
                alert(JSON.stringify(ret))
                // call echo.asyn
                dsBridge.call("echo.asyn", {
                    msg: " I am echoAsyn call",
                    tag: 2
                }, function (ret) {
                    alert(JSON.stringify(ret));
                })
            }

js中可以注册一个对象，指定一个命名空间供OC来进行调用

dsBridge.register("test",{
  tag:"test",
  test1:function(){
	return this.tag+"1"
  },
  test2:function(){
	return this.tag+"2"
  }
})
  
//namespace test1 for asynchronous calls  
dsBridge.registerAsyn("test1",{
  tag:"test1",
  test1:function(responseCallback){
	return responseCallback(this.tag+"1")
  },
  test2:function(responseCallback){
	return responseCallback(this.tag+"2")
  }
})

以上就是使用DSBridge用来JavaScript和原生iOS之间的交互

代码在这

放飞梦想512

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DSBridge 和 iOS原生的交互

DSBridge是一个用来用来原生和h5交互的轻量级框架,下面我说一下在iOS端DSBridge的使用安装使用cocoapods来进行安装pod "dsBridge"使用新建一个用于和JavaScript交互的类#import "JsApiTest.h"#import "dsbridge.h" @implementation JsApiTest // 同步- (NSString *)testSyn: (NSString *) msg{ NSLog(@"我被同步调用了"
复制链接

扫一扫