WordPress 網站開發「微信小程序「實戰(二)

原文連接：https://devework.com/wordpres...，轉載請用明鏈註明來源，謝謝！

本文是「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">
      <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 版本的審覈恰好在端午節先後，因此實質花了很多時間。

本文的技術點粗略記錄，拋磚引玉，有興趣請關注下一篇。

本站「微信小程序」系列文章：https://devework.com/tag/weapp

原文連接：https://devework.com/wordpres...，轉載請用明鏈註明來源，謝謝！