小程序模板網(wǎng)

小程序 | 注釋級微信小程序demo，助你快速切入開發(fā)

發(fā)布時間：2018-09-01 09:49 所屬欄目：小程序開發(fā)教程

寫在前面

小程序開發(fā)漸進紅利期，更多開發(fā)者慕名而來，網(wǎng)上的學(xué)習(xí)資料也層出不窮，有點眼花繚亂的意思了。在經(jīng)過一個多月的摸索式學(xué)習(xí)后，我也終于寫了不算精美的一個小程序。

那為什么寫這篇文章：

  • 總結(jié)經(jīng)驗 - 寫文章能帶來更多的思考，為后續(xù)開發(fā)做準備
  • 分享經(jīng)驗 - 網(wǎng)上的資料真的太多了，希望我這篇文章能有所用

幾個問題

  1. 適合哪些讀者？ 本文適合對小程序有興趣，且已閱讀過官網(wǎng)：微信小程序開發(fā)教程，體驗過官方demo，想進一步學(xué)習(xí)開發(fā)的讀者
  2. 包含哪些技術(shù)點？ 主要包括：微信小程序常見語法、跨頁面?zhèn)鲄ⅰ⒕彺媸褂?、本地?shù)據(jù)模擬、第三方UI庫的使用、富文本轉(zhuǎn)義、數(shù)據(jù)結(jié)構(gòu)設(shè)計、后端數(shù)據(jù)請求、nodejs服務(wù)代理轉(zhuǎn)發(fā)
  3. 有何特點？ 思路、注釋、源代碼

正文

簡介

取了一個很low的名字“全民精進閱讀”，意為沉浸式閱讀體驗，是一款rss源閱讀小程序，主要功能包括：已關(guān)注源、源列表、源文章詳情、源中心?？芍苯娱喿x知乎每日精選、the week等優(yōu)質(zhì)中英文源。

使用起來效果是這樣的：

 

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

 

 

靈感來源

信息大爆炸時代，每天可看的實在太多，頭條、公眾號、知乎、各垂直平臺、大佬博客......只想找一個“安靜”的地方，便捷地閱讀一些精選的東西。于是乎就想起了RSS，想著將其與小程序結(jié)合，抱著試一試的心態(tài)寫了一下，順便當(dāng)做練習(xí)。

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

有了目標(biāo)，接下來就是具體構(gòu)思了。

最終需求為實現(xiàn)對RSS源的關(guān)注、展示。拆解為如下原子功能：

  • RSS源關(guān)注
  • RSS源已關(guān)注展示
  • RSS源內(nèi)容列表展示
  • RSS源文章詳細內(nèi)容展示
  • RSS源取消關(guān)注

同時，為了能夠選擇到想關(guān)注的RSS源以及能有一個有效的反饋渠道和聲明，還需兩個個功能：

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

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

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

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

 

關(guān)于UI設(shè)計，作為前端開發(fā)首先能想到的就是宮格--簡明扼要，很符合預(yù)期。所以就沒有做專門的UI設(shè)計，在開發(fā)過程中“隨機應(yīng)變”。

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

代碼實現(xiàn)

技術(shù)準備

根據(jù)以上部分的分析，已經(jīng)把小程序的所有功能點羅列出來了，現(xiàn)在做技術(shù)分析：

  1. 整體而言，需要第三方UI庫。經(jīng)過搜索，發(fā)現(xiàn)兩款不錯的：一個是有贊的zanui，一個是美麗說的minui。因為我對該小程序的預(yù)期樣式和zanui更接近，且zanui可以只引入部分模塊，我選擇了zanui。

  2. 針對各功能點

  • RSS源關(guān)注：帶參數(shù)頁面跳轉(zhuǎn)、彈框（微信彈框展示信息太少，需用zanui）
  • RSS源已關(guān)注展示：宮格布局、數(shù)據(jù)結(jié)構(gòu)設(shè)計
  • RSS源內(nèi)容列表展示：RSS數(shù)據(jù)結(jié)構(gòu)分析、布局
  • RSS源文章詳細內(nèi)容展示：跨頁面?zhèn)鲄?、富文本展示（微信沒有 
    標(biāo)簽，需第三方庫來實現(xiàn)）
  • RSS源取消關(guān)注：長按取消、數(shù)據(jù)緩存刷新
  • RSS源推薦列表：宮格布局、數(shù)據(jù)結(jié)構(gòu)設(shè)計
  • RSS源簡介：文本展示（注意微信中標(biāo)簽中的才能被選中復(fù)制）
  • RSS源反饋渠道、聲明展示：簡單文本展示

具體實現(xiàn)

做好準備之后，就可以在微信開發(fā)者工具內(nèi)開發(fā)了。 首先，初始化項目后，修改創(chuàng)建出如下目錄：

├── app.js
├── app.json
├── app.wxss
├── data 本地數(shù)據(jù)
|  └── rss.js
├── pages 頁面
|  ├── detail 源文章詳細展示
|  |  ├── 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)義庫
頁面一：rssed 已關(guān)注源展示

考慮到用戶實際操作流，進入小程序后首先進入的就應(yīng)該是已關(guān)注的源展示，新用戶訪問到的是空頁面。用戶可在頁面操作觸發(fā)添加關(guān)注、刪除已關(guān)注。

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

對于已關(guān)注的源，關(guān)鍵信息是源名稱、源logo。因此，基于清爽設(shè)計，采用宮格布局，這里使用的是zanui的柵格系統(tǒng)。從zanui的源碼（本文使用的是v1.9.91版本）中找到柵格系統(tǒng)組件dist/col/index.wxss，將內(nèi)容復(fù)制到項目的app.wxss中，當(dāng)作通用樣式，wxml參照zanui源碼中的/pages/layout/index.wxml。

柵格系統(tǒng)中對高度沒有做控制，需要自行實現(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庫的引入方式除了這種部分引入外，還可以整體引入，方法為：已zanui為例，將其資源文件通過@import直接引入到app.wxss中。

@import "dist/index.wxss";
復(fù)制代碼
  1. 數(shù)據(jù)結(jié)構(gòu)設(shè)計 對于這個已關(guān)注源的集合，我們將需要的元數(shù)據(jù)放入數(shù)組，用于宮格渲染。
   
 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',
      },
    ];

此數(shù)據(jù)，加載該頁面后從Storage中的取值rssedData，rssedData 在已關(guān)注是寫入緩存。 3. 渲染與取消關(guān)注 根據(jù)數(shù)據(jù)結(jié)構(gòu)和UI設(shè)計，使用wx:for循環(huán)渲染出宮格。 由于需要查看、取消關(guān)注某個源，因此就需要在元素上添加data-rss-id等值，用于事件綁定與跨頁面?zhèn)鲄ⅰ?刪除采用常見的長按出現(xiàn)刪除按鈕，點擊按鈕就刪除的方案。 4. 其他頁的關(guān)聯(lián)設(shè)計 作為主頁面，需要有訪問其他功能也的入口，這里將工業(yè)入口放入宮格最后，作為關(guān)聯(lián)。

 

頁面二：rsscenter 源中心

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

  1. RSS源推薦列表展示與數(shù)據(jù)結(jié)構(gòu)設(shè)計 采用和已關(guān)注頁相同的布局方式--宮格，樣式復(fù)用，數(shù)據(jù)格式類似但需擴充。
  復(fù)制代碼
{
    title: '知乎每日精選', // 源名稱
    link: 'https://www.zhihu.com', // 源官網(wǎng)鏈接
    description: '中文互聯(lián)網(wǎng)最大的知識平臺，幫助人們便捷地分享彼此的知識、經(jīng)驗和見解。', // 源簡介
    favicon: 'https://www.zhihu.com/favicon.ico', // 源logo
    rssUrl: 'https://www.zhihu.com/rss', // 源鏈接
  }

另外，對于關(guān)注的源應(yīng)該有特殊標(biāo)識，所以需要對數(shù)據(jù)做處理，通過對比Storage中rssedData和rss.js文件中的數(shù)據(jù)，給頁面數(shù)據(jù)添加rssed（type：boolean）字段。

這里的數(shù)據(jù)來源于網(wǎng)絡(luò)收集，暫時固定寫死在小程序中，因此我提出來放到了項目的/data/rss.js文件中。后續(xù)版本，這個放到服務(wù)端管理，可以做到動態(tài)增刪改。 2. RSS源簡介 采用彈出框的形式，展示基本信息，提供關(guān)注按鈕。這里使用了zanui的popup組件，引入方式同柵格系統(tǒng)。

3. RSS源關(guān)注 更新Storage，使用wx.reLaunch跳轉(zhuǎn)至已關(guān)注頁。

 

wx.reLaunch({
  url: `../rssed/rssed`,
});
復(fù)制代碼
頁面三：源內(nèi)容展示

采用經(jīng)典設(shè)計，如下圖。

 

  1. 源數(shù)據(jù)處理與node服務(wù) rss是基于XML標(biāo)準的數(shù)據(jù)，在小程序中無法直接解析，且小程序的合法requests域名有限，這里可以采用服務(wù)器代理的形式來處理。 我這里使用的是基于nodejs的thinkjs框架，在框架內(nèi)引入專門將rss數(shù)據(jù)轉(zhuǎn)為json數(shù)據(jù)的插件。這個服務(wù)后續(xù)可以專門寫一篇文章，這里就不展開了，思路就是這樣的。另外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)最大的知識平臺，幫助人們便捷地分享彼此的知識、經(jīng)驗和見解。",
				"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）結(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": {
						"_": "知識分子",
						"$": {
							"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字段為該文章簡介內(nèi)容的hmtl文檔，部分源將全部內(nèi)容放到其中，所以加載的時候可能比較慢。 2. 列表渲染與帶參數(shù)跳轉(zhuǎn) 拿到上述數(shù)據(jù)之后，對數(shù)據(jù)進行緩存放入Storage中。然后使用wx:for渲染列表。 頁面跳轉(zhuǎn)至詳情頁時帶上文章的數(shù)組index值：

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

在detail.js中取值

  onLoad: function (options) {
    this.showDetail(options.id, options.favicon);
  },
復(fù)制代碼
  1. 為什么一次性緩存？
  • rss源數(shù)據(jù)返回的就是全部返回
  • 利于用戶體驗，不至于加載列表頁等待之后，切換詳情頁還需要等待。
頁面四：源文章詳細展示

核心就是讀取Storage中的數(shù)據(jù)，將html富文本轉(zhuǎn)為wxml。 這里采用的是wxParse庫。將wxParse源碼下載后，拷貝至項目根目錄，然后在/pages/detail/detail.js中引入、調(diào)用。

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

ps：單獨引入三方庫的好處在于，可以自定義部分標(biāo)簽的展示，這個根據(jù)實際需求而定。

頁面五：更多

從已關(guān)注頁面跳轉(zhuǎn)而來，展示一些額外信息。簡單的文字排版，不贅述。

最后

小程序開發(fā)本身并不復(fù)雜，但是要做好做優(yōu)還需要多學(xué)習(xí)和練習(xí)。這款小程序目前也只是停留在能用的階段，還有很多需要完善和優(yōu)化的地方，希望對大家學(xué)習(xí)有用。另外，有更好的建議請私我，謝謝大家。


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://22321a.com/wxmini/doc/course/24757.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點擊咨詢
QQ在線咨詢