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