简介这是一套面向微信小程序初学者与前端开发者的在线活动报名系统源码基于微信小程序平台实现可帮助读者快速理解并搭建一套完整的线上报名流程。系统覆盖活动展示与分类、报名信息填写、微信支付、报名状态追踪、消息推送以及后台活动与用户管理等功能并借助微信开放接口完成授权、支付与通知的生态融合。资源包共74个文件以38个png图片、13个js脚本、11个wxss样式、10个wxml页面和2个json配置为主压缩包约81KB目录按页面组件、工具函数、数据模型与接口服务等模块划分结构清晰便于二次定制。目前已有899人学习下载。读者可从中获得完整的小程序项目骨架、页面与样式组织方式、报名与支付逻辑的实现思路以及WXML、WXSS与JavaScript配合开发的实践参考适合作为课程设计或练手项目的起步模板。1. 从一张报名表到一套系统在线活动报名到底在解决什么做过线下活动的人都有体会报名这件事人少的时候一张表格就够了人一多就全乱套。名额超了没人拦、重复提交分不清、签到表和报名表对不上、活动结束想导出名单还得手动复制粘贴。微信小程序-在线活动报名系统要解决的就是把「填表—审核—通知—签到—统计」这条链路收进一个入口让参与者点几下就完成让组织者在后台一眼看清全局。它适合谁一是经常办沙龙、培训、社群活动的运营同学二是需要给内部活动做报名登记的行政或技术同学三是想练手一个完整小程序全栈项目的开发者。核心诉求其实就三件事名额不能超、数据不能乱、通知不能漏。下面按「先想清楚数据怎么设计再动手把前后端跑通最后把坑填上」的顺序讲能照着复现。2. 先把数据模型定下来报名系统最容易返工的地方很多人一上来就写页面结果做到一半发现「一个用户能不能报多个场次」「取消后名额要不要放回去」这些没想清楚只能推倒重来。数据模型是这套系统的地基地基歪了后面全是补丁。2.1 四张核心表与字段设计一个够用的报名系统最少需要四张表活动表、报名表、用户表、签到表。用户表通常直接用微信的 openid 做唯一标识不用自己维护账号体系。下面是我一般会用的结构字段名按常见习惯来你可以按自己后端框架调整。-- 活动表一场活动一条记录 CREATE TABLE activity ( id BIGINT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(100) NOT NULL, -- 活动标题 cover VARCHAR(255) DEFAULT , -- 封面图地址 start_time DATETIME NOT NULL, -- 活动开始时间 end_time DATETIME NOT NULL, -- 活动结束时间 sign_deadline DATETIME NOT NULL, -- 报名截止时间 quota INT NOT NULL DEFAULT 0,-- 总名额0 表示不限 joined INT NOT NULL DEFAULT 0,-- 已报名人数冗余字段 status TINYINT NOT NULL DEFAULT 1 -- 1上架 0下架 ); -- 报名表一个用户对一场活动最多一条有效记录 CREATE TABLE enrollment ( id BIGINT PRIMARY KEY AUTO_INCREMENT, activity_id BIGINT NOT NULL, openid VARCHAR(64) NOT NULL, name VARCHAR(50) NOT NULL, phone VARCHAR(20) NOT NULL, extra JSON DEFAULT NULL, -- 自定义表单字段 state TINYINT NOT NULL DEFAULT 1, -- 1已报名 2已取消 3已签到 created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY uk_act_openid (activity_id, openid) );活动表里的joined是个冗余计数字段专门用来做名额判断避免每次都去 count 报名表。报名表的uk_act_openid唯一索引是关键它从数据库层面挡住了同一个人重复报名比在代码里查一遍再插入可靠得多。extra用 JSON 存自定义字段是因为不同活动的报名表单往往不一样硬编码成列以后加字段就得改表。2.2 名额扣减为什么必须放在事务里名额判断和扣减如果分成两步写高并发下一定出事。两个请求同时读到「还剩 1 个名额」然后都去插入报名记录结果就是超卖。正确做法是把「判断名额 扣减 插入报名」放进一个事务并且用带条件的更新语句来兜底。START TRANSACTION; -- 条件更新只有 joined quota 时才会真正扣减 UPDATE activity SET joined joined 1 WHERE id ? AND (quota 0 OR joined quota); -- 检查上一步是否真的影响了一行没影响说明名额已满 -- 应用层判断 affectedRows 1 才继续否则 ROLLBACK INSERT INTO enrollment (activity_id, openid, name, phone) VALUES (?, ?, ?, ?); COMMIT;这里quota 0表示不限名额所以条件写成quota 0 OR joined quota。应用层拿到affectedRows后判断等于 1 说明抢到名额继续插入报名记录等于 0 说明名额已满直接回滚并返回「名额已满」。这套写法把并发控制交给了数据库的行锁比在应用层加锁简单也不容易出错。2.3 取消报名后名额怎么放回去取消报名不是把记录删掉而是把state改成 2同时把活动的joined减 1。这里有个容易忽略的点减 1 的时候要防止减成负数所以条件里加joined 0。另外如果活动已经截止报名或已开始就不该允许取消这个判断放在业务层做。START TRANSACTION; UPDATE enrollment SET state 2 WHERE activity_id ? AND openid ? AND state 1; -- 只有确实改动了报名状态才回退名额 UPDATE activity SET joined joined - 1 WHERE id ? AND joined 0; COMMIT;两条更新都放在事务里保证「报名状态」和「名额计数」要么一起成功要么一起失败。如果只改了一个数据就对不上了后面统计会很难查。3. 小程序端怎么把报名流程跑通数据模型定好之后前端就轻松了。小程序端要做的事其实就三件展示活动详情、收集报名信息、提交并处理结果。难点不在页面而在提交时的状态处理和用户提示。3.1 活动详情页与报名按钮的状态机报名按钮不是简单的「能点/不能点」它至少有五种状态未开始、可报名、名额已满、已截止、已报名。这五种状态要在页面加载时根据活动数据算出来而不是等用户点了才判断。// 根据活动数据和当前用户报名状态计算按钮状态 function getButtonState(activity, myEnrollment) { const now Date.now(); const deadline new Date(activity.sign_deadline).getTime(); const start new Date(activity.start_time).getTime(); if (myEnrollment myEnrollment.state 1) { return { text: 已报名, disabled: true, action: none }; } if (now deadline || now start) { return { text: 报名已截止, disabled: true, action: none }; } if (activity.quota 0 activity.joined activity.quota) { return { text: 名额已满, disabled: true, action: none }; } return { text: 立即报名, disabled: false, action: enroll }; }这个函数把判断逻辑集中在一处页面里只负责渲染。注意判断顺序先看是否已报名再看是否截止最后看名额。顺序反了会出现「已报名但显示名额已满」这种尴尬情况。disabled控制按钮是否可点action用来区分点击后走哪个分支。3.2 提交报名的请求封装与错误处理提交报名时前端要做两件事一是防止用户连点二是把后端的业务错误翻译成人话。连点问题用一个submitting标志位就能解决错误处理则要区分「网络错误」和「业务错误」。async function submitEnrollment(activityId, formData) { if (this.submitting) return; // 防连点 this.submitting true; try { const res await wx.request({ url: ${BASE_URL}/enrollment, method: POST, data: { activityId, ...formData }, header: { content-type: application/json } }); // 后端约定 code0 为成功其余为业务错误 if (res.data.code 0) { wx.showToast({ title: 报名成功, icon: success }); return true; } // 业务错误直接展示后端返回的提示 wx.showToast({ title: res.data.msg || 报名失败, icon: none }); return false; } catch (e) { // 网络层错误提示重试 wx.showToast({ title: 网络异常请重试, icon: none }); return false; } finally { this.submitting false; // 无论成败都释放 } }submitting标志位放在finally里释放保证请求失败时也能再次点击。业务错误和网络错误分开处理是因为前者重试没用比如名额已满后者重试可能成功。后端返回的msg直接展示省得前端再维护一套错误码文案。3.3 报名成功后的通知怎么发报名成功后要通知用户常见做法是用小程序的订阅消息。这里有个坑订阅消息必须由用户主动触发授权不能后台偷偷发。所以流程是「用户点报名 → 弹出授权 → 用户同意 → 后端记录授权 → 活动前发通知」。// 报名成功后请求订阅授权 wx.requestSubscribeMessage({ tmplIds: [活动开始提醒的模板ID], success(res) { // res[模板ID] accept 表示用户同意 if (res[活动开始提醒的模板ID] accept) { // 把授权结果告诉后端后端在活动前调用发送接口 reportSubscribe(activityId); } } });模板 ID 要在小程序后台申请一次授权只能发一条所以如果活动要发多条通知得在多个触发点分别请求授权。这个限制很多人第一次做会踩以为授权一次就能一直发。4. 避坑与排查报名系统上线后最容易翻车的五个点前面讲的是正常流程但真正让人头疼的是上线后的各种意外。下面这五条是我踩过或见别人踩过的按「现象 → 原因 → 解决」写遇到问题可以对着查。4.1 名额显示还剩 1 个点进去却报「名额已满」现象是列表页显示还有名额点进详情提交却提示已满。原因是列表页的名额是缓存或延迟数据而提交时是实时判断。解决方法是列表页的名额只做展示参考详情页在提交前再拉一次最新数据或者干脆在按钮上不显示精确剩余数只显示「名额充足/紧张」。更彻底的做法是提交接口返回明确的错误码前端据此刷新页面数据。4.2 用户取消后重新报名提示「已报名」现象是用户取消报名后想重新报系统却说他已报名。原因是报名表的唯一索引uk_act_openid还在取消只是改了state记录没删。解决方法是重新报名时不要插入新记录而是把原来state2的记录更新回state1同时重新扣减名额。更新前要判断这条记录确实存在且状态是已取消。4.3 活动结束后签到发现有人没报名却来签到现象是签到名单里混进了没报名的人。原因是签到接口只校验了活动 ID没校验这个人是否真的报过名。解决方法是签到前先查报名表确认state是 1 或 3 才允许签到否则提示「未报名」。如果允许现场补报那就走补报流程先报名再签到不要绕过校验。4.4 并发提交时数据库报唯一键冲突现象是高并发下偶尔报Duplicate entry错误。原因是两个请求同时通过了「查是否已报名」的检查然后都去插入。解决方法是不要依赖应用层的查询判断直接靠唯一索引兜底捕获唯一键冲突异常后返回「请勿重复报名」。这样即使并发也能保证数据正确只是错误提示要友好。4.5 订阅消息发送失败提示「用户未订阅」现象是活动前发通知部分用户收不到。原因是用户当初没授权或者授权次数已用完。解决方法是发送前先查授权记录没授权的跳过同时在报名成功页明确告诉用户「订阅后才能收到开始提醒」提高授权率。发送失败不要重试太多次避免触发频率限制。5. 把统计和导出做扎实活动结束后的收尾技巧活动办完组织者最需要的是两样东西一份能直接用的签到名单一份能看的数据概览。这两件事看着简单做不好会让人加班到半夜。先说导出。常见做法是后端生成 CSV 文件前端用wx.downloadFile下载后转发或保存。CSV 要注意两点一是中文用 UTF-8 带 BOM否则 Excel 打开乱码二是字段里如果有逗号或换行要用双引号包起来。下面是一个生成 CSV 行的函数处理了转义。def csv_row(values): cells [] for v in values: s str(v) # 含逗号、引号、换行时用双引号包裹内部引号翻倍 if any(c in s for c in [,, , \n]): s s.replace(, ) cells.append(s) return ,.join(cells) # 写入时加 BOMExcel 才能正确识别 UTF-8 with open(enrollments.csv, w, encodingutf-8-sig, newline) as f: f.write(csv_row([姓名, 手机号, 报名时间, 签到状态]) \n) for e in enrollments: f.write(csv_row([e.name, e.phone, e.created_at, e.state]) \n)encodingutf-8-sig是关键它会在文件开头写入 BOMExcel 打开中文就不乱码了。newline是为了避免 Windows 下多出空行。转义逻辑里只要字段含逗号、引号或换行就整体加引号内部引号翻倍这是 CSV 的标准做法。再说统计。报名系统最常看的指标是报名率、签到率、取消率。报名率等于报名人数除以名额签到率等于签到人数除以报名人数取消率等于取消人数除以报名总数。这三个数在活动列表页用进度条展示组织者一眼就能看出哪场活动热度高、哪场签到差。统计不要实时算用定时任务每小时汇总一次避免每次打开页面都扫全表。最后说一个我自己的习惯每次活动结束后把报名数据和签到数据做一次对账找出「报名了没签到」和「签到了没报名」两类人。前者可以用来做后续触达后者往往是现场补报没走流程说明流程有漏洞。这个对账脚本我一般写成一次性任务跑完把结果发到工作群比事后翻记录高效得多。希望帮到你。本文还有配套的精品资源点击获取