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

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

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

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

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

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

新增功能

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

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

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

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

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

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

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

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

vconsole 的線上toggle

現(xiàn)在借助wx.setEnableDebug接口實(shí)現(xiàn)上線的正式版小程序中啟用vconsole，但不得不說(shuō)，有個(gè)小坑：如果要用這個(gè)接口，一般都是通過(guò)在某些地方埋入點(diǎn)擊事件的方式（類(lèi)似彩蛋）開(kāi)啟。但因?yàn)樾〕绦虮旧砟J(rèn)沒(méi)有做用戶鑒權(quán)，只要知道了是點(diǎn)哪里打開(kāi)，**任何用戶**都能打開(kāi)！Jeff 還以為只有綁定的小程序管理者身份的微信用戶才能打開(kāi)。

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

如果要做vconsole 的線上toggle（即當(dāng)前是打開(kāi)的，點(diǎn)擊“彩蛋”就關(guān)閉；當(dāng)前是關(guān)閉的，點(diǎn)擊“彩蛋”就開(kāi)啟），分享下我配合localStore 實(shí)現(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’的報(bào)錯(cuò)問(wèn)題

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

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

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

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

onReachBottom，onPullDownRefresh 請(qǐng)求過(guò)多的問(wèn)題

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

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

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

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

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

wxParse 的一些問(wèn)題

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

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

WordPress 升級(jí)到4.8 后REST API 更換的問(wèn)題

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

因此做“文章沒(méi)有過(guò)多”情景處理的代碼需要稍微改下：

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

優(yōu)化部分

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

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

專(zhuān)題列表新樣式

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

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

閱讀歷史超過(guò)10條顯示清空入口

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

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

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

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

舊版本微信的兼容

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

其它優(yōu)化點(diǎn)

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

1）文章列表加載完畢后“無(wú)過(guò)多文章的提示”增加一個(gè)箭頭表示點(diǎn)擊可以返回頂部。

2）下拉加載新文章列表后自動(dòng)往上滾動(dòng)一點(diǎn)位置。個(gè)人感覺(jué)可以提升用戶體驗(yàn)，雖然小程序的坑會(huì)導(dǎo)致不時(shí)失效。