利用WordPress REST API 開發(fā)微信小程序從入門到放棄
2021-07-28 10:59:43

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

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

至于標(biāo)題，請原諒我，我標(biāo)題黨了。

WordPress REST API

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

比如用chrome瀏覽器訪問我的網(wǎng)站文章的api地址：https://www.watch-life.net/wp-json/wp/v2/posts，會看到如下圖一樣的結(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 路由部分。

通常一個WordPress網(wǎng)站安裝成功，如果沒有對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)過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

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

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

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

posts：是對REST API的路由終點(diǎn)（endpoint），也是用于表述獲取WordPress什么樣內(nèi)容，“posts”表明是獲取文章的內(nèi)容。這里的路由終點(diǎn)還有其他的，比如：Categories（分類），Tags（標(biāo)簽），Pages（頁面），Comments（評論），那么相應(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
獲取頁面api鏈接：https://www.watch-life.net/wp-json/wp/v2/pages
獲取評論api鏈接：https://www.watch-life.net/wp-json/wp/v2/comments

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

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

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

微信小程序

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

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”文件夾：用于存放小程序的功能的頁面。這個文件夾里的文件整個項(xiàng)目最核心的文件夾，主要功能的實(shí)現(xiàn)都是這個文件夾里包含的頁面實(shí)現(xiàn)的。
(3)”templates”文件夾：用于存放通用模版頁面。
(4)”utils”文件夾：用于存放公共的js api 文件。
(5)”wxParse”文件夾：第三方用于html轉(zhuǎn)wxml的解析庫文件。

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

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

一.“utils”文件夾

“utils” 文件夾里核心的文件是api.js,在這個js文件里提供程序需要調(diào)用 WordPress REST API 的公用接口方法，如果你使用本小程序來加載自己網(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）獲取頁面列表。
（4）獲取頁面詳情。
（5）獲取文章分類。
（6）獲取文章評論。
（7）獲取文章第一張圖片。

二.“pages”文件夾

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

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

這里要說明一下，之所以要把文章列表頁和按分類、搜索的文章列表分開來，是基于兩個原因：

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

3.數(shù)據(jù)請求
無論是獲取文章列表，還是顯示文章的詳情，都是需要微信小程序去調(diào)用WordPress REST API去獲取數(shù)據(jù)，在微信小程序里提供的發(fā)送http請求的api是：wx.request,通過這個接口發(fā)送請求，獲取數(shù)據(jù)并賦值（setData）給小程序的頁面數(shù)據(jù)對象（data），小程序前端（wxml文件）基于這個頁面數(shù)據(jù)對象來渲染顯示頁面。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”就是頁面數(shù)據(jù)變量，前端頁面（wxml頁面）可以使用這個變量來顯示數(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ù)顯示的略過
</block>
</view>

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

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

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

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

小結(jié)

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

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

如果有朋友想?yún)⑴c到這個小程序的開發(fā)，或者對這個小程序功能提出建議意論

?

?

?