iOS WKWebview与JS交互的两种方式对比

在APP加载的网页中，我们需要用到原生与JS 交互。本人做过的项目里有两种实现方式：A、用的是系统原生的方式实现。B、用的是第三方写的一个类库WebViewJavascriptBridge. 先就两种方式进行对比总结。

A、系统原生的方式实现

// 1. webview调用JS函数, JS代码可根据需要拼接好。
NSString *JSFunc = xxx;
[self.webView evaluateJavaScript:JSFunc completionHandler:^(id _Nullable result, NSError * _Nullable error) {
   NSLog(@"evaluateJavaScript:\n result = %@ error = %@",result, error);
}];

// 2. 网页JS调原生: 
//   1> 需要先设置Webview. config 的WKUserContentController
//   2> 注册方法名 [userCC addScriptMessageHandler:self name:];
//   3> 遵守协议<WKScriptMessageHandler>，实现其方法.
//   4> 在控制器销毁时，需要移除方法名注册
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
WKUserContentController *userCC = [WKUserContentController new];
config.userContentController = userCC;
//JS调用OC 添加处理脚本
[userCC addScriptMessageHandler:self name:JSMessageName_Register];
WKWebView *webView = [[WKWebView alloc] initWithFrame:webFrame configuration:config];

#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    if ([message.name isEqualToString:JSMessageName_Register]) {
        RegisterViewController *controller = [RegisterViewController new];
        [self.navigationController pushViewController:controller animated:YES];
    }
}
- (void)dealloc
{
    WKUserContentController *userCC = self.webView.configuration.userContentController;
    [userCC removeScriptMessageHandlerForName:JSMessageName_Register]; // 不移除，怕是会造成webview无法释放
}
这种方式下H5端该怎么做？

使用原生的交互方式的话，安卓端的交互不一致，需要H5端自己判断，比如：

//android终端或者uc浏览器
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
//ios终端
var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X)/);
if(isiOS){
// 假设方法名为： JSMessageName；postMessage里面可以传参数
    window.webkit.messageHandlers.JSMessageName.postMessage(['13300001111', 'Go Climbing This Weekend !!!'])
}else if(isAndroid){
    .....
}

B、WebViewJavascriptBridge的方式

一、使用方式

// 1.JS调用原生：假设方法名是getUserInfo
[_bridge registerHandler:@"getUserInfo" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSMutableDictionary *dict = [NSMutableDictionary dictionary];
        dict[@"custName"] = [UserModel shareUserModel].custName;
        dict[@"idCard"] = [UserModel shareUserModel].certifino;
        responseCallback([JSONKit jsonStringWithObject:dict]);
    }];

// 2. webview调用JS： 假设JS的方法名是redirect
[_bridge callHandler:@"redirect" data:@"test" responseCallback:^(id responseData) {
        NSLog(@"%@", responseData);
 }];

通过方法名与对应的操作放在一起的方式更有利于维护；除此之外，这个提供了一份JS模板文件，安卓端也可以是同样的原理实现。
二、实现原理
webview调用JS的原理
1.使用方法-(void)callHandler:data:responseCallback: 传递方法名、参数、block。
-> 2. 内部用字典将 block保存，然后将方法名、参数、保存block对应的key这些信息按照JS模板拼装好JS代码。
-> 3. 回调到主线程中使用[self.webView evaluateJavaScript:completionHandler:];方法调用JS。
-> 4. H5端收到这个调用之后，调用iframe实现对约定好的地址跳转CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE

//iframe可以理解为webview中的窗口，当我们改变iframe的src属性的时候，相当于我们浏览器实现了链接的跳转。比如从www.baidu.com跳转到www.google.com。下面这段代码的目的就是实现一个到https://__bridge_loaded__的跳转
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
document.documentElement.appendChild(WVJBIframe);

-> 5. 在跳转时，我们的webview会收到代理方法回调, 在这里做出对URL判断是否是我们约定好的协议头，如果是约定好的JS与原生交互的就进入交互处理。

- (void)webView:(WKWebView *)webView
decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction
decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
 NSURL *url = navigationAction.request.URL;
  if ([_base isCorrectProcotocolScheme:url]) {// 是否是约定好的协议头
        if ([_base isBridgeLoadedURL:url]) {// 是否是将桥接JS代码加载到网页的对应的url
            [_base injectJavascriptFile];// js代码注入
        } else if ([_base isQueueMessageURL:url]) {// 是否是JS与原生交互的url
            NSLog(@"JS与原生交互原理的地方");
            [self WKFlushMessageQueue];
        } else {// 是约定好的协议头，但是未知的url
            [_base logUnkownMessage:url];
        }
        decisionHandler(WKNavigationActionPolicyCancel);// 因为这里是处理交互不需要加载
        return;
    }
 ......
}

-> 6. 主动调用JS代码，从而获取响应的数据result.

NSString *js = @"WebViewJavascriptBridge._fetchQueue();";
[_webView evaluateJavaScript:js completionHandler:^(NSString* result, NSError* error) {
     [_base flushMessageQueue:result];
}];

-> 7.对响应的数据result进行处理, 从中得到我们保存在字典中相应的block调用（ _responseCallbacks[responseId]）。

id messages = [self _deserializeMessageJSON: result];
NSString* responseId = message[@"responseId"];
if (responseId) {
     WVJBResponseCallback responseCallback = _responseCallbacks[responseId];
     responseCallback(message[@"responseData"]);
     [self.responseCallbacks removeObjectForKey:responseId];
 }

JS调用原生的原理

JS调用原生时，首先我们会在webview的代理方法里面收到，还是原来的方法, 判断是否是交互的操作跟上面的一样, 下面是缩减后的代码。

- (void)webView:(WKWebView *)webView
decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction
decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
  if ([_base isQueueMessageURL:url]) {// 是否是JS与原生交互的url
      NSLog(@"JS与原生交互原理的地方");
      [self WKFlushMessageQueue];
      decisionHandler(WKNavigationActionPolicyCancel);
  }
}

-> 2. 主动调用JS代码，从而获取响应的数据result.

NSString *js = @"WebViewJavascriptBridge._fetchQueue();";
[_webView evaluateJavaScript:js completionHandler:^(NSString* result, NSError* error) {
     [_base flushMessageQueue:result];
}];

-> 3. 对这个result进行处理。

- (void)flushMessageQueue:(NSString *)messageQueueString{
    id messages = [self _deserializeMessageJSON:messageQueueString];
    WVJBResponseCallback responseCallback = NULL;
    NSString* callbackId = message[@"callbackId"];
    if (callbackId) {
// 调用原生方法时的参数中有 callbackId，则需要我们在使用时的那个block中手动调用这个responseCallback。
         responseCallback = ^(id responseData) {
               if (responseData == nil) {   responseData = [NSNull null];   }    
               WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData };
               [self _queueMessage:msg];// 里面会再次使weview调用js给网页传递数据‘ responseData’
          };
    } else {
         responseCallback = ^(id ignoreResponseData) {
                 // Do nothing
          };
   }
//self.messageHandlers的来源： - (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler。
    WVJBHandler handler = self.messageHandlers[message[@"handlerName"]];
    handler(message[@"data"], responseCallback);
}

附：第三种方式：
OC与JS交互之JavaScriptCore