小程序 | 註釋級微信小程序demo，助你快速切入開發

時間  2019-11-29
標籤 程序 註釋 微信 demo 快速 切入 開發 简体版
原文   原文鏈接

寫在前面

小程序開發漸進紅利期，更多開發者慕名而來，網上的學習資料也層出不窮，有點眼花繚亂的意思了。在通過一個多月的摸索式學習後，我也終於寫了不算精美的一個小程序。html

那爲何寫這篇文章：前端

  • 總結經驗 - 寫文章能帶來更多的思考，爲後續開發作準備
  • 分享經驗 - 網上的資料真的太多了，但願我這篇文章能有所用

幾個問題

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

正文

簡介

取了一個很low的名字「全民精進閱讀」，意爲沉浸式閱讀體驗，是一款rss源閱讀小程序，主要功能包括：已關注源、源列表、源文章詳情、源中心。可直接閱讀知乎每日精選、the week等優質中英文源。node

使用起來效果是這樣的： git

使用效果

也能夠直接微信掃碼體驗： github

全民精進閱讀-小程序碼

靈感來源

信息大爆炸時代，天天可看的實在太多，頭條、公衆號、知乎、各垂直平臺、大佬博客......只想找一個「安靜」的地方，便捷地閱讀一些精選的東西。因而乎就想起了RSS，想着將其與小程序結合，抱着試一試的心態寫了一下，順便當作練習。json

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

有了目標，接下來就是具體構思了。小程序

最終需求爲實現對RSS源的關注、展現。拆解爲以下原子功能：後端

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

同時，爲了可以選擇到想關注的RSS源以及能有一個有效的反饋渠道和聲明，還需兩個個功能：微信小程序

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

針對上述功能，進行模塊設計，這裏推薦使用UE在線編輯應用墨刀來嘗試完成。 根據《Do not make me think》的原則，能夠設計爲以下5模塊（頁面）：數組

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

各模塊間的交互以下圖（省略返回）：

全民精進閱讀UE

關於UI設計，做爲前端開發首先能想到的就是宮格--簡明扼要，很符合預期。因此就沒有作專門的UI設計，在開發過程當中「隨機應變」。

說了辣麼多，該亮代碼了。。。

代碼實現

技術準備

根據以上部分的分析，已經把小程序的全部功能點羅列出來了，如今作技術分析：

  1. 總體而言，須要第三方UI庫。通過搜索，發現兩款不錯的：一個是有讚的zanui，一個是美麗說的minui。由於我對該小程序的預期樣式和zanui更接近，且zanui能夠只引入部分模塊，我選擇了zanui。

  2. 針對各功能點

  • 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 已關注源展現

考慮到用戶實際操做流，進入小程序後首先進入的就應該是已關注的源展現，新用戶訪問到的是空頁面。用戶可在頁面操做觸發添加關注、刪除已關注。

  1. 宮格佈局與第三方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";
複製代碼
  1. 數據結構設計 對於這個已關注源的集合，咱們將須要的元數據放入數組，用於宮格渲染。
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. 其餘頁的關聯設計 做爲主頁面，須要有訪問其餘功能也的入口，這裏將工業入口放入宮格最後，做爲關聯。

宮格與關聯設計.png

頁面二：rsscenter 源中心

對於新用戶而言，訪問過已關注頁面後，緊接着須要訪問的就是源中心了。須要完成下面的功能：

  1. 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組件，引入方式同柵格系統。

源簡介與關注.png
3. RSS源關注 更新Storage，使用wx.reLaunch跳轉至已關注頁。 

wx.reLaunch({
  url: `../rssed/rssed`,
});
複製代碼
頁面三：源內容展現

採用經典設計，以下圖。

源內容列表展現.png

  1. 源數據處理與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);
  },
複製代碼
  1. 爲何一次性緩存？
  • 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：單獨引入三方庫的好處在於，能夠自定義部分標籤的展現，這個根據實際需求而定。

頁面五：更多

從已關注頁面跳轉而來，展現一些額外信息。簡單的文字排版，不贅述。

最後

小程序開發自己並不複雜，可是要作好作優還須要多學習和練習。這款小程序目前也只是停留在能用的階段，還有不少須要完善和優化的地方，但願對你們學習有用。另外，有更好的建議請私我，謝謝你們。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程