一、项目概述

本微信闯关答题H5为齐鲁制药集团产品知识竞赛定制，以“星耀齐鲁·用科技表达我们的爱”为主题，采用齐鲁五色文化闯关形式，设置中国红、齐鲁蓝、健康绿、奋斗金、大爱橙五关，用于员工产品知识学习与竞赛，促进知识传播与团队互动 。

二、搭建流程

（一）需求分析与规划

1. 功能梳理：明确闯关答题核心逻辑，包括五关层级推进、每关10题（单选5、多选2、判断3 ）、80分闯关成功、每日每关3次答题机会、成绩与时间计入榜单等规则；确定界面需展示关卡引导、答题计时、进度反馈、结果提示，及单位排行、个人通关记录查询等功能。

2. 受众与场景：面向齐鲁制药内部员工，活动时间2025年7月21日 - 7月25日，用于线上知识竞赛，需适配手机端微信访问，保障流畅体验。

（二）技术选型

1. 前端：采用Vue.js框架，结合HTML5、CSS3开发界面，适配微信浏览器环境。利用Vue的组件化特性，封装关卡、题目、排行榜等组件，便于维护与扩展；借助微信JS - SDK实现分享、授权等功能，增强社交互动性 。

2. 后端：基于Node.js + Express构建服务端，MongoDB存储用户信息（姓名、公司、工号等 ）、题目数据（题型、内容、答案 ）、答题记录（关卡、分数、用时、开始时间 ）；通过Redis做缓存，存储用户答题次数、实时排行等高频访问数据，提升响应速度 。

3. 部署与运维：选用云服务器（如阿里云ECS ），搭配Nginx实现负载均衡，Docker容器化部署应用，保障环境一致性与可扩展性；借助监控工具（如Prometheus + Grafana ），实时监测服务器性能、应用状态，及时处理异常 。

（三）界面设计与开发

1. 视觉风格：以蓝色为主色调，融入齐鲁制药品牌元素（如企业标识、建筑轮廓 ）、医药行业符号（药瓶、医疗图标 ），契合“用科技表达爱”主题，营造专业、科技感氛围；关卡按钮采用五色文化对应色彩（中国红、齐鲁蓝等 ），强化视觉识别与主题关联 。

2. 交互设计：答题页设置倒计时组件，实时显示剩余时间，超时自动提交；题目选项点击反馈清晰，多选支持批量选择、取消；闯关结果页直观展示得分、对错题数，引导进入下一关或查看记录；排行榜页区分单位排行与个人最佳排行，数据实时刷新，激发竞争积极性 。

3. 响应式适配：通过媒体查询、弹性布局（Flex ）、视口单位（vw/vh ），确保界面在不同手机设备（iOS、Android ）、屏幕尺寸下适配，按钮可点击区域合理，文字清晰可读 。

（四）闯关逻辑与业务功能开发

1. 关卡与答题流程：用户进入H5首页，点击“开始闯关”按顺序解锁关卡（中国红→齐鲁蓝→健康绿→奋斗金→大爱橙 ）；每关答题时，服务端随机抽取10道题（按题型比例 ），前端渲染展示；答题过程记录用户选择，提交后服务端判分，≥80分标记闯关成功，允许进入下一关，否则消耗当日该关答题次数（每日每关3次 ） 。

2. 数据记录与榜单计算：答题结束后，服务端记录用户姓名、公司、工号、关卡名称、分数、用时、开始时间；榜单计算取用户每关当日最佳成绩与时间累计，按综合成绩（分数、用时加权 ）排序，筛选前20%参与奖励评定；单位排行统计参与人数、通关率（成功次数/总答题次数 ）、通关平均分，通过聚合查询MongoDB数据生成 。

3. 异常处理与规则约束：中途退出答题，服务端标记该次机会消耗，更新答题次数；答题次数校验通过Redis缓存实现，保障并发场景下数据一致性；题目答案、判分逻辑封装为服务端接口，避免前端篡改，确保竞赛公平性 。

（五）测试与优化

1. 功能测试：覆盖答题流程（正常答题、中途退出、次数消耗 ）、闯关逻辑（分数判定、关卡推进 ）、数据记录（答题记录、榜单生成 ）、界面交互（按钮点击、倒计时、结果展示 ）等场景，通过黑盒测试、边界测试（如80分临界、次数用尽 ），发现并修复功能漏洞 。

2. 性能测试：利用JMeter模拟高并发场景（如活动高峰期，多用户同时答题、查询排行 ），测试系统响应时间、吞吐量；优化Nginx负载均衡策略（如加权轮询 ），调整Redis缓存key过期时间，保障高并发下系统稳定，响应时间控制在合理范围（答题提交≤1s，榜单查询≤2s ） 。

3. 兼容性测试：在主流手机机型（iPhone、华为、小米等 ）、微信版本下，测试界面显示、功能交互，修复样式错乱、功能异常问题，确保全端体验一致 。

（六）上线与运营支持

1. 部署上线：将前端静态资源上传CDN加速分发，服务端通过Docker-compose部署至云服务器，配置Nginx反向代理、SSL证书（保障HTTPS访问 ）；完成域名解析、环境变量配置，全链路测试无误后，正式上线开放访问 。

2. 运营监控：活动期间，利用日志系统（如Winston ）记录用户操作、系统异常；通过监控平台实时查看服务器CPU、内存、网络带宽使用情况，答题接口调用量、成功率；针对突发高并发，动态调整服务器资源（如弹性扩容ECS实例 ），保障服务不中断 。

3. 数据复盘：活动结束后，导出MongoDB中答题记录、榜单数据，分析参与率、各关卡正确率、单位/个人成绩分布；结合业务目标，评估活动效果，为后续知识竞赛、H5活动优化提供数据支撑 。

三、关键技术点实现

（一）负载均衡与并发处理

1. Nginx负载均衡：配置多个后端服务节点，采用加权轮询算法，根据服务器性能分配请求；设置缓存策略，对静态资源（如答题界面CSS、JS ）缓存，减少后端压力；通过动静分离，将静态资源请求导向CDN，动态请求转发至Node.js服务，提升并发处理能力，保障万人同时在线答题场景下系统稳定 。

2. Redis缓存应用：存储用户答题次数（以用户ID + 关卡为key ）、实时排行数据，利用Redis的原子操作（如INCR、DECR ）实现次数校验与更新，降低数据库压力；设置合理缓存过期时间（如每日答题次数缓存24小时 ），保证数据时效性，支撑高并发下快速响应 。

（二）闯关逻辑规则落地

1. 答题次数与进度控制：服务端维护用户答题次数缓存，每次答题前校验剩余次数，答题后更新；关卡解锁逻辑通过用户闯关状态（成功/失败 ）判断，仅成功闯过前一关，才允许进入下一关，保障流程合规；利用MongoDB的事务特性（或乐观锁 ），处理并发答题场景下的数据冲突，确保次数、成绩记录准确 。

2. 判分与成绩计算：服务端接收答题数据后，遍历题目对比答案，按题型设置分值（单选、判断10分/题，多选20分/题 ），计算总分；判定是否≥80分，更新闯关状态；最佳成绩取同一用户当日同关卡最高得分及对应用时，通过聚合查询 + 排序实现，保障榜单数据精准 。

（三）界面设计与用户体验优化

1. 交互反馈与引导：答题过程中，选项点击实时高亮、音效反馈；倒计时到期前弹窗提醒；闯关成功/失败页明确提示结果、可操作按钮（下一关、查看记录 ）；通过渐进式引导（如首次闯关提示规则 ），降低用户学习成本，提升参与感 。

2. 性能优化：对界面图片进行压缩、懒加载处理，减少首屏加载时间；采用Vue的异步组件、代码分割，优化前端包体积；服务端接口进行分页、缓存处理，避免一次性加载大量数据（如排行榜分批渲染 ），保障页面流畅交互，提升用户答题体验 。

通过以上搭建流程与技术实现，构建稳定、易用、契合业务需求的微信闯关答题H5，助力齐鲁制药知识竞赛活动高效开展，实现知识传播与员工互动目标 。