模仿腾讯新闻作了款新闻阅读小程序

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

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

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

它来源于一个大做业，要求以下：

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

基本思路

该新闻组系统的开发主要分为前端的界面设计和后端的功能实现两个部分，前端使用微信小程序组件展现新闻界面，后端采用基于Python语言的 Flask 轻量级框架实现相应功能。

首先，为了获取真实的新闻数据，本系统使用网络爬虫技术每日定时从腾讯新闻爬取新闻信息，并将这些数据插入到数据库中进行保存。

而后，在服务器上搭建Python运行环境和部署Flask框架，并在虚拟环境中运行后台程序。以后，前端小程序部分将用户请求以HTTP请求的方式发送到后端进行执行，并将返回的新闻结果进行展现。

经过基于WEB的新闻组系统，用户能够订阅喜爱的新闻组，而且浏览新闻组中的文章。该系统能够跟踪用户阅读多的文章使其再也不显示，还提供对旧文章的搜索功能。除此以外，该系统还提供文章的评分服务，高亮显示高评分的文章，从而帮助用户快速过滤低分的文章。

总体效果

后端启动以下：

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

小程序首页

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

注册

若用户未进行注册，则能够进行注册操做。

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

登陆

用户能够在首页点击“登陆”按钮进行注册登陆；

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

订阅

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

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

实现细节

富文本解析

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

评分组件及业务

小程序官方也没有提供评分组件，须要自定义或者直接使用别人定义好的，这里采用的是 wux 。

评分只容许登陆态下的用户进行操做，评分的目的是为了获得用户对该文章的反馈，评分高的文章将会向更多人展现（完成），且会向该评分用户展现更多该与新闻相关的新闻（未完成）。

高分文章高亮显示，只须要在 css 中添加一个属性选择器，控制显示的样式好比颜色便可。

搜索及展现

对于未登陆用户，随机展现近三天评分较高的文章，用户页（用户登陆后，从用户已订阅的新闻组里随机展现未阅读过、评分较高的的新闻。

根据用户输入的关键词与新闻的关键词进行模糊匹配，来查询旧新闻并显示查询结果。这部分有待优化，搜索性能及结果多样性有待提升。

整个的展现包括推荐的、搜索的，其背后都有推荐系统的影子，能够深刻挖掘。

本项目也适合部署上线，用于评价独立推荐系统模型效果，只须要把推荐系统和后台业务逻辑融合。

因为部分缘由，该小程序暂未上线，只在开发环境中运行，给你们提供个实现的思路，抛砖引玉。

本文分享自微信公众号 - 月小水长（inspurer）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。