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

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

功能分析

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

图片缓存:

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

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

图片点击:

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

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

修改字体:

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

接口分析

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

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

图片缓存:

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

缓存流程:

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

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

完成拼接后的HTML代码:

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

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

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

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

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

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

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

图片点击:

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

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

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

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

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

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

修改字体:

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

设置字体字号:

修改字体并重新加载:

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

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

六阿哥

目前评论:8   其中:访客  4   博主  3   引用   1

  1. avatar rambos 0

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

    • avatar 六阿哥

      @rambos 我也是个打杂的,大神完全是无稽之谈

  2. avatar 小菜鸟 0

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

    • avatar 六阿哥

      @小菜鸟 要处理进度也是可以处理的,图片下载是单独下载的,可以拿到图片的下载进度,然后创建一个进度视图在图片的区域。

  3. avatar dsk 0

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

    • avatar 六阿哥

      @dsk 因为完整项目不用上传Pods文件夹的哦,因为有Profile文件就能直接下载第三方库的

  4. avatar sunboy130 0

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

评论加载中...

来自外部的引用: 1

  • 用Weex实现新闻类app详情页是怎样一种体验? | 秀品折

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: