网易新闻IOS客户端文章详情页面的分析

原文地址：http://386502324.blog.163.com/blog/static/11346937720154293438399/

可以排除CoreText(富文本)，复制文字的功能CoreText无法实现。可以肯定的是，新闻详情页是通过UIWebView实现的。

技术实现分析:
一：接口分析
以下是抓去的网易新闻的接口，如果有人想自己抓，推荐使用Charles或者paros(如何实现，自行百度)

1：全文字示例接口
http://c.3g.163.com/nc/article/AQ76LHPS00963VRO/full.html
2：图文混排，轻松一刻(典型含有大量的图包含动图)
http://c.3g.163.com/nc/article/AQ4RPLHG00964LQ9/full.html
3：包含有图集(nba)(实际上只有一张图)
http://c.3g.163.com/nc/article/AQ72N9QG00051CA1/full.html

结论：详情页返回的接口是json串，于是排除webview直接加载url的情况

二：Data＋模版生成html
通过接口分析，我们排除了webview直接加载url的可能性。那么如何实现的呢？答案是，加载本地的html。

通过处理接收到的json数据＋本地的html模版，生成可以显示有内容的html串，然后webView加载即可。
在这里，推荐一个第三方的开源html模版项目MGTemplateEngine：
https://github.com/nxtbgthng/MGTemplateEngine
具体用法可以自行google。

三：JS（javascript）和OC的通信
简单来说，就是oc能给JS发消息，JS也可以给OC发消息去让OC调用某个接口。
通过通信，我们生成的Html文件实现了和oc的协同合作。为接下来的问题四打下基础。
对于这个问题。推荐大家使用 WebViewJavascriptBridge：
https://github.com/marcuswestin/WebViewJavascriptBridge
简单配置后，便能高效优雅的实现js和oc的通信。强烈推荐。
网上有很多博客介绍使用方法， 具体用法可以自行google。

四：图片的处理
常 使用网易新闻的用户可以发现，app是提供移动网络下，图片默认不显示的功能，以帮助大家节省流量。当然，在移动网络下，有个别你非常想看的图片，点击空 白图片处，即可下载显示。webview自带的图片下载，明显是无法控制的。那么，咱们如何去实现这个功能呢?这次不卖关子了，直接说明：
1：html字符串处的图片预先加载一张空白图或者本地占位图
2：收到的json串中很容易拿到盛放所有图片的数组
3：检查图片是否已经存在，如果图片已经存在，将图片信息通过字符串的形式发送给JS，JS收到该类型消息后，将img的src进行替换，替换为图片本地路径。
如果图片还未存在，先去下载，下载完成后，给JS发消息，完成img替换，并增加点击进入相册事件。
如果图片下载失败，同样给JS发消息。img指向带有重新下载事件的图片，点击重新下载。
这里，图片的缓存郑重推荐大家使用 SDWebImage：非常高效。
SDWebImage
https://github.com/rs/SDWebImage

五：其他
一些其他功能的现实还请大家自己思考。

六：本文demo
自己简单的写了一个demo，但是没有使用 SDWebImage和 MGTemplateEngine
过几天我修改之后，会传到我的github上，到时候再放上下载链接。
如果有什么问题，欢迎在我的博客留言探讨。

七：更新于6月2日。增加demo下载链接

粗略整理了一下代码。使用了第三方SDWebImage,完成了demo。
PS:两篇新闻有一个大量图片的轻松一刻。还有一篇是普通的仅有一张图片的NBA新闻。
demo：
https://github.com/JokerXu/webViewDemo