隨着微信小程序的功能越來越強,特別對個人開發者的開放,讓個人開發者有機會嘗試微信小程序。如果你有自己的個人網站,就可以把個人網站搬到微信小程序里,通過小程序直接訪問網站的內容。
要想微信小程序可以獲取網站的內容,這就要求網站提供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
你也可以掃描或長按以下二維碼