iOS原生UIWebView与JS 交互封装

公司项目大量使用 WebView,交互相当频繁,基于所以对WebView与 JS 的交互做了些封装

SFWebViewBridge封装JavaScriptCore.framework框架进行JS与OC的交互。

• 首先看看具体如何使用,原理下文再做介绍
  • 1.通过 webView创建桥接

    // 通过 webview 创建bridge ,并设置当前控制器为代理,
    SFWebViewBridge * bridge = [SFWebViewBridge   bridgeWithWebView:_webView delegate:self];
  

  • 2.注册方法供 JS 调用

    // 注册printHelloWorld方法供 JS 调用
    [self.bridge registerHandler:@"printHelloWorld" completion:^(id data) {
        NSLog(@"XCode 控制台输出printHelloWorld--> %@",data);
    }];
    // 注意循环引用
    __weak typeof(self) wsf = self;
    // 注册javaScriptBridgeToOC方法
    [self.bridge registerHandler:@"javaScriptBridgeToOC" completion:^(id data) {
        // 调用实际功能
        [wsf dealWithData:data];
    }];
  

  • 3.调用 JS 方法

  // 调用不带参数 JS 方法    
  [self.bridge callHandler:@"test1"];
  // 调用带参数 JS 方法,建议方法参数使用NSDictionary NSArray NSString等,不支持自定义类
  NSDictionary * data = @{@"name":@"Cai", @"age":@"20"};
  [self.bridge callHandler:@"test2" parameter:data];
  
  

以上为具体使用方式,以下为源码分析

• SFWebViewBridge对外提供以下4个接口

// 快速创建 bridge
+ (instancetype)bridgeWithWebView:(UIWebView *)webView delegate:(id)delegate;
// 调用无参数 JS 方法
- (void)callHandler:(NSString*)handlerName;
// 调用带参数 JS 方法
- (void)callHandler:(NSString*)handlerName parameter:(id)parameter;
// 注册方法供 JS 调用,completion: 完成回调
- (void)registerHandler:(NSString*)handlerName completion:(void(^)(id data))completion;

• 接口1:创建桥,并设置为webView的代理,设置delegate属性

+ (instancetype)bridgeWithWebView:(UIWebView *)webView delegate:(id)delegate;
{
    // 创建桥 
    SFWebViewBridge * bridge = [[SFWebViewBridge alloc] init];
    // 设置为webView的代理
    webView.delegate = bridge;
    // 设置bridge的代理
    bridge.delegate = delegate;
    return bridge;
}

• 接口2:实际调用接口3故此不做说明
• 接口3:方法中判断传递进来的参数类型,如果是字符串直接拼接方法名与参数调用使用 context 执行 JS, 如果是NSArray, NSDictionary就转化为 Json 字符串

- (void)callHandler:(NSString*)handlerName parameter:(id)parameter
{
    if (parameter != nil)
    {
        NSBundle *mainB = [NSBundle bundleForClass:[parameter class]];
        // 参数类型不能为自定义类型
        NSAssert(mainB != [NSBundle mainBundle], @"请使用合法的参数类型");
        return;
    }
    else
    {
        // 执行 JS
        [self.context evaluateScript:[NSString stringWithFormat:@"%@()",handlerName]];
    }
    
    NSString * jsonString = nil;
    // 将参数转为字符串
    if ([parameter isKindOfClass:[NSArray class]] | [parameter isKindOfClass:[NSDictionary class]])
    {
        NSData *jsonData = [NSJSONSerialization dataWithJSONObject:parameter options:NSJSONWritingPrettyPrinted error:nil];
        jsonString = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
    }
    else if ([parameter isKindOfClass:[NSString class]])
    {
        jsonString = parameter;
    }
    else
    {
       jsonString= [NSString stringWithFormat:@"%@",parameter];
    }
    // 拼接JS方法名与参数
    NSString * StringParameter = [NSString stringWithFormat:@"%@(%@)",handlerName,jsonString];
    // 执行 JS
    [self.context evaluateScript:StringParameter];
}

• 接口4:将所有注册的handlerName与completion回调通过 key-value 的形式保存下来,并在 webView的代理方法webViewDidFinishLoad中进行注册

- (void)registerHandler:(NSString*)handlerName completion:(void (^)(id))completion
{
    self.messageHandlers[handlerName] = ^(id data) {
        // 回到主线程调用
        dispatch_async(dispatch_get_main_queue(), ^{
            completion(data);
        });
    };
}

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    // 获取 JSContext并赋值
    _context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    
    // 添加所有注册的handler
    if (self.messageHandlers.count != 0)
    {
        __weak typeof(self) weakself = self;
        [self.messageHandlers enumerateKeysAndObjectsUsingBlock:^(id  _Nonnull key, id  _Nonnull obj, BOOL * _Nonnull stop) {
            weakself.context[key] = obj;
        }];
    }
    
    if (_delegate && [_delegate respondsToSelector:@selector(webViewDidFinishLoad:)])
    {
        [_delegate webViewDidFinishLoad:webView];
    }
    
}

可以点击这里下载DEMO查看