WKWebView新闻详情界面

起因

对于展示新闻详情界面，一开始试过UIWebView、UITextView，

UITextView感觉不够强大，不过是可以展示的

UIWebView在网上搜索一番之后，苹果逐渐在淘汰它，缺点很多，所以我也没用它了，虽然能正常实现功能

所以最后决定用WKWebView

过程

问题 1：图片大小和字体大小

解决：这可以通过注入js代码来显示，经过几番周折是能很好的实现

NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta); var imgs = document.getElementsByTagName('img');for (var i in imgs){imgs[i].style.maxWidth='100%';imgs[i].style.height='auto';}";   
    
WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];

WKUserContentController *wkUController = [[WKUserContentController alloc] init];

[wkUController addUserScript:wkUScript];

WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];

wkWebConfig.userContentController = wkUController;

WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 1) configuration:wkWebConfig];

问题 2:GIF动图

出现这个问题可把我折磨得够呛，我估摸着有一个星期

先说说界面构架吧：

• 一个空的 UIViewController
• 一个全局 CGFloat webViewHeight（通过WKWebView的内容高度得到）
• 在上面添加一个 UITableView：有3个section
  • 第一个section只有一个cell，展示新闻的标题、来源、作者
  • 第二个section只有一个cell，展示新闻的主要内容，这个cell里加入了一个UIScrollView，UIScrollView里面加入了WKWebView，WKWebView里展示新闻的内容
  • 第三个section的cell是动态的，是用来显示评论内容
    最后就是UIViewController的底部添加一个输入框用来评论
    WKWebView 内容的展示是通过KVO来实现的

问题：

当新闻内容有GIF动图的时候，界面无法滑动，不是固定死的那种无法滑动，而是不听话的无法滑动或者说划不动，GIF一直在闪（在此时我是奔溃的，查询了关于WKWebView和HTML的资料，都无法解决）

解决：

然后我就使劲上下滑动，就不信滑不上去（事实证明，通过这样的测试可以发现很多问题，并且也逐渐找到了问题的原因，让真相浮出水面）

点击 Debug View Hierarchy 后
看见section0 的cell 有覆盖现象，加几句代码轻松解决

UITableViewCell *defaultCell = [tableView dequeueReusableCellWithIdentifier:@"DefaultCell"];

if (defaultCell == nil){

  defaultCell = [tableView dequeueReusableCellWithIdentifier:@"DefaultCell" forIndexPath:indexPath];
  
}else {

     while ([defaultCell.contentView.subviews lastObject]!= nil) {
        
        [(UIView *)[defaultCell.contentView.subviews lastObject] removeFromSuperview];
        
      }
}

问题:

然后我对比了正常img的新闻和GIF的新闻，发现：正常img的新闻加载完之后kvo调用之后会自己停下来，但是GIF的新闻一直在调用kvo是根本停不下来啊！

解决：

虽然不能确定就是GIF图片造成它的内容一直变动，但最后我还是换成了在 didFinishNavigation 方法里获取高度 刷新界面

[webView evaluateJavaScript:@"Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight)"
completionHandler:^(id _Nullable result, NSError * _Nullable error) {
    if (!error) {
        NSNumber *height = result;

        self.webViewHeight = [height floatValue] + 30;

        webView.frame = CGRectMake(0, 0, self.view.frame.size.width, [height floatValue]);

        self.scrollView.frame = CGRectMake(0, 0, self.view.frame.size.width, [height floatValue]);

        self.scrollView.contentSize = CGSizeMake(self.view.frame.size.width, [height floatValue]);

        [self.tableView reloadRowsAtIndexPaths:[NSArray arrayWithObjects:[NSIndexPath indexPathForRow:0 inSection:1], nil]withRowAnimation:UITableViewRowAnimationNone];

        }
}];

问题:

没错，我成功了，但也不是很舒服
原因是，section2的cell在第一次向上滑动的时候是对于自身滑动的，不是对于tableView滑动的，现象就是新闻标题那个cell不动，但撒手之后再次滑动就是跟着tableView滑动，我觉得这不科学

解决：

加了两句代码：

WebView.scrollView.scrollEnabled = NO;
self.scrollView.scrollEnabled = NO;

这下子就舒服了，我想应该还会有更好的展示方式或是解决方法，知识的道路上不断探索吧！