网易新闻app内容详情页实现分析

/ 8评 / 0

前言:最近我也写了个资讯app并且开源了,这里我就以我写的这个app为例,来简单实现网易新闻详情页。相信大家都玩过不少资讯新闻app,今日头条、网易新闻、新浪新闻。。等等各种新闻app都是非常优秀和值得借鉴学习的。测试截图我已经开启了慢网速模式,所以加载速度比较慢,这样才能明显的看到我们的需求。

功能分析

1

图片缓存:

详情正文是在请求到数据后才开始刷新页面,并且第一次刷新后,会先加载文字内容部分,而图片会先以同等尺寸的占位图代替,等图片下载完成后,会自动替换掉占位图。如果下一次再次打开这篇文章,文字和图片会同时加载出来,说明上次加载图片已经将图片给缓存了。

2

图片点击:

点击页面内的图片,会加载一个图片浏览器用于单独展示图片。实现这个功能,被点击的图片必定会有事件监听,我们可以为图片添加js点击事件,来监听图片点击。在图片点击后,向swift发送事件,并传递被点击的图片或者图片的索引。

3

修改字体:

动态修改字体文件和文字尺寸功能在网页中非常容易实现,因为网页中我们所看到的样式其实基本都是由css(层叠样式表)来控制的。我们这里也不例外,也是通过修改css来实现这个效果。在我们点击了修改字体或者文字尺寸按钮后,通过调用js方法,传递字体或字号,修改字体并重新计算页面的高度。从而实现动态修改字体的功能。

接口分析

从功能分析可以大致猜出接口返回数据的结构,比如图片缓存部分。缓存图片会先用同等尺寸的占位图占位,可以得出我们一定需要在图片为加载前获取到图片的尺寸位置。根据参考网易新闻的api接口,仿写出如下api接口,这里我就贴数据吧。

{
  "data" : {
    "newstime" : "1465999158",
    "title" : "长着人类牙齿的鱼",
    "titlepic" : "http:\/\/photo.6ag.cn\/2016-06-15\/small12564f1952c7eb18827cc1d8944f631e1465999276.jpg",
    "morepic" : [

    ],
    "classname" : "动物植物",
    "top" : "0",
    "smalltext" : "事情发生在加利福尼亚州,上周末,一位名叫 Gallo的男子在当地池塘里钓鱼,当他感到鱼钩被咬住的时候,用力一提,一条鱼上钩了 。但在他准备提起鱼竿取下这条鱼的时候,鱼咬断了线,坠落到了地上,这时候他开始注意到情况不对劲了",
    "havefava" : "0",
    "flashurl" : "",
    "down" : "0",
    "titleurl" : "http:\/\/www.6ag.cn\/\/dongwuzhiwu\/2654.html",
    "keyid" : "",
    "id" : "2654",
    "onclick" : "8",
    "allphoto" : [
      {
        "pixel" : {
          "width" : 600,
          "height" : 409
        },
        "caption" : "长着人类牙齿的鱼",
        "url" : "http:\/\/photo.6ag.cn\/2016-06-15\/12564f1952c7eb18827cc1d8944f631e.jpg",
        "ref" : "<!--IMG#0-->"
      },
      {
        "pixel" : {
          "width" : 599,
          "height" : 353
        },
        "caption" : "长着人类牙齿的鱼",
        "url" : "http:\/\/photo.6ag.cn\/2016-06-15\/1e86e55e38ff93df99a636a3f1c4b989.jpg",
        "ref" : "<!--IMG#1-->"
      }
    ],
    "newstext" : "<p>事情发生在加利福尼亚州,上周末,一位名叫 Gallo的男子在当地池塘里钓鱼,当他感到鱼钩被咬住的时候,用力一提,一条鱼上钩了 。但在他准备提起鱼竿取下这条鱼的时候,鱼咬断了线,坠落到了地上,这时候他开始注意到情况不对劲了。<\/p>\r\n<p>该男子接受新闻采访时称,&ldquo;当鱼落在地上时,我清楚地知道这跟之前见过的任何鱼类都不同。&rdquo;<\/p>\r\n<p>Gallo后来得知他钓上的是一只锯腹脂鲤(也称&ldquo;切蛋鱼&rdquo;,传言会咬食男性睾丸),杂食性鱼类,原产于南美洲的亚马逊流域,靠着一张诡异长着人类牙齿的嘴著名。该物种属于食人鱼的近亲,由于水族馆宠物店养殖的疏忽,现在已经在美国的很多河流和池塘中发现了其踪迹。在美国,食人鱼深受青少年人群的喜爱,因此为满足这一需求,宠物商店大肆进货,由于食物充足,缺少天敌,很多食人鱼在室内的鱼缸内过度生长,在成年甚至可以达到10-12英寸长。<\/p>\r\n<p><!--IMG#0--><\/p>\r\n<p>&ldquo;切蛋鱼&rdquo;首次于新泽西州被捕获后,近几年来在各地接连不断地上了头条,先后出现在密歇根州,华盛顿州,伊利诺斯州,巴黎,斯堪的纳维亚,巴布亚新几内亚。在纽约甚至有一只人工捕获饲养的黑色切蛋鱼,取名buttkiss,人们认为这可能是这几座城市中幸存的最古老的鱼。由于考虑到buttkiss属于侵入的品种,人们并不打算将其放回自然里。<\/p>\r\n<p><\/p>\r\n<p>切蛋鱼有着一副怪异夸张的人类牙齿。它们使用牙齿去研磨食物,从树上掉落到水里的坚果便成了切蛋鱼的食物。<\/p>\r\n<p><!--IMG#1--><\/p>\r\n<p>&ldquo;亚马逊流域中的切蛋鱼通常都是素食主义者。&rdquo;生物学家Jeremy Wade在《时尚先生》(Esquire)中说道。&ldquo;如果这儿的食物供给正常,它们会很高兴的。食人鱼主要食用从树上掉入水中的坚果和种子,用其非常强大的牙齿去咬开,毕竟有一些坚果还是很难咬开的。&rdquo;<\/p>\r\n<p>在2013年,食人鱼的出现引发恐慌后,它们常被人们贴上错误的标签,有咬食男人的睾丸的行为。Wade称人们可能并不会相信这种传言,但也许他们对于选择裸泳上更加谨慎了。<\/p>\r\n<p>&ldquo;是的,你的蛋蛋有可能会被咬,但是可能性很低。如果你真的不放心,就多穿点,我觉得你应该会没事,&rdquo;Jeremy补充说。<\/p>",
    "otherLink" : [

    ],
    "keyboard" : "人类牙齿",
    "classid" : "13",
    "plnum" : "0",
    "befrom" : "世界未解之谜大全"
  },
  "err_msg" : "success",
  "info" : "读取信息内容成功!"
}

我们新闻正文部分的图片用指定的占位符替代,并单独返回所有图片信息数组。我们在加载页面的时候,根据图片信息数组返回的图片尺寸和占位符,将正文部分的占位符先替换成本地的一张占位图片连接。

图片缓存:

正文部分是使用UIWebView来加载的,所以图片我们肯定不能直接使用UIImage这样的原生对象。实现这个图片缓存我这里使用的是YYWebImage进行的图片缓存,默认YY的磁盘缓存策略是超过20kb才会存储本地文件,其余存储到数据库中。所以,我们需要修改第三方库的缓存策略限制,以满足我们的需求。

缓存流程:

先拼接我们的正文部分的HTML代码,img标签的src属性则先赋值一个本地图片,并指定宽、高。然后在img标签中添加一个id并赋值图片的url,用于标识图片。

下面是完整代码,包括字体替换、图片点击事件部分。

func loadWebViewContent(model: JFArticleDetailModel) {
    
    // 如果不熟悉网页,可以换成GRMutache模板更配哦
    var html = ""
    html += "<div class=\"title\">\(model.title!)</div>"
    html += "<div class=\"time\">\(model.befrom!)&nbsp;&nbsp;&nbsp;&nbsp;\(model.newstime!.timeStampToString())</div>"
    
    // 临时正文 - 这样做的目的是不修改模型
    var tempNewstext = model.newstext!
    
    // 有图片才去拼接图片
    if model.allphoto!.count > 0 {
        
        // 拼接图片标签
        for (index, dict) in model.allphoto!.enumerate() {
            // 图片占位符范围
            let range = (tempNewstext as NSString).rangeOfString(dict["ref"] as! String)
            
            // 默认宽、高为0
            var width: CGFloat = 0
            var height: CGFloat = 0
            if let w = dict["pixel"]!!["width"] as? NSNumber {
                width = CGFloat(w.floatValue)
            }
            if let h = dict["pixel"]!!["height"] as? NSNumber  {
                height = CGFloat(h.floatValue)
            }
            
            // 如果图片超过了最大宽度,才等比压缩 这个最大宽度是根据css里的container容器宽度来自适应的
            if width >= SCREEN_WIDTH - 40 {
                let rate = (SCREEN_WIDTH - 40) / width
                width = width * rate
                height = height * rate
            }
            
            // 加载中的占位图
            let loading = NSBundle.mainBundle().pathForResource("www/images/loading.jpg", ofType: nil)!
            
            // img标签
            let imgTag = "<img onclick='didTappedImage(\(index));' src='\(loading)' id='\(dict["url"] as! String)' width='\(width)' height='\(height)' />"
            tempNewstext = (tempNewstext as NSString).stringByReplacingOccurrencesOfString(dict["ref"] as! String, withString: imgTag, options: NSStringCompareOptions.CaseInsensitiveSearch, range: range)
        }
        
        // 加载图片 - 从缓存中获取图片的本地绝对路径,发送给webView显示
        getImageFromDownloaderOrDiskByImageUrlArray(model.allphoto!)
    }
    
    let fontSize = NSUserDefaults.standardUserDefaults().integerForKey(CONTENT_FONT_SIZE_KEY)
    let fontName = NSUserDefaults.standardUserDefaults().stringForKey(CONTENT_FONT_TYPE_KEY)!
    
    html += "<div id=\"content\" style=\"font-size: \(fontSize)px; font-family: '\(fontName)';\">\(tempNewstext)</div>"
    
    // 从本地加载网页模板,替换新闻主页
    let templatePath = NSBundle.mainBundle().pathForResource("www/html/article.html", ofType: nil)!
    let template = (try! String(contentsOfFile: templatePath, encoding: NSUTF8StringEncoding)) as NSString
    html = template.stringByReplacingOccurrencesOfString("<p>mainnews</p>", withString: html, options: NSStringCompareOptions.CaseInsensitiveSearch, range: template.rangeOfString("<p>mainnews</p>"))
    let baseURL = NSURL(fileURLWithPath: templatePath)
    webView.loadHTMLString(filterHTML(html), baseURL: baseURL)
    
    // 已经加载过就修改标记
    isLoaded = true
}

完成拼接后的HTML代码:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" type="text/css" href="../css/article.css">
        <script type="text/javascript" src="../js/article.js"></script>
    </head>
    <body id="container">
        <div class="title">长着人类牙齿的鱼</div><div class="time">世界未解之谜大全&nbsp;&nbsp;&nbsp;&nbsp;06-15 21:59</div><div id="content" style="font-size: 18px; font-family: '';"><p>事情发生在加利福尼亚州,上周末,一位名叫 Gallo的男子在当地池塘里钓鱼,当他感到鱼钩被咬住的时候,用力一提,一条鱼上钩了 。但在他准备提起鱼竿取下这条鱼的时候,鱼咬断了线,坠落到了地上,这时候他开始注意到情况不对劲了。</p>
<p>该男子接受新闻采访时称,&ldquo;当鱼落在地上时,我清楚地知道这跟之前见过的任何鱼类都不同。&rdquo;</p>
<p>Gallo后来得知他钓上的是一只锯腹脂鲤(也称&ldquo;切蛋鱼&rdquo;,传言会咬食男性睾丸),杂食性鱼类,原产于南美洲的亚马逊流域,靠着一张诡异长着人类牙齿的嘴著名。该物种属于食人鱼的近亲,由于水族馆宠物店养殖的疏忽,现在已经在美国的很多河流和池塘中发现了其踪迹。在美国,食人鱼深受青少年人群的喜爱,因此为满足这一需求,宠物商店大肆进货,由于食物充足,缺少天敌,很多食人鱼在室内的鱼缸内过度生长,在成年甚至可以达到10-12英寸长。</p>
<p><img onclick='didTappedImage(0);' src='/Users/feng/Library/Developer/CoreSimulator/Devices/8146D9C3-0D7A-4E1C-92D5-32FE42903A43/data/Containers/Bundle/Application/F786DCF8-42FB-48FF-BA98-6DEF21FDFDB9/LiuAGeIOS.app/www/images/loading.jpg' id='http://photo.6ag.cn/2016-06-15/12564f1952c7eb18827cc1d8944f631e.jpg' width='335.0' height='228.358333333333' /></p>
<p>&ldquo;切蛋鱼&rdquo;首次于新泽西州被捕获后,近几年来在各地接连不断地上了头条,先后出现在密歇根州,华盛顿州,伊利诺斯州,巴黎,斯堪的纳维亚,巴布亚新几内亚。在纽约甚至有一只人工捕获饲养的黑色切蛋鱼,取名buttkiss,人们认为这可能是这几座城市中幸存的最古老的鱼。由于考虑到buttkiss属于侵入的品种,人们并不打算将其放回自然里。</p>
<p></p>
<p>切蛋鱼有着一副怪异夸张的人类牙齿。它们使用牙齿去研磨食物,从树上掉落到水里的坚果便成了切蛋鱼的食物。</p>
<p><img onclick='didTappedImage(1);' src='/Users/feng/Library/Developer/CoreSimulator/Devices/8146D9C3-0D7A-4E1C-92D5-32FE42903A43/data/Containers/Bundle/Application/F786DCF8-42FB-48FF-BA98-6DEF21FDFDB9/LiuAGeIOS.app/www/images/loading.jpg' id='http://photo.6ag.cn/2016-06-15/1e86e55e38ff93df99a636a3f1c4b989.jpg' width='335.0' height='197.420701168614' /></p>
<p>&ldquo;亚马逊流域中的切蛋鱼通常都是素食主义者。&rdquo;生物学家Jeremy Wade在《时尚先生》(Esquire)中说道。&ldquo;如果这儿的食物供给正常,它们会很高兴的。食人鱼主要食用从树上掉入水中的坚果和种子,用其非常强大的牙齿去咬开,毕竟有一些坚果还是很难咬开的。&rdquo;</p>
<p>在2013年,食人鱼的出现引发恐慌后,它们常被人们贴上错误的标签,有咬食男人的睾丸的行为。Wade称人们可能并不会相信这种传言,但也许他们对于选择裸泳上更加谨慎了。</p>
<p>&ldquo;是的,你的蛋蛋有可能会被咬,但是可能性很低。如果你真的不放心,就多穿点,我觉得你应该会没事,&rdquo;Jeremy补充说。</p></div>
    </body>
</html>

加载后,首先我们看到的是正文文字和loading.jpg占位图。

然后开始图片磁盘缓存,首先我们先去缓存中查找是否已经有缓存的图片,如果有则直接使用。没有则根据URL去下载。下载完成后的操作和已经有缓存的操作是相同的。

缓存成功后,我们可以根据url获取到图片在本地磁盘的路径,这个路径我们只要想办法替换掉我们HTML代码里img标签的对应src值就行。

并且每个img标签我们都已经给了一个唯一标识替代,所以很容易实现这一点,我这里使用的是 WebViewJavascriptBridge 来完成js和swift交互的。具体可以百度或者去github看看官方说明,这里就不具体说明了。

下面代码是缓存图片和发送图片路径给js的,重点是 bridge?.send() 方法。

func getImageFromDownloaderOrDiskByImageUrlArray(imageArray: [AnyObject]) {
    
    // 循环加载图片
    for dict in imageArray {
        
        // 图片url
        let imageString = dict["url"] as! String
        
        // 判断本地磁盘是否已经缓存
        if JFArticleStorage.getArticleImageCache().containsImageForKey(imageString, withType: YYImageCacheType.Disk) {
            
            let imagePath = JFArticleStorage.getFilePathForKey(imageString)
            // 发送图片占位标识和本地绝对路径给webView
            bridge?.send("replaceimage\(imageString),\(imagePath)")
        } else {
            YYWebImageManager(cache: JFArticleStorage.getArticleImageCache(), queue: NSOperationQueue()).requestImageWithURL(NSURL(string: imageString)!, options: YYWebImageOptions.UseNSURLCache, progress: { (_, _) in
                
                }, transform: { (image, url) -> UIImage? in
                    return image
                }, completion: { (image, url, type, stage, error) in
                    dispatch_sync(dispatch_get_main_queue(), {
                        
                        // 确保已经下载完成并没有出错 - 这样做其实已经修改了YYWebImage的磁盘缓存策略。默认YYWebImage缓存文件时超过20kb的文件才会存储为文件,所以需要在 YYDiskCache.m的171行修改
                        guard let _ = image where error == nil else {return}
                        
                        let imagePath = JFArticleStorage.getFilePathForKey(imageString)
                        // 发送图片占位标识和本地绝对路径给webView
                        self.bridge?.send("replaceimage\(imageString),\(imagePath)")
                    })
            })
        }
        
    }
    
}

然后js在接收到发送的消息后,根据id替换img的src值。

connectWebViewJavascriptBridge(function (bridge) {
                                        // 从iOS  bridge.send 方法过来的 就会调用到这个方法
                                        bridge.init(function (message, responseCallback) {
                                        
                                            if (message.match("replaceimage")) {
                                                var index = message.indexOf(",")
                                                // 截取图片占位标识 例如:replaceimagehttp://photo.6ag.cn/2016-06-06/8ed0df6ea3282c42caa0b29c0cfc1832.jpg
                                                var messagereplace = message.substring(0, index)
                                                // 截取到本地图片的路径 例如:/Users/feng/Library/Developer/CoreSimulator/Devices/8146D9C3-0D7A-4E1C-92D5-32FE42903A43/data/Containers/Bundle/Application/A6A30D66-A27A-4751-A014-63AA86988676/LiuAGeIOS.app/loading.png
                                                var messagepath = message.substring(index + 1)
                                                
                                                messagereplace = messagereplace.replace(/replaceimage/, "")
                                                element = document.getElementById(messagereplace)
                                                
                                                if (element.src.match("loading")) {
                                                    element.src = messagepath
                                                }
                                            }
                                            
                                        })
})

此致,缓存图片并替换占位图就完成了。

图片点击:

给图片添加点击事件,也就是给img标签添加一个onclick事件,这个事件将接收一个数值参数,标识点击的是哪一张图片。并在事件函数中将被点击的图片的标识数值发送给swift,在swift中处理后续操作。

下面代码是HTML拼接的代码:

// img标签
let imgTag = "<img onclick='didTappedImage(\(index));' src='\(loading!)' id='\(dict["url"] as! String)' width='\(width)' height='\(height)' />"

下面代码是事件处理函数:

// 图片点击事件
function didTappedImage(index) {
    bridge.send(index)
}

bridge.send发送的消息在下面方法中接收(OC方法):

+ (instancetype)bridgeForWebView:(WVJB_WEBVIEW_TYPE*)webView webViewDelegate:(WVJB_WEBVIEW_DELEGATE_TYPE*)webViewDelegate handler:(WVJBHandler)handler;

我们是使用的swift,下面是我处理的代码:

private func setupWebViewJavascriptBridge() {
    
    bridge = WebViewJavascriptBridge(forWebView: webView, webViewDelegate: self, handler: { (data, responseCallback) in
        responseCallback("Response for message from ObjC")
        
        // 接收js发送过来的图片点击事件
        let newsPhotoBrowserVc = JFNewsPhotoBrowserViewController()
        newsPhotoBrowserVc.photoParam = (self.model!.allphoto!, Int(data as! NSNumber))
        self.presentViewController(newsPhotoBrowserVc, animated: true, completion: {})
    })
}

至此,图片点击交互已经完成。上文中用到的WebViewJavascriptBridge如果大家比较陌生,可以先去学习一下,再来看这篇文章。

修改字体:

修改字体也比较简单,我是直接调用预先写好的js代码,传入字体、字号参数进行修改。

设置字体字号:

// 设置字体
function setFontName(name) {
    var content = document.getElementById('content');
    content.style.fontFamily = name;
}

// 设置字体大小
function setFontSize(size) {
    var content = document.getElementById('content');
    content.style.fontSize = size + "px";
}

修改字体并重新加载:

// 自动布局webView,HTML内容高度也可以通过KVO监听webView的contentSize来获取(待测)
func autolayoutWebView() {
    
    let result = webView.stringByEvaluatingJavaScriptFromString("getHtmlHeight();")
    if let height = result {
        webView.frame = CGRectMake(0, 0, SCREEN_WIDTH, CGFloat((height as NSString).floatValue) + 20)
        tableView.tableHeaderView = webView
        self.activityView.stopAnimating()
    }
}

// 修改了正文字体大小,需要重新显示 添加图片缓存后,目前还有问题
func didChangeFontSize(fontSize: Int) {
    
    webView.stringByEvaluatingJavaScriptFromString("setFontSize(\"\(fontSize)\");")
    NSUserDefaults.standardUserDefaults().setInteger(fontSize, forKey: CONTENT_FONT_SIZE_KEY)
    autolayoutWebView()
}

// 修改了正文字体
func didChangedFontName(fontName: String) {
    webView.stringByEvaluatingJavaScriptFromString("setFontName(\"\(fontName)\");")
    NSUserDefaults.standardUserDefaults().setObject(fontName, forKey: CONTENT_FONT_TYPE_KEY)
    autolayoutWebView()
}

如果还有什么不明白的地方可以在本文章后面回复,我看到会第一是时间回复你。

demo比较大:https://github.com/6ag/LiuAGeIOS

  1. rambos说道:

    从GitHub上下载了一个项目,发现我和你的名字一模一样(zjf),为什么你是大神,我编程三年却还是个小菜鸟?难道真的是有天赋的嘛,看了你写的代码再看我自己写的代码简直想吐啊,怎么才能变成大神啊,是不是该转行?

  2. 小菜鸟说道:

    大神 问题下 ,现在网易新闻详情中的图片在加载资源的时候 每个image会有一个loading,这个loading 的进度快慢还不一样 这个是如何实现的啊?还有就是他们的缓存策略,感觉并不像简单的存取,好像还有服务器的配合,这里面有什么道道吗?

  3. […] 爽!weex用数据去渲染界面和iOS native 先写界面再填充数据的思想还是很不一样的,正如一系列复杂的详情类页面一样,用native不管是oc还是swift写的时候那叫一个蛋疼啊,如果能够根据数据实时的去渲染页面(从一堆数据中遇到图片就显示图片,遇到表格就显示表格,遇到文字就显示文字,那且不是比native获取到数据之后拼接成html的格式然后使用webView去加载省事简单了许多),把数据组装成html在webView中显示是目前大多数详情类页面采用的方案。可参考这篇文章:https://blog.6ag.cn/1514.html […]

  4. dsk说道:

    为什么GitHub上的代码pods文件夹丢失

  5. sunboy130说道:

    请问有没有oc版本的代码?

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注