本站微信小程序版“極客”在中文WP 圈子可謂是一直被模仿,從未被超越。現在快速迭代,寫做本文的如今是1.6 版本。做為“ 開發微信小程序”系列的第四篇,記錄的是v1.3 ~ v1.6 的開發要點。html
若是你沒有看過本小程序,能夠經過下面的小程序碼進入體驗。注意看文章的此時你掃碼進入的版本可能不是1.6 版本了。java
直接從v1.2 到v1.6 并非我要作版本帝,確實迭代了這四個版本,也提交審核了四次,只不過有兩次提交是為了修復嚴重的bug。本文的展開方式跟以前的稍微不同。建議先看完以前的文章再看本文:小程序
網站基于REST API 開發“微信小程序”實戰后端
網站開發“微信小程序“實戰(二)微信小程序
網站開發“微信小程序“實戰(三)api
新增功能 重磅功能:小程序頁面“文章內鏈”點擊可跳轉
v1.6 最重磅功能是實現小程序頁面“文章內鏈”可跳轉wordpress小程序不能評論,不信你能夠點擊任意藍色連接看看。相信你也明白,所謂“文章內鏈”,本質上就是 的文章頁URL。在小程序上Jeff 是過濾了非 的外鏈與非文章頁URL。微信
具體技術實現就不說了,由于要改動的文件還蠻多的。對于外鏈與非文章頁URL 的過濾上也可能還存在漏網之魚。值得一說的是:跳轉是用wx.接口而非wx.,由于后者在使用時候會保留當前頁面,跳轉到應用內的某個頁面;而小程序規定頁面路徑只能是五層。若是用戶層層點擊,切換了五篇文章后續就沒法響應了——如此用戶可能會認為你作的小程序有問題。架構
而wx.由于是“關閉當前頁面,跳轉到應用內的某個頁面”的方式,因此基于用戶體驗考慮,第一次點擊文章內鏈時會有一個舒適提醒:app
小程序置頂標題
小程序最近新出了wx.接口用來動態設置置頂欄文字內容。v1.6 也加上了這個功能,具體的標題就跟分享時候的標題保持一致就好了。
使用這個接口,官方文檔上有一句“調用成功后,需間隔5s 才能再次調用此接口”,Jeff 的處理方式是() 5s 后再調用這個接口。
// https://devework.com/wordpress-weapp-4.html // 設置置頂標題欄 setTimeout(() => { wx.setTopBarText({ text: title }); }, 5000);
的線上
如今借助wx.接口實現上線的正式版小程序中啟用,但不得不說,有個小坑:若是要用這個接口,通常都是經過在某些地方埋入點擊事件的方式(相似彩蛋)開啟。但由于小程序自己默認沒有作用戶鑒權,只要知道了是點哪里打開,任何用戶都能打開!Jeff 還覺得只有綁定的小程序管理者身份的微信用戶才能打開。
綜上所述,使用wx.須要開發者自己作一些鑒權判斷。具體方式就自行發揮想象力,就不分享本身的實現方式了。
若是要作 的線上(即當前是打開的,點擊“彩蛋”就關閉;當前是關閉的,點擊“彩蛋”就開啟),分享下我配合 實現的代碼:
// 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 ‘ max data size’的報錯問題
“+”小程序首頁是相似無限加載(下拉刷新)的文章的交互,隨著用戶往下拖動屏幕不斷請求數據。當到達必定的數據量的時候,會出現“ max data size!=,size=xxxxx”的錯誤,以下面的截圖所示:
不用猜也知道是this. 一次性設置的data 過大致使的。處理方式上可結合以下兩種方式:
1) 清空不要的data 字段:如“+”小程序首頁文章,請求 的Rest API后,文章內文是截取了一部分展現的,那么能夠將這這部分用另外的對象屬性來賦值,而原來的直接null掉釋放空間。
2) 人為設置一個閾值:Jeff 試了下“+”小程序首頁文章在下拉刷新約30 下(即請求30個文章列表分頁后)就會出現這個報錯,那每次下拉刷新前判斷下,超過30頁就按“文章沒有過多”的情景進行處理就行了。
, 請求過多的問題
在小程序頁面注冊了,,不出意料又遇到一些坑:
1)跟都注冊的時候,用戶下拉刷新,若是頁面不滿一屏會觸發
2) 上拉加載,正常只會執行一次,始終上經常會屢次觸發。
小程序的這兩個bug 其實跟實戰(三)中提到的“ 事件屢次執行”相似,所以處理方式也是相似。此次我更絕, 內只能一次:
// 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; } // ... // 其它功能代碼 // ... },
的一些問題
小程序如今出了富文本組件(rech-text),我的評價么,暫時還比不上 。當前支持的標簽有限(如pre標簽不支持)且不支持綁定事件,暫時仍是先用著。
這個版本主要處理了 中在處理不嚴格開閉合的HTML 標簽報錯的問題,另外優化了富文本中的圖片加載性能,順便為了配合本文開頭說的“文章內鏈”點擊可跳轉功能大改了一番。
升級到4.8 后REST API 更換的問題
在升級到4.8 版本后REST API 稍微有修改,其中一點是當請求不存在的文章頁數大于總數時,會 code 400 并提示“請求的頁碼大于總頁數。”
所以作“文章沒有過多”情景處理的代碼須要稍微改下:
// https://devework.com/wordpress-weapp-4.html // 400 表示 請求的頁碼大于總頁數 if (res.statusCode === 400) { self.setData({ noMore: true }); return; }
優化部分 更換 Icon,選擇狀態為實心
小程序本質上走的是iOS 的設計規范,你若是用iOS 設備能夠看下在iOS App 中相似小程序 的區域,Icon 默認是空心圖標,處于選中狀態則是實心圖標。以前的版本其實沒有意識到,此次統一按照這個規范換了下 Icon。
專題列表新樣式
v1.6 稍微改了下專題的tab 文章列表頁的樣式,具體而言是 圖片作斜度切割處理,而后文章貼圖稍微放大了下。
“推薦專題”跟“閱讀記錄”這兩個功能,不管是樣式仍是交互,已經被很多人模仿了過去。做為可舉證證實原創的原創者wordpress小程序不能評論,我表示還挺開心的。你能夠說這又不是什么新奇的界面憑什么說人家模仿你,但連文案都被模仿得同樣,表示笑而不語 :)
閱讀歷史超過10條顯示清空入口
“閱讀記錄”的功能如今超過10 條會在底部顯示“清空閱讀記錄”的入口。之因此是超過10條才顯示,緣由是小于10 條前歷史文章列表是不滿一屏的,此時“清空閱讀記錄”這個很差看的入口會頂著位置,因此盡可能巧妙藏起來,用戶有清空的需求時天然是能找到。
嗯,這個小細節估計很快也會被模仿過去。
文章瀏覽數與后端同步
以前的版本會在文章日期后顯示文章瀏覽數,但也僅僅是顯示而已,并無跟網頁端進行瀏覽數據同步。這個版本終于加上了這個功能。具體實現方式也很少說,畢竟須要 端自己啟用文章瀏覽功能。
舊版本微信的兼容
一些小程序的新接口在舊版本微信上是沒法生效的,小程序官方會告訴你說有兩種方法,一種是經過wx.獲取版本信息,一種是經過wx.的方式輔助兼容處理。但很坑爹,這兩種方法均不是那么完善。說多都是淚,建議多拿實機測試,特別是安卓機。
其它優化點
這個版本還有一些細節優化點:
1)文章列表加載完畢后“無過多文章的提示”增長一個箭頭表示點擊能夠返回頂部。
2)下拉加載新文章列表后自動往上滾動一點位置。我的感受能夠提高用戶體驗,雖然小程序的坑會致使不時失效。
說說被模仿與目的
如本文標題所言,本站小程序+ 做為“+微信小程序”的最佳典范(自封的),在中文 圈子目前是“一直被模仿,從未被超越”。如今很多 做為后端架構的小程序直接或間接模仿了本小程序的UI 與交互。固然,本人除了大度實際上是沒啥辦法的,畢竟這東西又無法申請專利是吧?我只好借本身的平臺說一聲,但愿各位給點節操。
天下熙熙皆為利來,天下攘攘皆為利往。說到小程序這個當然也適用,風口一出來,知道的聰明人都想抱個大腿,因此能聽到官方說打擊偽造官方小程序大會的,找人開發小程序被騙的等等。即便如今互聯網那么發達,任什么時候候都不缺利用信息不對稱為本身謀利的人。
其實“+”小程序目前的累計用戶尚未超過1000,天天的訪問量也沒有多少。但以數字來衡量自己不是個人本意。嗯,作人么,開心就好。
本站“微信小程序”系列文章:,但愿一直有新文章產出。