自從我發(fā)布并開源WordPress版微信小程序以來(lái)，很多WordPress網(wǎng)站的站長(zhǎng)問有關(guān)程序開發(fā)的問題，其實(shí)在文章：《用微信小程序連接WordPress網(wǎng)站》講述過(guò)一些基本的要點(diǎn)，不過(guò)仍然有不少人對(duì)一些細(xì)節(jié)不明白，于是我就想著再寫一篇比較全面而基礎(chǔ)的教程，主要針對(duì)入門級(jí)別用戶，高手就不用看了。

WordPress版“守望軒”微信小程序開放源碼地址：https://github.com/iamxjb/winxin-app-watch-life.net

至于標(biāo)題，請(qǐng)?jiān)徫?，我?biāo)題黨了。

WordPress REST API

WordPress 在4.4 版本開始推出了 REST API,如果你使用的是最新版本的WordPress應(yīng)該會(huì)提供REST API的功能。至于REST API是什么？要講清楚估計(jì)要寫一篇文章了，推薦你看看阮一峰寫的：RESTful API 設(shè)計(jì)指南，看完就基本懂了。簡(jiǎn)單來(lái)說(shuō)WordPress REST API，就是用瀏覽器通過(guò)http的方式訪問WordPress提供的REST API 鏈接 ，可以獲取WordPress網(wǎng)站的“內(nèi)容”，這個(gè)“內(nèi)容”是以json的格式返回到瀏覽器。

比如用chrome瀏覽器訪問我的網(wǎng)站文章的api地址：https://www.watch-life.net/wp-json/wp/v2/posts，會(huì)看到如下圖一樣的結(jié)果：

有關(guān)WordPress REST API 詳細(xì)的介紹詳見鏈接：https://developer.wordpress.org/rest-api/

WordPress REST API 鏈接通常和WordPress的安裝路徑、Url重寫有關(guān)，因此WordPress REST API 鏈接可能有差異，主要差異在WordPress 本身的鏈接規(guī)則上，相同的部分是REST API 路由部分。

通常一個(gè)WordPress網(wǎng)站安裝成功，如果沒有對(duì)URL 進(jìn)行重寫，那么WordPress REST API 的訪問URL 應(yīng)該是這樣的：

https://www.youdomain.com/index.php/wp-json/wp/v2/

而我的網(wǎng)站的WordPress已經(jīng)經(jīng)過(guò)URL重寫所以，REST API的URL是直接訪問網(wǎng)站的根目錄：https://www.watch-life.net/wp-json/wp/v2

通常 WordPress REST API 鏈接 是這樣的：

…/wp-json/wp/v2/posts
?per_page=8&page=1&orderby=date&order=desc

…(省略號(hào)部分)：依據(jù)WordPress網(wǎng)站自身規(guī)則。

wp-json：對(duì)REST API 進(jìn)行詳細(xì)的描述說(shuō)明，例如直接訪問https://www.watch-life.net/wp-json，就可以看到這些說(shuō)明

wp/v2：是對(duì)REST API 的版本進(jìn)行說(shuō)明，這里說(shuō)明的V2版本，例如直接訪問https://www.watch-life.net/wp-json/wp/v2，就可以看到有關(guān)v2版本的功能說(shuō)明。

posts：是對(duì)REST API的路由終點(diǎn)（endpoint），也是用于表述獲取WordPress什么樣內(nèi)容，“posts”表明是獲取文章的內(nèi)容。這里的路由終點(diǎn)還有其他的，比如：Categories（分類），Tags（標(biāo)簽），Pages（頁(yè)面），Comments（評(píng)論），那么相應(yīng)的如果獲取這些內(nèi)容的api鏈接如下：

獲取分類api鏈接：https://www.watch-life.net/wp-json/wp/v2/categories
獲取標(biāo)簽api鏈接：https://www.watch-life.net/wp-json/wp/v2/tags
獲取頁(yè)面api鏈接：https://www.watch-life.net/wp-json/wp/v2/pages
獲取評(píng)論api鏈接：https://www.watch-life.net/wp-json/wp/v2/comments

更多的路由終點(diǎn)請(qǐng)查閱api的說(shuō)明文檔。

?per_page=8&page=1&orderby=date&order=desc：這部分就是各種參數(shù)，per_page是每頁(yè)記錄數(shù)，page是當(dāng)前第幾頁(yè)，orderby是通過(guò)什么方式排序，order 是排序方式。不同的路由終點(diǎn)參數(shù)也會(huì)有所不同。

WordPress REST API 已經(jīng)相當(dāng)完善，利用它可以作為后端服務(wù)，可以獲取基本可以獲取WordPress大部分的內(nèi)容，這樣就不必再寫后端服務(wù)代碼，可以在 Android，iOS，小程序里直接調(diào)用。

微信小程序

1.準(zhǔn)備工作
有關(guān)小程序的注冊(cè)、服務(wù)器域名配置見我以前寫的文章：用微信小程序連接WordPress網(wǎng)站，這里就不再重復(fù)了，需要說(shuō)明的一點(diǎn)是，在微信小程序中域名的配置，目前看來(lái)未備案的域名也可以通過(guò)審核。將來(lái)會(huì)不會(huì)嚴(yán)格起來(lái)，必須備案的域名才可以使用，就不得而知了。

2.程序工程結(jié)構(gòu)

我開發(fā)的WordPress版本的小程序的工程結(jié)構(gòu)如下：

有關(guān)app.js,app.json ,app.wxss的微信小程序核心的文件不具體介紹，可以參考微信的相關(guān)開發(fā)文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=201767。這里只介紹與WordPress版本的小程序相關(guān)的目錄及文件。

(1)”image”文件夾：顯而易見這是存放圖片的文件夾。
(2)”pages”文件夾：用于存放小程序的功能的頁(yè)面。這個(gè)文件夾里的文件整個(gè)項(xiàng)目最核心的文件夾，主要功能的實(shí)現(xiàn)都是這個(gè)文件夾里包含的頁(yè)面實(shí)現(xiàn)的。
(3)”templates”文件夾：用于存放通用模版頁(yè)面。
(4)”utils”文件夾：用于存放公共的js api 文件。
(5)”wxParse”文件夾：第三方用于html轉(zhuǎn)wxml的解析庫(kù)文件。

下面重點(diǎn)介紹”pages”和”utils”文件夾

(注意本文出現(xiàn)的代碼，如果復(fù)制使用的時(shí)候，請(qǐng)把中文引號(hào)修改為英文引號(hào)。)

一.“utils”文件夾

“utils” 文件夾里核心的文件是api.js,在這個(gè)js文件里提供程序需要調(diào)用 WordPress REST API 的公用接口方法，如果你使用本小程序來(lái)加載自己網(wǎng)站的REST API 只需要修改下面代碼的域名部分(藍(lán)色部分)即可：

var HOST_URI = ‘https://www.watch-life.net/wp-json/wp/v2/’;

如果api 鏈接正常，其他部分不修改，就可以直接運(yùn)行。api.js 提供的接口方法包括：

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

二.“pages”文件夾

“pages” 文件夾包含小程序里所有的功能頁(yè)面：首頁(yè)列表（index）、文章詳情（detail）、按分類、搜索的文章列表（list），頁(yè)面詳情（page），關(guān)于頁(yè)面（about），logs（日志頁(yè)面，此頁(yè)面可以去掉）

按照微信小程序的開發(fā)規(guī)則，每個(gè)頁(yè)面功能都會(huì)包括三個(gè)文件：js，json ，wxml，wxss。簡(jiǎn)單來(lái)說(shuō):js文件控制小程序加載的程序以及發(fā)送數(shù)據(jù)請(qǐng)求，同時(shí)把獲取的數(shù)據(jù)提供給wxml來(lái)顯示,json文件是配置文件，wxml是小程序的前端顯示頁(yè)面（相當(dāng)于web程序的 html），wxss就是樣式文件（相當(dāng)于web程序的css）。有關(guān)這些文件更詳細(xì)的說(shuō)明見官方的文檔。

這里要說(shuō)明一下，之所以要把文章列表頁(yè)和按分類、搜索的文章列表分開來(lái)，是基于兩個(gè)原因：

（1）兩個(gè)頁(yè)面略有不同，首頁(yè)列表頁(yè)有輪轉(zhuǎn)的圖片，分類、搜索的文章列表頁(yè)沒有這個(gè)。
（2）在頁(yè)面里就無(wú)法通過(guò)navigator跳轉(zhuǎn)到tabbar導(dǎo)航的頁(yè)面，于是就把兩個(gè)頁(yè)面分開來(lái)。

3.數(shù)據(jù)請(qǐng)求
無(wú)論是獲取文章列表，還是顯示文章的詳情，都是需要微信小程序去調(diào)用WordPress REST API去獲取數(shù)據(jù)，在微信小程序里提供的發(fā)送http請(qǐng)求的api是：wx.request,通過(guò)這個(gè)接口發(fā)送請(qǐng)求，獲取數(shù)據(jù)并賦值（setData）給小程序的頁(yè)面數(shù)據(jù)對(duì)象（data），小程序前端（wxml文件）基于這個(gè)頁(yè)面數(shù)據(jù)對(duì)象來(lái)渲染顯示頁(yè)面。wx.request接口調(diào)用代碼如下：

wx.request({
url: url,
success: function (response) {
self.setData({
postsList: self.data.postsList.concat(response.data.map(function (item) {
…
//數(shù)據(jù)處理
…
return item;
}))
});
}
});
}

上述代碼中的“postsList”就是頁(yè)面數(shù)據(jù)變量，前端頁(yè)面（wxml頁(yè)面）可以使用這個(gè)變量來(lái)顯示數(shù)據(jù)

<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>
… //數(shù)據(jù)顯示的略過(guò)
</block>
</view>

因?yàn)閜ostsList變量是一個(gè)數(shù)據(jù)集變量，因此利用它做循環(huán)結(jié)合block組件來(lái)顯示數(shù)據(jù)列表。

在列表頁(yè)面如果數(shù)據(jù)項(xiàng)多就考慮要分頁(yè)顯示數(shù)據(jù)，在手機(jī)端的應(yīng)用一般不采用通過(guò)頁(yè)碼點(diǎn)擊的方式來(lái)分頁(yè)，通常采用下拉刷新獲取新頁(yè)面的方式。代碼如下：

lower: function (e) {
var self = this;
self.setData({
page: self.data.page + 1
});
this.fetchPostsData(self.data);
},

對(duì)于文章詳情（包括WordPress頁(yè)面詳情），數(shù)據(jù)請(qǐng)求的方式和上面類似，只不過(guò)和列表略有不同的是，文章內(nèi)容在添加的時(shí)候，是通過(guò)WordPress的編輯器錄入的，那么數(shù)據(jù)里包含大量的html標(biāo)簽代碼，在微信小程序是無(wú)法解析的。因此需要把html轉(zhuǎn)成小程序支持的wxml，在本小程序里采用一個(gè)開源的第三方解析庫(kù)：WxParse，雖然這個(gè)解析庫(kù)還存在若干問題，但總算可以正常顯示文章的內(nèi)容。目前看來(lái)，在html轉(zhuǎn)換為wxml上還沒有完美的解決方案，希望官方能出相關(guān)富文本組件。

小結(jié)

盡管我很想把WordPress REST API 開發(fā)微信小程序每個(gè)細(xì)節(jié)都清楚明白地寫出來(lái)，給入門者一個(gè)很好的指導(dǎo)，但在撰寫的過(guò)程中，我覺得如果寫得過(guò)于細(xì)節(jié)就有些瑣碎了，于是我就把比較關(guān)鍵一些重點(diǎn)內(nèi)容寫出來(lái)供參考。小程序開發(fā)難度并不大，如果認(rèn)真看了官方的文檔，基本上可以忽略本文章了。

但是，我仍然希望通過(guò)閱讀本文，對(duì)于想利用WordPress REST API 開發(fā)微信小程序的開發(fā)者，能有所幫助，而不是如本文標(biāo)題所說(shuō)的，看了文章反而想放棄了。