## 为什么做这个小程序？
相信很多做实体店、工作室、或者搞会员制社群的朋友都有这个痛点：会员多了，谁充了多少钱、还剩多少余额，光靠脑子记或 Excel 根本管不过来。
正好我最近在研究微信小程序开发，就动手做了一个 **VIP会员管理系统**。顾客扫码就能绑定会员，充值和消费自动记录，还能一键给客户发通知。趁小程序备案的空档，我把整个开发过程写下来，给有需要的朋友参考。
## 小程序长什么样？
**核心功能一览：**
- 会员列表，支持搜索和排序
- 一键充值/消费，余额实时更新
- 完整交易流水，按类型筛选
- 统计分析：总充值、总消费、会员排名
- 顾客扫码绑定，支持微信通知
- 网页管理后台，电脑端也能操作
- 暗色主题，简洁专业
> 由于小程序还在备案中，暂时无法搜索体验。备案通过后会更新小程序码。
## 技术架构
整个项目分三部分：
| 层级 | 技术 | 说明 |
|------|------|------|
| 小程序前端 | 微信原生开发（WXML + WXSS + JS） | 5 个页面 + 自定义 TabBar |
| 后端 API | PHP | 单文件 API，部署在任意 PHP 服务器 |
| 管理后台 | HTML + JS（单页面） | 电脑端操作，数据与小程序互通 |
架构非常简单：小程序和网页后台通过同一个 PHP API 读写 JSON 数据文件，无需数据库。
```
微信小程序 ──→ PHP API ──→ JSON 数据文件
网页后台 ──→ PHP API ──→ JSON 数据文件
```
## 一、后端 API 设计
后端只有一个 PHP 文件，通过 `?action=xxx` 区分不同操作。
### 核心 API 列表
| action | 方法 | 说明 |
|--------|------|------|
| login | POST | 微信登录，code 换 openid |
| status | GET | 获取账户状态 |
| members | GET | 获取会员列表 |
| add_member | POST | 新增会员 |
| edit_member | POST | 编辑会员信息 |
| delete_member | POST | 删除会员 |
| recharge | POST | 会员充值 |
| consume | POST | 会员消费 |
| transactions | GET | 获取交易记录 |
| get_bind_code | GET | 获取绑定码（网页端） |
| bind_code | POST | 输入绑定码绑定 |
| invite_bind | POST | 邀请链接绑定 |
| unbind | POST | 解除微信绑定 |
### 登录流程
```php
// 微信登录：code 换取 openid
if ($action === 'login') {
$code = $input['code'] ?? '';
$wxUrl = "https://api.weixin.qq.com/sns/jscode2session?" .
"appid={$wxAppId}&secret={$wxSecret}&js_code=" .
urlencode($code) . "&grant_type=authorization_code";
$wxResponse = file_get_contents($wxUrl);
$wxData = json_decode($wxResponse, true);
$openid = $wxData['openid'];
echo json_encode(['openid' => $openid]);
}
```
微信小程序端调用 `wx.login()` 获取临时 code，后端用 code 向微信服务器换取唯一标识 openid。后续所有操作都带上 openid，实现数据隔离。
### 数据存储
数据以 JSON 文件存储，每个用户一个文件：
```json
{
"members": [
{
"id": 1,
"name": "张三",
"phone": "138****1234",
"balance": 500.00,
"total_recharge": 1000.00,
"total_consume": 500.00
}
],
"transactions": [
{
"id": 1,
"member_id": 1,
"member_name": "张三",
"type": "recharge",
"amount": 500.00,
"time": "2025-07-14 10:30:00"
}
]
}
```
### 会员充值核心逻辑
```php
case 'recharge':
$amount = floatval($input['amount'] ?? 0);
$id = intval($input['member_id']);
// 找到对应会员，更新余额
foreach ($data['members'] as &$m) {
if ($m['id'] == $id) {
$m['balance'] += $amount;
$m['total_recharge'] += $amount;
// 记录交易流水
addTransaction($data, $id, $m['name'], 'recharge', $amount, $m['balance']);
break;
}
}
saveData($jsonFile, $data);
```
## 二、小程序前端
### 页面结构
小程序一共 5 个页面：
```
pages/
├── index/ # 首页：会员列表 + 统计卡片
├── transactions/ # 交易记录
├── stats/ # 统计分析
├── mine/ # 我的（设置、绑定、注销）
└── bind/ # 绑定页（扫码/邀请绑定）
```
### 首页：会员管理核心
首页是使用频率最高的页面，我把它设计为信息密度最高的布局：
- **顶部统计卡片**：总余额、累计充值、本月消费
- **搜索排序栏**：按姓名/手机搜索，按姓名/余额排序
- **会员列表**：显示姓名、手机（脱敏）、余额、VIP等级
- **浮动按钮**：右下角 + 按钮快速新增会员
- **点击会员弹出操作菜单**：充值、消费、编辑、解绑、删除
```javascript
// 加载数据
loadData: function() {
var that = this;
wx.showLoading({ title: '加载中...' });
Promise.all([
util.getMembers(),
util.getTransactions(),
util.getStatus()
]).then(function(results) {
var members = results[0];
var transactions = results[1];
var status = results[2];
that.setData({
members: members,
transactions: transactions,
stats: that.calcStats(members, transactions)
});
wx.hideLoading();
});
}
```
### 会员等级设计
根据余额自动计算等级，直观展示：
| 等级 | 条件 | 徽章颜色 |
|------|------|----------|
| 钻石VIP | 余额 ≥ 10000 | 金色 |
| 黄金VIP | 余额 ≥ 5000 | 橙色 |
| 普通VIP | 余额 ≥ 500 | 蓝色 |
| 普通会员 | 余额 < 500 | 灰色 |
```javascript
// WXS 中计算等级
function getLevel(m) {
var balance = m.balance || 0;
if (balance >= 10000) return 'diamond';
if (balance >= 5000) return 'gold';
if (balance >= 500) return 'vip';
return 'normal';
}
```
### 充值/消费 + 一键通知
这是我觉得最实用的功能：充值和消费完成后，自动生成通知文案，一键复制发给客户。
```javascript
// 充值成功后
notifyRecharge: function(member, amount) {
var text = '【充值通知】\n' +
'尊敬的 ' + member.name + '：\n' +
'您已成功充值 ¥' + amount.toFixed(2) + '\n' +
'当前余额：¥' + member.balance.toFixed(2) + '\n' +
'感谢您的支持！';
wx.setClipboardData({
data: text,
success: function() {
wx.showToast({ title: '已复制，可发送给客户' });
}
});
}
```
### 交易记录页
按类型筛选（全部/充值/消费），每条记录显示会员名、操作类型、金额、时间，支持删除。
### 统计分析页
- 三个汇总卡片：总充值、总消费、剩余金额
- 会员排名表格，支持按充值或消费排序
- 前三名金银铜色排名徽章
- 点击任意卡片或行弹出详情
### 网页绑定
小程序和网页后台数据互通的核心：
1. 在网页端点击「生成绑定码」，得到一个 6 位数字
2. 在小程序「我的」页面输入绑定码
3. 绑定成功后，两端操作的是同一份数据
绑定码 5 分钟过期，保证安全性。
## 三、网页管理后台
除了小程序，我还做了一个网页版后台。电脑端大屏操作更方便，特别是录入大量会员数据的时候。
网页端功能和小程序完全一致：
- 会员管理（增删改查）
- 充值消费
- 交易记录
- 数据与小程序实时同步
网页端通过扫码登录，使用同一个 API，操作同一份数据。
## 四、部署指南
如果你想自己部署一套，步骤如下：
### 1. 准备环境
- 一台 Linux 服务器（任意配置）
- 已备案的域名
- PHP 7.4+ 环境
- 微信小程序 AppID 和 AppSecret
### 2. 部署后端
```bash
# 创建目录
mkdir -p /var/www/html/wxxcx
# 上传 api_wxxcx.php 和 config.php
# config.php 内容：
$wxAppId = '你的小程序AppID';
$wxSecret = '你的小程序AppSecret';
```
### 3. 部署网页后台
把 `vip.html` 放到同一目录即可。
### 4. 小程序端配置
修改 `utils/util.js` 中的 API 地址：
```javascript
var API_BASE = 'https://你的域名/wxxcx/api_wxxcx.php';
```
然后用微信开发者工具上传代码，提交审核即可。
## 五、总结
这个小程序从构思到开发完成，断断续续花了两周左右的业余时间。最花时间的不是写代码，而是**打磨交互细节**——操作菜单的动画、余额变动的即时反馈、通知文案的一键复制，这些看似不起眼的地方，才是用户体验的关键。
目前小程序还在备案中，等正式上线后我会把小程序码更新到这里。如果你对这个小程序感兴趣，或者有类似的需求想交流，欢迎在评论区留言。
---
**相关资源：**
- 完整源码：备案通过后放出
- 管理后台：`https://zjunwei.com/wxxcx/vip.html`
- API 接口：`https://zjunwei.com/wxxcx/api_wxxcx.php`