搭建 WordPress 版微信小程序詳細教程

本文將為大家介紹如何搭建一個自己的 WordPress 版微信小程序,實現 WordPress 網站和小程序之間的數據同步……

一、準備工作

1、首先,你的需要一個通過了 ICP 備案且安裝了 SSL 證書的 WordPress 網站,這是微信小程序基本要求,不可以跳過哦。

2、你需要創建一個微信小程序,如果還沒有,可以到微信公眾平台注冊一個。

微信小程序注冊地址:https://mp.weixin.qq.com/

3、下載安裝微信開發者工具;

微信開發者工具下載地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

4、下載守望軒的小程序源碼和插件。

微慕 WordPress 小程序開源版下載地址::https://github.com/iamxjb/winxin-app-watch-life.net

配套 WordPress 插件地址:https://wordpress.org/plugins/rest-api-to-miniprogram/

考慮到國內的網絡原因,有些朋友從 Github 中可能下載失敗,這裏另外提供百度網盤的下載地址:

下載鏈接:https://pan.baidu.com/s/1BsEpYtfpbVmGptmRDLJYbQ

提取碼:rc15

二、安裝

1、我們將守望軒的微信小程序解壓後,打開文件夾中的 project.config.json 文件,將代碼中的小程序 appid 替換成你自己的(大概在 29 行,如圖所示),小程序 appid 可以在微信小程序後台菜單的“開發——>開發設置”中找到。(代碼編輯器推薦:VS Code、Hbuilder、Notepad++)

搭建 WordPress 版微信小程序詳細教程插圖

2、安裝打開微信開發者工具,主菜單中選擇”項目——>導入項目”導入你的小程序項目,其中項目名稱可以自定義,中英文都可以自己喜歡就好,目錄選擇第一步中解壓出來的小程序源碼文件夾,appid 和第一步驟中一樣,替換為你的 appid,選擇導入。這時我們的第一個小程序便創建成功了,但是你會發現模擬器顯示的內容還是守望軒博客的內容,這是因為小程序還沒和你的 WordPress 網站建立鏈接。

搭建 WordPress 版微信小程序詳細教程插圖2

3、這一步需要建立 WordPress 網站和小程序的連接:將前麵下載的 REST API 插件解壓後上傳到你的網站/wp-content/plugins 插件目錄下,登錄你的 WordPress 網站後台,安裝插件。然後進入插件設置頁麵,填寫你的 AppID(小程序 ID)和 AppSecret(小程序密鑰)。(注:密鑰非常重要,隻顯示一次,如果忘記了,下次隻能選擇重置,所以建議電腦上新建個文本,保存起來。)

4、接著,回到微信開發者工具,打開 utils 文件夾下的 config.js 文件,根據提示填寫你的網站域名和名稱等信息。

搭建 WordPress 版微信小程序詳細教程插圖4

其中 var DOWNLOADFILEDOMAIN 這一項,如果你小程序所有內容都由網站主域名直接提供,則直接填寫網站主域名即可,如果你像我使用了第三方的對象存儲服務,那麽也需要填寫對象存儲所使用的域名,否則網站圖片等內容可能無法正常顯示。最後,打開微信小程序後台,“開發——>開發設置”,將這裏的域名填寫到小程序後台 downloadFile 合法域名中即可。其中 https://wx.qlogo.cn 是微信官方的頭像域名,當訪客需要登錄我們的小程序,需要調用用戶頭像,所以合法域名中需要包含這個域名。
4、這時,微信開發者工具中,選擇“編譯”,如果在模擬器中看到你網站內容,那麽小程序和網站就已經連接成功了。如果沒有,看下麵的常見問題的解決辦法能不能幫到你。

常見問題

1、小程序沒有加載任何內容,顯示錯誤。

解決方法:請檢查上一步中的網站域名有沒有配置正確,檢查網站是否設置了偽靜態,如果沒有,請在 WordPress 後台設置偽靜態。

2、小程序可以加載網站內容,但是縮略圖沒有顯示。

解決方法:如果你的圖片和網站程序是在同一個域名下的,請檢查網站是不是開啟了懶加載,如果開了,關閉即可。如果你的圖片外鏈到第三方的圖床(如七牛雲、又拍雲等服務商的對象存儲服務器),請到服務商的後台看是否開啟了圖片防盜鏈,將小程序的官方域名 https://servicewechat.com/添加到白名單中。

下一步,我們需要根據我們網站內容,對小程序進行個性化修改。

三、修改

1、更改小程序頁麵標題

打開小程序根目錄的 app.json,替換第 23 行代碼中的頁麵標題為你的網站名稱,然後微信開發工具中選擇“編譯”,就可以在模擬器窗口中看到修改後的效果。

搭建 WordPress 版微信小程序詳細教程插圖6

2、修改小程序標簽欄的名稱

同樣是小程序根目錄的 app.json,分辨將 37、43、49 行代碼中的標簽欄名稱改為自己想要的名稱,比如可以將“專題”改為“分類”等。

搭建 WordPress 版微信小程序詳細教程插圖8

3、修改“精選欄目”

打開小程序 utils 文件夾下的 config.js 文件,大概在第 34 行代碼,將用不到的選項注銷掉,如圖所示。

搭建 WordPress 版微信小程序詳細教程插圖10

將 id 為 7 的選項改為你的分類名稱,並更改你的文章分類 ID,如圖所示。如果有多個分類,就將此行代碼複製粘貼幾次即可。(注:文章分類 ID 可以在 WordPress 後台的分錄目錄下看到。)

搭建 WordPress 版微信小程序詳細教程插圖12

對菜單進行重新排序,如圖所示。更改菜單圖片,在小程序的 images/uploads/目錄中,替換為自己的圖片即可。

搭建 WordPress 版微信小程序詳細教程插圖14

4、更改搜寻欄的默認選項

精選欄目中選擇“搜寻”,進入搜寻頁麵,會發現這裏的默認詞匯為“守望軒”,我們可以將這個默認詞匯改為自己想要的文字。打開小程序目錄 pages/search 下的 search.wxml 文件,大概在 17 行代碼處,將詞匯改成自己想要的詞匯即可。

搭建 WordPress 版微信小程序詳細教程插圖16

搭建 WordPress 版微信小程序詳細教程插圖18

5、修改“關於”頁麵

精選欄目中選擇“關於”,進入關於頁麵,會發現這裏的 logo 和網站說明等內容依然是守望軒的,如圖所示,我們需要將其更改為我們網站的 logo 和網站說明。而且在個人小程序中“讚賞”功能暫無法使用,我們最好將“鼓勵”按鈕注釋掉。

搭建 WordPress 版微信小程序詳細教程插圖20

這個”關於頁麵“需要我們在 WordPress 後台創建一個頁麵,撰寫相關自我介紹、網站介紹等內容,然後在 REST API 插件的設置中選擇這個頁麵就才會顯示內容,要不隻會顯示網站 logo 和網站說明等小程序模板已有的板塊。

打開小程序 templates 文件夾下的 header.wxml 文件,將 logo 替換為自己的網站 logo 和網站說明,記得在後麵填寫你 logo 的尺寸,要不 logo 會拉伸變形。

搭建 WordPress 版微信小程序詳細教程插圖22

最後,打開 pages/about 目錄下的文件,將 32 行至 51 行的代碼注釋掉即可,這樣”鼓勵“按鈕便注釋掉了。

搭建 WordPress 版微信小程序詳細教程插圖24

6、專題頁麵設置圖片和分類說明

分類圖片和說明在 WordPress 後台中的”文章——>分類目錄“,編輯分類中可以設置,如圖所示,不過需要注意控製圖片的尺寸,不要過大,否則會導致頁麵加載時間變長,影響體驗。

搭建 WordPress 版微信小程序詳細教程插圖26

搭建 WordPress 版微信小程序詳細教程插圖28

至此,小程序的基本設置已經完成,更多的設置可以在 WordPress 後台的 REST API 插件中進行設置,比如設置首頁排除哪些分類等。

四、上傳小程序提交審核

小程序調試無誤後,就可以上線了。直接點擊微信開發者工具右上角的"上傳“按鈕,等待上傳完成。然後網頁中登錄你的小程序後台,提交審核即可。至此,小程序配置教程已經,有什麽不明白的地方,可以查看守望軒官網的相關安裝文檔。

五、原作信息

搭建 WordPress 版微信小程序詳細教程

點擊數:52

相關說明:

1、VIP會員無限製任意下載,免積分。立即前往開通>>

2、下載積分可通過日常 簽到綁定郵箱 以及 積分兌換 等途徑獲得!

3、本站資源大多存儲在雲盤,如出現鏈接失效請評論反饋,如有密碼,均為:www.ipipn.com。

4、所有站內資源僅供學習交流使用。未經原版權作者許可,禁止用於任何商業環境,否則後果自負。為尊重作者版權,請購買正版作品。

5、站內資源來源於網絡公開發表文件或網友分享,如侵犯您的權益,請聯係管理員處理。

6、本站提供的源碼、模板、軟件工具等其他資源,都不包含技術服務,請大家諒解!

7、源碼、模板等資源會隨著技術、壞境的升級而存在部分問題,還請慎重選擇。

PS.源碼均收集自網絡,如有侵犯閣下權益,請發信件至: admin@ipipn.com .


源站網 » 搭建 WordPress 版微信小程序詳細教程

發表評論

讚助本站發展 維持服務器消耗

全站源碼免費下載 立刻讚助