本站微信小程序版“DeveWork極客”在中文WP 圈子可謂是一直被模仿，從未被超越。如今快速迭代，寫作本文的現(xiàn)在是1.6 版本。作為“WordPress 開發(fā)微信小程序”系列的第四篇，記錄的是v1.3 ~ v1.6 的開發(fā)要點。

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

直接從v1.2 到v1.6 并不是我要做版本帝，確實迭代了這四個版本，也提交審核了四次，只不過有兩次提交是為了修復(fù)嚴(yán)重的bug。本文的展開方式跟之前的稍微不一樣。建議先看完之前的文章再看本文：

《WordPress 網(wǎng)站基于REST API 開發(fā)“微信小程序”實戰(zhàn)》

《WordPress 網(wǎng)站開發(fā)“微信小程序“實戰(zhàn)(二)》

《WordPress 網(wǎng)站開發(fā)“微信小程序“實戰(zhàn)(三)》

新增功能

重磅功能：小程序頁面“文章內(nèi)鏈”點擊可跳轉(zhuǎn)

v1.6 最重磅功能是實現(xiàn)小程序頁面“文章內(nèi)鏈”可跳轉(zhuǎn)，不信你可以點擊任意藍(lán)色鏈接看看。相信你也明白，所謂“文章內(nèi)鏈”，本質(zhì)上就是WordPress 的文章頁URL。在小程序上Jeff 是過濾了非devework.com 的外鏈與非文章頁URL。

具體技術(shù)實現(xiàn)就不說了，因為要改動的文件還蠻多的。對于外鏈與非文章頁URL 的過濾上也可能還存在漏網(wǎng)之魚。值得一說的是：跳轉(zhuǎn)是用wx.redirectTo接口而非wx.navigateTo，因為后者在使用時候會保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面；而小程序規(guī)定頁面路徑只能是五層。如果用戶層層點擊，切換了五篇文章后續(xù)就無法響應(yīng)了——如此用戶可能會認(rèn)為你做的小程序有問題。

而wx.redirectTo因為是“關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面”的方式，所以基于用戶體驗考慮，第一次點擊文章內(nèi)鏈時會有一個溫馨提醒：

小程序置頂標(biāo)題

小程序最近新出了wx.setTopBarText接口用來動態(tài)設(shè)置置頂欄文字內(nèi)容。v1.6 也加上了這個功能，具體的標(biāo)題就跟分享時候的標(biāo)題保持一致就行了。

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

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

vconsole 的線上toggle

現(xiàn)在借助wx.setEnableDebug接口實現(xiàn)上線的正式版小程序中啟用vconsole，但不得不說，有個小坑：如果要用這個接口，一般都是通過在某些地方埋入點擊事件的方式（類似彩蛋）開啟。但因為小程序本身默認(rèn)沒有做用戶鑒權(quán)，只要知道了是點哪里打開，**任何用戶**都能打開！Jeff 還以為只有綁定的小程序管理者身份的微信用戶才能打開。

綜上所述，使用wx.setEnableDebug需要開發(fā)者本身做一些鑒權(quán)判斷。具體方式就自行發(fā)揮想象力，就不分享自己的實現(xiàn)方式了。

如果要做vconsole 的線上toggle（即當(dāng)前是打開的，點擊“彩蛋”就關(guān)閉；當(dāng)前是關(guān)閉的，點擊“彩蛋”就開啟），分享下我配合localStore 實現(xiàn)的代碼：

// 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
	})
}

修復(fù)的bugs

‘exceed max data size’的報錯問題

“DeveWork極客”小程序首頁是類似無限加載（下拉刷新）的文章的交互，隨著用戶往下拖動屏幕不斷請求數(shù)據(jù)。當(dāng)?shù)竭_(dá)一定的數(shù)據(jù)量的時候，會出現(xiàn)“exceed max data size!event_name=custom_event_appDataChange,size=xxxxx”的錯誤，如下面的截圖所示：

不用猜也知道是this.setData 一次性設(shè)置的data 過大導(dǎo)致的。處理方式上可結(jié)合如下兩種方式：

1) 清空不要的data 字段：如“DeveWork極客”小程序首頁文章，請求WordPress 的Rest API后，文章內(nèi)文是截取了一部分展示的，那么可以將這這部分用另外的對象屬性來賦值，而原來的直接null掉釋放空間。

2) 人為設(shè)置一個閾值：Jeff 試了下“DeveWork極客”小程序首頁文章在下拉刷新約30 下（即請求30個文章列表分頁后）就會出現(xiàn)這個報錯，那每次下拉刷新前判斷下，超過30頁就按“文章沒有過多”的情景進(jìn)行處理就好了。

onReachBottom，onPullDownRefresh 請求過多的問題

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

1）onReachBottom跟onPullDownRefresh都注冊的時候，用戶下拉刷新，如果頁面不滿一屏?xí)|發(fā)onReachBottom

2) 上拉加載，正常onReachBottom只會執(zhí)行一次，始終上常常會多次觸發(fā)。

小程序的這兩個bug 其實跟實戰(zhàn)(三)中提到的“bindscrolltolower 事件多次執(zhí)行”類似，因此處理方式也是類似。這次我更絕，1000ms 內(nèi)只能一次：

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

wxParse 的一些問題

小程序現(xiàn)在出了富文本組件（rech-text），個人評價么，暫時還比不上 wxParse。當(dāng)前支持的標(biāo)簽有限（如pre標(biāo)簽不支持）且不支持綁定事件，暫時還是先用著wxParse。

這個版本主要處理了wxParse 中在處理不嚴(yán)格開閉合的HTML 標(biāo)簽報錯的問題，另外優(yōu)化了富文本中的圖片加載性能，順便為了配合本文開頭說的“文章內(nèi)鏈”點擊可跳轉(zhuǎn)功能大改了一番。

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

WordPress 在升級到4.8 版本后REST API 稍微有修改，其中一點是當(dāng)請求不存在的文章頁數(shù)大于總數(shù)時，會status code 400 并提示“請求的頁碼大于總頁數(shù)。”

因此做“文章沒有過多”情景處理的代碼需要稍微改下：

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

優(yōu)化部分

更換TabBar Icon，選擇狀態(tài)為實心

小程序本質(zhì)上走的是iOS 的設(shè)計規(guī)范，你如果用iOS 設(shè)備可以看下在iOS App 中類似小程序TabBar 的區(qū)域，Icon 默認(rèn)是空心圖標(biāo)，處于選中狀態(tài)則是實心圖標(biāo)。之前的版本其實沒有意識到，這次統(tǒng)一按照這個規(guī)范換了下TabBar Icon。

專題列表新樣式

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

“推薦專題”跟“閱讀記錄”這兩個功能，無論是樣式還是交互，已經(jīng)被不少人模仿了過去。作為可舉證證明原創(chuàng)的原創(chuàng)者，我表示還挺開心的。你可以說這又不是什么新奇的界面憑什么說人家模仿你，但連文案都被模仿得一樣，表示笑而不語 :)

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

“閱讀記錄”的功能現(xiàn)在超過10 條會在底部顯示“清空閱讀記錄”的入口。之所以是超過10條才顯示，原因是小于10 條前歷史文章列表是不滿一屏的，此時“清空閱讀記錄”這個不好看的入口會頂著位置，所以盡量巧妙藏起來，用戶有清空的需求時自然是能找到。

嗯，這個小細(xì)節(jié)估計很快也會被模仿過去。

文章瀏覽數(shù)與后端同步

之前的版本會在文章日期后顯示文章瀏覽數(shù)，但也僅僅是顯示而已，并沒有跟網(wǎng)頁端進(jìn)行瀏覽數(shù)據(jù)同步。這個版本終于加上了這個功能。具體實現(xiàn)方式也不多說，畢竟需要WordPress 端本身啟用文章瀏覽功能。

舊版本微信的兼容

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

其它優(yōu)化點

這個版本還有一些細(xì)節(jié)優(yōu)化點：

1）文章列表加載完畢后“無過多文章的提示”增加一個箭頭表示點擊可以返回頂部。

2）下拉加載新文章列表后自動往上滾動一點位置。個人感覺可以提升用戶體驗，雖然小程序的坑會導(dǎo)致不時失效。