关于WebKit

最近接手的一个app页面全部用H5写的，使用的是WebKit框架。我之前写的app也有H5页面，不过只有两页，用的是webView，全H5写app用WebKit是很有必要的，在这里推荐两篇文章快速了解WebKit：
iOS 8 WebKit框架概览（上）
iOS 8 WebKit框架概览（下）

打电话失败

然后，问题来啦。app有联系客服功能，点击客服电话，发现电话打不出去。

*注：电话打不出去的意思是压根没有调用电话这个功能，不是没人接啊~ *
题外话： 最近电话号码13585904041很火，我也拿来用一下

通过控制台Log可以发现，请求失败了：

#pragma mark 页面加载失败之后调用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error
{
   NSLog(@"页面加载失败：\n %@",error); 
}

页面加载失败：
Error Domain=NSURLErrorDomain Code=-1002 "unsupported URL" UserInfo={_WKRecoveryAttempterErrorKey=<WKReloadFrameErrorRecoveryAttempter: 0x7fe7f3d7a3c0>, NSErrorFailingURLStringKey=tel:13585904041, NSErrorFailingURLKey=tel:13585904041, NSUnderlyingError=0x7fe7f3d6e260 {Error Domain=kCFErrorDomainCFNetwork Code=-1002 "unsupported URL" UserInfo={NSErrorFailingURLStringKey=tel:13585904041, NSLocalizedDescription=unsupported URL, NSErrorFailingURLKey=tel:010-57745342}}, NSLocalizedDescription=unsupported URL}

看这些Log不要头晕啊，总而言之一句话，不支持打开 tel:13585904041 这个URL，到这里，我们先复习一下打电话的代码。

iOS打电话的代码

方法一：

 [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"tel://10010"]];//打电话```

使用openURL这个API打电话结束后，返回的是系统的拨打电话界面，如何才能返回自己的应用呢？看下面的方法。

#####方法二：
使用UIWebView加载电话，这种是合法的，可以上App Store的。

    UIWebView *callWebview =[[UIWebView alloc] init];
    NSURL *telURL =[NSURL URLWithString:@"tel:13585904041"];
    [callWebview loadRequest:[NSURLRequest requestWithURL:telURL]];
    //记得添加到view上
    [self.view addSubview:callWebview];
还有一种是私有方法，不能上App Store的（自己没试过，有求真精神的可以试试然后告诉我被拒没）。 

[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"telprompt://10010"]];```

到这里我们可以发现UIWebView是可以打开 tel:13585904041 的，但是，很明显，WebKit框架里的WKWebView不支持 打开tel:XXX 这种URL。

解决方法

通过打断点，可以发现打开一个url大概需要依次走以下代理方法（不全）：

#pragma mark 在发送请求之前，决定是否跳转
-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
      NSLog(@"在收到响应前，决定是否跳转");
      decisionHandler(WKNavigationActionPolicyAllow);//允许跳转
}

#pragma mark 页面开始加载时调用
-(void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation
{
    NSLog(@"页面开始加载");
}

#pragma mark  页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;
{
    NSLog(@"页面加载完成");
}

#pragma mark 页面加载失败之后调用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error
{
    NSLog(@"页面加载失败：\n %@",error);
}

在加载一个页面之前会先决定是否跳转，我刚开始设置所有的请求都允许加载，收到@"tel:13585904041"请求后，就进到didStartProvisionalNavigation方法开始打开这个URL，然后就失败了，所以我们需要截掉tel请求。

修改后的代理方法：

#pragma mark 在发送请求之前，决定是否跳转
-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
    NSLog(@"在收到响应前，决定是否跳转");

    NSString *urlString = [[navigationAction.request URL] absoluteString];
    urlString = [urlString stringByRemovingPercentEncoding];//解析url
        
    if ([urlString hasPrefix:@"tel"])//截获电话请求
    {
        //取消WKWebView 打电话请求
        decisionHandler(WKNavigationActionPolicyCancel);
        //用openURL 这个API打电话
        [[UIApplication sharedApplication] openURL:[NSURL URLWithString: urlString];
    }
    else
    {
        decisionHandler(WKNavigationActionPolicyAllow);//允许其他请求
    }
}

修改后就解决啦~

对纯H5的吐槽

即使WebKit比WebView性能好些，但是纯H5页面还是卡死的感觉，用户体验很不好，兼容性也不好（快速开发的省的时间都用来调兼容了然而并没有什么卵用），最后吐槽一句，界面好丑，一点苹果的风格都没了，然后，我们，决定用React Native了~

文章有错误或者不严谨的地方，敬请大家指出，我将及时改正。