微信小程序富文本解析点击图片放大_模仿腾讯新闻做了款新闻阅读小程序

    点击上方 月小水长 并 设为星标，第一时间接收干货推送

这是 月小水长 的第  55  篇原创干货

这款小程序很早以前就完成了，直到最近才被我翻出来。

它来源于一个大作业，要求如下：

1. 设计并实现一个基于Web的新闻组系统，用户应该可以订阅新闻组，并且浏览新闻组中的文章。
2. 该系统跟踪用户阅读过的文章使它们不会再次显示。
3. 该系统提供对旧文章的搜索支持。
4. 并且还提供文章的评分服务，高分的文章高亮度显示，从而使用户跳过低分的文章。

基本思路

该新闻组系统的开发主要分为前端的界面设计和后端的功能实现两个部分，前端使用微信小程序组件展示新闻界面，后端采用基于Python语言的 Flask 轻量级框架实现相应功能。 首先，为了获取真实的新闻数据，本系统使用网络爬虫技术每日定时从腾讯新闻爬取新闻信息，并将这些数据插入到数据库中进行保存。 然后，在服务器上搭建Python运行环境和部署Flask框架，并在虚拟环境中运行后台程序。之后，前端小程序部分将用户请求以HTTP请求的方式发送到后端进行执行，并将返回的新闻结果进行展示。 通过基于WEB的新闻组系统，用户可以订阅喜好的新闻组，并且浏览新闻组中的文章。该系统可以跟踪用户阅读多的文章使其不再显示，还提供对旧文章的搜索功能。除此之外，该系统还提供文章的评分服务，高亮显示高评分的文章，从而帮助用户快速过滤低分的文章。

整体效果

后端启动如下：

打开微信开发者工具，运行前端小程序如下：

小程序首页

上图是小程序的首页，菜单栏一共包括：全部、军事、娱乐、科技、财政和汽车六个选项，用户可以在“全部”栏中浏览所有板块的新闻，也可以在特定板块的栏目下浏览相对板块的新闻。

注册

若用户未进行注册，则可以进行注册操作。

未注册时，显示用户注册界面，如左图所示；若所输入的账号已存在，则会提示“此账号已注册”，否则注册成功。当注册成功后，显示欢迎用户界面，如右图所示。在成功注册登录之后，可以在“我”选项中，进行对用户的相关操作：修改昵称、修改密码以及订阅的管理。

登录

用户可以在首页点击“登录”按钮进行注册登录；

上图是点击登陆之后的登录注册界面，若用户已注册，则可以直输入账号密码进行登录，箭头1的按钮打开后，会显示用户输入的密码，否则是加密模式；若用户未进行注册，则可以点击箭头2所指向的按钮进行注册。

订阅

在用户登录之后，显示用户订阅的特定板块新闻。如下图：

如上图操作，当用户订阅了军事和娱乐新闻后，用户的首页只显示军事和娱乐新闻，显示结果如下；

实现细节

富文本解析

小程序官方并不支持富文本解析，必须要我们手动引入第三方库，这里采用的是 wxParse ，只要把新闻文本和里面的图片组装成富文本，就能显示出图文并茂且风格多样的新闻内容了，所以抓取新闻内容的时候，不需要单独保存图片本身，节省了大量空间，需要用的时候 wxParse 会自动解析 这样的图片，所以就有了文章前面后台启动时返回的新闻内容截图。

评分组件及业务

小程序官方也没有提供评分组件，需要自定义或者直接使用别人定义好的，这里采用的是 wux 。 评分只允许登录态下的用户进行操作，评分的目的是为了得到用户对该文章的反馈，评分高的文章将会向更多人展示(完成)，且会向该评分用户展示更多该与新闻相关的新闻(未完成)。 高分文章高亮显示，只需要在 css 中添加一个属性选择器，控制显示的样式比如颜色即可。

搜索及展示

对于未登录用户，随机展示近三天评分较高的文章，用户页(用户登录后，从用户已订阅的新闻组里随机展示未阅读过、评分较高的的新闻。 根据用户输入的关键词与新闻的关键词进行模糊匹配，来查询旧新闻并显示查询结果。这部分有待优化，搜索性能及结果多样性有待提高。 整个的展示包括推荐的、搜索的，其背后都有推荐系统的影子，可以深入挖掘。 本项目也适合部署上线，用于评价独立推荐系统模型效果，只需要把推荐系统和后台业务逻辑融合。 由于部分原因，该小程序暂未上线，只在开发环境中运行，给大家提供个实现的思路，抛砖引玉。