本文是“WordPress 開發(fā)微信小程序”系列的第二篇,本文記錄的是開發(fā)“DeveWork極客”小程序v1.1 的過程。一如既往,目標(biāo)讀者為了解WordPress 的前端同學(xué)。建議先看完第一篇文章再來閱讀本文。另外系列標(biāo)題也去掉REST API 相關(guān)字段,改簡單清晰點(diǎn)。
如果你沒有看過本小程序,可以通過下面的小程序碼進(jìn)入體驗(yàn)。注意看文章的此時(shí)你掃描進(jìn)入的版本可能不是不是1.1 版本了。 “DeveWork極客”小程序v1.1 的更新內(nèi)容較多,這里摘取一些有意義的記錄下。請注意本文內(nèi)容展開方式與上一篇稍微有些不同:除最后一章節(jié),每個(gè)章節(jié)即為一個(gè)改動(dòng)點(diǎn),并參考微信小程序的開發(fā)者工具更新歷史采用 A(Add)、F(Fix)、U(Update) 作為小標(biāo)題開頭。
A:新增“專題”板塊1.1 版本增加了一個(gè)“專題”的Tab 及其相關(guān)頁面(如上圖)。“專題”相當(dāng)于WordPress 的目錄文章。入口頁面是三個(gè)圖文圓角卡片,布局很簡單。通過data-xx 與id 的方式傳入相關(guān)信息到點(diǎn)擊事件函數(shù)。
這里發(fā)現(xiàn)一個(gè)開發(fā)要點(diǎn):在 app.json 中配置tabBar 后,當(dāng)要跳轉(zhuǎn)的頁面位于tabBar 配置中的時(shí)候,就不能使用 wx.navigateTo、wx.redirectTo —— 即wx.navigateTo、wx.redirectTo不能跳轉(zhuǎn)到 tab 頁。 A:分享(轉(zhuǎn)發(fā))功能第一版的時(shí)候只花了兩天匆匆做出來,分享功能在這個(gè)版本才加上。轉(zhuǎn)發(fā)功能調(diào)用官方的onShareAppMessage 函數(shù)就可以了,因?yàn)榉窒淼挠|發(fā)肯定是在 Onload 的生命周期后,所以動(dòng)態(tài)修改分享的參數(shù)成為了可能。
A:加入MTA(騰訊移動(dòng)分析)小程序數(shù)據(jù)統(tǒng)計(jì)在開發(fā)1.0 版本的時(shí)候,小程序自帶的數(shù)據(jù)統(tǒng)計(jì)并不是很強(qiáng)大,所以決定采用第三方的數(shù)據(jù)統(tǒng)計(jì)服務(wù)。MTA 除了也是騰訊家的加成外,其吸引我的便是“自定義事件”的功能,能讓我根據(jù)個(gè)人需求獲取到相關(guān)數(shù)據(jù)分析。如Jeff 在里面配置的如下事件,讓我知道了哪些文章是受歡迎的,哪些用戶操作比較高頻率等等。
MTA 的使用步驟在這里就不重復(fù)了,畢竟官方有比較詳細(xì)的文檔。 A:增加文章瀏覽數(shù),增加Font Icon
跟網(wǎng)站的一樣,增加了文章的瀏覽數(shù)信息,并將文章發(fā)表時(shí)間及瀏覽器兩個(gè)信息加上了Font Icon。 U:封裝Promise,方便寫代碼微信小程序官方雖說支持ES6,但Jeff 用了下Promise 感覺有些坑。所以用了個(gè)第三方封裝的Promise,避免出現(xiàn)惡心的代碼“回調(diào)地獄”。 這個(gè)庫也封裝了小程序的Request 函數(shù),加載相關(guān)文件后,改寫原來的獲取文章列表的函數(shù),相關(guān)代碼修改如下:
U:更換TabBar Icon,增加空白占位上一篇的“踩坑篇”中有提及 TabBar Icon 的坑點(diǎn),這次伴隨著更新將圖標(biāo)全部都換了,配合整體風(fēng)格采用了更加細(xì)的線型圖標(biāo)。推薦一個(gè)下載這類圖標(biāo)的站點(diǎn):http://www.flaticon.com/。 下載的圖標(biāo)還是做了些處理:根據(jù)官方推薦處理為81x81 大小,并增加占位透明 padding 為了讓icon 在真機(jī)上看起來沒那么大。
F:下拉加載,文章已經(jīng)完全load 完的處理之前第一版是沒有做加載完畢的處理的,因?yàn)槟菚r(shí)候感覺300多篇文章應(yīng)該沒人去下拉完(事實(shí)上我也從來沒有拉到底過)。但現(xiàn)在加上了“專題”板塊后就有可能了所以需要兼容下文章列表已經(jīng)加載完畢的情況。 Jeff 的處理方式是添加一個(gè)noMore 參數(shù),然后默認(rèn)為false。當(dāng)請求API 后檢測數(shù)據(jù)長度,為0 就表示文章列表已經(jīng)加載完全,noMore變?yōu)閠rue。 然后在WXML 文件中加入一個(gè)提示:
這種處理方式其實(shí)不怎么好,待后續(xù)優(yōu)化。 F:考慮用戶體驗(yàn),授權(quán)失敗的優(yōu)雅處理這里我單獨(dú)寫了一篇文章,請參考《提升用戶體驗(yàn),小程序“授權(quán)失敗”場景優(yōu)雅處理方案》。 結(jié)尾以上就是1.1 版本的主要更新內(nèi)容。1.1 版本的審核剛好在端午節(jié)前后,所以實(shí)質(zhì)花了不少時(shí)間。 |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)