4.1 KiB
4.1 KiB
打牌记账小程序 - 使用说明
🚀 快速开始
1. 环境准备
- 微信开发者工具
- 后端服务已启动(http://localhost:3000)
2. 导入项目
- 打开微信开发者工具
- 导入项目,选择
miniapp目录 - AppID 使用测试号或实际AppID
3. 安装依赖
cd miniapp
npm install
在微信开发者工具中:
- 工具 > 构建 npm
4. 修改配置
如果后端不在localhost:3000,修改:
app.js中的apiBaseutils/request.js中的API_BASE
📱 功能说明
已实现功能
- 用户登录 - 首页点击登录按钮
- 首页展示
- 用户信息卡片
- 快速操作入口
- 进行中的牌局列表
核心页面
| 页面 | 路径 | 功能 |
|---|---|---|
| 首页 | pages/index/index | 登录、快速操作、牌局列表 |
| 创建牌局 | pages/game/create/create | 创建新牌局 |
| 加入牌局 | pages/game/join/join | 输入邀请码加入 |
| 牌局详情 | pages/game/detail/detail | 查看牌局信息 |
| 游戏进行 | pages/game/play/play | 记账功能 |
| 个人统计 | pages/stats/personal/personal | 战绩统计 |
| 个人中心 | pages/profile/index/index | 个人信息 |
🎮 使用流程
1. 登录流程
打开小程序 → 首页 → 点击登录 → 授权用户信息 → 登录成功
2. 创建牌局
首页 → 创建牌局 → 填写信息 → 生成邀请码 → 分享给朋友
3. 加入牌局
首页 → 加入牌局 → 输入邀请码 → 加入成功 → 进入牌局
4. 记账流程
牌局详情 → 开始游戏 → 记一笔 → 输入输赢金额 → 保存
🔧 API调用示例
登录
const app = getApp()
await app.login()
创建牌局
import request from '../../utils/request'
const data = await request.post('/sessions/create', {
session_name: '周五麻将',
game_type: 'mahjong',
base_score: 100,
player_count: 4
})
记录游戏
const data = await request.post('/records/add', {
session_id: 1,
dealer_id: 1,
player_records: [
{ player_id: 1, score_change: 300 },
{ player_id: 2, score_change: -100 },
{ player_id: 3, score_change: -100 },
{ player_id: 4, score_change: -100 }
],
notes: '张三自摸'
})
📝 注意事项
- 登录状态 - Token保存在Storage,24小时有效
- 数据刷新 - onShow时自动刷新数据
- 错误处理 - 网络错误自动提示
- 金额单位 - 后端使用分,前端显示元
🐛 常见问题
1. 无法登录
- 检查后端服务是否启动
- 检查网络连接
- 清除缓存重试
2. 请求失败
- 检查API地址配置
- 查看控制台错误信息
- 验证Token是否过期
3. 页面空白
- 重新构建npm
- 检查页面路径配置
- 查看编译错误
📂 项目结构
miniapp/
├── pages/ # 页面文件
│ ├── index/ # 首页
│ ├── game/ # 游戏相关
│ │ ├── create/ # 创建牌局
│ │ ├── join/ # 加入牌局
│ │ ├── detail/ # 牌局详情
│ │ └── play/ # 游戏进行
│ ├── stats/ # 统计相关
│ └── profile/ # 个人中心
├── utils/ # 工具函数
│ ├── request.js # 请求封装
│ └── format.js # 格式化工具
├── images/ # 图片资源
├── app.js # 应用入口
├── app.json # 应用配置
└── app.wxss # 全局样式
🎯 下一步开发
待实现功能
- 实时同步(WebSocket)
- 结算功能
- 数据图表展示
- 语音记账
- 拍照记录
- 导出报表
优化建议
- 添加骨架屏
- 优化加载动画
- 添加下拉刷新
- 缓存优化
- 错误重试机制
📞 技术支持
如需帮助,请参考: