本文是“WordPress 開發微信小程序”系列的第二篇，本文記錄的是開發“DeveWork極客”小程序v1.1 的過程。一如既往，目標讀者為了解WordPress 的前端同學。建議先看完第一篇文章再來閱讀本文。另外系列標題也去掉REST API 相關字段，改簡單清晰點。

如果你沒有看過本小程序，可以通過下面的小程序碼進入體驗。注意看文章的此時你掃描進入的版本可能不是不是1.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">
      <image src="{{featuredImg.one}}" mode="widthFix" class="featured-img"></image>
      <view class="featured-content">
        <view class="featured-title">WordPress</view>
        <text class="featured-desc">有關WordPress 的高級使用技巧</text>
      </view>
    </view>

這里發現一個開發要點：在 app.json 中配置tabBar 后，當要跳轉的頁面位于tabBar 配置中的時候，就不能使用 wx.navigateTo、wx.redirectTo —— 即wx.navigateTo、wx.redirectTo不能跳轉到 tab 頁。

A：分享（轉發）功能

第一版的時候只花了兩天匆匆做出來，分享功能在這個版本才加上。轉發功能調用官方的onShareAppMessage 函數就可以了，因為分享的觸發肯定是在 Onload 的生命周期后，所以動態修改分享的參數成為了可能。

//https://devework.com/wordpress-weapp-2.html
onShareAppMessage: 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.html
var 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 版本的審核剛好在端午節前后，所以實質花了不少時間。