★ FEATURED ARTICLE 简介这是一套面向微信小程序初学者与婚礼策划爱好者的完整婚礼小程序源码基于JavaScript、WXML与WXSS技术栈开发可帮助零基础开发者快速搭建包含电子喜帖、祝福墙、直播入口、地图导航等模块的线上婚礼平台。资源包共43个文件涵盖7个js逻辑脚本、5个wxml页面结构、5个wxss样式表、7个json配置文件以及12个png、4个jpg、1个gif图片素材和2个mp4视频文件压缩包约5.69MB目录中已按pages、images、utils等模块划分结构清晰便于二次修改。目前已有4852人学习下载适合想练手完整小程序项目或需要低成本婚礼方案的用户参考可直接获取页面布局、数据交互与音视频集成的实现思路。1. 婚礼邀请函小程序从请柬到互动的一站式实现去年帮朋友做婚礼请柬他提了两个硬需求一是宾客打开就能看不用装 App二是现场大屏要能同步互动不能冷场。当时试了几个方案最后用微信小程序落地从电子请柬、婚礼流程到现场抽奖、弹幕祝福全塞进了一个包体不到 2MB 的项目里。这份源码就是那次的完整工程适合正在筹备婚礼、想自己动手做请柬的开发者也适合拿它当小程序全栈练手项目——页面路由、云开发数据库、订阅消息、Canvas 绘制、实时数据推送这些常见能力在这个场景里全都能跑一遍。下面按「能干什么 → 怎么跑起来 → 怎么改」的顺序拆开讲。2. 项目架构与目录结构一个婚礼小程序的完整骨架2.1 技术选型与整体分层这个项目用的是微信小程序原生框架加云开发没有引入第三方 UI 库好处是包体小、审核快坏处是样式要自己写。整体分三层视图层是pages下的各个页面逻辑层是utils里的公共方法数据层走云开发数据库和云函数。选云开发而不是自建后端核心原因是婚礼项目并发不高但要求稳定云函数按量计费婚礼当天几百人同时访问也不会崩成本几乎可以忽略。页面路由用app.json统一管理底部 tabBar 只保留「请柬」「流程」「互动」三个入口避免宾客迷路。数据流上请柬页和流程页读的是同一份婚礼配置存在云数据库的wedding_config集合里改一处全站生效。互动页的弹幕和抽奖走云函数加数据库监听保证现场大屏和手机端数据一致。2.2 目录结构逐层说明wedding-miniprogram/ ├── app.js # 全局逻辑初始化云开发环境 ├── app.json # 页面路由、tabBar、窗口配置 ├── app.wxss # 全局样式婚礼主题色变量 ├── pages/ │ ├── invite/ # 电子请柬页含倒计时和地图导航 │ ├── schedule/ # 婚礼流程页时间轴展示 │ ├── interact/ # 互动页弹幕、祝福墙、抽奖入口 │ ├── lottery/ # 抽奖页Canvas 转盘 │ └── photo/ # 照片墙宾客上传合影 ├── components/ │ ├── countdown/ # 倒计时组件 │ └── message-card/ # 祝福卡片组件 ├── cloudfunctions/ │ ├── sendMessage/ # 发送弹幕/祝福 │ ├── drawLottery/ # 抽奖逻辑保证公平 │ └── getConfig/ # 读取婚礼配置 ├── utils/ │ ├── format.js # 时间、日期格式化 │ └── request.js # 云函数调用封装 └── images/ # 静态资源背景图、图标这个结构里最值得说的是cloudfunctions目录。抽奖逻辑放在云函数而不是前端是为了防止有人改前端代码作弊。云函数里用数据库事务保证同一奖品不会被重复抽中这个后面会细讲。components目录下的两个组件是复用的请柬页和流程页都会用到倒计时抽出来避免重复代码。2.3 云开发环境初始化app.js里只做一件事初始化云开发环境。代码如下// app.js App({ onLaunch() { // 初始化云开发环境env 参数填自己的环境 ID wx.cloud.init({ env: wedding-xxxxx, // 替换成你的云开发环境 ID traceUser: true // 记录用户访问方便看数据 }) // 全局存储婚礼配置避免每个页面重复请求 this.globalData { config: null, openid: null } } })env参数是云开发环境的唯一标识在微信开发者工具里开通云开发后会自动生成。traceUser设为true后云开发控制台能看到用户访问记录婚礼当天可以实时看有多少人在线。globalData里缓存配置是为了减少云函数调用次数毕竟云函数有冷启动能省一次是一次。3. 核心功能实现请柬、流程、互动三个模块怎么跑起来3.1 电子请柬页倒计时与地图导航请柬页是宾客打开的第一个页面核心就两件事告诉宾客婚礼什么时候开始、在哪里办。倒计时用setInterval每秒刷新地图导航调wx.openLocation。关键代码如下// pages/invite/invite.js Page({ data: { countdown: { days: 0, hours: 0, minutes: 0, seconds: 0 }, weddingInfo: {} }, onLoad() { this.loadConfig() this.startCountdown() }, // 从云函数读取婚礼配置 async loadConfig() { const { result } await wx.cloud.callFunction({ name: getConfig }) this.setData({ weddingInfo: result.data }) }, // 倒计时逻辑每秒更新一次 startCountdown() { const target new Date(this.data.weddingInfo.date).getTime() this.timer setInterval(() { const now Date.now() const diff target - now if (diff 0) { clearInterval(this.timer) return } this.setData({ countdown: { days: Math.floor(diff / 86400000), hours: Math.floor((diff % 86400000) / 3600000), minutes: Math.floor((diff % 3600000) / 60000), seconds: Math.floor((diff % 60000) / 1000) } }) }, 1000) }, // 打开地图导航 openMap() { const { latitude, longitude, venue } this.data.weddingInfo wx.openLocation({ latitude, longitude, name: venue, scale: 18 }) }, onUnload() { // 页面卸载时清除定时器防止内存泄漏 clearInterval(this.timer) } })startCountdown里用setInterval每秒算一次差值拆成天、时、分、秒。注意onUnload里必须clearInterval否则页面切走后定时器还在跑这是小程序开发里最常见的翻车点之一。openMap直接调微信内置地图不需要额外权限宾客点一下就能导航到酒店。3.2 婚礼流程页时间轴与数据驱动流程页展示从接亲到晚宴的完整时间轴数据同样来自云数据库。页面用wx:for渲染时间轴节点每个节点包含时间、事项、负责人。关键实现如下// pages/schedule/schedule.js Page({ data: { scheduleList: [] }, onLoad() { this.loadSchedule() }, async loadSchedule() { const db wx.cloud.database() // 按时间字段升序读取流程数据 const { data } await db.collection(wedding_schedule) .orderBy(time, asc) .get() this.setData({ scheduleList: data }) }, // 点击节点展开详情 toggleDetail(e) { const index e.currentTarget.dataset.index const key scheduleList[${index}].expanded this.setData({ [key]: !this.data.scheduleList[index].expanded }) } })orderBy(time, asc)保证流程按时间顺序排列不用前端再排序。toggleDetail里用模板字符串动态设置setData的 key这是小程序里展开/收起列表的常用写法比重新赋值整个数组性能好。流程数据存在wedding_schedule集合里每条记录包含time、title、desc、owner四个字段改流程只需要在云开发控制台改数据不用重新发版。3.3 互动模块弹幕祝福与抽奖的云函数实现互动页是现场大屏用的宾客扫码后发祝福大屏实时滚动。发送祝福走云函数sendMessage写入数据库后大屏端用watch监听变化。抽奖走drawLottery云函数用事务保证公平。先看发送祝福// cloudfunctions/sendMessage/index.js const cloud require(wx-server-sdk) cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) const db cloud.database() exports.main async (event) { const { content, nickName } event // 内容长度校验防止刷屏 if (!content || content.length 50) { return { code: 400, msg: 内容不合法 } } const { OPENID } cloud.getWXContext() // 写入祝福集合带上用户 openid 和时间戳 await db.collection(wedding_messages).add({ data: { content, nickName: nickName || 匿名宾客, openid: OPENID, createTime: db.serverDate() } }) return { code: 0, msg: 发送成功 } }cloud.getWXContext()拿到调用者的openid用来做频率限制和身份识别。db.serverDate()用服务端时间避免客户端时间不准导致排序错乱。内容长度限制 50 字防止有人发长文刷屏。大屏端监听数据库变化// 大屏端监听新祝福 const db wx.cloud.database() db.collection(wedding_messages) .orderBy(createTime, desc) .limit(20) .watch({ onChange: (snapshot) { // snapshot.docs 是最新的 20 条祝福 this.setData({ messages: snapshot.docs }) }, onError: (err) { console.error(监听失败, err) } })watch是云开发提供的实时监听能力数据库有新记录时会自动推送到大屏端不需要轮询。limit(20)控制只显示最近 20 条避免数据量大了之后渲染卡顿。抽奖云函数用事务保证公平// cloudfunctions/drawLottery/index.js const cloud require(wx-server-sdk) cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) const db cloud.database() exports.main async (event) { const { OPENID } cloud.getWXContext() // 检查是否已经抽过奖 const record await db.collection(lottery_records) .where({ openid: OPENID }) .get() if (record.data.length 0) { return { code: 400, msg: 您已经抽过奖了 } } // 事务扣减奖品库存并记录中奖信息 return await db.runTransaction(async transaction { const prize await transaction.collection(prizes) .where({ stock: db.command.gt(0) }) .limit(1) .get() if (prize.data.length 0) { return { code: 400, msg: 奖品已抽完 } } const prizeId prize.data[0]._id await transaction.collection(prizes) .doc(prizeId) .update({ data: { stock: db.command.inc(-1) } }) await transaction.collection(lottery_records).add({ data: { openid: OPENID, prizeId, createTime: db.serverDate() } }) return { code: 0, prize: prize.data[0] } }) }runTransaction保证扣库存和写记录要么都成功要么都失败不会出现库存扣了但没记录的情况。db.command.gt(0)筛选还有库存的奖品inc(-1)原子递减。先查lottery_records防止重复抽奖这个检查放在事务外是为了减少事务冲突实际项目里如果并发高可以挪到事务内。4. 本地运行与云开发配置从零跑通这份源码4.1 环境准备与项目导入跑这个项目需要三样东西微信开发者工具、一个已注册的小程序 AppID、开通云开发。没有 AppID 的话可以用测试号但测试号不支持云开发所以还是建议注册一个个人小程序流程很快。下载源码后解压用微信开发者工具「导入项目」选择解压后的目录填入 AppID。导入后工具会提示找不到cloudfunctions目录这是因为云函数目录需要单独指定。在project.config.json里加上cloudfunctionRoot字段{ miniprogramRoot: ./, cloudfunctionRoot: cloudfunctions/, setting: { urlCheck: false, es6: true, enhance: true } }cloudfunctionRoot告诉工具哪个目录是云函数配好后cloudfunctions目录图标会变成云朵形状。urlCheck设为false是因为开发阶段不需要校验合法域名上线前记得改回true。4.2 云开发环境开通与数据库集合创建点开发者工具左上角「云开发」按钮按提示开通。开通后会得到一个环境 ID把它填到app.js的wx.cloud.init里。然后创建四个数据库集合集合名用途关键字段wedding_config婚礼配置date, venue, latitude, longitudewedding_schedule流程安排time, title, desc, ownerwedding_messages祝福弹幕content, nickName, openid, createTimeprizes奖品库存name, stock, imagelottery_records中奖记录openid, prizeId, createTime创建集合后要改权限wedding_config和wedding_schedule设为「所有用户可读仅创建者可写」这样宾客能读但不能改。wedding_messages和lottery_records设为「仅创建者可读写」写入走云函数前端不直接操作数据库。prizes设为「所有用户可读」但库存更新走云函数。4.3 云函数部署与联调在开发者工具里右键cloudfunctions下的每个云函数目录选择「上传并部署云端安装依赖」。部署完成后在云开发控制台的「云函数」列表里能看到三个函数。联调时先在wedding_config集合里手动插入一条测试数据{ date: 2025-10-01T12:00:00, venue: 某酒店宴会厅, latitude: 39.9042, longitude: 116.4074 }然后编译小程序请柬页应该能显示倒计时和地图入口。如果倒计时不动检查weddingInfo.date是否取到值如果地图打不开检查经纬度是否填反了。互动页需要两台设备测试一台发祝福另一台开大屏模式看是否实时更新。5. 避坑与常见问题婚礼当天不能翻车的几个点5.1 云函数冷启动导致首屏慢现象宾客第一次打开请柬页倒计时和婚礼信息要等两三秒才出来。原因是云函数有冷启动第一次调用需要初始化运行环境。解决办法是在婚礼开始前半小时手动触发一次云函数预热或者把配置数据缓存到小程序本地storage下次打开先读缓存再异步更新。我一般会在onLoad里先读wx.getStorageSync(weddingConfig)有值就直接渲染同时发请求更新缓存。5.2 数据库权限配置错误导致写入失败现象宾客发祝福提示失败云函数日志显示permission denied。原因是wedding_messages集合权限设成了「仅创建者可读写」但云函数写入时用的是管理员权限理论上不受影响。真正的问题往往是集合根本没创建或者云函数里写的集合名和实际不一致。排查时先在云开发控制台确认集合存在再看云函数日志里的具体报错。常见做法是云函数里加一层 try-catch把错误信息返回给前端方便定位。5.3 抽奖并发导致库存扣成负数现象两个人同时抽奖都抽中了同一个奖品库存变成 -1。原因是没用事务两个请求同时读到库存为 1各自扣减。解决办法就是用runTransaction把读库存和扣库存放在一个事务里。如果并发量特别大还可以在云函数里加一个简单的内存锁但婚礼场景几百人并发事务足够用。注意事务里不要做网络请求否则事务会超时回滚。5.4 大屏端 watch 监听断线现象婚礼进行到一半大屏突然不更新祝福了。原因是watch连接在弱网环境下会断开且不会自动重连。解决办法是在onError回调里加一个重连逻辑延迟 3 秒后重新建立监听。另外大屏端建议用有线网络别用现场 Wi-Fi几百人连同一个路由器稳定性是玄学。我一般会准备一个手机热点作为备用大屏端支持切换网络。5.5 图片上传过大导致审核不通过现象照片墙功能上传原图小程序审核被拒提示「图片资源过大」。原因是手机拍的原图动辄 5MB 以上几十张就把包体撑爆了。解决办法是在wx.chooseImage时指定sizeType: [compressed]并且上传前用wx.compressImage再压一次。云存储里存压缩后的图展示时用云存储的缩略图能力URL 后面加?imageView2/2/w/400就能拿到小图。6. 二次开发与改造思路把婚礼模板变成通用活动工具这份源码虽然是为婚礼写的但骨架是通用的「活动邀请 流程展示 现场互动」三段式。改造成生日宴、年会、发布会只需要换数据结构和文案。具体来说wedding_config集合加一个type字段区分活动类型前端根据type渲染不同的主题色和文案。主题色我一般抽成app.wxss里的 CSS 变量改一处全站生效。抽奖模块可以扩展成多轮抽奖在prizes集合里加一个round字段云函数按轮次筛选。弹幕模块可以加敏感词过滤在sendMessage云函数里引入一个词库命中就拒绝。照片墙可以加审核用云开发的「内容安全」能力自动检测违规图片这个接口是免费的调用一次几毫秒。验证改造是否成功我习惯用「三设备法」一台手机发祝福一台手机抽奖一台电脑开大屏监听。三个端数据一致才算通过。另外每次改完云函数记得重新上传部署光保存文件是不生效的这个坑我踩过不止一次。从那以后我每次上线前都强制走一遍「清缓存 → 重新编译 → 三设备联调 → 检查云函数日志」的流程宁可多花十分钟也不想到现场发现弹幕不动。希望这份拆解能帮你顺利跑起来改出自己想要的效果。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
