网易新闻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

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

网易新闻IOS客户端
网易新闻客户端将为手机用户提供全天24小时滚动即时的新闻资讯,涵盖新闻.娱乐.体育.财经和时尚等32个栏目. 是用来预览新闻咨询类APP.由于网易新闻的新闻页面太多,而且基本上所有界面的实现效果都一样 ...
网易新闻iOS版使用的18个开源组件
***************************^_^**************************************** 网易新闻iOS版在开发过程中曾经使用过的第三方开源类库.组 ...
08 - 文章详情页面
文章详情页面 8-1:开篇从本章开始我们要进入文章详情的页面开发. 在文章详情页面可以展示: 文章标题作者信息发布时间文章内容文章评论同时你可以在这里进行: 作者关注文章评论文章点赞 ...
Python + Django4 搭建个人博客（十）：实现文章详情页面
上篇我们引入了Bootstrap,对博文列表页面进行了一些美化和布局设计. Python + Django4 搭建个人博客(九):Bootstrap实现博客列表页面_李威威wiwi的博客-CSDN博客 ...
【小程序开发之文章详情页面的设计】文章详情页面如何布局
本篇博客是小程序开发系列的第四篇,在上一篇博客中介绍的是首页的制作,除了展示轮播图图片,食谱的封面.名称以及文章的封面和标题这些静态的东西之外我们还需要在点击它们的时候能够跳转到详情页面. 除了在首页 ...
Django:文章详情页面评论功能需要登录后才能使用，登录后自动返回到文章详情页...
背景: 文章详情页正在查看文章,想评论一下写的不错,但是需要先登录才能.页面长这个样子: 方案: 1.点击登录链接时,将该页面的URL传递到登录视图中 request.path获取的是当前页面的相对路 ...
小案例：实现http://www.alloyteam.com/page/0/移动端效果，博客文章列表和文章详情页面
一:案例要求和数据: (1)移动端适配 (2)列表跳详情 (3)回到顶部 (4)上下页 (5)时间格式 (6)解决接口跨域请求访问问题 (7)路由跳转无bug 接口路径均以 http://118.19 ...
安卓IOS客户端调试webview页面的方法，支持实时预览
调试方式手机模拟器调试真实手机调试,安卓和IOS都可以注意事项混合开发的时候经常要用到调试功能,调试webview方法有很多种: 直接让客户端把地址修改成本机ip地址,客户端重新出调试包通过 ...
ios客户端跟h5页面桥接
1.新建Bridge.js模块 function setupWebViewJavascriptBridge(callback) {if (window.WebViewJavascriptBridge) ...

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

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

最新文章

热门文章