码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2015-06-01 11:18:46      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:

本篇博客背景:
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,但是没有使用SDWebImageMGTemplateEngine
过几天我修改之后,会传到我的github上,到时候再放上下载链接。
如果有什么问题,欢迎在我的博客留言探讨。
 
 
 

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

标签:

原文地址:http://www.cnblogs.com/xukunhenchouchang/p/4543322.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!