WordPress 網站基於REST API 開發「微信小程序」實戰

本文原連接：https://devework.com/wordpres...，轉載請明鏈註明原始來源謝謝！

---

幾周前，Jeff 花了兩天將本身的WordPress 網站作了個微信小程序版本（詳細見該文）。這篇文章主要記錄本身在開發初版的過程，順便爲有興趣的你剖析如何將一個WordPress 網站藉助 REST API 開發微信小程序版。本文目標受衆爲了解WordPress 且有初級前端知識的同窗。

原理篇

WordPress 與 REST API

WordPress 在4.6 版本後推出了 REST API， REST API 簡單來講就是一種經過 HTTP 請求來獲取、更新、刪除數據的一種鏈接客戶端與服務端的交互方式。咱們訪問日常的普通 WordPress 網頁，在沒有開啓靜態緩存的狀況下，大概是走「從數據庫拉取數據—> 服務端 PHP 進程拼成 HTML 直接輸出 —> 用戶瀏覽器界面」的過程， REST API 也是相似步驟，但後面兩步稍微不一樣：輸出的是 JSON 格式的數據且通常是給客戶端使用。有了REST API，一個網站製做各類網站版本（安卓版、iOS 版、以及接下來講的小程序版）而共享一個數據庫成爲了可能。

（原圖來自wisdmlabs，稍做修改）

以本站爲例，可經過瀏覽器直接訪問REST API 的其中一種URL：https://devework.com/wp-json/wp/v2/posts?per_page=5&page=1 （若是你如今直接訪問是403 報錯，那是我爲了安全而設置的攔截，請自行替換爲本身網站的域名），你可能會看到以下圖左側的界面；若是你使用Chrome 瀏覽器且安裝JSONView 插件則爲下圖右側的界面。

且讓Jeff 將上面的URL 解釋下，/wp-json/wp/v2/ 這個是WordPress 定義的REST API 的「路由」（router）與版本號等的組合，posts 在WordPress中稱爲「終點」 （endpoint），per_page 與page 則是相關參數。 關於REST API 的名詞解釋能夠參考阮老師的文章。上面的URL 即表示輸出第1頁最新5篇文章的數據（5篇爲1頁）。這個URL 接下來將要用到。

微信小程序

微信小程序就很少介紹了，雖然剛開始不溫不火，但接下來必然是在國內互聯網佔據必定的地位。本文在這裏也很少談什麼小程序前景如何這些空大話，既然你看到這兒必然是對小程序有興趣且在某種程度上有必定的確定。

WordPress + 小程序

微信小程序經過 REST API 獲取到 WordPress 網站上的數據，而後經過必定的方式進行數據處理後經過前端代碼渲染，而後就是你在微信客戶端上看到的界面。

WordPress 的REST API 如今開發得已經很完善了，什麼文章數據、頁面數據、用戶數據等都不在話下，把 WordPress 做爲小程序的後端實在是省了很多人力，至少對咱們這些前端狗來講不用寫苦逼的後端代碼。

開發篇

上一章節大體介紹了原理後，接下來就以本站開發的「DeveWork+」小程序初版v1.0 爲例，介紹三個頁面（首頁、內容頁、閱讀記錄頁）大致上是如何作出來的。能夠掃描下面的小程序碼體驗一下，注意看文章的此時你掃描進入的版本可能不是否是初版了。要看懂本章節的內容，須要你對小程序開發有必定的瞭解（不要求看完文檔，但至少也跑一下官方的例子吧）。另外本章節也不會涉及如何寫CSS（WXSS）的部分，默認讀者有這方面的基礎。

準備工做

準備工做就不細說，大致上包括以下操做：一是微信公衆平臺管理後臺上註冊小程序帳號，配置域名等信息；二是服務端確保配置好HTTPS、「合法域名」這塊是已經備案的域名。

另外在開始開發以前，我在服務端對WordPress REST API 進行了一些定製化的輸出。

項目結構

結合微信官方quick start 的例子與我的需求，將項目結構以下分好：

├── app.js

├── app.json

├── app.wxss 

├── config.js // 配置文件

├── image // 圖片目錄

├── pages // 頁面目錄

├── utils // 實用untils 類

└── wxParse // 第三方庫wxParse

小程序首頁（文章列表頁面）

首頁即文章列表頁面， 即展現最新的5篇文章，而後經過下拉流式加載更多文章（有點無限加載的意味）。使用到WordPress 的REST API 就是 your-site.com/wp-json/wp/v2/posts?per_page={num}&page={num}。

index.js 文件裏面核心是經過wx.request 接口訪問上面的API URL 獲取到文章數據並setData 供後續數據渲染：

// https://devework.com/wordpress-rest-api-weixin-weapp.html

wx.request({

    url: url,

    success: function (response) {

        self.setData({

            posts: self.data.posts.concat(response.data.map(function (item) {

                 ...

                 // 數據過濾/格式化等

                 ...

                return item;

            }))

        });

    }

  });

}

上面的代碼我是抽出在一個函數中，方便後續重複調用。設置的數據經過index.wxml 循環輸出，當前在此以前由於要作滾動加載，因此採用了小程序的scroll-view組件（官方文檔）。

上面的WXML 代碼中綁定了兩個事件函數：一是下拉事件pullDownRefresh()，一個是點擊事件redictSingle()，即點擊後跳轉到文章詳情頁。

// https://devework.com/wordpress-rest-api-weixin-weapp.html

// 下拉刷新

pullDownRefresh: function (event) {

    var self = this;

    self.setData({

        page: self.data.page + 1 //頁面+1

    });

    console.log('current page:' + self.data.page);

    this.fetchData({ page: self.data.page });

},

// 路由導航到文章內頁

redictSingle: function (event) {

    console.log('redictSingle');

    var id = event.currentTarget.id; // 這裏的id 實際上是WordPress 中的文章id，須要傳遞到single 頁面

    var url = '../single/single?id=' + id;

    wx.navigateTo({

        url: url

    })

}

文章內頁（文章詳情頁面）

文章頁使用到的REST API URL是your-site.com/wp-json/wp/v2/post/{id}。也是相似，經過wx.request 接口訪問URL 而後渲染數據到WXML 頁面上。代碼與上面的相似就不重複了。

這裏其實涉及到個如何將富文本轉爲微信小程序可識別的WXML 的問題。由於獲取的JSON 數據文章正文部分是一段HTML 代碼，若是直接輸出是會報錯的，須要將這段HTML 代碼（俗稱富文本）轉化爲微信小程序WXML 語言。Jeff 使用的是WxParse 這個第三方庫，下一章節會有介紹。

閱讀記錄頁面

閱讀記錄頁面是用來展現用戶瀏覽歷史，直接照着官方的Hello World 例子就作起來了。這個頁面用到的主要以下兩種接口：LocalStorage 相關接口、用戶受權相關接口（wx.login，wx.getUserInfo等）。

從用戶體驗上考慮，不該該一開始就向用戶申請受權，而是有須要的頁面才申請；同時也應該作好用戶不容許受權的優雅處理。在這裏由於小程序的坑以及我的關係初版處理得不是很完美，代碼就不展現了。

記錄的文章閱讀歷史數據是以LocalStorage 的形式保存在客戶端而非雲端，一句「閱讀記錄僅保存在本設備」的提示是有必要的。同時基於容量上的考慮將最多數目限制爲20條。

// https://devework.com/wordpress-rest-api-weixin-weapp.html

// 調用API從本地緩存中獲取閱讀記錄並記錄

var logs = wx.getStorageSync('readLogs') || [];

// 過濾重複值

if (logs.length > 0) {

    logs = logs.filter(function (log) {

        return log[0] !== id;

    });

}

// 若是超過指定數量

if (logs.length > 19) {

    logs.pop();//去除最後一個

} 

logs.unshift([id, response.data.title.rendered]);

wx.setStorageSync('readLogs', logs);

上面的代碼實際上是放在single.js裏面的，由於須要將文章id 與標題保存在LocalStorage 上，只有single.js才同時獲取這兩種數據。

最後還須要在log.js 的onShow生命週期綁定一個更新數據的函數：

// https://devework.com/wordpress-rest-api-weixin-weapp.html

updateData: function(cb){

        var that = this;

        // readlog 

        this.setData({

            readLogs: (wx.getStorageSync('readLogs') || []).map(function (log) {

                return log;

            })

        })

    },

踩坑篇

這個章節主要記錄在開發過程當中的一些坑以及解決方案。

TabBar 的圖片問題

小程序官方宣稱支持SVG 圖片，但在tabBar 裏面的圖片並不支持SVG 圖片。官方推薦採用81x81 尺寸的png 圖片，但這個依然有點坑。建議在設計icon 的時候稍微留點透明的padding 佔位，否則會致使圖標在真機上會放得很大。

圖片防盜鏈的referer 設置

若是你託管圖片的服務器有防盜鏈處理，那麼得將servicewechat.com放入白名單中，並非想固然的qq.com。

Image 的絕對路徑必須以https 開頭

image 的src 絕對路徑，在web 開發中是容許相似//example.com/pic.png的以//開頭的存在，這種圖片路徑在微信web 開發者工具也能正常顯示，但在真機上就不能正常加載了，必須是https 開頭的絕對路徑。

服務端數據側很差處理的話能夠經過下面的util 處理：

// https://devework.com/wordpress-rest-api-weixin-weapp.html

// 補全URL 中缺失的 HTTPS

function addhttps(url) {

  if (!/^(f|ht)tps?:\/\//i.test(url)) {

    url = "https:" + url;

  }

  return url;

}

開發者工具的小程序UA 與實際UA 不一樣

開發工具中模擬的小程序UA 是相似：

... Chrome/53.0.2785.143 Safari/537.36 appservice webview/100000

而經過Nginx 的log 能夠查看到實際的UA 是相似（其實就是微信的UA）：

... Mobile/14E304 MicroMessenger/6.6.0 NetType/WIFI Language/zh_CN

某些狀況下須要注意這些不一樣。

默認的Flex 佈局

若是你是在官方例子的代碼基礎上開發你的小程序的，建議先刪掉app.wxss 的flex 佈局相關代碼，會下降你遇到奇葩樣式問題的概覽。

wxParse 的坑1：code 字符被錯誤替換

小程序使用到的富文本轉化是用wxParse 這個第三方庫，用的時候發現有很多坑（但目前是這個庫最爲實用了）。其中一個就是全局的code 字符都被替換爲wx-codexxx 相似的坑，做者本意應該是對code 標籤進行這個替換，但可能一不當心寫錯了。解決方案是暫時刪掉那段代碼。

wxParse 的坑2：image的src 多解析出一個逗號

看圖說話：

上圖也很好解釋了上面的referer 坑與圖片路徑https 開頭的坑。解決方案只能先改動源碼（html2json.js 約L130）Fix 下：

// https://devework.com/wordpress-rest-api-weixin-weapp.html

// Fix: img 標籤數組含有空字符的問題

if (imgUrl[0] == ''){

  imgUrl.splice(0, 1);

}

關於富文本這個，好消息是官方的富文本組件已經在路上。

總結篇

至此詳略得當地介紹了開發這個WordPress 版小程序的過程，接下來的工做天然是提交到官方並耐心等待審覈結果的通知。整個開發過程其實並不太有難度，若是以前有使用過Angular、Vue 這類MVVM 框架，整個開發過程基本上只是看官方文檔的問題。

但願本文對你有幫助，若是有疑問能夠留言討論，謝謝~ 本站後續也會有一系列關於小程序開發的文章，歡迎關注。

本站有關小程序的文章：https://devework.com/tag/weapp

---

本文原連接：https://devework.com/wordpres...，轉載請明鏈註明原始來源謝謝！