用微信小程序連接WordPress網(wǎng)站
2021-07-25 11:02:36

隨著微信小程序的功能越來(lái)越強(qiáng)，特別對(duì)個(gè)人開發(fā)者的開放，讓個(gè)人開發(fā)者有機(jī)會(huì)嘗試微信小程序。如果你有自己的個(gè)人網(wǎng)站，就可以把個(gè)人網(wǎng)站搬到微信小程序里，通過(guò)小程序直接訪問(wèn)網(wǎng)站的內(nèi)容。

要想微信小程序可以獲取網(wǎng)站的內(nèi)容，這就要求網(wǎng)站提供web服務(wù)的api，比如提供獲取內(nèi)容的json api，這些api包括查詢、添加、更新等操作。我的網(wǎng)站是使用WordPress 4.7.4 版本，提供REST API，這樣就不用自己開發(fā)api了，直接使用即可。條件具備，說(shuō)干就干，我先拿自己的網(wǎng)站練手，也算是真正動(dòng)手實(shí)踐一下小程序。

注意：以個(gè)人開發(fā)者申請(qǐng)的小程序，由于無(wú)法提交“文娛-資訊”類的小程序，因此如果提交非“娛樂(lè)-資訊”類時(shí)，在審核的時(shí)候會(huì)被拒絕，以下是我第一次提交時(shí)被拒的反饋

小程序”守望軒網(wǎng)站”代碼發(fā)布審核結(jié)果

你的小程序”守望軒網(wǎng)站”代碼發(fā)布審核未通過(guò)，原因如下：
1:小程序內(nèi)容不符合規(guī)則:
(1):小程序服務(wù)內(nèi)容涉及文娛-資訊，屬未開放類目，建議選擇企業(yè)小程序

根據(jù)反饋的審核結(jié)果來(lái)看，只有企業(yè)類小程序才可以發(fā)布“文娛-資訊”類的小程序。不過(guò)2017年4月28日開始，經(jīng)過(guò)認(rèn)證的企業(yè)公眾號(hào)可以快速注冊(cè)并認(rèn)證新的小程序，如果你可以找個(gè)認(rèn)證的企業(yè)公眾號(hào)幫忙快速注冊(cè)一個(gè)小程序，經(jīng)過(guò)這樣注冊(cè)的小程序是可以發(fā)布“文娛-資訊”類的小程序。

基本設(shè)置

首先配置微信小程序的基本信息，這部分配置一定要謹(jǐn)慎，因?yàn)槊吭滦薷拇螖?shù)是有限定的，特別小程序名稱在發(fā)布后是需要認(rèn)證才能修改的，起名字前一定要認(rèn)真想好，發(fā)布后再來(lái)修改，就比較麻煩了。

開發(fā)設(shè)置

首先需要到小程序的后臺(tái)管理去獲取小程序的開發(fā)者ID和密鑰，同時(shí)設(shè)置提供web服務(wù)api的域名鏈接地址，特別注意的是該域名的鏈接地址需要是HTTPS。（關(guān)于如何WordPress類型的網(wǎng)站如何開啟HTTPS，見文章：WordPress整站輕松開啟HTTPS）

小程序開發(fā)

小程序的開發(fā)可以參考官方的文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=2017327。針WordPress類型的網(wǎng)站，主要獲得以下的內(nèi)容：

一、獲取文章（posts）的列表
1. rest api鏈接：https://www.watch-life.net/wp-json/wp/v2/posts/per_page=**&page=** ，per_page參數(shù)表示每頁(yè)的記錄條數(shù)，page參數(shù)表示第幾頁(yè)。

2.獲取文章列表的主要代碼：

考慮顯示文章列表時(shí)，不是完整顯示文章內(nèi)容，只是顯示摘要，于是獲取了文章內(nèi)容的一部分內(nèi)容作為摘要，同時(shí)，考慮到文章中有html的代碼，因此去掉了文章中有關(guān)html的代碼，這樣顯示起來(lái)就比較干凈整潔。

3.前端（wxml文件）顯示文章列表的主要代碼：

以上代碼主要實(shí)現(xiàn)對(duì)文章標(biāo)題和摘要的顯示。

二、獲取文章（posts）的內(nèi)容

1.rest api鏈接：https://www.watch-life.net/wp-json/wp/v2/posts/id，id表示的是文章的id

2.獲取文章內(nèi)容的主要代碼：

由于文章內(nèi)包含大量的html標(biāo)簽，在微信小程序里是無(wú)法顯示的，因此采用了一個(gè)把html解析為wxml的第三方程序：wxParse，上圖中用紅框標(biāo)識(shí)的代碼就是采用該程序的調(diào)用方法。

3.前端（wxml文件）顯示文章內(nèi)容的主要代碼：

二、獲取頁(yè)面（pages）的分類
1.rest api鏈接：https://www.watch-life.net/wp-json/wp/v2/pages

2.獲取頁(yè)面分類的代碼可以參考獲取文章列表的程序。

二、獲取頁(yè)面（pages）的內(nèi)容
1.rest api鏈接：https://www.watch-life.net/wp-json/wp/v2/pages/id，id表示的是頁(yè)面的id

2.獲取頁(yè)面內(nèi)容的代碼可以參考獲取文章內(nèi)容的程序。

至此一個(gè)簡(jiǎn)單的小程序鏈接wordpress網(wǎng)站的程序開發(fā)完畢。最后就是提交小程序并審核。審核通過(guò)后，就可以發(fā)布了。小程序發(fā)布后，就可以把個(gè)人的公眾號(hào)綁定小程序了。綁定后就可以在公眾號(hào)里看到小程序，如下圖所示：

最后小程序顯示如下：

我的網(wǎng)站服務(wù)器在國(guó)外，在速度上訪問(wèn)有些慢，因此小程序顯示也會(huì)有些慢，另外文章的正文在處理的時(shí)候格式上還有些問(wèn)題，后續(xù)我會(huì)繼續(xù)完善，盡快更新版本。

“守望軒”網(wǎng)站小程序的源代碼我已經(jīng)放在github開源：https://github.com/iamxjb/winxin-app-watch-life.net

----------------------------------------------------------------

?