dapaijizhang3/MINIAPP_README.md

4.1 KiB
Raw Permalink Blame History

打牌记账小程序 - 使用说明

🚀 快速开始

1. 环境准备

  • 微信开发者工具
  • 后端服务已启动http://localhost:3000

2. 导入项目

  1. 打开微信开发者工具
  2. 导入项目,选择 miniapp 目录
  3. AppID 使用测试号或实际AppID

3. 安装依赖

cd miniapp
npm install

在微信开发者工具中:

  • 工具 > 构建 npm

4. 修改配置

如果后端不在localhost:3000修改

  • app.js 中的 apiBase
  • utils/request.js 中的 API_BASE

📱 功能说明

已实现功能

  1. 用户登录 - 首页点击登录按钮
  2. 首页展示
    • 用户信息卡片
    • 快速操作入口
    • 进行中的牌局列表

核心页面

页面 路径 功能
首页 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: '张三自摸'
})

📝 注意事项

  1. 登录状态 - Token保存在Storage24小时有效
  2. 数据刷新 - onShow时自动刷新数据
  3. 错误处理 - 网络错误自动提示
  4. 金额单位 - 后端使用分,前端显示元

🐛 常见问题

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            # 全局样式

🎯 下一步开发

待实现功能

  1. 实时同步WebSocket
  2. 结算功能
  3. 数据图表展示
  4. 语音记账
  5. 拍照记录
  6. 导出报表

优化建议

  1. 添加骨架屏
  2. 优化加载动画
  3. 添加下拉刷新
  4. 缓存优化
  5. 错误重试机制

📞 技术支持

如需帮助,请参考: