miniprogram-lineforfun/client

LineFunQueue 微信小程序客户端

项目简介

LineFunQueue是一款面向排队场景的微信小程序，提供多种互动小游戏，帮助用户在排队等待过程中消遣时间、增进社交互动。

产品采用"轻交互、重线下沟通"理念，鼓励用户在现实场景中进行面对面互动。主要游戏包括"海龟汤"等解谜类游戏，由主持人引导玩家参与。

技术架构

• 前端框架：Taro 4.x + React + TypeScript
• 构建工具：Vite
• CSS预处理器：Sass
• 状态管理：React Hooks
• 接口请求：Taro.request
• 云开发：微信云开发、云函数

目录结构

client/
├── config/              # 项目配置文件
├── src/                 # 源代码
│   ├── app.config.ts    # 应用配置
│   ├── app.scss         # 全局样式
│   ├── app.ts           # 应用入口
│   ├── index.html       # HTML模板
│   ├── assets/          # 静态资源
│   ├── components/      # 通用组件
│   │   ├── base/        # 基础组件
│   │   ├── game/        # 游戏相关组件
│   │   └── room/        # 房间相关组件
│   ├── constants/       # 常量定义
│   ├── hooks/           # 自定义Hooks
│   ├── interfaces/      # 类型定义
│   ├── pages/           # 页面
│   │   ├── game-plaza/  # 游戏广场
│   │   ├── login/       # 登录页
│   │   ├── game-detail/ # 游戏详情页
│   │   ├── room/        # 房间页面
│   │   │   ├── create/  # 创建房间
│   │   │   └── join/    # 加入房间
│   │   ├── games/       # 游戏页面
│   │   │   └── turtle-soup/ # 海龟汤游戏
│   │   │       ├── host/   # 主持人视图
│   │   │       └── player/ # 玩家视图
│   │   └── profile/     # 个人中心
│   ├── services/        # 服务
│   │   ├── api.ts       # API接口
│   │   ├── cloud.ts     # 云开发服务
│   │   └── game.ts      # 游戏服务
│   ├── store/           # 状态管理
│   ├── styles/          # 样式文件
│   └── utils/           # 工具函数
└── package.json         # 依赖配置

主要功能

1. 游戏广场：浏览可玩游戏列表，支持分类和搜索
2. 创建房间：主持人创建游戏房间，设置游戏参数
3. 加入房间：玩家通过房间码加入游戏
4. 等待房间：展示房间信息和已加入玩家，设置游戏配置
5. 游戏进行：主持人和玩家各自有不同的游戏界面和交互方式
6. 游戏历史：查看历史游戏记录
7. 个人中心：用户信息管理

关键组件

1. GameCard：游戏卡片组件，用于展示游戏缩略信息
2. Button：自定义按钮组件，支持多种样式和状态
3. RoomCodeInput：房间码输入组件，提供直观的输入体验
4. PlayerAvatar：玩家头像组件，展示玩家状态和角色

页面说明

游戏广场

• 功能：展示全部游戏，支持分类筛选和搜索
• 技术要点：使用ScrollView实现横向分类Tab和纵向游戏列表，下拉刷新

游戏详情

• 功能：展示游戏详细信息，包括规则、所需人数、预计时长等
• 技术要点：支持创建房间和分享

创建房间

• 功能：主持人创建游戏房间，设置游戏参数
• 技术要点：表单验证，主题和难度选择

加入房间

• 功能：玩家通过房间码加入游戏
• 技术要点：自定义房间码输入组件，扫码加入

等待房间

• 功能：展示已加入玩家，进行游戏准备
• 技术要点：房间信息实时更新，准备状态同步

游戏页面

• 功能：根据不同游戏类型和角色提供不同的游戏体验
• 技术要点：主持人和玩家视图分离，游戏状态管理

开发指南

环境准备

1. Node.js v16+
2. pnpm 8+
3. 微信开发者工具

安装依赖

pnpm install

开发模式

# 微信小程序
pnpm dev:weapp

生产构建

pnpm build:weapp

开发新组件

1. 在 src/components 目录下创建组件文件夹
2. 创建 index.tsx 和 index.scss 文件
3. 导出组件并在需要的地方引用

开发新页面

1. 在 src/pages 目录下创建页面文件夹
2. 创建 index.tsx、index.scss 和 index.config.ts 文件
3. 在 app.config.ts 中添加页面路径

注意事项

1. API接口地址需要在开发环境和生产环境分别配置
2. 云开发环境ID需要替换为实际项目的环境ID
3. 微信开发者工具中需要开启ES6转ES5、增强编译等功能
4. 测试时建议使用体验版或真机调试