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