WKWebView的7个注意点

最近公司项目支持最低支持iOS8了，老一代的UIWebView终于可以退下，替换上WKWebView之后，看哪个页面都感觉眉清目秀，总体上来说，WKWebView从使用上来说比UIWebView友好太多了。当然还有性能提升、内存减小，这需要慢慢感受。

替换WKWebView的要点

1. 加载网页
2. 加载进度
3. 网页加载状态回调 WKNavigationDelegate
4. 打电话
5. alert弹窗 WKUIDelegate
6. iOS调用JS
7. JS调用iOS WKScriptMessageHandler

加载网页

[webView loadRequest:request];

光就加载是不是感觉没什么改动？确实也没怎么改动~

但是WKWebView创建的时候可比UIWebView丰富太多了，配置方便，主要包括两点：

1. 注册JS调动iOS的方法

   WKWebView对于原生和JS的交互上面进行了大改动，（大呼一口气）比它的前辈UIWebview方便了不少。但如果想要在JS端调用iOS的方法，需要先注册，注册可以在创建时注册，可也以另外选择合适的时机，比如网页加载完成时。

   WKUserContentController *userController = [[WKUserContentController alloc] init];
    [userController addScriptMessageHandler:self name:@"funcName"];
   

2. 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确实清晰方便不少，大家也赶紧试试吧。