用微信小程序連接WordPress網站
2021-07-25 11:02:36

隨著微信小程序的功能越來越強，特別對個人開發(fā)者的開放，讓個人開發(fā)者有機會嘗試微信小程序。如果你有自己的個人網站，就可以把個人網站搬到微信小程序里，通過小程序直接訪問網站的內容。

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

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

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

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

根據反饋的審核結果來看，只有企業(yè)類小程序才可以發(fā)布“文娛-資訊”類的小程序。不過2017年4月28日開始，經過認證的企業(yè)公眾號可以快速注冊并認證新的小程序，如果你可以找個認證的企業(yè)公眾號幫忙快速注冊一個小程序，經過這樣注冊的小程序是可以發(fā)布“文娛-資訊”類的小程序。

基本設置

首先配置微信小程序的基本信息，這部分配置一定要謹慎，因為每月修改次數是有限定的，特別小程序名稱在發(fā)布后是需要認證才能修改的，起名字前一定要認真想好，發(fā)布后再來修改，就比較麻煩了。

開發(fā)設置

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

小程序開發(fā)

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

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

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

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

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

以上代碼主要實現(xiàn)對文章標題和摘要的顯示。

二、獲取文章（posts）的內容

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

2.獲取文章內容的主要代碼：

由于文章內包含大量的html標簽，在微信小程序里是無法顯示的，因此采用了一個把html解析為wxml的第三方程序：wxParse，上圖中用紅框標識的代碼就是采用該程序的調用方法。

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

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

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

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

2.獲取頁面內容的代碼可以參考獲取文章內容的程序。

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

最后小程序顯示如下：

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

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

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

?