模仿騰訊新聞作了款新聞閱讀小程序

    點擊上方 月小水長 並 設爲星標，第一時間接收乾貨推送

這是 月小水長 的第  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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。