JSBridge的使用

2020-03-04  本文已影响0人  85ca4232089b

一、什么是JSBridge

主要是给 JavaScript 提供调用 Native 功能的接口,让混合开发中的前端部分可以方便地使用 Native 的功能,是 Native 和非 Native 之间的桥梁,它的核心是构建 Native 和非 Native 间消息的双向通信的通道。
使用方法:

H5调用原生Native
原生将WKScriptMessageHandler绑定在window上
H5直接通过原生方法调用这个对象上的h5的接受方法
Native调用原生H5
H5将JSBridge绑定在window上
Native直接调用这个对象的原生接受方法

二、JSBridge使用

  1. Native 遵循WKScriptMessageHandler协议并实现它的代理方法,加载并显示webView
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message

2.在Native的生命周期中注入对象,前端调用其方法时,Native 可以捕获到

-(void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
//注入
    [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"H5定义的方法"];
}
-(void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];
    //移除
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"H5定义的方法"];
}

3.最后在代理方法中处理具体的逻辑事物

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    [super userContentController:userContentController didReceiveScriptMessage:message];

    if ([message.name isEqualToString:@"nativeBridge"]) {
        NSLog(@"前端传递的数据 %@: ",message.body);
        // Native 逻辑
    }
}

三、拦截 URL SCHEME

Web 端通过某种方式(例如 iframe.src)发送 URL Scheme 请求,之后 Native 拦截到请求并根据 URL SCHEME(包括所带的参数)进行相关操作
•使用 iframe.src 发送 URL SCHEME 会有 url 长度的隐患。
• 创建请求,需要一定的耗时,比注入 API 的方式调用同样的功能,耗时会较长。
因此:JavaScript 调用 Native 推荐使用注入 API 的方式

     NSString *jsStr = [NSString stringWithFormat:@"reload()"];
       [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {       
       }];

我的理解如果有错漏请一定指出,非常感谢!

上一篇 下一篇

猜你喜欢

热点阅读