WordPress接入API開發(fā)小程序的完整指南

來自：素雅營銷研究院

方知筆記

2025年06月07日 12:03

一、WordPress REST API簡介

WordPress從4.7版本開始內(nèi)置了REST API功能，這使得開發(fā)者可以通過標(biāo)準(zhǔn)的HTTP請求與WordPress網(wǎng)站進(jìn)行數(shù)據(jù)交互。這一特性為將WordPress內(nèi)容接入小程序提供了技術(shù)基礎(chǔ)。

WordPress REST API的主要特點(diǎn)包括：

基于JSON格式傳輸數(shù)據(jù)
支持GET、POST、PUT、DELETE等HTTP方法
提供用戶、文章、頁面、分類等核心數(shù)據(jù)接口
可通過插件擴(kuò)展更多接口功能

二、準(zhǔn)備工作

在開始接入前，需要確保以下條件已滿足：

WordPress網(wǎng)站配置

確保WordPress版本在4.7以上
在”設(shè)置-固定鏈接”中選擇非默認(rèn)的URL結(jié)構(gòu)(推薦”文章名”)
考慮安裝JWT Authentication等插件增強(qiáng)API安全性

小程序開發(fā)環(huán)境

注冊微信小程序開發(fā)者賬號
安裝微信開發(fā)者工具
創(chuàng)建新的小程序項目

接口測試工具

準(zhǔn)備Postman或類似的API測試工具
用于調(diào)試WordPress API接口

三、WordPress API基礎(chǔ)接入

1. 獲取文章列表

小程序端可以通過以下方式獲取WordPress文章列表：

wx.request({
url: 'https://yourdomain.com/wp-json/wp/v2/posts',
method: 'GET',
success(res) {
console.log(res.data)
}
})

返回的數(shù)據(jù)包含文章標(biāo)題、內(nèi)容、特色圖片等信息。

2. 獲取單篇文章詳情

通過文章ID獲取特定文章的完整正文：

wx.request({
url: 'https://yourdomain.com/wp-json/wp/v2/posts/123',
method: 'GET',
success(res) {
console.log(res.data)
}
})

3. 獲取分類信息

獲取所有分類或特定分類下的文章：

// 獲取所有分類
wx.request({
url: 'https://yourdomain.com/wp-json/wp/v2/categories',
method: 'GET'
})

// 獲取特定分類下的文章
wx.request({
url: 'https://yourdomain.com/wp-json/wp/v2/posts?categories=5',
method: 'GET'
})

四、高級功能實(shí)現(xiàn)

1. 用戶認(rèn)證與登錄

通過JWT插件實(shí)現(xiàn)小程序用戶與WordPress用戶的對接：

安裝并配置JWT Authentication for WP REST API插件
小程序端實(shí)現(xiàn)登錄獲取code
將code發(fā)送到服務(wù)器換取JWT token

// 小程序登錄
wx.login({
success(res) {
if (res.code) {
wx.request({
url: '你的服務(wù)器地址/api/jwt-auth/v1/token',
method: 'POST',
data: {
code: res.code
},
success(res) {
// 保存token
wx.setStorageSync('token', res.data.token)
}
})
}
}
})

2. 文章評論功能

實(shí)現(xiàn)用戶在小程序端發(fā)表評論：

wx.request({
url: 'https://yourdomain.com/wp-json/wp/v2/comments',
method: 'POST',
header: {
'Authorization': 'Bearer ' + wx.getStorageSync('token')
},
data: {
post: 123, // 文章ID
content: '這是一條評論內(nèi)容'
},
success(res) {
console.log('評論成功')
}
})

3. 自定義接口開發(fā)

通過WordPress的register_rest_route函數(shù)創(chuàng)建自定義API：

// 在主題的functions.php中添加
add_action('rest_api_init', function() {
register_rest_route('custom/v1', '/data', [
'methods' => 'GET',
'callback' => 'custom_api_data'
]);
});

function custom_api_data() {
return [
'custom_data' => 'value',
'another_data' => 123
];
}

小程序端調(diào)用：

wx.request({
url: 'https://yourdomain.com/wp-json/custom/v1/data',
method: 'GET'
})

五、性能優(yōu)化與安全

緩存策略

使用小程序storage緩存常用數(shù)據(jù)
設(shè)置合理的緩存過期時間
對頻繁訪問的數(shù)據(jù)實(shí)現(xiàn)本地緩存

安全措施

使用HTTPS協(xié)議
限制API訪問頻率
對敏感操作進(jìn)行用戶認(rèn)證
過濾API返回的數(shù)據(jù)，移除不必要的信息

圖片優(yōu)化

使用WordPress的圖片壓縮插件
小程序端使用合適的圖片尺寸
考慮使用CDN加速圖片加載

六、常見問題解決

跨域問題

在WordPress主題的functions.php中添加CORS支持

add_action('init', 'handle_preflight');
function handle_preflight() {
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Headers: Content-Type, Authorization');
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
exit;
}
}

數(shù)據(jù)格式問題

處理WordPress返回的HTML內(nèi)容，可能需要轉(zhuǎn)換為小程序rich-text支持的格式
處理特色圖片的URL路徑

分頁加載

實(shí)現(xiàn)小程序上拉加載更多功能
使用WordPress API的page參數(shù)控制分頁

七、完整示例項目結(jié)構(gòu)

一個典型的小程序項目結(jié)構(gòu)可能包括：

pages/
index/       // 首頁
post/        // 文章詳情
category/    // 分類頁面
my/          // 個人中心
utils/
api.js       // API請求封裝
auth.js      // 認(rèn)證相關(guān)
config.js    // 配置文件
app.js
app.json
app.wxss

在api.js中封裝公共請求方法：

const API_BASE = 'https://yourdomain.com/wp-json'

function request(url, method, data) {
return new Promise((resolve, reject) => {
wx.request({
url: API_BASE + url,
method: method,
data: data,
header: {
'Authorization': 'Bearer ' + wx.getStorageSync('token')
},
success(res) {
resolve(res.data)
},
fail(err) {
reject(err)
}
})
})
}

export const getPosts = (params) => request('/wp/v2/posts', 'GET', params)
export const getPost = (id) => request(`/wp/v2/posts/${id}`, 'GET')
export const postComment = (data) => request('/wp/v2/comments', 'POST', data)

八、總結(jié)

WordPress REST API為小程序開發(fā)提供了強(qiáng)大的后端支持，使開發(fā)者能夠快速構(gòu)建內(nèi)容驅(qū)動型小程序。通過合理利用WordPress的內(nèi)容管理能力和小程序的跨平臺特性，可以開發(fā)出功能豐富、性能優(yōu)良的應(yīng)用。

在實(shí)際開發(fā)中，建議：