WKWebView

WebKit中更新的WKWebView控件的新特性与使用方法，它很好的解决了UIWebView存在的内存、加载速度等诸多问题。

一、WKWebView新特性

在性能、稳定性、功能方面有很大提升（最直观的体现就是加载网页是占用的内存:

• 允许JavaScript的Nitro库加载并使用（UIWebView中限制）；

• 支持了更多的HTML5特性；

• 高达60fps的滚动刷新率以及内置手势；

将UIWebViewDelegate与UIWebView重构成了14类与3个协议查看苹果官方文档；

二、WebKit框架概览

WebKit概览.png

WebKit的14类与3个协议

WKWebView：网页的渲染与展示，通过WKWebViewConfiguration可以进行自定义配置。

WKWebViewConfiguration：这个类专门用来配置WKWebView。

WKPreference:这个类用来进行相关webView设置。

WKProcessPool：这个类用来配置进程池，与网页视图的资源共享有关。

WKUserContentController：这个类主要用来做native与JavaScript的交互管理。

WKUserScript：用于进行JavaScript注入。

WKScriptMessageHandler：这个类专门用来处理JavaScript调用native的方法。

WKNavigationDelegate：网页跳转间的导航管理协议，这个协议可以监听网页的活动。

WKNavigationAction：网页某个活动的示例化对象。

WKUIDelegate：用于交互处理JavaScript中的一些弹出框。

WKBackForwardList：堆栈管理的网页列表。

WKBackForwardListItem：每个网页节点对象。

初始化webView

webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
//WKUIDelegate
webView.UIDelegate = self;
//WKNavigationDelegate
webView.navigationDelegate = self;
//UIScrollViewDelegate
webView.scrollView.delegate = self;
//允许侧滑返回
webView.allowsBackForwardNavigationGestures = true;

[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];


//监听webView的相关属性
//监听是否存在二级页面
[webView addObserver:self forKeyPath:@"canGoBack" options:NSKeyValueObservingOptionNew context:nil];

//监听加载进度
[webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];

WKUIDelegate

//Alert弹窗代理
-(void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
}

//Confirm按钮点击代理
-(void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler{
}

// 输入框代理
-(void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable))completionHandler{
    completionHandler(@"runJavaScriptTextInputPanelWithPrompt");
    NSLog(@"runJavaScriptTextInputPanelWithPrompt");
}

WKNavigationDelegate

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
    //是否允许发起请求
    decisionHandler(WKNavigationActionPolicyAllow);
}

- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler{
    //是否允许接收数据响应
    decisionHandler(WKNavigationResponsePolicyAllow);
}

- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation{
    //开始网页请求
    NSLog(@"didStartProvisionalNavigation");
}

- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(null_unspecified WKNavigation *)navigation{
    //链接重定向
    NSLog(@"didReceiveServerRedirectForProvisionalNavigation");
}

- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error{
    //请求失败、请求出错
    NSLog(@"didFailProvisionalNavigation");
}

- (void)webView:(WKWebView *)webView didCommitNavigation:(null_unspecified WKNavigation *)navigation{
    //接收到请求数据
    NSLog(@"didCommitNavigation");
}
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation{
    //成功完成请求
    NSLog(@"didFinishNavigation = %@",webView.backForwardList.backItem.title ? : @"首页");
}

WKScriptMessageHandler

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
}

原生App和JS交互

1. js调用原生方法

//注册本地原生方法供h5 webkit 唤起
[webView.configuration.userContentController addScriptMessageHandler:self name:@"say_hello"];

//MARK: - WKScriptMessageHandler(回调处理)
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    
}

2. 原生调用js方法

webview 的evaluateJavaScript方法，参数为所调用H5函数的函数名及所需参数

NSDictionary *para = @{@"name":@"detail",@"type":@"2"};
NSError *error;
NSData *paraData = [NSJSONSerialization dataWithJSONObject:para options:0 error:&error];
NSString *paraStr = [[NSString alloc] initWithData:paraData encoding: NSUTF8StringEncoding];
NSString *funcStr = [NSString stringWithFormat:@"hello(%@)",paraStr];

//调用js function
[webView evaluateJavaScript:funcStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
}];