简介这是一套面向婚礼策划者、小程序开发者及Java全栈学习者的微信小程序婚礼邀请函定制化开发源码解决新人快速搭建个性化电子请柬、统一管理宾客数据与邀请状态的核心需求。资源共911个文件涵盖307个Java后端逻辑文件支撑若依框架的数据管理与权限控制、155个HTML与143个JavaScript前端页面及交互脚本、以及专用于小程序的30个WXML结构文件和31个WXSS样式文件辅以CSS、JSON、XML等完成多端适配与数据通信整体压缩包仅13.14MB轻量易部署。已有1847人学习下载适合中高级开发者基于若依快速二次开发或教学场景中拆解小程序SpringBootRBAC权限体系的完整闭环实践。读者可直接获取含数据库脚本marryii.sql、后台管理系统ruoyi-admin、小程序前端marry-wx及详细部署说明的全链路工程支持从宾客信息录入、请柬模板配置到H5分享与数据看板的一站式落地。1. 微信小程序婚礼邀请函源码911个文件不是堆砌是真能跑通的全栈闭环去年帮朋友搭婚礼小程序原以为找个模板改改图就行结果发现市面上90%的“婚礼请柬源码”连app.json都配不全——要么缺后端接口返回空数据要么 wxss 样式表路径写死在marry-wx/pages/index/下却没同步更新project.config.json的 projectname更别说数据库初始化失败后连登录页都进不去。而这份基于若依RuoYi框架的微信小程序婚礼邀请函源码恰恰卡在“能上线”和“能交付”的临界点上它不是教学 Demo而是把「新人上传婚纱照→编辑文字动画→生成带分享追踪码的邀请页→后台实时查看已读未读→导出宾客名单」整条链路用 Java Spring Boot Vue 小程序原生三端打通了。911个文件里marryii.sql是可直接导入 MySQL 8.0 的完整建表语句ruoyi-admin提供可视化数据管理界面marry-wx目录下所有 wxml/wxss/js 文件均通过wx:for动态渲染不同主题模板中式龙凤、西式水彩、极简线条连summernote-bs3.css这种富文本编辑器样式都做了移动端适配裁剪。适合两类人一是想快速交付婚礼类小程序的外包开发者二是刚学完若依但缺真实项目练手的 Java 初学者——它不教你 Spring Security 原理但让你亲手把PreAuthorize(hasRole(admin))加到WeddingInviteController.java的删除接口上并看到权限拦截生效。2. 后端若依框架集成从 ruoyi-framework 到 marry-wx 接口联调的四步落地2.1 若依基础环境搭建为什么必须用 JDK 11 Maven 3.6.3若依官方推荐 JDK 11但很多开发者误用 JDK 17 导致ruoyi-framework模块中SecurityConfig.java的http.authorizeRequests()方法报NoSuchMethodError。根本原因是 Spring Security 5.7.x 与 JDK 17 的模块化机制冲突而本项目pom.xml中spring-security.version5.7.1/spring-security.version锁定了兼容版本。实操时需先验证 JDK 版本java -version # 必须输出类似openjdk version 11.0.20 2023-07-18 mvn -v # 必须输出Apache Maven 3.6.3提示若系统默认 JDK 是 17Windows 用户可在ruoyi-admin/pom.xml同级目录新建maven-wrapper.properties添加distributionUrlhttps://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.6.3/apache-maven-3.6.3-bin.zip强制使用嵌入式 Maven。2.2 数据库初始化marryii.sql 的三个关键字段不能删marryii.sql并非简单建表脚本它包含三处业务强依赖字段wedding_invite表中的share_code VARCHAR(16) NOT NULL COMMENT 分享追踪码用于统计打开率—— 小程序端pages/detail/detail.js通过wx.getStorageSync(shareCode)读取此值并上报guest_list表中的status TINYINT DEFAULT 0 COMMENT 0-待确认,1-已出席,2-缺席,3-代为出席—— 后台GuestListController.java的/guest/list接口按此字段分组统计template_config表中的is_default TINYINT DEFAULT 0 COMMENT 是否默认模板1为是—— 前端marry-wx/app.js初始化时调用/template/default接口获取首个is_default1的模板 ID。执行 SQL 前务必检查 MySQL 字符集SHOW VARIABLES LIKE character_set_database; -- 必须为 utf8mb4否则中文模板名会乱码 ALTER DATABASE ruoyi CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;2.3 接口联调如何让 marry-wx 正确调用 ruoyi-system 的 /invite 接口小程序端marry-wx/utils/request.js中的baseURL默认指向https://localhost:8080但实际开发需改为若依后端地址。关键修改点有两处marry-wx/project.config.json中appid必须与ruoyi-admin/src/main/resources/application.yml的wx.appid一致否则微信登录code2Session失败marry-wx/app.js的onLaunch函数内wx.request调用/invite/getById前需先获取 token// marry-wx/app.js 第 45 行附近 wx.login({ success: res { wx.request({ url: https://your-server.com/login/code2Session, data: { code: res.code }, method: POST, success: tokenRes { // 将 token 存入 storage后续所有请求 header 加入 Authorization wx.setStorageSync(token, tokenRes.data.token); } }) } })注意ruoyi-system模块的LoginController.java中code2Session接口已预置微信 AppSecret但需在application.yml中填写真实的wx.appsecret和wx.mch_id用于后续红包功能扩展。2.4 权限控制给婚礼管理员分配「邀请函管理」菜单的实操路径若依默认角色只有「系统管理员」需手动为婚礼运营人员创建新角色并授权登录ruoyi-admin后台http://localhost:8080用admin/admin123进入【系统管理】→【角色管理】→【新增】角色名称填wedding_manager权限字符填wedding:invite:*【系统管理】→【菜单管理】→ 找到邀请函管理菜单ID 为 1052勾选wedding_manager角色【系统管理】→【用户管理】→ 编辑目标用户 → 【分配角色】→ 勾选wedding_manager。此时该用户登录后marry-wx端调用/invite/list接口将自动携带Authorization: Bearer xxx若依的PreAuthorize(hasPermi(wedding:invite:list))注解会校验通过。3. 小程序前端 marwy-wx 目录解析wxml 结构、wxss 动画与 JS 数据流闭环3.1 页面结构设计为什么 index.wxml 用 而不用首页轮播图采用swiper而非scroll-view核心原因在于性能与交互逻辑差异swiper内置autoplay和interval属性可直接控制marry-wx/pages/index/index.js中data: { swiperList: [] }的数组长度避免手动监听页面滚动事件scroll-view在 iOS 上存在scroll-into-view兼容性问题而婚礼邀请函首页需精准定位到「时间地点」模块ID#locationswiper的current属性配合bindchange事件更稳定swiper-item内部嵌套cover-image而非image因cover-image支持bindload事件监听图片加载完成可触发wx.showLoading({title: 加载中... })提升首屏体验。关键代码段marry-wx/pages/index/index.wxmlswiper indicator-dots{{true}} autoplay{{true}} interval5000 duration500 current{{swiperCurrent}} bindchangeonSwiperChange block wx:for{{swiperList}} wx:keyindex swiper-item cover-image src{{item.imgUrl}} bindloadonImageLoad classswiper-img / cover-view classswiper-title{{item.title}}/cover-view /swiper-item /block /swiper逻辑说明swiperList数组由onLoad生命周期函数从getApp().globalData.inviteData获取该数据在app.js的onLaunch中已通过wx.request预加载完成避免页面白屏。3.2 动画实现原理animate.css 在小程序中的轻量化改造animate.css是 Web 端 CSS 动画库直接引入会导致小程序体积超标原版 28KB。本项目采用定制方案仅保留fadeIn,bounceIn,rotateIn三个最常用动画从animate.min.css中提取对应.animate-*类将keyframes定义移至marry-wx/app.wxss避免多文件引用动画触发逻辑不在 WXML 中写class{{aniClass}}而是在 JS 中动态添加// marry-wx/pages/detail/detail.js Page({ data: { aniClass: }, onLoad() { // 延迟 300ms 触发入场动画避免与页面切换动画冲突 setTimeout(() { this.setData({ aniClass: animate__fadeIn }); }, 300); } })参数说明animate__是 animate.css v4 的命名空间前缀marry-wx/app.wxss中已定义.animate__fadeIn { animation: fadeIn 0.8s ease both; }且keyframes fadeIn已压缩为单行。3.3 数据流闭环从 wx.request 到 setData 的完整链路小程序端数据流严格遵循「请求 → 解析 → 渲染」三步marry-wx/pages/detail/detail.js的onLoad调用getInviteDetail(id)getInviteDetail封装在marry-wx/utils/api.js中统一处理 token 注入与错误拦截// marry-wx/utils/api.js export function getInviteDetail(id) { return new Promise((resolve, reject) { wx.request({ url: ${baseUrl}/invite/getById?id${id}, method: GET, header: { Authorization: Bearer ${wx.getStorageSync(token)} }, success: res { if (res.statusCode 200 res.data.code 200) { resolve(res.data.data); // 只返回 data 字段屏蔽若依标准响应包装 } else { reject(new Error(res.data.msg || 获取详情失败)); } }, fail: reject }) }) }detail.js中onLoad接收 resolve 结果后调用setData更新页面数据// marry-wx/pages/detail/detail.js onLoad(options) { const id options.id; getInviteDetail(id).then(data { this.setData({ inviteInfo: data, isLoaded: true }); }).catch(err { wx.showToast({ title: err.message, icon: none }); }); }关键细节setData传入的对象必须是纯净 JSON不能含函数或 Date 对象因此marry-wx/utils/format.js提供formatDate(timestamp)将后端返回的时间戳转为「2023年10月1日」格式再传入setData。3.4 自定义组件复用guest-list 组件如何实现跨页面数据共享marry-wx/components/guest-list/guest-list.js是独立组件但需在index和detail两个页面复用。若依后端返回的宾客列表是扁平数组而小程序要求wx:for渲染需明确key因此组件内部做了二次处理// marry-wx/components/guest-list/guest-list.js Component({ properties: { guestList: { type: Array, value: [], observer: onGuestListChange // 属性变化时触发 } }, data: { groupedGuests: [] // 按 status 分组后的数据 }, methods: { onGuestListChange(newVal) { // 将 [ {name:张三,status:1}, {name:李四,status:0} ] 转为 // [ {status:0, list:[{name:李四}]}, {status:1, list:[{name:张三}]} ] const grouped {}; newVal.forEach(item { if (!grouped[item.status]) grouped[item.status] []; grouped[item.status].push(item); }); this.setData({ groupedGuests: Object.keys(grouped).map(key ({ status: Number(key), list: grouped[key] })) }); } } })使用方式marry-wx/pages/detail/detail.wxmlguest-list guest-list{{inviteInfo.guestList}}/guest-list此处inviteInfo.guestList是后端返回的原始数组组件内部自动完成分组避免每个页面重复写逻辑。4. 部署与避坑clean.bat/package.bat 实际作用及五个血泪踩坑记录4.1 bat 脚本真相run.bat 不是启动服务而是 Maven 打包命令链项目根目录的run.bat、package.bat、clean.bat并非 Windows 服务脚本而是 Maven 构建指令的快捷方式clean.bat执行mvn clean清空target/目录必须在修改pom.xml后运行否则新依赖不会生效package.bat执行mvn package -Dmaven.test.skiptrue跳过单元测试打包生成ruoyi-admin/target/ruoyi-admin.jarrun.bat执行java -jar ruoyi-admin/target/ruoyi-admin.jar但前提是已运行package.bat否则target/目录不存在导致报错Unable to access jarfile。提示生产环境部署应使用package.bat生成 jar 包再通过nohup java -jar ruoyi-admin.jar logs/out.log 21 后台运行而非直接双击run.bat该方式关闭 CMD 窗口即终止服务。4.2 避坑微信小程序开发与若依后端联调的五个高频翻车点现象 1小程序wx.request报错request:fail ssl hand shake error原因若依后端application.yml中server.ssl.key-store配置了 HTTPS 证书但本地开发未配置信任证书微信开发者工具默认拒绝不安全连接。解决将application.yml中server.port改为8080HTTP注释掉server.ssl.*配置小程序端utils/request.js的baseURL改为http://localhost:8080切勿在request中设置header: {content-type: application/json}微信会自动添加重复设置导致 400 错误。现象 2后台上传图片后小程序端显示blob.jpg而非真实图片原因ruoyi-framework的FileUploadUtil.java默认将上传文件存入profile/upload/目录但marry-wx的image组件src属性写的是相对路径blob.jpg未拼接完整 URL。解决修改marry-wx/pages/detail/detail.wxml中图片标签!-- 错误写法 -- image srcblob.jpg / !-- 正确写法从 inviteInfo 中取 serverUrl -- image src{{inviteInfo.serverUrl / inviteInfo.coverImg}} /并在ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysFileController.java的upload方法返回值中增加serverUrl字段如http://your-domain.com/profile/upload。现象 3若依后台「邀请函管理」列表为空但数据库wedding_invite表有数据原因WeddingInviteController.java的list接口使用了 MyBatis-Plus 的QueryWrapper但未设置eq(del_flag, 0)导致逻辑删除的数据del_flag1被过滤而marry-wx端删除操作实际是软删除。解决在WeddingInviteController.java的list方法中QueryWrapper添加条件QueryWrapperWeddingInvite wrapper new QueryWrapper(); wrapper.eq(del_flag, 0); // 必加否则查不到数据现象 4小程序wx:for渲染模板列表时点击后跳转pages/template/template?id{{item.id}}报错Cannot read property id of undefined原因marry-wx/pages/index/index.js的onSwiperChange事件中e.detail.current返回的是当前 swiper 索引但swiperList数组未初始化完成this.data.swiperList[e.detail.current]为undefined。解决在onSwiperChange中增加判空onSwiperChange(e) { const list this.data.swiperList; if (list.length 0 || e.detail.current list.length) return; const currentId list[e.detail.current].id; wx.navigateTo({ url: /pages/template/template?id${currentId} }); }现象 5marryii.sql导入后若依后台登录提示Invalid bound statement (not found): com.ruoyi.system.mapper.SysUserMapper.selectUserByUserName原因MySQL 8.0 默认启用caching_sha2_password认证插件而若依pom.xml中mysql-connector-java版本为8.0.11不兼容该插件。解决升级 MySQL 驱动在ruoyi-framework/pom.xml中将mysql-connector-java.version改为8.0.28并重启 Maven 依赖下载。5. 主题定制实战从替换一张背景图到发布新模板的全流程5.1 模板资源定位marry-wx 与 ruoyi-system 的文件映射关系婚礼邀请函的视觉定制本质是「前端样式 后端数据」双驱动静态资源所有背景图、图标、字体存于marry-wx/static/目录如static/bg/chinese.png中式模板背景、static/icon/heart.png爱心图标模板配置ruoyi-system模块的TemplateConfig.java实体类定义了模板元数据template_config表中每条记录对应一个可选主题动态渲染小程序端pages/template/template.js的onLoad根据options.id查询template_config表获取bgColor背景色、fontColor文字色、bgImage背景图路径等字段再通过setData注入 WXML。关键路径marry-wx/static/→ruoyi-system/src/main/java/com/ruoyi/system/domain/TemplateConfig.java→ruoyi-system/src/main/resources/mapper/system/TemplateConfigMapper.xml→marry-wx/pages/template/template.wxml5.2 替换背景图的三步操作法以新增「莫兰迪色系」模板为例第一步准备资源文件将morandi-bg.jpg尺寸 750×1334px适配 iPhone X放入marry-wx/static/bg/新建morandi-font.ttf字体文件用于标题文字放入marry-wx/static/font/第二步插入数据库记录执行 SQL 插入新模板注意is_default0避免覆盖默认模板INSERT INTO template_config ( template_name, bg_image, bg_color, font_color, font_family, is_default, create_time ) VALUES ( 莫兰迪色系, /static/bg/morandi-bg.jpg, #F5F5DC, #333333, /static/font/morandi-font.ttf, 0, NOW() );第三步小程序端适配字体微信小程序不支持直接加载.ttf需转换为 base64用在线工具将morandi-font.ttf转为 base64 字符串在marry-wx/app.wxss中添加font-face { font-family: Morandi; src: url(data:font/ttf;base64,AAEAAA...) format(truetype); } .morandi-title { font-family: Morandi, PingFang SC, Helvetica Neue; }修改marry-wx/pages/template/template.wxml中标题标签text classmorandi-title{{inviteInfo.title}}/text5.3 发布新模板的验证 checklist每次新增模板后必须按顺序验证以下五点缺一不可验证项操作路径预期结果1. 后台可见ruoyi-admin→ 【系统管理】→【模板管理】新增「莫兰迪色系」记录状态为「正常」2. 接口可查浏览器访问http://localhost:8080/template/list返回 JSON 中包含templateName:莫兰迪色系3. 小程序加载marry-wx开发者工具 →pages/template/template→ 传参id新模板ID页面顶部显示莫兰迪背景图无 404 报错4. 字体生效真机调试 → 截图查看标题文字文字呈现莫兰迪字体特征如圆角、细笔画非系统默认字体5. 数据联动后台编辑该模板的bgColor为#FFEB3B小程序刷新后背景色实时变为黄色证明setData响应式更新有效从那以后我每次新增模板都强制走一遍这个 checklist先在后台点「启用」按钮再 curl 接口看返回最后真机截图比对字体渲染效果。漏掉任何一步上线后都会收到新人“为什么我的邀请函还是老样子”的深夜消息。希望帮到你。本文还有配套的精品资源点击获取