WordPress接入API开发小程序的完整指南

Name: WordPress接入API开发小程序的完整指南
Brand: suya
Availability: InStock

来自：素雅营销研究院

方知笔记

2025年05月08日 12:02

一、WordPress REST API简介

WordPress从4.7版本开始内置了REST API功能，这使得开发者可以通过标准的HTTP请求与WordPress网站进行数据交互。这一特性为将WordPress内容接入小程序提供了技术基础。

WordPress REST API的主要特点包括：

基于JSON格式传输数据
支持GET、POST、PUT、DELETE等HTTP方法
提供用户、文章、页面、分类等核心数据接口
可通过插件扩展更多接口功能

二、准备工作

在开始接入前，需要确保以下条件已满足：

WordPress网站配置

确保WordPress版本在4.7以上
在”设置-固定链接”中选择非默认的URL结构(推荐”文章名”)
考虑安装JWT Authentication等插件增强API安全性

小程序开发环境

注册微信小程序开发者账号
安装微信开发者工具
创建新的小程序项目

接口测试工具

准备Postman或类似的API测试工具
用于调试WordPress API接口

三、WordPress API基础接入

1. 获取文章列表

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

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

返回的数据包含文章标题、内容、特色图片等信息。

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'
})

四、高级功能实现

1. 用户认证与登录

通过JWT插件实现小程序用户与WordPress用户的对接：

安装并配置JWT Authentication for WP REST API插件
小程序端实现登录获取code
将code发送到服务器换取JWT token

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

2. 文章评论功能

实现用户在小程序端发表评论：

wx.request({
url: 'https://yourdomain.com/wp-json/wp/v2/comments',
method: 'POST',
header: {
'Authorization': 'Bearer ' + wx.getStorageSync('token')
},
data: {
post: 123, // 文章ID
content: '这是一条评论内容'
},
success(res) {
console.log('评论成功')
}
})

3. 自定义接口开发

通过WordPress的register_rest_route函数创建自定义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
];
}

小程序端调用：

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

五、性能优化与安全

缓存策略

使用小程序storage缓存常用数据
设置合理的缓存过期时间
对频繁访问的数据实现本地缓存

安全措施

使用HTTPS协议
限制API访问频率
对敏感操作进行用户认证
过滤API返回的数据，移除不必要的信息

图片优化

使用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;
}
}

数据格式问题

处理WordPress返回的HTML内容，可能需要转换为小程序rich-text支持的格式
处理特色图片的URL路径

分页加载

实现小程序上拉加载更多功能
使用WordPress API的page参数控制分页

七、完整示例项目结构

一个典型的小程序项目结构可能包括：

pages/
index/       // 首页
post/        // 文章详情
category/    // 分类页面
my/          // 个人中心
utils/
api.js       // API请求封装
auth.js      // 认证相关
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)