最近因为公司的项目要大量用到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端的配合就不上了，本人才疏学浅，如果有不对的地方烦请各路大神指正，欢迎大家交流！
