美文网首页
WKWebView新闻详情界面

WKWebView新闻详情界面

作者: 金蛇郎君木子肆 | 来源:发表于2018-01-30 11:50 被阅读0次

    起因

    对于展示新闻详情界面,一开始试过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;
    

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

    相关文章

      网友评论

          本文标题:WKWebView新闻详情界面

          本文链接:https://www.haomeiwen.com/subject/zvaqzxtx.html