本站微信小程序版“DeveWork極客”在中文WP 圈子可謂是一直被模仿,從未被超越。如今快速迭代,寫作本文的現(xiàn)在是1.6 版本。作為“WordPress 開發(fā)微信小程序”系列的第四篇,記錄的是v1.3 ~ v1.6 的開發(fā)要點。
如果你沒有看過本小程序,可以通過下面的小程序碼進入體驗。注意看文章的此時你掃碼進入的版本可能不是1.6 版本了。
直接從v1.2 到v1.6 并不是我要做版本帝,確實迭代了這四個版本,也提交審核了四次,只不過有兩次提交是為了修復嚴重的bug。本文的展開方式跟之前的稍微不一樣。建議先看完之前的文章再看本文:
《WordPress 網(wǎng)站基于REST API 開發(fā)“微信小程序”實戰(zhàn)》
《WordPress 網(wǎng)站開發(fā)“微信小程序“實戰(zhàn)(二)》
《WordPress 網(wǎng)站開發(fā)“微信小程序“實戰(zhàn)(三)》
v1.6 最重磅功能是實現(xiàn)小程序頁面“文章內鏈”可跳轉,不信你可以點擊任意藍色鏈接看看。相信你也明白,所謂“文章內鏈”,本質上就是WordPress 的文章頁URL。在小程序上Jeff 是過濾了非devework.com 的外鏈與非文章頁URL。
具體技術實現(xiàn)就不說了,因為要改動的文件還蠻多的。對于外鏈與非文章頁URL 的過濾上也可能還存在漏網(wǎng)之魚。值得一說的是:跳轉是用wx.redirectTo接口而非wx.navigateTo,因為后者在使用時候會保留當前頁面,跳轉到應用內的某個頁面;而小程序規(guī)定頁面路徑只能是五層。如果用戶層層點擊,切換了五篇文章后續(xù)就無法響應了——如此用戶可能會認為你做的小程序有問題。
而wx.redirectTo因為是“關閉當前頁面,跳轉到應用內的某個頁面”的方式,所以基于用戶體驗考慮,第一次點擊文章內鏈時會有一個溫馨提醒:
小程序最近新出了wx.setTopBarText接口用來動態(tài)設置置頂欄文字內容。v1.6 也加上了這個功能,具體的標題就跟分享時候的標題保持一致就行了。
使用這個接口,官方文檔上有一句“調用成功后,需間隔5s 才能再次調用此接口”,Jeff 的處理方式是setTimeout() 5s 后再調用這個接口。
// https://devework.com/wordpress-weapp-4.html // 設置置頂標題欄 setTimeout(() => { wx.setTopBarText({ text: title }); }, 5000); |
現(xiàn)在借助wx.setEnableDebug接口實現(xiàn)上線的正式版小程序中啟用vconsole,但不得不說,有個小坑:如果要用這個接口,一般都是通過在某些地方埋入點擊事件的方式(類似彩蛋)開啟。但因為小程序本身默認沒有做用戶鑒權,只要知道了是點哪里打開,**任何用戶**都能打開!Jeff 還以為只有綁定的小程序管理者身份的微信用戶才能打開。
綜上所述,使用wx.setEnableDebug需要開發(fā)者本身做一些鑒權判斷。具體方式就自行發(fā)揮想象力,就不分享自己的實現(xiàn)方式了。
如果要做vconsole 的線上toggle(即當前是打開的,點擊“彩蛋”就關閉;當前是關閉的,點擊“彩蛋”就開啟),分享下我配合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 }) } |
“DeveWork極客”小程序首頁是類似無限加載(下拉刷新)的文章的交互,隨著用戶往下拖動屏幕不斷請求數(shù)據(jù)。當?shù)竭_一定的數(shù)據(jù)量的時候,會出現(xiàn)“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個文章列表分頁后)就會出現(xiàn)這個報錯,那每次下拉刷新前判斷下,超過30頁就按“文章沒有過多”的情景進行處理就好了。
在小程序頁面注冊了onReachBottom,onPullDownRefresh,不出意料又遇到一些坑:
1)onReachBottom跟onPullDownRefresh都注冊的時候,用戶下拉刷新,如果頁面不滿一屏會觸發(fā)onReachBottom
2) 上拉加載,正常onReachBottom只會執(zhí)行一次,始終上常常會多次觸發(fā)。
小程序的這兩個bug 其實跟實戰(zhàn)(三)中提到的“bindscrolltolower 事件多次執(zhí)行”類似,因此處理方式也是類似。這次我更絕,1000ms 內只能一次:
// https://devework.com/wordpress-weapp-4.html // 修復onReachBottom 多次執(zhí)行的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; } // ... // 其它功能代碼 // ... }, |
小程序現(xiàn)在出了富文本組件(rech-text),個人評價么,暫時還比不上 wxParse。當前支持的標簽有限(如pre標簽不支持)且不支持綁定事件,暫時還是先用著wxParse。
這個版本主要處理了wxParse 中在處理不嚴格開閉合的HTML 標簽報錯的問題,另外優(yōu)化了富文本中的圖片加載性能,順便為了配合本文開頭說的“文章內鏈”點擊可跳轉功能大改了一番。
WordPress 在升級到4.8 版本后REST API 稍微有修改,其中一點是當請求不存在的文章頁數(shù)大于總數(shù)時,會status code 400 并提示“請求的頁碼大于總頁數(shù)。”
因此做“文章沒有過多”情景處理的代碼需要稍微改下:
// https://devework.com/wordpress-weapp-4.html // 400 表示 請求的頁碼大于總頁數(shù) if (res.statusCode === 400) { self.setData({ noMore: true }); return; } |
小程序本質上走的是iOS 的設計規(guī)范,你如果用iOS 設備可以看下在iOS App 中類似小程序TabBar 的區(qū)域,Icon 默認是空心圖標,處于選中狀態(tài)則是實心圖標。之前的版本其實沒有意識到,這次統(tǒng)一按照這個規(guī)范換了下TabBar Icon。
v1.6 稍微改了下專題的tab 文章列表頁的樣式,具體而言是banner 圖片做斜度切割處理,然后文章貼圖稍微放大了下。
“推薦專題”跟“閱讀記錄”這兩個功能,無論是樣式還是交互,已經被不少人模仿了過去。作為可舉證證明原創(chuàng)的原創(chuàng)者,我表示還挺開心的。你可以說這又不是什么新奇的界面憑什么說人家模仿你,但連文案都被模仿得一樣,表示笑而不語 :)
“閱讀記錄”的功能現(xiàn)在超過10 條會在底部顯示“清空閱讀記錄”的入口。之所以是超過10條才顯示,原因是小于10 條前歷史文章列表是不滿一屏的,此時“清空閱讀記錄”這個不好看的入口會頂著位置,所以盡量巧妙藏起來,用戶有清空的需求時自然是能找到。
嗯,這個小細節(jié)估計很快也會被模仿過去。
之前的版本會在文章日期后顯示文章瀏覽數(shù),但也僅僅是顯示而已,并沒有跟網(wǎng)頁端進行瀏覽數(shù)據(jù)同步。這個版本終于加上了這個功能。具體實現(xiàn)方式也不多說,畢竟需要WordPress 端本身啟用文章瀏覽功能。
一些小程序的新接口在舊版本微信上是無法生效的,小程序官方會告訴你說有兩種方法,一種是通過wx.getSystemInfo獲取版本信息,一種是通過wx.canIUse的方式輔助兼容處理。但很坑爹,這兩種方法均不是那么完善。說多都是淚,建議多拿實機測試,特別是安卓機。
這個版本還有一些細節(jié)優(yōu)化點:
1)文章列表加載完畢后“無過多文章的提示”增加一個箭頭表示點擊可以返回頂部。
2)下拉加載新文章列表后自動往上滾動一點位置。個人感覺可以提升用戶體驗,雖然小程序的坑會導致不時失效。