H5年会抽奖系统实战：从零搭建手机号+微信头像双模式抽奖（附完整源码）
H5年会抽奖系统实战：从零搭建手机号+微信头像双模式抽奖（附完整源码）
每到年底，企业年会就成了行政和HR部门的头等大事。如何在有限的预算内，打造一场让员工记忆深刻的年会？抽奖环节往往是整场活动的最高潮。传统的纸质抽奖券早已过时，而简单的随机点名又缺乏仪式感。本文将带你从零开始，打造一个支持手机号验证和微信头像展示的双模式H5抽奖系统，既保证了抽奖的公平性，又增强了互动体验。
这套系统特别适合500人以上的中大型企业年会，通过绑定员工手机号确保只有内部人员参与，同时利用微信头像让中奖结果展示更加生动。我们将从系统设计、核心功能实现到实际部署，一步步拆解整个开发过程。
1. 系统设计与技术选型
在开始编码前，我们需要明确系统的核心需求和架构设计。一个好的年会抽奖系统应该具备以下特点：
- 高并发支持：年会现场可能有数百人同时访问
- 简单易用：后台管理界面要足够直观，非技术人员也能操作
- 稳定可靠：抽奖过程不能出现卡顿或数据错误
- 视觉效果：动画要流畅，营造紧张刺激的氛围
基于这些需求，我们选择以下技术栈：
| 技术分类 | 选型方案 | 优势说明 |
|---|---|---|
| 前端框架 | Vue 3 + Vant | 组件丰富，开发效率高 |
| 后端服务 | Node.js + Express | 轻量高效，适合快速开发 |
| 数据库 | MongoDB | 文档型数据库，灵活存储用户数据 |
| 部署方案 | Docker + Nginx | 一键部署，方便扩展 |
// 示例：项目初始化 npm init vite@latest lottery-system --template vue cd lottery-system npm install vant axios express mongoose2. 双模式抽奖核心实现
2.1 手机号验证模式
手机号模式的核心在于验证参与者身份。我们需要实现：
- 员工预先登记手机号
- 抽奖时输入手机号获取验证码
- 验证通过后进入抽奖池
// 手机号验证接口示例 router.post('/verify-phone', async (req, res) => { const { phone, code } = req.body; const user = await User.findOne({ phone }); if(!user) { return res.status(404).json({ error: '未登记的手机号' }); } if(code !== '123456') { // 实际应接入短信服务 return res.status(400).json({ error: '验证码错误' }); } user.verified = true; await user.save(); res.json({ success: true }); });2.2 微信头像模式
微信模式能带来更好的视觉体验，实现要点：
- 接入微信网页授权获取用户头像
- 头像缓存到本地避免重复加载
- 中奖时展示头像墙效果
<!-- 微信头像抽奖界面示例 --> <div class="avatar-wall"> <div v-for="(user, index) in userList" :key="index" class="avatar-item" > <img :src="user.avatar" alt="用户头像"> <span class="user-name">{{ user.name }}</span> </div> </div>3. 后台管理系统开发
一个易用的后台是年会顺利进行的保障，主要功能包括：
- 用户数据导入：支持Excel批量导入员工信息
- 奖项设置：灵活配置多个奖项及中奖人数
- 实时监控：查看当前参与人数和中奖情况
- 数据导出：活动结束后导出完整中奖记录
// 奖项配置数据结构示例 const prizeSettings = { prizes: [ { name: '一等奖', count: 1, color: '#FF0000', animation: 'flash' // 自定义动画效果 }, { name: '二等奖', count: 3, color: '#FF9900' } ], rules: { allowRepeat: false, // 是否允许重复中奖 autoSave: true // 是否自动保存结果 } };4. 动画效果与性能优化
抽奖环节的动画效果直接影响现场气氛，我们需要注意：
- 流畅性：使用CSS3动画而非JavaScript实现
- 节奏感：速度由快到慢，制造悬念
- 兼容性：适配不同手机型号和浏览器
/* 抽奖动画关键帧 */ @keyframes lotteryRolling { 0% { transform: translateY(0); } 100% { transform: translateY(-1000px); } } .lottery-item { transition: transform 0.1s ease-out; will-change: transform; /* 提升性能 */ } .winner-animation { animation: pulse 1s infinite alternate; } @keyframes pulse { from { box-shadow: 0 0 5px #fff; } to { box-shadow: 0 0 20px #FFD700; } }5. 实际部署与现场应急
年会现场网络环境复杂，必须做好充分准备：
服务器准备：
- 使用企业内网服务器减少外网依赖
- 准备备用热点应对网络故障
压力测试：
# 使用ab工具进行压力测试 ab -n 1000 -c 100 http://your-server/api/check-status应急预案：
- 提前导出参与人员名单
- 准备离线抽奖模式
- 安排专人负责技术保障
提示：活动前务必进行全流程彩排，测试从用户参与到结果公布的每个环节
6. 完整源码结构说明
项目采用模块化设计，主要目录结构如下：
/lottery-system ├── /client # 前端代码 │ ├── /src │ │ ├── /assets # 静态资源 │ │ ├── /components # 公共组件 │ │ ├── /views # 页面组件 │ │ └── main.js # 入口文件 ├── /server # 后端代码 │ ├── /models # 数据模型 │ ├── /routes # 路由配置 │ └── app.js # 服务入口 ├── /docs # 文档 └── docker-compose.yml # 容器配置关键配置项说明：
config.js- 系统参数配置.env- 环境变量（包含敏感信息，需加入.gitignore）package.json- 定义项目脚本和依赖
在开发过程中，我们遇到了几个典型问题：微信授权域名限制、高并发下的数据库性能瓶颈、不同手机浏览器的兼容性问题。通过引入Redis缓存、优化数据库查询、使用Babel转译ES6语法等方法，最终都得到了妥善解决。