本文是“WordPress 開發(fā)微信小程序”系列的第三篇,本文記錄的是“DeveWork極客”小程序1.2 版本的開發(fā)要點(diǎn)。建議先看完第一篇、第二篇再來閱讀本文。如果你沒有看過本小程序,可以通過下面的小程序碼進(jìn)入體驗(yàn)。注意 ...
本文是“WordPress 開發(fā)微信小程序”系列的第三篇,本文記錄的是“DeveWork極客”小程序1.2 版本的開發(fā)要點(diǎn)。建議先看完第一篇、第二篇再來閱讀本文。
如果你沒有看過本小程序,可以通過下面的小程序碼進(jìn)入體驗(yàn)。注意看文章的此時(shí)你掃碼進(jìn)入的版本可能不是1.2 版本了。 “DeveWork極客”小程序v1.2 的更新內(nèi)容主要集中在提升用戶體驗(yàn)的優(yōu)化點(diǎn)以及修復(fù)遺留bug。如同上一篇,本文除最后一章節(jié),每個(gè)章節(jié)即為一個(gè)改動(dòng)點(diǎn),并參考微信小程序的開發(fā)者工具更新歷史采用 A(Add)、F(Fix)、U(Update) 作為小標(biāo)題開頭。 A:新增“關(guān)于與反饋”頁面“DeveWork極客”小程序v1.2 的新增內(nèi)容基本上就只有這個(gè)“關(guān)于與反饋”頁面了。目前能通過文章內(nèi)容頁腳、閱讀記錄頁面頁腳兩個(gè)入口進(jìn)入。頁面內(nèi)容主要是介紹小程序、提供反饋入口與聯(lián)系方式。反饋入口本想采用小程序的“客服會(huì)話”組件,但默認(rèn)樣式實(shí)在是太難看了,最后是采用button 組件通過設(shè)置 open-type="contact" 的方式進(jìn)入客服對(duì)話。有興趣歡迎通過客服會(huì)話勾搭,但一般我不會(huì)去看的哈哈,建議還是采用郵件這類聯(lián)系方式。
A:復(fù)制文章URL 功能,引導(dǎo)外部瀏覽器閱讀一些讀者可能會(huì)疑惑“DeveWork極客”小程序里面的文章內(nèi)容,涉及到的外鏈均不可點(diǎn)。這個(gè)鍋可就得由小程序來背了——微信小程序是天然的封閉體系。也因?yàn)閭€(gè)人小程序的規(guī)定約束,評(píng)論內(nèi)容是不會(huì)展示出來的。在這個(gè)版本中增加了一個(gè)復(fù)制文章URL 的功能來引導(dǎo)用戶前往外部瀏覽器閱讀原文及其評(píng)論。
使用到的是wx.getClipboardData這個(gè)接口,代碼因?yàn)闆]啥技術(shù)含量就不展示了。 A:在一些頁面啟用PullDownRefreshPullDownRefresh即上拉重加載。這個(gè)版本在一些頁面啟用了PullDownRefresh,有如下兩個(gè)坑: 1)如果下拉后的背景是白色的,需要將app.json 中window 對(duì)象的backgroundTextStyle設(shè)為dark, 否則無法顯示loading 動(dòng)畫。 2)小程序中scroll-view 組件與onPullDownRefresh 不能同時(shí)使用。 F:修復(fù)wxParse 的若干bug這個(gè)版本修復(fù)wxParse 的bug 主要集中在樣式層面的,有部分內(nèi)容已經(jīng)向wxParse 的開發(fā)者提交PR。 1)一些內(nèi)聯(lián)元素沒有相應(yīng)的內(nèi)聯(lián)樣式。如del 標(biāo)簽。 2) pre 標(biāo)簽的優(yōu)化。本站的文章內(nèi)容大多有大段代碼,之前在小程序版上顯示一直不是很好看。原因是wxParse 默認(rèn)將代碼中的換行符刪掉了。 3)li 標(biāo)簽圓圈樣式,行高樣式統(tǒng)一。 U:提升用戶體驗(yàn)的若干優(yōu)化點(diǎn)這個(gè)版本主要是為了提升用戶體驗(yàn),所以在如下點(diǎn)進(jìn)行了優(yōu)化: 1)下拉加載文章的Loading 樣式進(jìn)行了修改。拋棄了默認(rèn)loading 組件,而采用跟網(wǎng)站一樣的loading 效果,直接用CSS3 寫。 2)增加數(shù)據(jù)加載失敗的彈窗提示。wx.request()這類網(wǎng)絡(luò)請(qǐng)求事件有可能遇到加載失敗的情況,這時(shí)候予以用戶提示是有必要的。Jeff 的處理方式增加一個(gè)彈窗,然后在fail 事件進(jìn)行調(diào)用。
3)“無過多文章”場(chǎng)景的優(yōu)化?,F(xiàn)在能做到在“無過多文章”場(chǎng)景下不發(fā)送請(qǐng)求了。 4)閱讀記錄頁面為空時(shí)候的展示。增加了一個(gè)圖標(biāo)狀態(tài)。 F:scroll-view 組件bindscrolltolower 事件多次執(zhí)行這個(gè)也是微信小程序的一個(gè)坑點(diǎn)。小程序首頁的scroll-view 組件bindscrolltolower 綁定了loadMore()函數(shù)。在開發(fā)工具上每次下拉加載正常,但在真機(jī)上卻發(fā)現(xiàn)每下拉一次,loadMore()函數(shù)會(huì)被重復(fù)多執(zhí)行兩三次。如此本來是一次加載6篇文章,實(shí)際居然加載了24篇! Jeff 的解決方案是采用了個(gè)計(jì)時(shí)器,在loadMore()函數(shù)函數(shù)中,如果發(fā)現(xiàn)上次運(yùn)行l(wèi)oadMore()函數(shù)的時(shí)間與本次時(shí)間差在300ms 內(nèi),證明是小程序的bug 導(dǎo)致的被重復(fù)執(zhí)行,此時(shí)退出這次運(yùn)行函數(shù)。
通過如上的方式就可以做到scroll-view 組件bindscrolltolower 事件每次均只執(zhí)行一次。 另外一提的是,scroll-view 組件發(fā)現(xiàn)有時(shí)候下拉加載的時(shí)候頁面有時(shí)候會(huì)有瞬時(shí)抖動(dòng)的情況。對(duì)于這個(gè)暫時(shí)還找不到解決方法。 U:專題文章頁啟用了新的布局樣式為了與首頁的文章列表樣式相區(qū)別,在專題文章頁啟用了新的布局樣式:左圖片右標(biāo)題+發(fā)布時(shí)間等信息集合。采用flex 布局三兩下就搞定,不過反而遇到個(gè)CSS 上的問題——text-align:justify; 與webkit-line-clamp 共用導(dǎo)致的問題。如下圖:
自己在平常的開發(fā)中基于兼容性考慮從來都不會(huì)用text-align:justify;(小程序本身支持justify),當(dāng)這個(gè)屬性與多行截字的webkit-line-clamp共用就會(huì)導(dǎo)致上面的問題。解決方法是改成text-align:left;。 文末結(jié)題以上就是1.2 版本的主要更新內(nèi)容。1.2 版本的審核算快,第二天晚上就告知通過了。 |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)