本文是“WordPress 開發微信小程序”系列的第三篇，本文記錄的是“DeveWork極客”小程序1.2 版本的開發要點。建議先看完第一篇、第二篇再來閱讀本文。

如果你沒有看過本小程序，可以通過下面的小程序碼進入體驗。注意看文章的此時你掃碼進入的版本可能不是1.2 版本了。

“DeveWork極客”小程序v1.2 的更新內容主要集中在提升用戶體驗的優化點以及修復遺留bug。如同上一篇，本文除最后一章節，每個章節即為一個改動點，并參考微信小程序的開發者工具更新歷史采用 A(Add)、F(Fix)、U(Update) 作為小標題開頭。

A：新增“關于與反饋”頁面

“DeveWork極客”小程序v1.2 的新增內容基本上就只有這個“關于與反饋”頁面了。目前能通過文章內容頁腳、閱讀記錄頁面頁腳兩個入口進入。頁面內容主要是介紹小程序、提供反饋入口與聯系方式。反饋入口本想采用小程序的“客服會話”組件，但默認樣式實在是太難看了，最后是采用button 組件通過設置 open-type="contact" 的方式進入客服對話。有興趣歡迎通過客服會話勾搭，但一般我不會去看的哈哈，建議還是采用郵件這類聯系方式。

A：復制文章URL 功能，引導外部瀏覽器閱讀

一些讀者可能會疑惑“DeveWork極客”小程序里面的文章內容，涉及到的外鏈均不可點。這個鍋可就得由小程序來背了——微信小程序是天然的封閉體系。也因為個人小程序的規定約束，評論內容是不會展示出來的。在這個版本中增加了一個復制文章URL 的功能來引導用戶前往外部瀏覽器閱讀原文及其評論。

使用到的是wx.getClipboardData這個接口，代碼因為沒啥技術含量就不展示了。

A：在一些頁面啟用PullDownRefresh

PullDownRefresh即上拉重加載。這個版本在一些頁面啟用了PullDownRefresh，有如下兩個坑：

1）如果下拉后的背景是白色的，需要將app.json 中window 對象的backgroundTextStyle設為dark, 否則無法顯示loading 動畫。

2）小程序中scroll-view 組件與onPullDownRefresh 不能同時使用。

F：修復wxParse 的若干bug

這個版本修復wxParse 的bug 主要集中在樣式層面的，有部分內容已經向wxParse 的開發者提交PR。

1）一些內聯元素沒有相應的內聯樣式。如del 標簽。

2) pre 標簽的優化。本站的文章內容大多有大段代碼，之前在小程序版上顯示一直不是很好看。原因是wxParse 默認將代碼中的換行符刪掉了。

3）li 標簽圓圈樣式，行高樣式統一。

U：提升用戶體驗的若干優化點

這個版本主要是為了提升用戶體驗，所以在如下點進行了優化：

1）下拉加載文章的Loading 樣式進行了修改。拋棄了默認loading 組件，而采用跟網站一樣的loading 效果，直接用CSS3 寫。

2）增加數據加載失敗的彈窗提示。wx.request()這類網絡請求事件有可能遇到加載失敗的情況，這時候予以用戶提示是有必要的。Jeff 的處理方式增加一個彈窗，然后在fail 事件進行調用。

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

3）“無過多文章”場景的優化。現在能做到在“無過多文章”場景下不發送請求了。

4）閱讀記錄頁面為空時候的展示。增加了一個圖標狀態。

F：scroll-view 組件bindscrolltolower 事件多次執行

這個也是微信小程序的一個坑點。小程序首頁的scroll-view 組件bindscrolltolower 綁定了loadMore()函數。在開發工具上每次下拉加載正常，但在真機上卻發現每下拉一次，loadMore()函數會被重復多執行兩三次。如此本來是一次加載6篇文章，實際居然加載了24篇！

Jeff 的解決方案是采用了個計時器，在loadMore()函數函數中，如果發現上次運行loadMore()函數的時間與本次時間差在300ms 內，證明是小程序的bug 導致的被重復執行，此時退出這次運行函數。

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

通過如上的方式就可以做到scroll-view 組件bindscrolltolower 事件每次均只執行一次。

另外一提的是，scroll-view 組件發現有時候下拉加載的時候頁面有時候會有瞬時抖動的情況。對于這個暫時還找不到解決方法。

U：專題文章頁啟用了新的布局樣式

為了與首頁的文章列表樣式相區別，在專題文章頁啟用了新的布局樣式：左圖片右標題+發布時間等信息集合。采用flex 布局三兩下就搞定，不過反而遇到個CSS 上的問題——text-align:justify; 與webkit-line-clamp 共用導致的問題。如下圖：

自己在平常的開發中基于兼容性考慮從來都不會用text-align:justify;（小程序本身支持justify），當這個屬性與多行截字的webkit-line-clamp共用就會導致上面的問題。解決方法是改成text-align:left;。

文末結題

以上就是1.2 版本的主要更新內容。1.2 版本的審核算快，第二天晚上就告知通過了。