寫在前面
小程序開發漸進紅利期，更多開發者慕名而來，網上的學習資料也層出不窮，有點眼花繚亂的意思了。在經過一個多月的摸索式學習后，我也終于寫了不算精美的一個小程序。
那為什么寫這篇文章：
-
總結經驗 - 寫文章能帶來更多的思考，為后續開發做準備
-
分享經驗 - 網上的資料真的太多了，希望我這篇文章能有所用
幾個問題
-
適合哪些讀者？ 本文適合對小程序有興趣，且已閱讀過官網：微信小程序開發教程，體驗過官方demo，想進一步學習開發的讀者
-
包含哪些技術點？ 主要包括：微信小程序常見語法、跨頁面傳參、緩存使用、本地數據模擬、第三方UI庫的使用、富文本轉義、數據結構設計、后端數據請求、nodejs服務代理轉發
-
有何特點？ 思路、注釋、源代碼
正文
簡介
取了一個很low的名字“全民精進閱讀”，意為沉浸式閱讀體驗，是一款rss源閱讀小程序，主要功能包括：已關注源、源列表、源文章詳情、源中心。可直接閱讀知乎每日精選、the week等優質中英文源。
使用起來效果是這樣的：
也可以直接微信掃碼體驗：
靈感來源
信息大爆炸時代，每天可看的實在太多，頭條、公眾號、知乎、各垂直平臺、大佬博客......只想找一個“安靜”的地方，便捷地閱讀一些精選的東西。于是乎就想起了RSS，想著將其與小程序結合，抱著試一試的心態寫了一下，順便當做練習。
模塊分析（這個部分是廢話，干貨請直接查閱“代碼實現”部分或者下載源碼體驗）
有了目標，接下來就是具體構思了。
最終需求為實現對RSS源的關注、展示。拆解為如下原子功能：
-
RSS源關注
-
RSS源已關注展示
-
RSS源內容列表展示
-
RSS源文章詳細內容展示
-
RSS源取消關注
同時，為了能夠選擇到想關注的RSS源以及能有一個有效的反饋渠道和聲明，還需兩個個功能：
-
RSS源推薦列表
-
RSS源簡介
-
RSS源反饋渠道、聲明展示
針對上述功能，進行模塊設計，這里推薦使用UE在線編輯應用墨刀來嘗試完成。 根據《Do not make me think》的原則，可以設計為如下5模塊（頁面）：
-
已關注源展示
-
源中心
-
源內容展示
-
源文章詳細展示
-
更多
各模塊間的交互如下圖（省略返回）：
關于UI設計，作為前端開發首先能想到的就是宮格--簡明扼要，很符合預期。所以就沒有做專門的UI設計，在開發過程中“隨機應變”。
說了辣么多，該亮代碼了。。。
代碼實現
技術準備
根據以上部分的分析，已經把小程序的所有功能點羅列出來了，現在做技術分析：
-
整體而言，需要第三方UI庫。經過搜索，發現兩款不錯的：一個是有贊的zanui，一個是美麗說的minui。因為我對該小程序的預期樣式和zanui更接近，且zanui可以只引入部分模塊，我選擇了zanui。
-
針對各功能點
-
RSS源關注：帶參數頁面跳轉、彈框（微信彈框展示信息太少，需用zanui）
-
RSS源已關注展示：宮格布局、數據結構設計
-
RSS源內容列表展示：RSS數據結構分析、布局
-
RSS源文章詳細內容展示：跨頁面傳參、富文本展示（微信沒有
標簽，需第三方庫來實現）
-
RSS源取消關注：長按取消、數據緩存刷新
-
RSS源推薦列表：宮格布局、數據結構設計
-
RSS源簡介：文本展示（注意微信中標簽中的才能被選中復制）
-
RSS源反饋渠道、聲明展示：簡單文本展示
具體實現
做好準備之后，就可以在微信開發者工具內開發了。 首先，初始化項目后，修改創建出如下目錄：
├── app.js
├── app.json
├── app.wxss
├── data 本地數據
| └── rss.js
├── pages 頁面
| ├── detail 源文章詳細展示
| | ├── detail.js
| | ├── detail.json
| | ├── detail.wxml
| | └── detail.wxss
| ├── index 源內容展示
| | ├── index.js
| | ├── index.json
| | ├── index.wxml
| | └── index.wxss
| ├── more 更多
| | ├── more.js
| | ├── more.json
| | ├── more.wxml
| | └── more.wxss
| ├── rsscenter 源中心
| | ├── rsscenter.js
| | ├── rsscenter.json
| | ├── rsscenter.wxml
| | └── rsscenter.wxss
| └── rssed 已關注源展示
| ├── rssed.js
| ├── rssed.json
| ├── rssed.wxml
| └── rssed.wxss
├── project.config.json
├── utils 通用資源
| └── util.js
└── wxParse 富文本轉義庫
|
頁面一：rssed 已關注源展示
考慮到用戶實際操作流，進入小程序后首先進入的就應該是已關注的源展示，新用戶訪問到的是空頁面。用戶可在頁面操作觸發添加關注、刪除已關注。
-
宮格布局與第三方UI庫的使用
對于已關注的源，關鍵信息是源名稱、源logo。因此，基于清爽設計，采用宮格布局，這里使用的是zanui的柵格系統。從zanui的源碼（本文使用的是v1.9.91版本）中找到柵格系統組件dist/col/index.wxss，將內容復制到項目的app.wxss中，當作通用樣式，wxml參照zanui源碼中的/pages/layout/index.wxml。
柵格系統中對高度沒有做控制，需要自行實現正方形方塊，添加如下wxss代碼：
.zan-col {
background-color: #39a9ed;
height: 25vw;
text-align: center;
padding-top: 60rpx;
color: #fff;
position: relative;
}
.zan-col:nth-child(odd) {
background-color: #66c6f2;
}
|
值得一提的是，第三方UI庫的引入方式除了這種部分引入外，還可以整體引入，方法為：已zanui為例，將其資源文件通過@import直接引入到app.wxss中。
@import "dist/index.wxss";
復制代碼
-
數據結構設計 對于這個已關注源的集合，我們將需要的元數據放入數組，用于宮格渲染。
const rssedData = [
{
title: '知乎每日精選', // 源名稱
favicon: 'https://www.zhihu.com/favicon.ico', // 源logo
rssUrl: 'https://www.zhihu.com/rss', // 源鏈接
},
{
title: 'the weak',
favicon: 'https://theweek.com/favicon.ico',
rssUrl: 'https://theweek.com/rss.xml',
},
];
|
此數據，加載該頁面后從Storage中的取值rssedData，rssedData 在已關注是寫入緩存。 3. 渲染與取消關注 根據數據結構和UI設計，使用wx:for循環渲染出宮格。 由于需要查看、取消關注某個源，因此就需要在元素上添加data-rss-id等值，用于事件綁定與跨頁面傳參。 刪除采用常見的長按出現刪除按鈕，點擊按鈕就刪除的方案。 4. 其他頁的關聯設計 作為主頁面，需要有訪問其他功能也的入口，這里將工業入口放入宮格最后，作為關聯。
頁面二：rsscenter 源中心
對于新用戶而言，訪問過已關注頁面后，緊接著需要訪問的就是源中心了。需要完成下面的功能：
-
RSS源推薦列表展示與數據結構設計 采用和已關注頁相同的布局方式--宮格，樣式復用，數據格式類似但需擴充。
復制代碼
{
title: '知乎每日精選', // 源名稱
link: 'https://www.zhihu.com', // 源官網鏈接
description: '中文互聯網最大的知識平臺，幫助人們便捷地分享彼此的知識、經驗和見解。', // 源簡介
favicon: 'https://www.zhihu.com/favicon.ico', // 源logo
rssUrl: 'https://www.zhihu.com/rss', // 源鏈接
}
|
另外，對于關注的源應該有特殊標識，所以需要對數據做處理，通過對比Storage中rssedData和rss.js文件中的數據，給頁面數據添加rssed（type：boolean）字段。
這里的數據來源于網絡收集，暫時固定寫死在小程序中，因此我提出來放到了項目的/data/rss.js文件中。后續版本，這個放到服務端管理，可以做到動態增刪改。 2. RSS源簡介 采用彈出框的形式，展示基本信息，提供關注按鈕。這里使用了zanui的popup組件，引入方式同柵格系統。
3. RSS源關注 更新Storage，使用wx.reLaunch跳轉至已關注頁。
wx.reLaunch({
url: `../rssed/rssed`,
});
復制代碼
頁面三：源內容展示
采用經典設計，如下圖。
-
源數據處理與node服務 rss是基于XML標準的數據，在小程序中無法直接解析，且小程序的合法requests域名有限，這里可以采用服務器代理的形式來處理。 我這里使用的是基于nodejs的thinkjs框架，在框架內引入專門將rss數據轉為json數據的插件。這個服務后續可以專門寫一篇文章，這里就不展開了，思路就是這樣的。另外rss數據格式有多種，需要做兼容處理。 響應格式為：
{
"errno": 0,
"errmsg": "",
"data": {
"rss": {
"$": {
"version": "2.0",
"xmlns:atom": "http://www.w3.org/2005/Atom"
},
"channel": {
"title": "知乎每日精選",
"link": "http://www.zhihu.com",
"description": "中文互聯網最大的知識平臺，幫助人們便捷地分享彼此的知識、經驗和見解。",
"atom:link": {
"$": {
"href": "http://www.zhihu.com/rss",
"rel": "self"
}
},
"language": "zh-cn",
"copyright": "© 2018 知乎(http://www.zhihu.com)",
"lastBuildDate": "Fri, 03 Aug 2018 16:30:25 +0800",
"ttl": "180",
"item": [{
"title": "如何評價 2018 年菲爾茲獎（fields medal 2018）結果與四位得主的工作？",
"link": "http://www.zhihu.com/question/287977241/answer/458776271?utm_campaign=rss&utm_medium=rss&utm_source=rss&utm_content=title",
"description": "<p></p><br>\n ",
"dc:creator": {
"_": "知識分子",
"$": {
"xmlns:dc": "http://purl.org/dc/elements/1.1/"
}
},
"pubDate": "Fri, 03 Aug 2018 16:30:25 +0800",
"guid": "http://www.zhihu.com/question/287977241/answer/458776271"
},]
}
}
}
}
|
其中的description字段為該文章簡介內容的hmtl文檔，部分源將全部內容放到其中，所以加載的時候可能比較慢。 2. 列表渲染與帶參數跳轉 拿到上述數據之后，對數據進行緩存放入Storage中。然后使用wx:for渲染列表。 頁面跳轉至詳情頁時帶上文章的數組index值：
wx.navigateTo({
url: `../detail/detail?id=${rssItemData}&favicon=${favicon}`,
});
復制代碼
在detail.js中取值
onLoad: function (options) {
this.showDetail(options.id, options.favicon);
},
復制代碼
-
為什么一次性緩存？
-
rss源數據返回的就是全部返回
-
利于用戶體驗，不至于加載列表頁等待之后，切換詳情頁還需要等待。
頁面四：源文章詳細展示
核心就是讀取Storage中的數據，將html富文本轉為wxml。 這里采用的是wxParse庫。將wxParse源碼下載后，拷貝至項目根目錄，然后在/pages/detail/detail.js中引入、調用。
const WxParse = require('../../wxParse/wxParse.js');
...
WxParse.wxParse('article', 'html', rssDataItem.description, that, 5);
...
復制代碼
ps：單獨引入三方庫的好處在于，可以自定義部分標簽的展示，這個根據實際需求而定。
頁面五：更多
從已關注頁面跳轉而來，展示一些額外信息。簡單的文字排版，不贅述。
最后
小程序開發本身并不復雜，但是要做好做優還需要多學習和練習。這款小程序目前也只是停留在能用的階段，還有很多需要完善和優化的地方，希望對大家學習有用。另外，有更好的建議請私我，謝謝大家。
|
