寫在前面

小程(cheng)序開發漸進紅(hong)利(li)期(qi)，更多(duo)開發者慕名而來，網上的學習資料也(ye)層出(chu)不窮，有點眼花繚亂的意思了。在經過(guo)一個(ge)多(duo)月的摸(mo)索(suo)式學習后，我也(ye)終于寫了不算(suan)精美(mei)的一個(ge)小程(cheng)序。

那為(wei)什么寫這(zhe)篇文章：

• 總結經驗 - 寫文章能帶來更多的思考，為后續開發做準備
• 分享經驗 - 網上的資料真的太多了，希望我這篇文章能有所用

幾個問題

1. 適合哪些讀者？ 本文適合對小程序有興趣，且已閱讀過官網：微信小程序開發教程，體驗過官方demo，想進一步學習開發的讀者
2. 包含哪些技術點？ 主要包括：微信小程序常見語法、跨頁面傳參、緩存使用、本地數據模擬、第三方UI庫的使用、富文本轉義、數據結構設計、后端數據請求、nodejs服務代理轉發
3. 有何特點？ 思路、注釋、源代碼

正文

簡介

取了一個很low的名字“全(quan)民精(jing)進閱(yue)讀”，意為沉(chen)浸式閱(yue)讀體驗，是一款rss源(yuan)(yuan)閱(yue)讀小(xiao)程序，主(zhu)要功能包括：已關注源(yuan)(yuan)、源(yuan)(yuan)列(lie)表(biao)、源(yuan)(yuan)文章詳情、源(yuan)(yuan)中心。可直接閱(yue)讀知(zhi)乎每日精(jing)選、the week等優質(zhi)中英文源(yuan)(yuan)。

使用起(qi)來效(xiao)果是(shi)這樣的：

也可以直接微信掃碼體驗(yan)：

靈感來源

信息大(da)(da)爆炸(zha)時代，每天(tian)可看的實(shi)在太多，頭(tou)條、公眾號、知乎(hu)、各垂(chui)直平臺、大(da)(da)佬博客(ke)......只(zhi)想找一(yi)(yi)個“安(an)靜(jing)”的地(di)方，便捷地(di)閱讀一(yi)(yi)些精(jing)選的東西(xi)。于是(shi)乎(hu)就想起了RSS，想著將其(qi)與小程序(xu)結合，抱著試一(yi)(yi)試的心(xin)態(tai)寫了一(yi)(yi)下，順便當做練習。

模塊分析（這個部分是廢話，干貨請直接查閱“代碼實現”部分或者下載源碼體驗）

有了(le)目標，接(jie)下(xia)來就是具(ju)體(ti)構思了(le)。

最終(zhong)需求為實現對(dui)RSS源的關注、展示。拆解為如下原子功能(neng)：

• RSS源關注
• RSS源已關注展示
• RSS源內容列表展示
• RSS源文章詳細內容展示
• RSS源取消關注

同時，為了能(neng)夠選擇到想(xiang)關(guan)注的(de)(de)RSS源(yuan)以及能(neng)有一個(ge)有效(xiao)的(de)(de)反(fan)饋渠道和(he)聲明，還需兩(liang)個(ge)個(ge)功(gong)能(neng)：

• RSS源推薦列表
• RSS源簡介
• RSS源反饋渠道、聲明展示

針對上(shang)述功能，進行模塊(kuai)設(she)計，這里推薦(jian)使用UE在線編輯應用墨刀來嘗試完(wan)成。 根據《Do not make me think》的原則，可以設(she)計為如(ru)下5模塊(kuai)（頁面）：

1. 已關注源展示
   • RSS源已關注展示
   • RSS源取消關注
2. 源中心
   • RSS源推薦列表
   • RSS源簡介
   • RSS源關注
3. 源內容展示
   • RSS源內容列表展示
4. 源文章詳細展示
   • RSS源文章詳細內容展示
5. 更多
   • RSS源簡介
   • RSS源反饋渠道、聲明展示

各模塊(kuai)間的交互如(ru)下圖（省略返回）：

關于UI設計，作為(wei)前端開(kai)(kai)發首先能想到的就(jiu)是宮(gong)格--簡(jian)明扼要，很符合預期。所以就(jiu)沒(mei)有做(zuo)專門的UI設計，在開(kai)(kai)發過程中“隨(sui)機應變”。

說了(le)辣么多(duo)，該亮(liang)代(dai)碼了(le)。。。

代碼實現

技術準備

根據以上(shang)部分的分析(xi)(xi)，已經把小(xiao)程序的所有功能(neng)點羅列出來(lai)了，現在做(zuo)技術分析(xi)(xi)：

1. 整體而言，需(xu)要第三方(fang)UI庫。經過(guo)搜索，發(fa)現(xian)兩款不錯的：一個是有贊的zanui，一個是美麗說的minui。因為我對(dui)該小程序(xu)的預(yu)期樣(yang)式和zanui更接近，且zanui可(ke)以(yi)只引入部分模塊(kuai)，我選擇了zanui。

2. 針對(dui)各功(gong)能點

• RSS源關注：帶參數頁面跳轉、彈框（微信彈框展示信息太少，需用zanui）
• RSS源已關注展示：宮格布局、數據結構設計
• RSS源內容列表展示：RSS數據結構分析、布局
• RSS源文章詳細內容展示：跨頁面傳參、富文本展示（微信沒有

  標簽，需第三方庫來實現）

• RSS源取消關注：長按取消、數據緩存刷新
• RSS源推薦列表：宮格布局、數據結構設計
• RSS源簡介：文本展示（注意微信中標簽中的才能被選中復制）
• RSS源反饋渠道、聲明展示：簡單文本展示

具體實現

做(zuo)好準(zhun)備之后，就可以(yi)在微信(xin)開發者工具內開發了(le)。 首先，初始化項目后，修(xiu)改創建出如下目錄：

├── 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 已關注源展示

考慮到用戶(hu)實際操作(zuo)流，進入(ru)小程序(xu)后首先進入(ru)的就應該是已關注(zhu)(zhu)的源展示(shi)，新(xin)用戶(hu)訪問到的是空頁(ye)面。用戶(hu)可(ke)在頁(ye)面操作(zuo)觸發添加關注(zhu)(zhu)、刪除已關注(zhu)(zhu)。

1. 宮格布局與第三方UI庫的使用

對于已關注的(de)源，關鍵信息是源名稱、源logo。因(yin)此，基于清(qing)爽設計，采用(yong)宮(gong)格布局，這里(li)使(shi)用(yong)的(de)是zanui的(de)柵(zha)格系統。從zanui的(de)源碼(ma)（本文使(shi)用(yong)的(de)是v1.9.91版本）中(zhong)找(zhao)到柵(zha)格系統組件dist/col/index.wxss，將內(nei)容復制(zhi)到項目的(de)app.wxss中(zhong)，當作通(tong)用(yong)樣式，wxml參照zanui源碼(ma)中(zhong)的(de)/pages/layout/index.wxml。

柵(zha)格系統中對(dui)高度沒有做控制，需要自行實現(xian)正方(fang)形方(fang)塊(kuai)，添加如下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;
}

值得一提的是(shi)，第(di)三方UI庫(ku)的引(yin)入方式除了這種部分引(yin)入外，還可以(yi)整體(ti)引(yin)入，方法為：已zanui為例，將其資源文(wen)件通過@import直接引(yin)入到app.wxss中。

@import "dist/index.wxss";
復制代碼

2. 數據結構設計 對于這個已關注源的集合，我們將需要的元數據放入數組，用于宮格渲染。

   
 const rssedData = [
      {
        title: '知乎每日精選', // 源名稱
        favicon: '//www.zhihu.com/favicon.ico', // 源logo
        rssUrl: '//www.zhihu.com/rss', // 源鏈接
      },
      {
        title: 'the weak',
        favicon: '//theweek.com/favicon.ico',
        rssUrl: '//theweek.com/rss.xml',
      },
    ];

此數據(ju)，加(jia)載(zai)該頁(ye)(ye)面(mian)后從Storage中(zhong)的(de)(de)取(qu)值rssedData，rssedData 在(zai)已(yi)關(guan)(guan)注是寫入緩存(cun)。 3. 渲染與取(qu)消關(guan)(guan)注 根據(ju)數據(ju)結構和UI設計，使(shi)用wx:for循環渲染出(chu)宮格(ge)。 由于(yu)需要查(cha)看、取(qu)消關(guan)(guan)注某個源，因(yin)此就需要在(zai)元素上添加(jia)data-rss-id等值，用于(yu)事件(jian)綁定(ding)與跨(kua)頁(ye)(ye)面(mian)傳參(can)。 刪(shan)除采用常見的(de)(de)長按(an)出(chu)現(xian)刪(shan)除按(an)鈕，點擊按(an)鈕就刪(shan)除的(de)(de)方案。 4. 其他頁(ye)(ye)的(de)(de)關(guan)(guan)聯設計 作為主頁(ye)(ye)面(mian)，需要有訪問其他功能也的(de)(de)入口，這里將(jiang)工業(ye)入口放(fang)入宮格(ge)最后，作為關(guan)(guan)聯。

頁面二：rsscenter 源中心

對于新用戶(hu)而言，訪問(wen)過已關注頁面(mian)后，緊接(jie)著需要訪問(wen)的就是源(yuan)中心(xin)了。需要完成下面(mian)的功能：

1. RSS源推薦列表展示與數據結構設計 采用和已關注頁相同的布局方式--宮格，樣式復用，數據格式類似但需擴充。

  復制代碼
{
    title: '知乎每日精選', // 源名稱
    link: '//www.zhihu.com', // 源官網鏈接
    description: '中文互聯網最大的知識平臺，幫助人們便捷地分享彼此的知識、經驗和見解。', // 源簡介
    favicon: '//www.zhihu.com/favicon.ico', // 源logo
    rssUrl: '//www.zhihu.com/rss', // 源鏈接
  }

另(ling)外，對于關注的源應該有特殊標識(shi)，所以需要對數(shu)據做處理，通過對比Storage中rssedData和rss.js文件中的數(shu)據，給(gei)頁面數(shu)據添加rssed（type：boolean）字段。

這里的數據來源(yuan)于網絡(luo)收(shou)集，暫時(shi)固定寫死(si)在小程序中，因此(ci)我提出來放(fang)到(dao)(dao)了項目的/data/rss.js文件(jian)中。后續版本，這個放(fang)到(dao)(dao)服務端管理，可(ke)以做到(dao)(dao)動(dong)態增刪改。 2. RSS源(yuan)簡介 采用彈出框(kuang)的形式，展示基(ji)本信息(xi)，提供關注按鈕。這里使用了zanui的popup組件(jian)，引入方式同柵格系統。

wx.reLaunch({
  url: `../rssed/rssed`,
});
復制代碼

頁面三：源內容展示

采用經典設計，如下圖。

1. 源數據處理與node服務 rss是基于XML標準的數據，在小程序中無法直接解析，且小程序的合法requests域名有限，這里可以采用服務器代理的形式來處理。 我這里使用的是基于nodejs的thinkjs框架，在框架內引入專門將rss數據轉為json數據的插件。這個服務后續可以專門寫一篇文章，這里就不展開了，思路就是這樣的。另外rss數據格式有多種，需要做兼容處理。 響應格式為：

{
	"errno": 0,
	"errmsg": "",
	"data": {
		"rss": {
			"$": {
				"version": "2.0",
				"xmlns:atom": "//www.w3.org/2005/Atom"
			},
			"channel": {
				"title": "知乎每日精選",
				"link": "//www.zhihu.com",
				"description": "中文互聯網最大的知識平臺，幫助人們便捷地分享彼此的知識、經驗和見解。",
				"atom:link": {
					"$": {
						"href": "//www.zhihu.com/rss",
						"rel": "self"
					}
				},
				"language": "zh-cn",
				"copyright": "© 2018 知乎(//www.zhihu.com)",
				"lastBuildDate": "Fri, 03 Aug 2018 16:30:25 +0800",
				"ttl": "180",
				"item": [{
					"title": "如何評價 2018 年菲爾茲獎（fields medal 2018）結果與四位得主的工作？",
					"link": "//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": "//purl.org/dc/elements/1.1/"
						}
					},
					"pubDate": "Fri, 03 Aug 2018 16:30:25 +0800",
					"guid": "//www.zhihu.com/question/287977241/answer/458776271"
				},]
			}
		}
	}
}

其中的(de)description字(zi)段為該文(wen)(wen)章簡介(jie)內容(rong)的(de)hmtl文(wen)(wen)檔，部分(fen)源將(jiang)全部內容(rong)放到其中，所(suo)以加載的(de)時(shi)候可能比較(jiao)慢(man)。 2. 列表渲染(ran)與帶(dai)參(can)數(shu)跳(tiao)轉(zhuan) 拿到上(shang)述(shu)數(shu)據(ju)之(zhi)后(hou)，對數(shu)據(ju)進(jin)行緩(huan)存放入Storage中。然(ran)后(hou)使(shi)用wx:for渲染(ran)列表。 頁面跳(tiao)轉(zhuan)至(zhi)詳(xiang)情頁時(shi)帶(dai)上(shang)文(wen)(wen)章的(de)數(shu)組index值：

    wx.navigateTo({
      url: `../detail/detail?id=${rssItemData}&favicon=${favicon}`,
    });
復制代碼

在detail.js中(zhong)取值

  onLoad: function (options) {
    this.showDetail(options.id, options.favicon);
  },
復制代碼

3. 為什么一次性緩存？

• rss源數據返回的就是全部返回
• 利于用戶體驗，不至于加載列表頁等待之后，切換詳情頁還需要等待。

頁面四：源文章詳細展示

核(he)心就(jiu)是讀(du)取(qu)Storage中的(de)(de)數據，將html富(fu)文本轉為(wei)wxml。 這里采用的(de)(de)是wxParse庫。將wxParse源碼下(xia)載(zai)后，拷貝(bei)至項目根目錄(lu)，然后在/pages/detail/detail.js中引入(ru)、調用。

const WxParse = require('../../wxParse/wxParse.js');
...
WxParse.wxParse('article', 'html', rssDataItem.description, that, 5);
...
復制代碼

ps：單獨引(yin)入(ru)三方庫的好處在于，可以(yi)自定(ding)義部分(fen)標簽的展示(shi)，這個根(gen)據(ju)實際(ji)需求而定(ding)。

頁面五：更多

從已關注頁(ye)面跳轉(zhuan)而(er)來，展(zhan)示(shi)一些(xie)額(e)外信息。簡單的文字排版，不贅述。

最后

小(xiao)程序(xu)開(kai)發本身并不復雜(za)，但是(shi)要做(zuo)好做(zuo)優還(huan)需(xu)要多(duo)學(xue)習和(he)練(lian)習。這款小(xiao)程序(xu)目前也只是(shi)停(ting)留在能用的階段，還(huan)有很多(duo)需(xu)要完善和(he)優化的地(di)方，希(xi)望對大家學(xue)習有用。另外，有更(geng)好的建議(yi)請私我，謝謝大家。