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

原文地址：https://devework.com/wordpres...

本站微信小程序版「DeveWork極客」在中文WP 圈子可謂是一直被模仿，從未被超越。現在快速迭代，寫做本文的如今是1.6 版本。做爲「WordPress 開發微信小程序」系列的第四篇，記錄的是v1.3 ~ v1.6 的開發要點。

若是你沒有看過本小程序，能夠經過下面的小程序碼進入體驗。注意看文章的此時你掃碼進入的版本可能不是1.6 版本了。

直接從v1.2 到v1.6 並非我要作版本帝，確實迭代了這四個版本，也提交審覈了四次，只不過有兩次提交是爲了修復嚴重的bug。本文的展開方式跟以前的稍微不同。建議先看完以前的文章再看本文：

WordPress 網站基於REST API 開發「微信小程序」實戰

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

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

新增功能

重磅功能：小程序頁面「文章內鏈」點擊可跳轉

v1.6 最重磅功能是實現小程序頁面「文章內鏈」可跳轉，不信你能夠點擊任意藍色連接看看。相信你也明白，所謂「文章內鏈」，本質上就是WordPress 的文章頁URL。在小程序上Jeff 是過濾了非devework.com 的外鏈與非文章頁URL。

具體技術實現就不說了，由於要改動的文件還蠻多的。對於外鏈與非文章頁URL 的過濾上也可能還存在漏網之魚。值得一說的是：跳轉是用wx.redirectTo接口而非wx.navigateTo，由於後者在使用時候會保留當前頁面，跳轉到應用內的某個頁面；而小程序規定頁面路徑只能是五層。若是用戶層層點擊，切換了五篇文章後續就沒法響應了——如此用戶可能會認爲你作的小程序有問題。

而wx.redirectTo由於是「關閉當前頁面，跳轉到應用內的某個頁面」的方式，因此基於用戶體驗考慮，第一次點擊文章內鏈時會有一個舒適提醒：

小程序置頂標題

小程序最近新出了wx.setTopBarText接口用來動態設置置頂欄文字內容。v1.6 也加上了這個功能，具體的標題就跟分享時候的標題保持一致就好了。

使用這個接口，官方文檔上有一句「調用成功後，需間隔5s 才能再次調用此接口」，Jeff 的處理方式是setTimeout() 5s 後再調用這個接口。

// https://devework.com/wordpress-weapp-4.html
// 設置置頂標題欄
setTimeout(() => {
    wx.setTopBarText({
        text: title
    });
}, 5000);

vconsole 的線上toggle

如今藉助wx.setEnableDebug接口實現上線的正式版小程序中啓用vconsole，但不得不說，有個小坑：若是要用這個接口，通常都是經過在某些地方埋入點擊事件的方式（相似彩蛋）開啓。但由於小程序自己默認沒有作用戶鑑權，只要知道了是點哪裏打開，任何用戶都能打開！Jeff 還覺得只有綁定的小程序管理者身份的微信用戶才能打開。

綜上所述，使用wx.setEnableDebug須要開發者自己作一些鑑權判斷。具體方式就自行發揮想象力，就不分享本身的實現方式了。

若是要作vconsole 的線上toggle（即當前是打開的，點擊「彩蛋」就關閉；當前是關閉的，點擊「彩蛋」就開啓），分享下我配合localStore 實現的代碼：

// https://devework.com/wordpress-weapp-4.html
// toggle vconsole
let debugFlag = wx.getStorageSync('openDebug') || false;
console.log(debugFlag);
if (!debugFlag) {
    wx.setEnableDebug({
        enableDebug: true
    });
    wx.setStorage({
        key: "openDebug",
        data: true
    })
} else {
    wx.setEnableDebug({
        enableDebug: false,
        success: function (res) {
            console.log(res.data)
        }
    });
    wx.setStorage({
        key: "openDebug",
        data: false
    })
}

修復的bugs

‘exceed max data size’的報錯問題

「DeveWork+」小程序首頁是相似無限加載（下拉刷新）的文章的交互，隨着用戶往下拖動屏幕不斷請求數據。當到達必定的數據量的時候，會出現「exceed max data size!event_name=custom_event_appDataChange,size=xxxxx」的錯誤，以下面的截圖所示：

不用猜也知道是this.setData 一次性設置的data 過大致使的。處理方式上可結合以下兩種方式：

1) 清空不要的data 字段：如「DeveWork+」小程序首頁文章，請求WordPress 的Rest API後，文章內文是截取了一部分展現的，那麼能夠將這這部分用另外的對象屬性來賦值，而原來的直接null掉釋放空間。

2) 人爲設置一個閾值：Jeff 試了下「DeveWork+」小程序首頁文章在下拉刷新約30 下（即請求30個文章列表分頁後）就會出現這個報錯，那每次下拉刷新前判斷下，超過30頁就按「文章沒有過多」的情景進行處理就行了。

onReachBottom，onPullDownRefresh 請求過多的問題

在小程序頁面註冊了onReachBottom，onPullDownRefresh，不出意料又遇到一些坑：

1）onReachBottom跟onPullDownRefresh都註冊的時候，用戶下拉刷新，若是頁面不滿一屏會觸發onReachBottom

2) 上拉加載，正常onReachBottom只會執行一次，始終上經常會屢次觸發。

小程序的這兩個bug 其實跟實戰(三)中提到的「bindscrolltolower 事件屢次執行」相似，所以處理方式也是相似。此次我更絕，1000ms 內只能一次：

// https://devework.com/wordpress-weapp-4.html
// 修復onReachBottom 屢次執行的bug
onReachBottom() {
        let self = this;
        // 1s 內屢次ReachBottom 話僅算一次
        //獲取點擊當前時間
        let curTime = Date.now();
        //上一次加載的時間
        let lastTime = this.data.lastLoadTime;
        console.log(lastTime, curTime, curTime - lastTime);
        if (curTime - lastTime < 1000) {
            console.log("不正常的加載間隔時間");
            return;
        }
        // ...
        // 其它功能代碼
        // ...
    },

wxParse 的一些問題

小程序如今出了富文本組件（rech-text），我的評價麼，暫時還比不上 wxParse。當前支持的標籤有限（如pre標籤不支持）且不支持綁定事件，暫時仍是先用着wxParse。

這個版本主要處理了wxParse 中在處理不嚴格開閉合的HTML 標籤報錯的問題，另外優化了富文本中的圖片加載性能，順便爲了配合本文開頭說的「文章內鏈」點擊可跳轉功能大改了一番。

WordPress 升級到4.8 後REST API 更換的問題

WordPress 在升級到4.8 版本後REST API 稍微有修改，其中一點是當請求不存在的文章頁數大於總數時，會status code 400 並提示「請求的頁碼大於總頁數。」

所以作「文章沒有過多」情景處理的代碼須要稍微改下：

// https://devework.com/wordpress-weapp-4.html
// 400 表示 請求的頁碼大於總頁數
if (res.statusCode === 400) {
    self.setData({
        noMore: true
    });
    return;
}

優化部分

更換TabBar Icon，選擇狀態爲實心

小程序本質上走的是iOS 的設計規範，你若是用iOS 設備能夠看下在iOS App 中相似小程序TabBar 的區域，Icon 默認是空心圖標，處於選中狀態則是實心圖標。以前的版本其實沒有意識到，此次統一按照這個規範換了下TabBar Icon。

專題列表新樣式

v1.6 稍微改了下專題的tab 文章列表頁的樣式，具體而言是banner 圖片作斜度切割處理，而後文章貼圖稍微放大了下。

「推薦專題」跟「閱讀記錄」這兩個功能，不管是樣式仍是交互，已經被很多人模仿了過去。做爲可舉證證實原創的原創者，我表示還挺開心的。你能夠說這又不是什麼新奇的界面憑什麼說人家模仿你，但連文案都被模仿得同樣，表示笑而不語 :)

閱讀歷史超過10條顯示清空入口

「閱讀記錄」的功能如今超過10 條會在底部顯示「清空閱讀記錄」的入口。之因此是超過10條才顯示，緣由是小於10 條前歷史文章列表是不滿一屏的，此時「清空閱讀記錄」這個很差看的入口會頂着位置，因此儘可能巧妙藏起來，用戶有清空的需求時天然是能找到。

嗯，這個小細節估計很快也會被模仿過去。

文章瀏覽數與後端同步

以前的版本會在文章日期後顯示文章瀏覽數，但也僅僅是顯示而已，並無跟網頁端進行瀏覽數據同步。這個版本終於加上了這個功能。具體實現方式也很少說，畢竟須要WordPress 端自己啓用文章瀏覽功能。

舊版本微信的兼容

一些小程序的新接口在舊版本微信上是沒法生效的，小程序官方會告訴你說有兩種方法，一種是經過wx.getSystemInfo獲取版本信息，一種是經過wx.canIUse的方式輔助兼容處理。但很坑爹，這兩種方法均不是那麼完善。說多都是淚，建議多拿實機測試，特別是安卓機。

其它優化點

這個版本還有一些細節優化點：

1）文章列表加載完畢後「無過多文章的提示」增長一個箭頭表示點擊能夠返回頂部。

2）下拉加載新文章列表後自動往上滾動一點位置。我的感受能夠提高用戶體驗，雖然小程序的坑會致使不時失效。

說說被模仿與目的

如本文標題所言，本站小程序DeveWork+ 做爲「WordPress+微信小程序」的最佳典範（自封的），在中文WordPress 圈子目前是「一直被模仿，從未被超越」。如今很多WordPress 做爲後端架構的小程序直接或間接模仿了本小程序的UI 與交互。固然，本人除了大度實際上是沒啥辦法的，畢竟這東西又無法申請專利是吧？我只好借本身的平臺說一聲，但願各位給點節操。

天下熙熙皆爲利來，天下攘攘皆爲利往。說到小程序這個當然也適用，風口一出來，知道的聰明人都想抱個大腿，因此能聽到官方說打擊僞造官方小程序大會的，找人開發小程序被騙的等等。即便如今互聯網那麼發達，任什麼時候候都不缺利用信息不對稱爲本身謀利的人。

其實「DeveWork+」小程序目前的累計用戶尚未超過1000，天天的訪問量也沒有多少。但以數字來衡量自己不是個人本意。嗯，作人麼，開心就好。

本站「微信小程序」系列文章：https://devework.com/tag/weapp，但願一直有新文章產出。

原文地址：https://devework.com/wordpres...