利用WordPress REST API 開發微信小程序從入門到放棄

自從我發佈並開源WordPress版微信小程序以來，不少WordPress網站的站長問有關程序開發的問題，其實在文章：《用微信小程序鏈接WordPress網站》講述過一些基本的要點，不過仍然有很多人對一些細節不明白，因而我就想着再寫一篇比較全面而基礎的教程，主要針對入門級別用戶，高手就不用看了。

WordPress版「守望軒」微信小程序開放源碼地址：https://github.com/iamxjb/win...

至於標題，請原諒我，我標題黨了。

WordPress REST API

WordPress 在4.4 版本開始推出了 REST API,若是你使用的是最新版本的WordPress應該會提供REST API的功能。至於REST API是什麼？要講清楚估計要寫一篇文章了，推薦你看看阮一峯寫的：RESTful API 設計指南，看完就基本懂了。簡單來講WordPress REST API，就是用瀏覽器經過http的方式訪問WordPress提供的REST API 連接 ，能夠獲取WordPress網站的」內容」，這個」內容」是以json的格式返回到瀏覽器。

好比用chrome瀏覽器訪問個人網站文章的api地址：https://www.watch-life.net/wp...，會看到以下圖同樣的結果：

有關WordPress REST API 詳細的介紹詳見連接：https://developer.wordpress.o...

WordPress REST API 連接一般和WordPress的安裝路徑、Url重寫有關，所以WordPress REST API 連接可能有差別，主要差別在WordPress 自己的連接規則上，相同的部分是REST API 路由部分。

一般一個WordPress網站安裝成功，若是沒有對URL 進行重寫，那麼WordPress REST API 的訪問URL 應該是這樣的：

https://www.youdomain.com/ind...

而個人網站的WordPress已經通過URL重寫因此，REST API的URL是直接訪問網站的根目錄：https://www.watch-life.net/wp...

一般 WordPress REST API 連接 是這樣的：

/wp-json/wp/v2/posts
?per_page=8&page=1&orderby=date&order=desc
…(省略號部分)：依據WordPress網站自身規則。

wp-json：對REST API 進行詳細的描述說明，例如直接訪問https://www.watch-life.net/wp...，就能夠看到這些說明

wp/v2：是對REST API 的版本進行說明，這裏說明的V2版本，例如直接訪問https://www.watch-life.net/wp...，就能夠看到有關v2版本的功能說明。

posts：是對REST API的路由終點（endpoint），也是用於表述獲取WordPress什麼樣內容，」posts」代表是獲取文章的內容。這裏的路由終點還有其餘的，好比：Categories（分類），Tags（標籤），Pages（頁面），Comments（評論），那麼相應的若是獲取這些內容的api連接以下：

獲取分類api連接：https://www.watch-life.net/wp...
獲取標籤api連接：https://www.watch-life.net/wp...
獲取頁面api連接：https://www.watch-life.net/wp...
獲取評論api連接：https://www.watch-life.net/wp...

更多的路由終點請查閱api的說明文檔。

?per_page=8&page=1&orderby=date&order=desc：這部分就是各類參數，per_page是每頁記錄數，page是當前第幾頁，orderby是經過什麼方式排序，order 是排序方式。不一樣的路由終點參數也會有所不一樣。

WordPress REST API 已經至關完善，利用它能夠做爲後端服務，能夠獲取基本能夠獲取WordPress大部分的內容，這樣就沒必要再寫後端服務代碼，能夠在 Android，iOS，小程序裏直接調用。

微信小程序

1.準備工做
有關小程序的註冊、服務器域名配置見我之前寫的文章：用微信小程序鏈接WordPress網站，這裏就再也不重複了，須要說明的一點是，在微信小程序中域名的配置，目前看來未備案的域名也能夠經過審覈。未來會不會嚴格起來，必須備案的域名纔可使用，就不得而知了。

2.程序工程結構

我開發的WordPress版本的小程序的工程結構以下：

有關app.js,app.json ,app.wxss的微信小程序核心的文件不具體介紹，能夠參考微信的相關開發文檔：https://mp.weixin.qq.com/debu...。這裏只介紹與WordPress版本的小程序相關的目錄及文件。

(1)」image」文件夾：顯而易見這是存放圖片的文件夾。
(2)」pages」文件夾：用於存放小程序的功能的頁面。這個文件夾裏的文件整個項目最核心的文件夾，主要功能的實現都是這個文件夾裏包含的頁面實現的。
(3)」templates」文件夾：用於存放通用模版頁面。
(4)」utils」文件夾：用於存放公共的js api 文件。
(5)」wxParse」文件夾：第三方用於html轉wxml的解析庫文件。

下面重點介紹」pages」和」utils」文件夾

(注意本文出現的代碼，若是複製使用的時候，請把中文引號修改成英文引號。)

一.」utils」文件夾

「utils」 文件夾裏核心的文件是api.js,在這個js文件裏提供程序須要調用 WordPress REST API 的公用接口方法，若是你使用本小程序來加載本身網站的REST API 只須要修改下面代碼的域名部分(藍色部分)便可：

var HOST_URI = ‘https://www.watch-life.net/wp...’;
若是api 連接正常，其餘部分不修改，就能夠直接運行。api.js 提供的接口方法包括：

（1）獲取文章列表。
（2）獲取文章詳情。
（3）獲取頁面列表。
（4）獲取頁面詳情。
（5）獲取文章分類。
（6）獲取文章評論。
（7）獲取文章第一張圖片。

二.」pages」文件夾

「pages」 文件夾包含小程序裏全部的功能頁面：首頁列表（index）、文章詳情（detail）、按分類、搜索的文章列表（list），頁面詳情（page），關於頁面（about），logs（日誌頁面，此頁面能夠去掉）

按照微信小程序的開發規則，每一個頁面功能都會包括三個文件：js，json ，wxml，wxss。簡單來講:js文件控制小程序加載的程序以及發送數據請求，同時把獲取的數據提供給wxml來顯示,json文件是配置文件，wxml是小程序的前端顯示頁面（至關於web程序的 html），wxss就是樣式文件（至關於web程序的css）。有關這些文件更詳細的說明見官方的文檔。

這裏要說明一下，之因此要把文章列表頁和按分類、搜索的文章列表分開來，是基於兩個緣由：

（1）兩個頁面略有不一樣，首頁列表頁有輪轉的圖片，分類、搜索的文章列表頁沒有這個。
（2）在頁面裏就沒法經過navigator跳轉到tabbar導航的頁面，因而就把兩個頁面分開來。

3.數據請求
不管是獲取文章列表，仍是顯示文章的詳情，都是須要微信小程序去調用WordPress REST API去獲取數據，在微信小程序裏提供的發送http請求的api是：wx.request,經過這個接口發送請求，獲取數據並賦值（setData）給小程序的頁面數據對象（data），小程序前端（wxml文件）基於這個頁面數據對象來渲染顯示頁面。wx.request接口調用代碼以下：

wx.request({
url: url,
success: function (response) {
self.setData({
postsList: self.data.postsList.concat(response.data.map(function (item) {
…
//數據處理
…
return item;
}))
});
}
});
}
上述代碼中的」postsList」就是頁面數據變量，前端頁面（wxml頁面）可使用這個變量來顯示數據

<view class="common-list">
<block wx:key="id" wx:for="{{postsList}}">
<view class="list-item has-img" index="{{index}}" id="{{item.id}}" bindtap="redictDetail">
</view>
… //數據顯示的略過
</block>
</view>
由於postsList變量是一個數據集變量，所以利用它作循環結合block組件來顯示數據列表。

在列表頁面若是數據項多就考慮要分頁顯示數據，在手機端的應用通常不採用經過頁碼點擊的方式來分頁，一般採用下拉刷新獲取新頁面的方式。代碼以下：

lower: function (e) {
var self = this;
self.setData({
page: self.data.page + 1
});
this.fetchPostsData(self.data);
},
對於文章詳情（包括WordPress頁面詳情），數據請求的方式和上面相似，只不過和列表略有不一樣的是，文章內容在添加的時候，是經過WordPress的編輯器錄入的，那麼數據裏包含大量的html標籤代碼，在微信小程序是沒法解析的。所以須要把html轉成小程序支持的wxml，在本小程序裏採用一個開源的第三方解析庫：WxParse，雖然這個解析庫還存在若干問題，但總算能夠正常顯示文章的內容。目前看來，在html轉換爲wxml上尚未完美的解決方案，但願官方能出相關富文本組件。

小結

儘管我很想把WordPress REST API 開發微信小程序每一個細節都清楚明白地寫出來，給入門者一個很好的指導，但在撰寫的過程當中，我以爲若是寫得過於細節就有些瑣碎了，因而我就把比較關鍵一些重點內容寫出來供參考。小程序開發難度並不大，若是認真看了官方的文檔，基本上能夠忽略本文章了。

可是，我仍然但願經過閱讀本文，對於想利用WordPress REST API 開發微信小程序的開發者，能有所幫助，而不是如本文標題所說的，看了文章反而想放棄了。

若是有朋友想參與到這個小程序的開發，或者對這個小程序功能提出建議意見，歡迎添加個人微信，也能夠加入微信羣進行討論

個人微信號：iamxjb，二維碼以下：

本文首發地址：https://www.watch-life.net/wo...