摘要：本文是「WordPress 開發微信小程式」系列的第二篇，本文記錄的是開發「DeveWork+」小程式v1.1 版本的過程。一如既往，目標讀者為了解WordPress 的前端同學。建議先看完第一篇再來閱讀這篇文章。如果你還沒看過本小程...
本文是「WordPress 開發微信小程式」系列的第二篇，本文記錄的是開發「DeveWork+」小程式v1. 1 版本的過程。一如既往，目標讀者為了解WordPress 的前端同學。建議先看完第一篇再來閱讀這篇文章。
如果你沒有看過本小程序，可以透過下面的小程式碼進入體驗。注意看文章的此時你掃描進入的版本可能不是v1.1 了。
「DeveWork+」小程式v1.1 版本的更新內容較多，這裡摘取一些有意義的記錄下。請注意本文內容展開方式與上一篇稍微不同。每個章節即為一個改動點，並參考微信小程式的開發者工具更新歷史採用 A(Add)、F(Fix)、U(Update) 作為小標題開頭。
A：新增「專題」板塊
1.1 版本增加了一個「專題」的Tab 及其相關頁面（如上圖）。 「專題」相當於WordPress 的目錄文章。入口頁面是三個圖文圓角卡片，佈局很簡單。透過data-xx 與id 的方式傳入相關資訊到點擊事件函數。
#
<view class="featured-item" data-title="WordPress" id="2" catchtap="redictCatArchive"> "{{featuredImg.one}}" mode="widthFix" class="featured-img">
<view class="featured-content">
<view class="featured-title">WordPressview>class="featured-desc">有关WordPress 的高级使用技巧view>
view>登入後複製
這裡發現一個開發要點：在 app.json 中配置tabBar 後，當要跳轉的頁面位於tabBar 配置中的時候，就不能使用wx.navigateTo、wx.redirectTo —— 即wx.navigateTo、wx.redirectTo 不能跳到tab 頁。
A：分享（轉發）功能
第一版的時候只花了兩天匆匆做出來，分享功能在這個版本才加上。轉發功能呼叫官方的onShareAppMessage 函數就可以了，因為分享的觸發肯定是在 Onload 的生命週期後，所以動態修改分享的參數變成了可能。
#
//https://devework.com/wordpress-weapp-2.htmlonShareAppMessage: function () { return { title: this.data.detail.title.rendered, path: '/pages/single/single?id=' + this.data.detail.id, success: function (res) { console.log('转发成功')
}, fail: function (res) { console.log('转发失败')
}
}
}登入後複製
##A ：加入MTA（騰訊移動分析）小程式資料統計
在開發1.0 版本的時候，小程式自帶的資料統計並不是很強大，所以決定採用第三方的資料統計服務。 MTA 除了也是騰訊家的加成外，其吸引我的便是「自訂事件」的功能，能讓我根據個人需求獲取到相關數據分析。如Jeff 在裡面配置的如下事件，讓我知道了哪些文章是受歡迎的，哪些使用者操作比較高頻率等等。
MTA 的使用步驟在這裡就不重複了，畢竟官方有比較詳細的文件。
A：增加文章瀏覽數，增加Font Icon
跟網站的一樣，增加了文章的瀏覽數信息，並將文章發表時間及瀏覽器兩個信息加上了Font Icon。
文章瀏覽數的資訊預設並展示在RESTAPI 中，所以需要客製化WordPress REST API；Font Icon 是直接用網站同樣的Icon，因為小程式的不支援本地字體文件，所以用gulp-inline-base64這類插件將ttf 字型檔轉換成base64 的位址，然後跟正常的Web 開發那樣用就可以了。
U：封裝Promise，方便寫程式碼
微信小程式官方雖說支援ES6，但Jeff 用了下Promise 感覺有些坑。所以用了第三方封裝的Promise，避免出現噁心的程式碼「回調地獄」。
這個函式庫也封裝了小程式的Request 函數，載入相關檔案後，改寫原來的取得文章清單的函數，相關程式碼修改如下：
//https://devework.com/wordpress-weapp-2.htmlvar postsRequest = wxRequest.getRequest(api.getPosts(data));
postsRequest.then(res => {
self.setData({ noMore: res.data.length == 0, postsList:
// 细节代码略 })
.finally(function (res) { console.log('Index:finally~') // 细节代码略})登入後複製
U：更换TabBar Icon，增加空白占位
上一篇的“踩坑篇”中有提及 TabBar Icon 的坑点，这次伴随着更新将图标全部都换了，配合整体风格采用了更加细的线型图标。推荐一个下载这类图标的站点：http://www.flaticon.com/。
下载的图标还是做了些处理：根据官方推荐处理为81x81 大小，并增加占位透明 padding 为了让icon 在真机上看起来没那么大。
F：下拉加载，文章已经完全load 完的处理
之前第一版是没有做加载完毕的处理的，因为那时候感觉300多篇文章应该没人去下拉完（事实上我也从来没有拉到底过）。但现在加上了“专题”板块后就有可能了所以需要兼容下文章列表已经加载完毕的情况。
Jeff 的处理方式是添加一个noMore 参数，然后默认为false。当请求API 后检测数据长度，为0 就表示文章列表已经加载完全，noMore变为true。
然后在WXML 文件中加入一个提示：
<view class="entry-empty" hidden="{{!noMore}}">·· 无更多文章 ··view>登入後複製
这种处理方式其实不怎么好，待后续优化。
F：考虑用户体验，授权失败的优雅处理
这里我单独写了一篇文章，请参考《提升用户体验，小程序“授权失败”场景优雅处理方案》。
结尾
以上就是1.1 版本的主要更新内容。1.1 版本的审核刚好在端午节前后，所以实质花了不少时间。
以上是使用WordPress開發微信小程式實戰教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
