网易新闻客户端iOS版本中新闻详情页（UIWebView）技术实现的分析探讨

本篇博客背景：
1：本人是网易新闻app的忠实用户，大约天天有2~3个小时的使用时间。
2：在如此频繁且长时间的使用过程当中，几乎没有遇到过闪退的状况。
不得不佩服人家优化的效果之好，也不得不感叹本身和大牛之间的差距之大。（不是作广告。。是真爱。。）
3：一直都以为网易新闻app的详情页作的特别好。前段时间，看到网上有很多人说网易新闻的详情页是用coreText（富文本）实现的。以为很好笑，只是一个复制文字的功能，coreText便没法实现，便能排除coreText的可能性了。
但是这些错误的言论在网上残留传播，毒害新手，这里但愿你们注意，互联网上的信息是须要你们辨而识之，思然后取。不要盲目相信。实际上，新闻详情页明显是经过UIWebView实现的。
4：基于以上三点，决定写篇博客分析一下。
5：本文谢绝转载，若是转载，请注明源地址：
http://386502324.blog.163.com/blog/static/11346937720154293438399/

技术实现分析
一：接口分析
如下是我抓取的网易新闻的接口，若是有人想本身抓，推荐使用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：很是高效。
https://github.com/rs/SDWebImage

五：其余
一些其余功能的现实还请你们本身思考。

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

 

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