close
文 | Jeff 我花瞭兩天時間，將自己的 WordPress 網站做瞭個微信小程序版本。 這篇文章，記錄的就是我自己在開發第一版小程序的過程。 知曉程序（微信號 zxcx0101）今天分享的這篇文章，將一步步講解，如何將一個 WordPress 網站借助 REST API 開發微信小程序版。 關註「知曉程序」公眾號，在微信後臺回復「開發」，獲取小程序開發技巧精選文章。 小程序如何讀取 WordPress 博客內容？ WordPress 在 4.6 版本推出瞭 REST API。簡單來說， 它是一種通過 HTTP 請求完成的客戶端與服務端數據交互方案。 我們訪問平常的普通 WordPress 網站，在沒有開啟靜態緩存的情況下，大致需要「從數據庫拉取數據 → 服務端 PHP 進程拼成 HTML → 用戶瀏覽器界面」的過程。 REST API 的處理過程類似，但稍微不同的是： 輸出的是 JSON 格式的數據，且一般是給客戶端（非網頁瀏覽器）使用。 有瞭 REST API，一個網站制作不同客戶端（Android 或 iOS 的 app，以及微信小程序），而共享一個數據庫成為瞭可能。
我們可通過瀏覽器，直接訪問 WordPress 的其中一個接口地址：
your-site.com/wp-json/wp/v2/posts?per_page=5 page=1，你可能會看到類似這樣的返回。
現在，讓我將上面的 URL 解釋下。
/wp-json/wp/v2/ 是WordPress 定義的 REST API 路由（router）與版本號等的組合。
posts 在 WordPress 中，稱為「終點」（endpoint）。
per_page 與 page 則是參數。
上面的 URL， 表示輸出第 1 頁最新 5 篇文章的數據（5 篇為 1 頁）。 微信小程序通過 REST API，可以獲取到 WordPress 網站上的數據。對數據進行處理後，通過前端代碼渲染，就是你在微信客戶端上看到的界面。 WordPress 的 REST API 已經很完善瞭，什麼文章數據、頁面數據、用戶數據等都不在話下。 把 WordPress 作為小程序的後端，實在是省瞭不少人力，至少對我們這些前端狗來說，不用寫苦逼的後端代碼。 開始動手，做一個 WP 小程序 上一章節大致介紹瞭原理後，接下來就以本站開發的「DeveWork 極客」小程序第一版為例，介紹三個頁面（首頁、內容頁、閱讀記錄頁）大體上是如何做出來的。 1. 準備工作 準備工作就不細說，大體上包括如下操作。
在微信公眾平臺管理後臺上註冊小程序賬號，配置合法域名等信息。
二是服務端確保配置好 HTTPS（但不一定要求備案）。
另外在開始開發之前，我在服務端對 WordPress REST API 進行瞭一些定制化的輸出。 2. 項目結構 結合微信官方 quick start 的例子與個人需求，將項目結構如下分好：
3. 構建文章列表頁面 小程序的首頁，就是文章列表頁面。啟動小程序時，會展示最新的 5 篇文章，然後通過下拉流式加載更多文章。 在這裡，我們用到的 WordPress REST API 就是
your-site.com/wp-json/wp/v2/posts?per_page={num} page={num}。
index.js 文件的核心，是通過 wx.request 接口，訪問上面的 API URL 獲取到文章數據，再 setData 進行渲染。
我將這些代碼封裝在函數中，方便後續重復調用。 設置的數據通過
index.wxml 循環輸出。因為要做滾動加載，所以采用瞭小程序的
scroll-view 組件。
上面的 WXML 代碼中，綁定瞭兩個事件函數：一是下拉事件
pullDownRefresh()，一個是點擊跳轉至文章頁面的事件
redictSingle()。
4. 構建文章詳情頁 文章頁使用到的 API 地址是
your-site.com/wp-json/wp/v2/posts/{id}。 類似地，通過
.request 接口訪問 URL，然後渲染數據到 WXML 頁面上。 代碼與上面的類似，就不再重復。但需要提醒的是，這裡涉及到如何將富文本轉為微信小程序可識別的 WXML 的問題。 因為獲取的 JSON 數據中，文章正文部分是一段 HTML 代碼。如果將 HTML 直接輸出到小程序中，是會報錯的。 我們需要將這段 HTML 代碼轉化為微信小程序 WXML 語言，下一章節我會介紹這個過程。 5. 閱讀記錄頁面
閱讀記錄頁面是用來展示用戶瀏覽歷史，直接照著官方的 Hello World 例子就做起來瞭。 這個頁面用到的主要如下兩種接口：本地緩存相關接口、用戶授權相關接口（
wx.login，
wx.getUserInfo 等）。 從用戶體驗上考慮， 不應該一開始就向用戶申請授權，而是有需要的頁面才申請。同時，也應該做好用戶拒絕授權的優雅處理。 關註「知曉程序」微信公眾號，在微信後臺回復「用戶信息」，查看小程序如何正確地獲取用戶資料。 記錄的文章閱讀歷史數據是以本地緩存的形式保存在客戶端，而非雲端。所以，一句「閱讀記錄僅保存在本設備」的提示，是有必要的。 同時，基於小程序緩存限制的考慮，我將記錄上限設為 20 篇。
上面的代碼，其實是放在
single.js 裡面的。因為我需要將文章 ID 與標題保存，而隻有
single.js，才會同時獲取這兩種數據。
最後，我還需要在
log.js 的
onShow 生命周期函數中，綁定一個更新數據的函數：
開發過程中，我踩的坑 這個章節主要記錄在開發過程中的一些坑，以及我所采用的解決方案。 1. Tab Bar 的圖片問題 小程序官方宣稱支持 SVG 圖片， 但 tab bar 並不支持 SVG 圖片。 官方推薦采用 81 px × 81 px 尺寸的 PNG 圖片，但這個依然有點坑。 建議在設計 icon 的時候，為 tab bar 的圖標稍微留點透明的 padding，不然，圖標在真機上會放得很大。 2. 圖片防盜鏈的 referer 設置 如果你托管圖片的服務器有防盜鏈處理，那麼得將
servicewechat.com 放入白名單中。記得，這個白名單不是
qq.com。 3.
image 組件的絕對路徑，必須以 HTTPS 開頭
image 組件的 台中二手冰櫃回收
src 絕對路徑，在 web 開發中是允許類似
//example.com/pic.png 這種省略協議名的存在。 這種圖片路徑，在微信 web 開發者工具也能正常顯示。但是，在真機上就不能正常加載瞭。 在真機上必須是 HTTPS 開頭的絕對路徑。
服務端數據側不好處理的話，可以通過下面的函數處理：
4. 開發者工具的小程序 UA 與實際 UA 不同 開發工具中模擬的小程序 UA 類似這樣： 而通過 Nginx 的 log，我們可以知道，真機運行的 UA 其實就是微信的 UA： 某些情況下需要註意這些不同。 5. 默認的 Flex 佈局 如果你是在官方例子的代碼基礎上開發你的小程序的，建議先刪掉
app.wxss 的 Flex 佈局相關代碼。這樣做，會降低你遇到奇葩樣式問題的概率。 6. wxParse 的坑 小程序使用到的富文本轉化是用 wxParse 這個第三方庫，用的時候發現有不少坑（但目前是這個庫最為實用瞭）。 其中一個，就是 全局的 code 字符都被替換二手餐飲設備收購為
wx-codexxx，作者本意應該是對
code 標簽進行這個替換，但可能一不小心寫錯瞭。 解決方案，隻能是暫時刪掉那段代碼。 另外， 使用 wxParse 的時候，
image 組件中的
src 屬性，會多解析出一個逗號。 看圖說話：
上圖也很好解釋瞭上面的 referer 坑與圖片路徑 HTTPS 開頭的坑。解決方案，隻能先改動源碼（html2json.js）來修復：
關於富文本，好消息是，官方的富文本組件已經發佈。 關註「知曉程序」微信公眾號，在微信後臺回復「富文本」，查看小程序富文本組件新能力解讀。 最後的話 至此，我也算是詳略得當地，介紹瞭開發 WordPress 版小程序的過程。接下來的工作，自然是提交到官方並耐心等待審核結果的通知。 整個開發過程其實並不太有難度，如果之前有使用過 Angular、Vue 這類 MVVM 框架，整個開發過程基本上隻是看官方文檔的問題。 「DeveWork 極客」小程序使用鏈接
https://minapp.com/miniapp/3016/ 原文地址： https://devework.com/wordpress-rest-api-weixin-weapp.html 關註「知曉程序」公眾號，在微信後臺回復「開發」，獲取小程序開發技巧精選文章。
AUGI SPORTS｜重機車靴｜重機車靴推薦｜重機專用車靴｜重機防摔鞋｜重機防摔鞋推薦｜重機防摔鞋
AUGI SPORTS｜augisports｜racing boots｜urban boots｜motorcycle boots
全站熱搜
留言列表
