若依+微信小程序实现婚礼邀请函：源码部署与二次开发指南

简介：这是一套基于微信小程序的婚礼邀请函设计源码，面向需要快速定制婚礼请柬的开发者、设计师及新婚夫妇。后端采用若依（RuoYi）快速开发平台，前端结合微信小程序特有的wxml/wxss结构，并覆盖Java、HTML、JavaScript、CSS、XML、JSON等多元技术栈，既能支撑个性化婚礼请柬小程序的快速搭建，也适合学习中后台数据管理与小程序联动开发。压缩包共911个文件，大小约13.14MB，包含307个Java后端类、155个HTML页面、143个JS脚本、43个CSS样式、31个wxss及30个wxml小程序文件，另附SQL数据库脚本、部署说明与项目配置文件，目录结构清晰，便于二次开发。目前已有1845人学习浏览，资源完整度高，能够帮助开发者快速跑通从后台数据管理到前端邀请函展示的完整流程，既可直接用于实际婚礼场景，也可扩展为其他活动邀请函模板使用。

1. 婚礼邀请函微信小程序：一套别小看的前后端完整源码

微信小程序里的婚礼邀请函，很多人第一反应是“做个 H5 转发页而已”，但这套源码完全不是那么回事。它把 911 个文件拆成了小程序端、若依后端、数据库脚本三部分，所有婚礼信息、宾客祝福、页面数据都由后端管理系统控制，小程序只负责渲染和交互。换句话说，你拿到的不只是张请柬，而是一套能运营、能改数据、能扩展功能的完整业务系统。

适合两类人：一是手里有 Java 基础、想研究若依框架怎么和小程序对接的开发者；二是想快速搭建一款婚礼邀请函产品、但又不想从零写管理后台的创业者。前者能读懂结构，后者能直接换数据上线。

2. 拆源码结构：搞清楚 911 个文件分别干什么再动手

2.1 前端小程序与后台管理端的分工

这套源码从目录命名上就很好辨认。marry-wx目录基本就是微信小程序本体，文件以.wxml、.wxss、.js、.json为主，负责邀请函页面、转发卡片、地图导航、祝福墙这些用户能直接触摸到的界面。而ruoyi-admin、ruoyi-framework、ruoyi-system这些是若依框架的标准分层，职责非常清晰：ruoyi-system管业务逻辑和数据实体，ruoyi-framework管安全、拦截器、AOP 这类横切逻辑，ruoyi-admin是对外暴露出 HTTP 接口的控制层。

我拆过的若依系项目不少，这个分层基本是标准答案，区别只在业务模块。这套源码里的业务核心是婚礼邀请，所以后端接口围绕“请柬内容管理、宾客留言管理、邀请函配置”展开。所有页面上的文字、图片、日期、地点，都不在小程序里写死，而是请求后端接口动态获取。这意味着新人改婚期、换酒店地址，只需要管理后台改配置，小程序端不用重新提审发布，这是这类邀请函源码最值钱的一点。

除了代码目录，根目录还有几个一键脚本，run.bat、package.bat、clean.bat。clean.bat用来清掉编译残留，package.bat打包当前模块，run.bat直接拉起后端服务。Windows 环境下如果不想手动敲 Maven 命令，这三个脚本能省不少事，但建议先读一遍内容再执行，避免端口占用或路径不对时一头雾水。

2.2 静态资源与配置文件里的关键信息

pom.xml在若依项目里是 Maven 的依赖总入口，能看出项目用的 Spring Boot 版本、数据库驱动、Redis 客户端等依赖版本。marryii.sql是数据库初始化脚本，表结构和基础数据都在这份文件里。部署说明.txt是作者留给你的部署路径，这一步一定要看。

另外注意到有一批 CSS 文件：animate.css、style.css、bootstrap.min14ed.css、style.min862f.css。这些带着 hash 后缀的压缩样式文件属于后台管理页面，也就是若依自带的 AdminLTE 风格 UI 组件。bootstrap.min.css和summernote-bs3.css说明后台编辑器用的是 Summernote，这玩意儿在若依里常用来做富文本内容编辑，婚礼邀请函的详情内容大概率就是用富文本编辑器维护的。

2.3 前后端数据交互的基本链路

小程序端渲染婚礼卡片时，数据流向大致是这个顺序：

1. 小程序onLoad里请求后端的邀请函配置接口；
2. 后端从 MySQL 读取婚礼数据，序列化成 JSON 返回；
3. 小程序拿到数据后绑定到wxml模板，完成渲染；
4. 宾客提交祝福留言时，前端wx.requestPOST 到后端写入接口，后端落库。

这中间的关键点是接口路径。若依后端统一加了/prod-api前缀，小程序里配置的 baseUrl 必须和后端上下文匹配，否则会 404。拿到源码后第一件事就是把app.js的globalData里的请求地址改成你自己服务器的 IP，而不是用默认的localhost，因为手机真机调试时localhost指向的是手机自身，不是你开发机。

3. 把若依后端跑起来：环境准备、数据库还原与服务启动

3.1 环境要求先说清楚

若依项目对运行环境有硬性要求，缺一个都启动不了。这套源码属于若依的分支，基础依赖如下：

我一般建议用 JDK 8 + MySQL 5.7 的组合，兼容性最稳妥。若依的验证码登录依赖 Redis，如果 Redis 没启动，登录接口会报Unable to connect to Redis，这是新手踩得最多的一关，后面避坑章还会细说。

3.2 导入数据库脚本 marryii.sql

拿到源码后，先用命令行把数据库建好并导入脚本。Windows 下直接执行：

mysql -uroot -p -e "CREATE DATABASE ruoyi CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;" mysql -uroot -p ruoyi < marryii.sql

第一句创建数据库，指定utf8mb4字符集是为了完整显示 emoji 和生僻字，因为邀请函里经常有人名带特殊符号，用utf8会出现乱码甚至报错。第二句把结构表和初始数据一次性导入。如果数据库密码不是root，把-p后面改成实际密码。

导入完成后，进 MySQL 里看一眼核心表：

USE ruoyi; SHOW TABLES;

能看见sys_user、marry_info这类表，说明脚本执行成功。如果表是空的，多半是 SQL 执行过程中报错被中断，重新执行一遍时加上--force参数排查具体错误。

3.3 修改后端数据源配置

若依的数据库连接配置在ruoyi-admin/src/main/resources/application-druid.yml里，这是后端启动的关键文件，必须改对。核心部分长这样：

spring: datasource: type: com.alibaba.druid.pool.DruidDataSource druid: url: jdbc:mysql://localhost:3306/ruoyi?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8 username: root password: your_password initial-size: 5 min-idle: 10 max-active: 50

注意serverTimezone=GMT%2B8，这是 MySQL 8.x 的时区要求，不设置容易报时区错误。zeroDateTimeBehavior=convertToNull解决数据库时间和 Java 时间转换问题，如果你导入数据时报日期类型错误，先检查这一行。username和password改成你自己的数据库账号密码。用 IDEA 打开项目、加载 Maven 依赖后，去ruoyi-admin模块运行RuoYiApplication.java的main方法即可启动。

3.4 确认后端是否真的起来了

启动日志出现Started RuoYiApplication in xx seconds才算成功。之后访问 http://localhost:8080，能看到若依的登录页，说明后端已经就绪。接着试一下验证码接口：

curl -X POST http://localhost:8080/login -H "Content-Type: application/json" -d "{\"username\":\"admin\",\"password\":\"admin123\"}"

这是若依的初始账号，能返回 token 说明整个后端链路是通的。如果这一步通了，说明 MySQL、Redis、数据源都正常，可以直接进下一章对接小程序端。

4. 小程序端对接：AppID 替换、请求地址与登录态处理

4.1 替换 AppID 与基础配置

用微信开发者工具导入marry-wx目录，第一步是改project.config.json：

{ "appid": "wx你的AppID", "projectname": "marry-wx", "setting": { "urlCheck": false, "es6": true, "postcss": true, "minified": true } }

appid填你自己的小程序 AppID。没有注册小程序账号的，可以在开发者工具里选测试号，但测试号无法体验真机预览和分享，只能看着模拟器运行。urlCheck: false属于开发者工具配置，开发阶段允许请求任意域名，不设这一项，本地调试时所有wx.request都会被拦截报 403。

4.2 封装请求并绑定后端地址

打开app.js，找到globalData，把请求域名替换成后端地址：

// app.js App({ globalData: { baseUrl: 'http://192.168.1.100:8080', token: '' } })

注意域名别填localhost，真机预览时localhost代表手机自己，你连不上开发机的服务。改成开发机的局域网 IP，并且保证手机和电脑在同一 WiFi 下。如果后端部署在云服务器，就填云服务器公网 IP，然后在云控制台放行 8080 端口的入站规则。

请求封装一般单独放在utils/request.js，核心逻辑如下：

const request = (url, method, data) => { return new Promise((resolve, reject) => { wx.request({ url: getApp().globalData.baseUrl + url, method: method || 'GET', data: data || {}, header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + wx.getStorageSync('token') }, success: (res) => { if (res.data.code === 200) { resolve(res.data) } else { wx.showToast({ title: res.data.msg, icon: 'none' }) reject(res.data) } }, fail: (err) => reject(err) }) }) } module.exports = request

这里把token从本地缓存里取出来，放进Authorization头。若依后端用 Spring Security + JWT，所有业务接口都会校验这个 token，不传或传错统一被拦截返回 401。另一个重点是res.data.code === 200判断，若依标准返回格式是{ code: 200, msg: "操作成功", data: ... }，判断code而不是判断 HTTP 状态码，更稳妥。

4.3 登录态与 token 获取

小程序端不能直接拿账号密码登录，常见做法是走wx.login换取临时 code，再由后端调用微信接口换 openid，或者直接用若依的账号密码登录接口，二者取其一。这套源码通常预置了标准登录流程，核心步骤如下：

wx.login({ success: (res) => { console.log('code:', res.code) // 将 code 发送给后端，后端调用微信接口获取 openid } })

嫁接到若依的业务里，我一般会写一个login接口配合小程序端：

const login = (username, password) => { return request('/login', 'POST', { username, password }) }

若依的/login接口接收username、password、code、uuid四个参数，其中code和uuid是验证码相关字段，需要先从后端/captchaImage接口获取验证码图片和 uuid。如果你只想快速联调，可以关掉若依的验证码开关，在application.yml里找captchaEnabled配置改成false，这样登录只需要账号密码。

5. 避坑记录：部署若依婚礼小程序最常见的五个翻车点

5.1 现象：后端启动成功，但小程序请求接口全部超时或 404

原因：小程序端baseUrl配的是localhost，真机请求打到了手机自己；或者后端服务绑定的是内网 IP，云服务器没有放行端口；又或者若依的接口统一加/prod-api前缀，小程序请求路径里漏了这个前缀。这三点在新手里出现频率极高。

解决：先确认baseUrl是开发机的局域网 IP 而不是localhost，用同一 WiFi 下的手机浏览器访问http://192.168.1.100:8080看能否打开登录页；再看后端接口路径，请求/prod-api/system/config/list而不是/system/config/list。路径不对，小程序控制台通常会报404。

5.2 现象：重新部署时是 Linux 服务器，发现部分接口报错

原因：Linux 下 MySQL 默认区分大小写，Windows 默认不区分。若依的表名和字段名有很多大写字母，Windows 下没感觉，Linux 下如果建表语句里表名是大写、代码里查的是小写，直接报Table 'xxx' doesn't exist。这类问题在跨平台部署时最容易踩。

解决：改数据源连接 URL，加上lowerCaseTableNames=1参数，强制 MySQL 表名不区分大小写：

url: jdbc:mysql://localhost:3306/ruoyi?lowerCaseTableNames=1&useUnicode=true&characterEncoding=utf8

或者更简单，直接把marryii.sql里的表名统一改成小写重新导入。两种方式我都试过，后者更保险，但前提是代码里没有硬编码大写表名。

5.3 现象：登录时验证码一直转圈，控制台报 Redis 连接失败

原因：若依用 Redis 存验证码和登录 session，Redis 服务没启动，或 Redis 配置文件里绑定了127.0.0.1导致其他机器连不上。Windows 本地开发经常忘记启动 Redis，Linux 服务器则要检查 Redis 的bind配置和密码。

解决：Windows 本地右键运行redis-server.exe，看到端口 6379 启动成功再重启后端；Linux 上确认redis-cli ping返回PONG。如果 Redis 设置了密码，要在application.yml里同步修改spring.redis.password。

5.4 现象：小程序里用wx.getUserProfile拿用户头像昵称，真机调试时接口被拒绝

原因：微信官方调整了隐私接口策略，现在wx.getUserProfile必须在小程序后台声明用户隐私保护指引，并且用户点击按钮主动授权才能调用。开发者工具里模拟器能过，真机上没有隐私声明就会失败。

解决：小程序后台的「设置 - 服务内容声明 - 用户隐私保护指引」里添加「用户信息」项，代码里确保getUserProfile是用户通过 button 的bindtap触发，不能用onLoad直接拉取。

5.5 现象：打包上传微信审核时，提示类目不符或者页面内容违规

原因：邀请函页面带有「喜帖、婚庆」相关营销字眼，或小程序类目选了「社交」而不是「生活服务」。微信对涉及婚庆的内容审核比较严格，类目选错会直接被拒。

解决：类目选择「生活服务 - 婚庆服务」，提交审核时把邀请函展示页面设置为「首页」，确保没有诱导分享、强制转发之类的逻辑。代码里曾出现过「分享得门票」这类文案的要清理干净。

6. 换一套婚礼主题：利用 CSS 变量与资源替换做二次定制

很多用户拿到源码后第一反应是「我要换主色调、换背景图、换开场动画」。这源码的界面分了小程序端和后端管理端，小程序端的配色主要落在.wxss文件里，后端管理端则是那几份带 hash 的style.min*.css。我不建议你去改打包后的 CSS 文件，hash 后缀说明是构建产物，下次重新打包就被覆盖了。

我的做法是把小程序端的颜色值抽成 CSS 变量，统一放在app.wxss根部：

/* app.wxss */ page { --primary-color: #e8b4b8; --primary-light: #f7e3e3; --text-color: #5c3a3a; --gold: #c9a227; }

然后在各页面的.wxss里按需引用：

.invite-title { color: var(--primary-color); } .gold-line { border-bottom: 2rpx solid var(--gold); }

这样一来，新人想要粉色系、香槟色系、中式红色系，只需要改四个变量值，整站配色跟着变，不用逐页翻样式文件。

背景图和开场动画的替换要注意尺寸和小程序包体限制。小程序的代码包默认不能超过 2MB，背景图如果直接放原图，压缩后也容易超限。我一般先把图压到 1200×800 以内、质量 80%，控制在 150KB 左右，再放到/images目录。animate.css控制入场动画，如果要换效果，直接把元素绑定 class 切换，比如fadeInUp换成zoomIn，不需要动 JS 逻辑。

数据替换反而是最容易被忽略的环节。婚礼日期、地点、新人名字、背景音乐这些，不要在代码里搜索替换，应该去若依后台对应配置页面更新，数据库更新后小程序端拉到的就是新内容。如果改了数据库还是不生效，检查后端的缓存，Redis 里可能还存着旧配置，重启后端正缓存或直接redis-cli flushdb清掉。

另外提醒一句，如果邀请函里要放背景音乐，小程序播放本地音频文件会显著增加包体，更推荐把音频放到服务器或云存储，通过wx.createInnerAudioContext()拉远端的 URL 播放。这样包体不会膨胀，音乐要替换也不用重新发版本。我从那以后每次做这类小程序项目，都会强制走一遍「先看部署说明、再导入 SQL、再改配置、最后真机预览」的顺序，尤其是在换主题时，数据库和缓存比代码本身更容易被遗忘。希望这套源码的落地过程能帮你少踩几个坑。

本文还有配套的精品资源，点击获取