使用 PbootCMS 的 API 接口结合 UniApp 开发微信小程序，可以实现高效的内容管理和展示。以下是一个完整的开发流程，包括 API 接口设置、小程序功能设计和开发细节。
1. 准备工作
1.1 配置 PbootCMS API 接口
PbootCMS 提供 API 功能，需在后台开启并配置：
登录 PbootCMS 后台管理。
前往 系统管理 -> API管理，开启 API 功能。
设置 API 的安全密钥（用于签名验证）。
确认需要开放的 API 数据，如栏目、内容等。
常用 API 示例
获取栏目列表：arduino
http://yourdomain.com/api.php/column?site_id=1&parent_id=0
获取内容列表：
http://yourdomain.com/api.php/content?site_id=1&column_id=1&page=1
获取单条内容详情：
http://yourdomain.com/api.php/content/1
1.2 准备 UniApp 开发环境
安装 HBuilderX 开发工具。
创建一个 UniApp 小程序项目。
配置微信小程序开发者工具，并获取微信小程序 AppID。
2. 项目开发流程
2.1 配置 API 基础地址
在项目中创建一个 api.js 文件，用于封装 API 请求。
const BASE_URL = "http://yourdomain.com/api.php";
// 通用请求方法
const request = (url, method, data) => {
return new Promise((resolve, reject) => {
uni.request({
url: BASE_URL + url,
method: method,
data: data,
header: {
'Content-Type': 'application/json',
'Authorization': 'your_api_key' // 替换为 PbootCMS 的 API 密钥
},
success: (res) => {
if (res.statusCode === 200) {
resolve(res.data);
} else {
reject(res.data);
}
},
fail: (err) => {
reject(err);
}
});
});
};
// 导出接口方法
export const getColumns = (site_id, parent_id = 0) => request(`/column`, "GET", { site_id, parent_id });
export const getContents = (site_id, column_id, page = 1) => request(`/content`, "GET", { site_id, column_id, page });
export const getContentDetail = (id) => request(`/content/${id}`, "GET");
2.2 首页栏目展示
页面设计
在 pages/index/index.vue 中创建栏目列表页面。
<template>
<view class="container">
<view class="header">栏目列表</view>
<view class="column" v-for="item in columns" :key="item.id">
<text @click="toContentPage(item.id)">{{ item.name }}</text>
</view>
</view>
</template>
<script>
import { getColumns } from '@/api.js';
export default {
data() {
return {
columns: [] // 栏目数据
};
},
onLoad() {
this.fetchColumns();
},
methods: {
async fetchColumns() {
try {
const res = await getColumns(1); // 传入站点 ID
this.columns = res.list; // API 返回的栏目列表
} catch (err) {
uni.showToast({ title: '加载失败', icon: 'none' });
}
},
toContentPage(columnId) {
uni.navigateTo({ url: `/pages/content/index?column_id=${columnId}` });
}
}
};
</script>
<style>
.container { padding: 20px; }
.header { font-size: 18px; font-weight: bold; }
.column { margin: 10px 0; }
</style>
2.3 内容列表页面
创建 pages/content/index.vue 文件，用于展示指定栏目的内容。
<template>
<view class="container">
<view class="header">内容列表</view>
<view class="content" v-for="item in contents" :key="item.id">
<text @click="toDetailPage(item.id)">{{ item.title }}</text>
</view>
</view>
</template>
<script>
import { getContents } from '@/api.js';
export default {
data() {
return {
contents: [],
columnId: null
};
},
onLoad(options) {
this.columnId = options.column_id; // 从导航传递的栏目ID
this.fetchContents();
},
methods: {
async fetchContents() {
try {
const res = await getContents(1, this.columnId); // 传入站点ID和栏目ID
this.contents = res.list; // API 返回的内容列表
} catch (err) {
uni.showToast({ title: '加载失败', icon: 'none' });
}
},
toDetailPage(contentId) {
uni.navigateTo({ url: `/pages/detail/index?id=${contentId}` });
}
}
};
</script>
2.4 内容详情页面
创建 pages/detail/index.vue 文件，用于展示具体内容。
<template>
<view class="container">
<view class="title">{{ detail.title }}</view>
<view class="body" v-html="detail.content"></view>
</view>
</template>
<script>
import { getContentDetail } from '@/api.js';
export default {
data() {
return {
detail: {}
};
},
onLoad(options) {
this.fetchDetail(options.id);
},
methods: {
async fetchDetail(contentId) {
try {
const res = await getContentDetail(contentId);
this.detail = res.data; // API 返回的内容详情
} catch (err) {
uni.showToast({ title: '加载失败', icon: 'none' });
}
}
}
};
</script>
<style>
.container { padding: 20px; }
.title { font-size: 20px; font-weight: bold; margin-bottom: 10px; }
.body { font-size: 16px; line-height: 24px; }
</style>
3. 部署与优化
部署 API 服务
确保 PbootCMS 的 API 服务对外可访问。
配置 HTTPS，增强安全性。
微信小程序发布
使用微信开发者工具上传代码。
在微信公众平台完成小程序审核与发布。
性能优化
使用缓存（如 uni.setStorage）减少频繁的 API 调用。
在页面展示时对富文本内容进行简单样式调整。
通过以上步骤，可以快速实现 PbootCMS 与 UniApp 的集成开发，满足小程序对内容管理系统的调用需求。
发布者：myrgd，转载请注明出处：https://www.object-c.cn/4890
