最近公司项目支持最低支持iOS8了，老一代的UIWebView终于可以退下，替换上WKWebView之后，看哪个页面都感觉眉清目秀，总体上来说，WKWebView从使用上来说比UIWebView友好太多了。当然还有性能提升、内存减小，这需要慢慢感受。
替换WKWebView的要点
- 加载网页
- 加载进度
- 网页加载状态回调 WKNavigationDelegate
- 打电话
- alert弹窗 WKUIDelegate
- iOS调用JS
- JS调用iOS WKScriptMessageHandler
加载网页
[webView loadRequest:request];
光就加载是不是感觉没什么改动？确实也没怎么改动~
但是WKWebView创建的时候可比UIWebView丰富太多了，配置方便，主要包括两点：
-
注册JS调动iOS的方法
WKWebView对于原生和JS的交互上面进行了大改动，（大呼一口气）比它的前辈UIWebview方便了不少。但如果想要在JS端调用iOS的方法，需要先注册，注册可以在创建时注册，可也以另外选择合适的时机，比如网页加载完成时。
WKUserContentController *userController = [[WKUserContentController alloc] init]; [userController addScriptMessageHandler:self name:@"funcName"]; -
iOS向网页注入JS
比如说需要禁止网页里面的长按
NSString *string = @"document.documentElement.style.webkitTouchCallout='none';" WKUserScript *script = [[WKUserScript alloc] initWithSource:string injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES]; [webView.configuration.userContentController addUserScript:script];完整创建示例:
WKUserContentController *userController = [[WKUserContentController alloc] init]; [userController addScriptMessageHandler:self name:@"funcname"]; WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init]; configuration.preferences.minimumFontSize = 10.0; configuration.userContentController = userController; NSMutableString *javascript = [NSMutableString string]; [javascript appendFormat:@"document.documentElement.style.webkitTouchCallout='none';"]; WKUserScript *script = [[WKUserScript alloc] initWithSource:javascript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES]; WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];; webView.UIDelegate = self; webView.navigationDelegate = self; webView.backgroundColor = [UIColor whiteColor]; webView.scrollView.scrollEnabled = YES; [webView.configuration.userContentController addUserScript:script];
加载进度
加载进度在UIWebView的时代是一个比较神奇的存在，神奇在哪呢。UIWebView本身并没有给我们网页的加载进度，只给了开始、结束、失败的回调。但产品同学又想看到进度，怎么做呢。那就是开始和结束的时机是对的，中间的进度虽然没有数据，但是自动慢慢增加。最终效果上，还是能忽悠住产品跟用户的，厉害吧。
WKWebView终于给了我们加载进度 estimatedProgress 这个属性，KVO监听，简单明了，不造假。 当然如果项目里面使用了RAC就更方便了。
@weakify(self)
[RACObserve(self.webView, estimatedProgress) subscribeNext:^(NSNumber *progress) {
@strongify(self)
[self.progressView setProgress:progress.floatValue animated:YES];
}];
网页加载状态回调 WKNavigationDelegate
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation
{
NSLog(@"页面开始加载");
}
- (void)webView:(WKWebView *)webView didCommitNavigation:(null_unspecified WKNavigation *)navigation
{
NSLog(@"内容开始返回");
}
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation
{
NSLog(@"页面加载完成");
//同UIWebView的加载完成回调操作
}
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(null_unspecified WKNavigation *)navigation withError:(nonnull NSError *)error
{
NSLog(@"页面加载失败");
//同UIWebView的加载失败回调操作
}
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(null_unspecified WKNavigation *)navigation
{
NSLog(@"收到服务器跳转请求");
}
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler
{
NSLog(@"收到响应后，决定是否跳转");
}
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
NSLog(@"发送请求之前，决定是否跳转");
//现在可以在这里拦截请求，比如H5跳到原生页面
NSString * URLString = navigationAction.request.URL.absoluteString;
BOOL isAllow = [self dosomething];
if (isAllow) {
decisionHandler(WKNavigationActionPolicyAllow);
}
else {
decisionHandler(WKNavigationActionPolicyCancel);
}
}
打电话
替换WKWebView之后发现电话无法拨打了，以前可以前端直接调用电话，现在也需要自己处理一下子了
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
if ([navigationAction.request.URL.scheme isEqualToString:@"tel"]) {
dispatch_async(dispatch_get_main_queue(), ^{
if ([[UIApplication sharedApplication] canOpenURL:navigationAction.request.URL]) {
[[UIApplication sharedApplication] openURL:navigationAction.request.URL];
}
});
decisionHandler(WKNavigationActionPolicyAllow);
return;
}
Alert弹框 WKUIDelegate
以前JS要弹窗，直接就能弹出来，但现在需要客户端这边处理一下
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler
{
//AlertPanel
}
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler
{
//ConfirmPanel
}
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(nonnull NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(nonnull WKFrameInfo *)frame completionHandler:(nonnull void (^)(NSString * _Nullable))completionHandler
{
//InputPanel
}
iOS调用JS
iOS调用JS比较方便
//例 在网页加载完成之后，获取标题
[webView evaluateJavaScript:@"document.title" completionHandler:^(NSString * title, NSError * _Nullable error) {
NSString *realTitle = [title stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];
self.title = realTitle && realTitle.length ? realTitle : nil;
}];
JS调用iOS WKScriptMessageHandler
JS调用iOS的方法，需要先注册，在第一步“加载网页”的部分有说到。当JS端调用了方法之后，iOS这边会走到 WKScriptMessageHandler 的代理中来，在这里我们可以拿到方法和参数，接着做下一步的操作。
- (void)userContentController:(nonnull WKUserContentController *)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message
{
//方法名
NSString *methodName = message.name;
//参数 这需要跟前端商量好 一个参数可以直接传 多个参数可以用字典包一下
id para = message.body;
if ([methodName isEqualToString:@"funcA"]) {
}
else if ([methodName isEqualToString:@"funcB"]) {
}
}
JS调用iOS之后，JS不需要iOS的返回值的时候可以直接这么做。
但JS调用iOS需要返回值的时候呢？没有直接的办法，对就是这么尴尬。 但可以迂回一下，曲线救国。
当JS调用完iOS时，在上面的方法里，再执行一下iOS调用JS的操作，也就是上一步骤的动作。
- (void)userContentController:(nonnull WKUserContentController *)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message
{
//方法名
NSString *methodName = message.name;
//参数 这需要跟前端商量好 一个参数可以直接传 多个参数可以用字典包一下
NSDictionary *para = message.body;
if ([methodName isEqualToString:@"funcA"]) {
//iOS调用JS传值给JS
NSString *callBack = para[@"callbackName"];
NSString *script = [NSString stringWithFormat:@"%@(%@)", callBack, data];
[webView evaluateJavaScript:script completionHandler: nil];
}
}
看这样参数就返回到了JS。
callBack是怎么回事？ JS调动iOS的时候，参数里传一个callBackName，那么iOS调动JS，和JS调用iOS就能联系在一起了。
对于需要立即得到返回值的JS方法，还有另外一种解决办法就是在网页加载成功之后，把需要的值注入到window上，成为一个全局参数
NSString *userInfoScript = [NSString stringWithFormat:@"window.userInfo=%@",userInfo];
[webview evaluateJavaScript:userInfoScript completionHandler:nil];
这样JS就可以通过window直接拿到想要的数据。
目前来说，把UIWebView替换为WKWebView主要就是上面所说的问题，就使用来说WKWebView确实清晰方便不少，大家也赶紧试试吧。
