這篇文章，記錄的就是我自己在開發(fā)第一版小程序的過(guò)程。知曉程序（微信號(hào) zxcx0101）今天分享的這篇文章，將一步步講解，如何將一個(gè) WordPress 網(wǎng)站借助 REST API 開發(fā)微信小程序版。關(guān)注「知曉程序」公眾號(hào)，在微信后臺(tái)回復(fù)「開發(fā)」，獲取小程序開發(fā)技巧精選文章。小程序如何讀取 WordPress 博客內(nèi)容？WordPress 在 4.6 版本推出了 REST API。簡(jiǎn)單來(lái)說(shuō)，它是一種通過(guò) HTTP 請(qǐng)求完成的客戶端與服務(wù)端數(shù)據(jù)交互方案。我們?cè)L問平常的普通 WordPress 網(wǎng)站，在沒有開啟靜態(tài)緩存的情況下，大致需要「從數(shù)據(jù)庫(kù)拉取數(shù)據(jù) → 服務(wù)端 PHP 進(jìn)程拼成 HTML → 用戶瀏覽器界面」的過(guò)程。REST API 的處理過(guò)程類似，但稍微不同的是：輸出的是 JSON 格式的數(shù)據(jù)，且一般是給客戶端（非網(wǎng)頁(yè)瀏覽器）使用。有了 REST API，一個(gè)網(wǎng)站制作不同客戶端（Android 或 iOS 的 app，以及微信小程序），而共享一個(gè)數(shù)據(jù)庫(kù)成為了可能。我們可通過(guò)瀏覽器，直接訪問 WordPress 的其中一個(gè)接口地址：your-site.com/wp-json/wp/v2/posts?per_page=5&page=1，你可能會(huì)看到類似這樣的返回。/wp-json/wp/v2/ 是WordPress 定義的 REST API 路由（router）與版本號(hào)等的組合。
posts 在 WordPress 中，稱為「終點(diǎn)」（endpoint）。
per_page 與 page 則是參數(shù)。
上面的 URL，表示輸出第 1 頁(yè)最新 5 篇文章的數(shù)據(jù)（5 篇為 1 頁(yè)）。微信小程序通過(guò) REST API，可以獲取到 WordPress 網(wǎng)站上的數(shù)據(jù)。對(duì)數(shù)據(jù)進(jìn)行處理后，通過(guò)前端代碼渲染，就是你在微信客戶端上看到的界面。WordPress 的 REST API 已經(jīng)很完善了，什么文章數(shù)據(jù)、頁(yè)面數(shù)據(jù)、用戶數(shù)據(jù)等都不在話下。把 WordPress 作為小程序的后端，實(shí)在是省了不少人力，至少對(duì)我們這些前端狗來(lái)說(shuō)，不用寫苦逼的后端代碼。開始動(dòng)手，做一個(gè) WP 小程序上一章節(jié)大致介紹了原理后，接下來(lái)就以本站開發(fā)的「DeveWork 極客」小程序第一版為例，介紹三個(gè)頁(yè)面（首頁(yè)、內(nèi)容頁(yè)、閱讀記錄頁(yè)）大體上是如何做出來(lái)的。準(zhǔn)備工作就不細(xì)說(shuō)，大體上包括如下操作。另外在開始開發(fā)之前，我在服務(wù)端對(duì) WordPress REST API 進(jìn)行了一些定制化的輸出。結(jié)合微信官方 quick start 的例子與個(gè)人需求，將項(xiàng)目結(jié)構(gòu)如下分好：
小程序的首頁(yè)，就是文章列表頁(yè)面。啟動(dòng)小程序時(shí)，會(huì)展示最新的 5 篇文章，然后通過(guò)下拉流式加載更多文章。在這里，我們用到的 WordPress REST API 就是 your-site.com/wp-json/wp/v2/posts?per_page={num}&page={num}。index.js 文件的核心，是通過(guò) wx.request 接口，訪問上面的 API URL 獲取到文章數(shù)據(jù)，再 setData 進(jìn)行渲染。
我將這些代碼封裝在函數(shù)中，方便后續(xù)重復(fù)調(diào)用。設(shè)置的數(shù)據(jù)通過(guò) index.wxml 循環(huán)輸出。因?yàn)橐鰸L動(dòng)加載，所以采用了小程序的 scroll-view 組件。
上面的 WXML 代碼中，綁定了兩個(gè)事件函數(shù)：一是下拉事件 pullDownRefresh()，一個(gè)是點(diǎn)擊跳轉(zhuǎn)至文章頁(yè)面的事件 redictSingle()。
文章頁(yè)使用到的 API 地址是 your-site.com/wp-json/wp/v2/posts/{id}。類似地，通過(guò) wx.request 接口訪問 URL，然后渲染數(shù)據(jù)到 WXML 頁(yè)面上。代碼與上面的類似，就不再重復(fù)。但需要提醒的是，這里涉及到如何將富文本轉(zhuǎn)為微信小程序可識(shí)別的 WXML 的問題。因?yàn)楂@取的 JSON 數(shù)據(jù)中，文章正文部分是一段 HTML 代碼。如果將 HTML 直接輸出到小程序中，是會(huì)報(bào)錯(cuò)的。我們需要將這段 HTML 代碼轉(zhuǎn)化為微信小程序 WXML 語(yǔ)言，下一章節(jié)我會(huì)介紹這個(gè)過(guò)程。閱讀記錄頁(yè)面是用來(lái)展示用戶瀏覽歷史，直接照著官方的 Hello World 例子就做起來(lái)了。這個(gè)頁(yè)面用到的主要如下兩種接口：本地緩存相關(guān)接口、用戶授權(quán)相關(guān)接口（wx.login，wx.getUserInfo 等）。從用戶體驗(yàn)上考慮，不應(yīng)該一開始就向用戶申請(qǐng)授權(quán)，而是有需要的頁(yè)面才申請(qǐng)。同時(shí)，也應(yīng)該做好用戶拒絕授權(quán)的優(yōu)雅處理。
|
