本文是“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：在一些頁面啟用PullDownRefresh

PullDownRefresh即上拉重加載。這個(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)用。

// https://devework.com/wordpress-weapp-3.html
// 網(wǎng)絡(luò)加載失敗提示
function netWorkErrorAlert(){
    wx.showModal({
        title: '文章加載失敗',
        content: '請(qǐng)求失敗，可能是網(wǎng)絡(luò)故障，請(qǐng)稍后再試。',
        showCancel: false,
        success: function (res) {
            if (res.confirm) {
                console.log('netWorkErrorAlert 用戶點(diǎn)擊確定')
            }
        }
    })
}
 
// 實(shí)際過程本人是用promise 的catch 狀態(tài)，這里僅演示原生語法
wx.request({
  url: 'test.php', //僅為示例，并非真實(shí)的接口地址
  success: function(res) {
    console.log(res.data)
  }
  fail: function(res) {
  	// netWorkErrorAlert 函數(shù)我是放到了util 里面
    util.netWorkErrorAlert();
  }
})

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ù)。

// https://devework.com/wordpress-weapp-3.html
// 需要在page 的data 對(duì)象中設(shè)置默認(rèn)值
data: {
        lastLoadTime: 0 //上一次load的時(shí)間
},
 
// 下拉加載綁定的函數(shù)
loadMore: function (e) {
	// 300ms 內(nèi)多次下拉的話僅算一次
	//獲取點(diǎn)擊當(dāng)前時(shí)間
	var curTime = e.timeStamp;
	//上一次加載的時(shí)間
	var lastTime = this.data.lastLoadTime;
	console.log(lastTime, curTime, curTime - lastTime);
	if (curTime - lastTime < 300) {
	    console.log("不正常的加載間隔時(shí)間");
	    return;
	}
	... //其他代碼略
	this.setData({
            lastLoadTime: curTime
  	});
  	... //其他代碼略
 }

通過如上的方式就可以做到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 版本的審核算快，第二天晚上就告知通過了。