WordPress版微信小程式3.1.5版的新功能
- 2019 年 12 月 13 日
- 筆記
產品的完善是無止境，每過段時間就會發現產品的新問題，使用的人越多，提的需求也會越多，我聽得最多的一句話就是：如果加上某某功能就完美了。其實，完美是不存在的，每個人的視角不一樣，完美的定義也是不一樣的。
做一款開源產品，會面對很多善意的批評和建議，當然也不乏無理的要求，如何在這眾多批評、建議、要求里去取捨，用來完善產品，是考驗產品開發者的設計能力。
WordPress版微信小程式經過快一年的開發，從功能上來看，作為一個資訊類的小程式，基本的功能已經具備。不過，這個產品最初是我玩票性質的產品，主要想是為了學習和熟悉小程式的開發，而很多站長都是用WordPress做網站的，為了讓更多的WordPress站長利用微信小程式，於是就開源了這個產品。因此，小程式架構設計很不完善，很多的程式碼寫得很醜陋，大量重複和無用的程式碼，嚴重影響了程式的可讀性和運行性能。基於此，我已經著手重構新的版本，新的版本會更專業一些，功能多一些，小程式程式架構幾乎是重寫了，小程式暫定的名稱為：WordPress微信小程式Pro版。我希望新的版本能帶來新的體驗。
WordPress版微信小程式3.1.5版的新功能沒有大的改進，更準確說是小的改進和完善。主要的完善是：分享海報和下拉翻頁。
1.分享海報的改進
文章頁面的海報在上一個版本-3.0版本就已經實現了，不過這個功能有不少的問題，主要的原因是海報圖片是服務端的php生成的，對服務端的php環境要求有些高，特別是對伺服器的性能也提出了要求，這導致有時候無法生成海報的圖片，用戶體驗不好。這次改進主要是海報圖片的生成在微信小程式端來完成，主要利用微信小程式提供的canvas介面來合成圖片。微信小程式的canvas介面提供了豐富的功能，詳細的介紹請參考文檔：https://developers.weixin.qq.com/miniprogram/dev/api/canvas/create-canvas-context.html 海報的背景圖片使用的是文章內的圖片，同時利用小程式canvas介面合成海報圖片，需要把圖片下載到手機里，因此在使用這個功能的時候，需要在小程式的後台管理配置downloadFile合法域名，如下圖所示：
同時在WordPress版微信小程式的配置文件config.js里，配置downloadFile合法域名：
如果沒有配置downloadFile合法域名將會導致合成海報圖片失敗。
downloadFile合法域名可以配置第三方的的域名，比如如果網站使用的是cdn網站的圖片，可以配置cdn網站的域名。
分享海報最後合成的效果圖如下：
2.下拉方式翻頁
在以前的版本中，無論是文章列表還是評論列表的翻頁，都是通過點擊按鈕來觸發的。我原來的設計思路：是否翻頁應該讓用戶自己去決定，而不是被動的去觸發。不過現在很多用戶使用手機的習慣就是：下拉到底部去翻頁，這彷彿已經成為約定俗成的規則了，於是我就不再堅持原來的設計思路，調整為下拉到底部自動觸發翻頁。每個設計都有其道理，如何讓用戶方便使用產品才是設計的核心。
特別指出的是，以前版本的評論列表的第一頁，是隨這文章顯示而自動載入的，如果評論很多的話，就會拖慢頁面，新版本調整為下拉到底載入評論或者翻頁，這樣文章和評論就分開載入了，看完文章如果不想看評論，就不必下拉到底去看評論。在下拉載入評論的時候，增加了一個進度條的提示；評論顯示分頁（或翻頁）如下圖所示：
3.顯示指定分類的文章列表
不少WordPress網站站長提出在小程式只顯示部分分類的文章，而不是顯示所有的文章，以前覺得這是個小眾的需求，也就沒在意，後來越來越多的人提出這個想法，於是就做了一個小調整，可以在小程式的配置文件config.js里加入一個配置參數：INDEXLISTTYPE，用於指定需要顯示的分類的id（這個id需要到wordpress後台去自己找，方法參考文章：WordPress版微信小程式安裝使用說明，指定分類id的示例如下所示：
var INDEXLISTTYPE = 「1,2」 //指定首頁顯示分類的id,用英文半形逗號分隔
如果你想顯示所有分類的文章，就設置參數值為」all」，示例如下：
var INDEXLISTTYPE = 「all」 //指定首頁顯示分類的id,用英文半形逗號分隔
4.評論是否開啟設置
近來，微信對資訊類小程式的審核尺度有越來越嚴格的趨勢，即使是企業主體的小程式，也可能因為出現用戶「評論」的問題，導致小程式審核不通過，給出理由如下：
服務類目」文娛-資訊_」與你提交程式碼審核時設置的功能頁面內容不一致: 評論涉及發布與交流，請補充選擇社交-社區/論壇類目，並在基礎資訊處申請該類目，通過資質審核並在配置功能頁添加符合該類目的功能頁面。
在這個版本里，我在wp-rest-api-for-app插件里，加了是否開啟文章評論的設置，如果遇到因為評論導致無法通過的審核的時候，可以考慮關閉評論，至於審核通過後你是否開啟就自行決定了。設置的示例如下：
WordPress版小程式開源下載地址
https://github.com/iamxjb/winxin-app-watch-life.net
如果因為某些原因github無法訪問，可以選擇以下鏡像地址： 1.https://git.oschina.net/iamxjb/winxin-app-watch-life.net 2.https://code.aliyun.com/iamxjb/winxin-app-watch-life.net 3.https://coding.net/u/xjb/p/winxin-app-watch-life.net 4.https://gitlab.com/xiajianbo/winxin-app-watch-life.net
配套WordPress插件：wp-rest-api-for-app 下載地址
https://github.com/iamxjb/wp-rest-api-for-app 插件鏡像下載地址： https://gitee.com/iamxjb/wp-rest-api-for-app
