【iOS开发】WKWebView与H5交互

最近因为公司的项目要大量用到H5，公司的适配版本也终于提到了iOS8以上，所以是时候换掉陈旧的UIWebView了。用这篇文章来总结一下最近用到的WKWebView相关知识，欢迎各位留言指正交流。

WKWebView的创建

- (WKWebView *)webView {
    if (!_webView) {
        //初始化WKWebViewConfiguration
        WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
        /**
         设置代理对象
         ScriptMessageHandler:WKScriptMessageHandler的代理对象
         name:跟后端协调好的响应名称
        **/
        [config.userContentController addScriptMessageHandler:self name:@"methodName"];

        _webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT - 64) configuration:config];
        
        [_webView  loadRequest:[ NSURLRequest requestWithURL:url]];
        
        _webView.navigationDelegate = self;
    }
    return _webView;
}

在这段代码中，我们设置了两个代理，所以应该遵守代理协议，分别是WKNavigationDelegate和WKScriptMessageHandler，两个代理方法的具体实现会在下文进行说明。这里特别说明WKScriptMessageHandler代理对象的设置并不是使用点语法的形式，而是在初始化webView的时候先初始化WKWebViewConfiguration类型的对象config，然后使用- (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration方法设置代理。

WKNavigationDelegate

这个代理我用到的代理方法比较简单有三个如下，其他的代理方法也有很多文章进行说明，我就不再赘述。

// 页面开始加载时调用
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
}

// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
}

// 页面加载失败时调用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation {
}

WKScriptMessageHandler（JS调用原生）

在看这个代理方法之前，我们首先回顾一下webView的创建时调用的一句代码

 [config.userContentController addScriptMessageHandler:self name:@"methodName"];

在创建config对象时，我们给他绑定一个名为methodName的方法，而这个方法就是和H5同事协定好的用来交互的方法的方法名，里面可以通过传参来确定接下来进行何种交互，而交互的代码就写在代理方法里面，接下来看看代理方法。

- (void)userContentController:(nonnull WKUserContentController *)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message {
          NSString *messageStr = [NSString stringWithFormat:@"%@",message.body];
}

这里的message是js调用methodName方法回传的信息，我们可以在代理方法中通过解析message得到和H5协定好的特殊标识来进行交互。当然你必须在js的代码中写如下代码才能保证交互成功（PS：这是H5中的JS代码）。

 window.webkit.messageHandlers. methodName.postMessage()

我个人认为这样的交互方式其实跟UIWebView通过截取字符串的交互方式有些类似，都是通过和前端协定好的特殊标识符来执行所对应的交互内容，举个例子，一个H5中有两个按钮，点击第一个按钮跳转控制器A，第二个按钮跳转控制器B，那H5人员在处理按钮A和B的交互事件的地方分别写下如下代码

 window.webkit.messageHandlers. methodName.postMessage(pushVcA)

 window.webkit.messageHandlers. methodName.postMessage(pushVcB)

我们iOS端在代理方法中写下如下代码

- (void)userContentController:(nonnull WKUserContentController *)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message {
          NSString *messageStr = [NSString stringWithFormat:@"%@",message.body];
          if (messageStr isEqualToString:@"pushVcA") {
                 //跳转控制器A
          }
          if (messageStr isEqualToString:@"pushVcB") {
                //跳转控制器B
          }
}

这只是一个简单的交互场景举例，但是JS调用原生方法就是在这个代理方法中实现。接下来讲一下原生如何调用JS方法。

原生调用JS

原生调用JS需要用到WKWebView的方法

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler

我的使用方式为

    NSString *startStr = @"startUploadImgCB('start')";
    [self.webView evaluateJavaScript:startStr completionHandler:^(id _Nullable response, NSError * _Nullable error) {
        NSLog(@"value: %@ error: %@", response, error);
    }];

结合我的使用场景来进行一下说明，我这里的H5需要调用原生相册和拍照进行图片上传，我的代码是写在上传开始前的地方，这里的startUploadImgCB即为JS写好的方法，start是我传给JS的参数，目的是告诉JS原生开始上传图片，开始上传动画。注意这个方法要跟上文中约定好的交互方法methodName方法区分开，methodName是JS调用原生的方法名，而startUploadImgCB是原生调用JS的方法名。
以上就是对本次项目中所用到的原生与H5交互知识的总结，demo需要H5端的配合就不上了，本人才疏学浅，如果有不对的地方烦请各路大神指正，欢迎大家交流！