小程序模板網(wǎng)

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

發(fā)布時(shí)間:2018-04-20 11:31 所屬欄目:小程序開發(fā)教程

自從我發(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)題,請?jiān)徫?,我?biāo)題黨了。

WordPress REST API

WordPress 在4.4 版本開始推出了 REST API,如果你使用的是最新版本的WordPress應(yīng)該會提供REST API的功能。至于REST API是什么?要講清楚估計(jì)要寫一篇文章了,推薦你看看阮一峰寫的:RESTful API 設(shè)計(jì)指南,看完就基本懂了。簡單來說WordPress REST API,就是用瀏覽器通過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,會看到如下圖一樣的結(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)站安裝成功,如果沒有對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”文件夾:用于存放小程序的功能的頁面。這個(gè)文件夾里的文件整個(gè)項(xiàng)目最核心的文件夾,主要功能的實(shí)現(xiàn)都是這個(gè)文件夾里包含的頁面實(shí)現(xiàn)的。
(3)”templates”文件夾:用于存放通用模版頁面。
(4)”utils”文件夾:用于存放公共的js api 文件。
(5)”wxParse”文件夾:第三方用于html轉(zhuǎn)wxml的解析庫文件。

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

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

一.“utils”文件夾

“utils” 文件夾里核心的文件是api.js,在這個(gè)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ī)則,每個(gè)頁面功能都會包括三個(gè)文件:js,json ,wxml,wxss。簡單來說:js文件控制小程序加載的程序以及發(fā)送數(shù)據(jù)請求,同時(shí)把獲取的數(shù)據(jù)提供給wxml來顯示,json文件是配置文件,wxml是小程序的前端顯示頁面(相當(dāng)于web程序的 html),wxss就是樣式文件(相當(dāng)于web程序的css)。有關(guān)這些文件更詳細(xì)的說明見官方的文檔。

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

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

3.數(shù)據(jù)請求
無論是獲取文章列表,還是顯示文章的詳情,都是需要微信小程序去調(diào)用WordPress REST API去獲取數(shù)據(jù),在微信小程序里提供的發(fā)送http請求的api是:wx.request,通過這個(gè)接口發(fā)送請求,獲取數(shù)據(jù)并賦值(setData)給小程序的頁面數(shù)據(jù)對象(data),小程序前端(wxml文件)基于這個(gè)頁面數(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頁面)可以使用這個(gè)變量來顯示數(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變量是一個(gè)數(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)容在添加的時(shí)候,是通過WordPress的編輯器錄入的,那么數(shù)據(jù)里包含大量的html標(biāo)簽代碼,在微信小程序是無法解析的。因此需要把html轉(zhuǎn)成小程序支持的wxml,在本小程序里采用一個(gè)開源的第三方解析庫:WxParse,雖然這個(gè)解析庫還存在若干問題,但總算可以正常顯示文章的內(nèi)容。目前看來,在html轉(zhuǎn)換為wxml上還沒有完美的解決方案,希望官方能出相關(guān)富文本組件。

小結(jié)

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

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



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23800.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢