1. 程式人生 > >讓Wordpress成為你微信小程式的文章管理利器

讓Wordpress成為你微信小程式的文章管理利器

Wordpress,相信很多很多人都用過,是一款大名鼎鼎的內容管理系統(CMS),因其社群的強大,外掛的豐富,用它來建網站和部落格真的是非常方便好用。它擁有功能強大的管理後臺,使得對目錄、文章以及標籤的建立和管理,都變得輕鬆簡單。

我們在設計和開發我們的微信小程式的時候,可能會遇到需要建立和管理一系列文章型別的內容,比如一個法律手冊小程式,或是一個菜譜小程式。這種時候,我們有兩種選擇:

  • 自己開發一個文章管理功能
  • 藉助現有的CMS產品

自己開發一個固然不錯,可以根據自己的實際需要,來靈活的進行功能的定製。但是,要開發好一個這樣的功能,還是需要一定的工作量的。快速開發出一個產品並投入市場,去驗證自己的產品設想是否正確,是一個非常重要的事情。我們要適當的採用拿來主義,爭取節約開發產品的週期。從這一點出發,Wordpress就為我們在內容管理這類需求上面,提供了一個很好很現成的工具。

好了,閒話不多說,我們來看一下怎麼讓Wordpress成為我們的微信小程式的內容發動機。

架構概覽

在伺服器端,我們分為主管業務的後端程式和主管文章內容的Wordpress程式,它們都通過Nginx或Apache進行代理,向外暴露服務介面(或者你不想讓外面直接訪問你的wordpress的話,wordpress可以省去代理,藏在伺服器內部,僅提供來自主業務後端程式的訪問)。

然後小程式客戶端方面,就可以通過Nginx暴露出來的介面,訪問到主業務提供的服務和wordpress的服務。

安裝Wordpress與設定

Wordpress安裝的教程網上太多了,我就不詳細介紹了,自行搜尋吧。安裝完成後,你就可以登入它的管理後臺,進行文章和目錄之類的撰寫管理了。

下一步,我們要讓外部程式可以更方便的呼叫Wordpress的功能,讓我們可以通過REST API來操作和獲取Wordpress中的資料。Wordpress可以通過安裝外掛來提供這樣的功能,而且類似功能的外掛不止一個。我在這裡,使用了一個名為Wordpress Rest API的外掛,這個外掛提供的功能比較全面一些,而且在最新版本的Wordpress中,它的功能已經被官方作為基礎功能整合進了Wordpress中,所以比較推薦使用。

安裝並在外掛管理頁面啟用這個外掛以後(怎麼安裝和啟用我不贅述了,簡單的令人髮指,自行搞定吧),我們就擁有了通過REST API操作Wordpresss的能力。

比如通過發起GET請求URL地址:

http://your-domain/wp-json/wp/v2/posts,我們就可以獲取到JSON格式的Wordpress中的文章列表。當然,也可以通過POST請求,DELETE請求等,執行建立和刪除文章的操作。

你可以點選這個連結,看一下輸出的示例資料

瞭解了這一點,我們就可以對Wordpress中的內容進行進一步的開發利用了。

開發

至此,小程式就可以直接呼叫暴露出來的Wordpress REST API了,例如:

wx.request({
  url: 'https://your-domain/wp-json/wp/v2/posts', 
  header: {
      'content-type': 'application/json'
  },
  success: function(res) {
    console.log(res.data)
  }
})

但是,為了保證入口的統一性,以及有可能對從Wordpress中的資料需要進行二次加工的便利性,我們推薦從主業務後端程式中發起對Wordpress的REST API呼叫。

比如我要做一個從Wordpress中搜索我的文章的功能。我會從我的Node.js寫的後端程式中發起對Wordpress REST API的呼叫,程式碼大致像這樣的(其他後臺語言可以做個參考):

post.service.js

const request = require('request')
const errors = require('../consts/errors')
const WP_JSON_API = 'https://xxxxxx/wp-json/wp/v2'

functionsearch(keyword) {
  return new Promise((resolve, reject) => {
    // 呼叫Wordpress:
    // https://xxxxxx/wp-json/wp/v2?per_page=10&search=xxxx
    request.get(`${WP_JSON_API}/posts`, {
      json: true,
      qs: {
        per_page: 10,
        search: keyword
      }
    }, (err, resp, result) => {
      if (err) {
        reject(errors.KW_SEARCH_POST_FAIL)
      } else {
        // result就是從wordpress中獲取到的JSON資料了
        // 你可以在這裡對資料再做一些額外的加工,比如去掉資料我們不需要的欄位等等...
        resolve(result)
      }
    })
  })
}

post.route.js

const express = require('express')
const router = express.Router()
const resUtil = require('../lib/util/response')
const postService = require('../../services/post')

// 這是實際給小程式呼叫的API
// https://xxxxx/api/posts/search?keyword=xxxx
router.get('/api/posts/search', async (req, res) => {
    try {
      const keyword = req.query.keyword
      const posts = await postService.search(keyword)
      resUtil.success(res, posts)
    } catch (e) {
      resUtil.error(res, e)
    }
  })

然後,微信小程式客戶端程式程式碼就可以呼叫我們主業務後端程式碼中提供的搜尋文章的API了:

wx.request({
  url: 'https://your-domain/api/posts/search', 
  data: {
    keyword: '這裡是搜尋關鍵字'
  },
  header: {
      'content-type': 'application/json'
  },
  success: function(res) {
    console.log(res.data)
  }
})

相信你看懂了這些,就能更有效的對Wordpress進行開發利用了。而且不止是對Wordpress,很多有用的開源軟體,我們都可以用類似的方法加以利用,節約我們開發產品的時間,為我們帶來更多的機會。