用微信小程序連接WordPress網站


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

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

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

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

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

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

基本設置

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

開發設置

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

小程序開發

小程序的開發可以參考官方的文檔: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文件)顯示文章列表的主要代碼:


以上代碼主要實現對文章標題和摘要的顯示。

二、獲取文章(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網站的程序開發完畢。最后就是提交小程序並審核。審核通過后,就可以發布了。小程序發布后,就可以把個人的公眾號綁定小程序了。綁定后就可以在公眾號里看到小程序,如下圖所示:

最后小程序顯示如下:

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

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

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

歡迎關注我的網站和微信公眾號,文章會在我的網站和微信公眾號上同步發布。

本文首發鏈接:https://www.watch-life.net/wordpress/weixin-connect-wordpress.html

我的網站:守望軒

微信公眾號名稱:守望軒

微信公眾號:iwatchlife

你也可以掃描或長按以下二維碼 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM