WordPress 網站開發「微信小程序「實戰(三)

本文是「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 版本的審覈算快，次日晚上就告知經過了。

在這裏也順便說兩件事情：

1）這陣子有很多人經過本人的聯繫方式來索求源代碼。統一說明下，現階段不打算開源代碼。Jeff 最討厭就是各類伸手黨，特別是那些直接發一封正文爲空，標題爲相似「發份代碼過來」郵件的人——這種郵件我是立馬右鍵刪除。開誠佈公：關於小程序代碼，有能力者請參考本系列文章或其它資料本身寫；沒能力者可考慮有償合做，就醬。

2）最近發現本系列第一篇[《WordPress 網站基於REST API 開發「微信小程序」實戰
》]( https://devework.com/wordpres... ) 被人。。怎麼說呢，說抄襲麼又不能這麼蓋棺定論，但文章標題乃至全文思路都是大段大段參考，句子稍微換了下表達方式。對於這種「抄xi」方式，自我開始寫博客以來也很多見，暫且送上兩個字：呵呵。若是看官有幸看到那篇文章，請不要認爲我那篇是抄襲人家的哦~

本站「微信小程序」系列文章：https://devework.com/tag/weapp