demo动效GIF.gif
WKWebView介绍
- WKWebView 是苹果在 iOS 8 中引入的新组件，目的是给出一个新的高性能的 Web View 解决方案，摆脱过去 UIWebView 的老旧笨重特别是内存占用量巨大的问题。
- WKWebView 的优点
- 1.将浏览器内核渲染进程提取出 App，由系统进行统一管理，这减少了相当一部分的性能损失。
- 2.js 可以直接使用已经事先注入 js runtime 的 js 接口给 Native 层传值，不必再通过苦逼的 iframe 制造页面刷新再解析自定义协议的奇怪方式。
- 3.支持高达 60 fps 的滚动刷新率，内置了手势探测
- 4.更优雅的与JS的交互方式
常用的新增加属性
1.estimatedProgress
- 有了它 你不在需要苦逼的用UIwebView做假的进度条了
2.title
- 和UIwebView原来的标题一样，只不过不再是通过js去获取了
3.WKWebViewConfiguration
- 这个是配置js与wk的核心配置对象，后面会提及。
以上三个属性 除了WKWebViewConfiguration它以外都是用KVO的形式去监听
[self.wkWebView addObserver:self
forKeyPath:@"estimatedProgress"
options:NSKeyValueObservingOptionNew
context:nil];
[self.wkWebView addObserver:self
forKeyPath:@"title"
options:NSKeyValueObservingOptionNew
context:nil];
[self.wkWebView addObserver:self
forKeyPath:@"loading"
options:NSKeyValueObservingOptionNew
context:nil];
然后我们去KVO处理里面去做一些事
#pragma mark - 观察者监听
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context{
if ([keyPath isEqualToString:@"estimatedProgress"]) {
self.progresslayer.opacity = 1;
self.progresslayer.frame = CGRectMake(0, 0, kScreenWidth*[change[@"new"] floatValue], estimatedProgressHeight);
NSLog(@"%@",change[@"new"]);
if ([change[@"new"] floatValue] == 1) {
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
self.progresslayer.opacity = 0;
NSString *js = @"window.alert('欢迎体验WkWebView!');";
[self.wkWebView evaluateJavaScript:js completionHandler:nil];
});
}
}else if([keyPath isEqualToString:@"title"]){
NSString *title = change[@"new"];
self.titleLabel.text = title;
}else if([keyPath isEqualToString:@"loading"]){
//做一些加载的事
}else{
[super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
}
if(!self.wkWebView.loading){
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
self.progresslayer.opacity = 0;
});
}
}
新的代理方法
1.WKUIDelegate
与JS原生的alert、confirm、prompt交互，将弹出来的实际上是我们原生的窗口,并且要强调的是在代理里拿到数据后，必须又原生传回给JS
#pragma mark - WKUIDelegate
// 在JS端调用alert函数时，会触发此代理方法。
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"" message:message preferredStyle:UIAlertControllerStyleAlert];
[alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler();
}]];
[self presentViewController:alert animated:YES completion:NULL];
}
// JS端调用confirm函数时，会触发此方法
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler{
}
// JS端调用prompt函数时，会触发此方法
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler{
}
/** webview关闭事件 */
- (void)webViewDidClose:(WKWebView *)webView;
{
}
2.WKNavigationDelegate
这里处理web导航操作
/** 在发送请求之前，决定是否跳转
* 与UIWebView的- (BOOL)webView:(UIWebView *)webView
shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType相当;
*/
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
NSString *urlString = [[navigationAction.request URL] absoluteString];
// urlString = [urlString stringByRemovingPercentEncoding];
/**这这去做图片显示的操作
* 网页没请求完不会进这个方法的
* 这里还有一个小问题，就是测试了下百度的链接，有些图片是进下个层级的链接，它也截取到了这里需要改进下
*/
if ([urlString hasPrefix:@"myweb:imageClick:"]) {
NSString *imageUrl = [urlString substringFromIndex:@"myweb:imageClick:".length];
NSLog(@"imageUrl%@",imageUrl);
if ([_images containsObject:imageUrl]) {
NSInteger imageIndex = [_images indexOfObject:imageUrl];
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"" message:[NSString stringWithFormat:@"你点了第%ld张照片",imageIndex] preferredStyle:UIAlertControllerStyleAlert];
[alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
}]];
[self presentViewController:alert animated:YES completion:NULL];
}
decisionHandler(WKNavigationActionPolicyCancel);
}else{
decisionHandler(WKNavigationActionPolicyAllow);
}
}
/// 网页加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
[self getImageUrlByJS:webView Imageblock:^(NSArray *images) {
NSLog(@"获得的图片总数：%@",images);
_images = images;
}];
[self refreshbackBottomState];
}
/** 失败*/
- (void)webView:(WKWebView *)webView didFailNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error;
{
[self refreshbackBottomState];
}
/** 在收到响应后，决定是否跳转 */
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;
{
decisionHandler(WKNavigationResponsePolicyAllow);
}
/** 开始导航跳转时会回调*/
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation {
NSLog(@"%s", __FUNCTION__);
}
/** 页面内容到达main frame时回调*/
- (void)webView:(WKWebView *)webView didCommitNavigation:(null_unspecified WKNavigation *)navigation {
NSLog(@"%s", __FUNCTION__);
}
// 对于HTTPS的都会触发此代理，如果不要求验证，传默认就行
// 如果需要证书验证，与使用AFN进行HTTPS证书验证是一样的
- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential *__nullable credential))completionHandler {
NSLog(@"%s", __FUNCTION__);
completionHandler(NSURLSessionAuthChallengePerformDefaultHandling, nil);
}
// 9.0才能使用，web内容处理中断时会触发
- (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView {
NSLog(@"%s", __FUNCTION__);
}
3.WKScriptMessageHandler
这就是js与OC交互的处理位置的地方
#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;
{
if ([message.name isEqualToString:@"Xxx"]) {
/**
*打印所传过来的参数，只支持NSNumber, NSString, NSDate, NSArray,NSDictionary, and NSNull类型
*/
NSLog(@"%@", message.body);
}
}
js与wk内容的交互
- 在创建WKWebView之前，需要先创建配置对象，用来做一些配置
- 简单总结就是几点：
WK不再需要像webView那样去截取Url了- 配置 WKWebViewConfiguration
- 注入js对象
- 去WKScriptMessageHandler代理中接收，然后处理JS传递过来的事件和参数
/** 偏好设置也没有必须去修改它，都使用默认的就可以了，除非你真的需要修改
* WKUserContentController是用于给JS注入对象的，注入对象后，JS端就可以使用：
* window.webkit.messageHandlers.<name>.postMessage(<messageBody>)来调用发送数据给iOS端
* 比如：window.webkit.messageHandlers.Xxx.postMessage({body: '传数据'});
*/
- (WKWebViewConfiguration *)config
{
if (_config == nil) {
WKWebViewConfiguration *config =[[WKWebViewConfiguration alloc]init];
// 设置偏好设置
config.preferences = [[WKPreferences alloc] init];
// 默认为0
config.preferences.minimumFontSize = 10;
// 默认认为YES
config.preferences.javaScriptEnabled = YES;
// 在iOS上默认为NO，表示不能自动通过窗口打开
config.preferences.javaScriptCanOpenWindowsAutomatically = NO;
/**
* 这个name注入JS对象名称Xxxx，当JS通过Xxx来调用时，
* JS对象可以注入多个，用于不同的功能
* 我们可以在WKScriptMessageHandler代理中接收到
*/
[config.userContentController addScriptMessageHandler:self name:@"Xxx"];
_config = config;
}
return _config;
}
wk与js交互
主要就是通过
- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ __nullable)(__nullable id, NSError * __nullable error))completionHandler;来实现
WK.png
简单举例
NSString *js = @"window.alert('欢迎体验WkWebView!');";
[self.wkWebView evaluateJavaScript:js completionHandler:nil];
对应的就会触发WK alert代理
