ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

微信小程序宿舍水电缴费系统开发实战:从环境搭建到支付部署

微信小程序宿舍水电缴费系统开发实战:从环境搭建到支付部署 这类毕业设计项目最值得先看的不是功能列表而是能不能在普通开发环境里稳定跑起来以及代码结构是否清晰、二次开发是否方便。我一般会建议先把项目启动、登录、缴费、账单这几个核心流程跑通再考虑扩展功能和部署上线。下面按实际落地顺序拆一遍。1. 先确认项目结构和运行环境拿到源码包后不要急着直接导入开发者工具。先解压看目录结构重点确认这几个点是否有完整的project.config.json配置文件app.js、app.json、app.wxss这三个全局文件是否齐全页面文件是否按文件夹组织比如pages/index、pages/pay、pages/bill是否有utils工具类文件夹里面是否包含网络请求、时间格式化等常用工具函数如果目录混乱或缺失关键文件这个项目可能无法直接运行需要先整理结构。环境准备方面微信小程序开发需要微信开发者工具最新稳定版即可不用追求最新测试版已注册的微信小程序账号个人或企业类型均可个人账号部分接口权限受限本地网络能正常访问微信服务器我建议先用测试号跑通核心流程再绑定正式账号。测试号申请在微信公众平台-开发-开发管理-开发者工具-测试号管理。2. 核心功能拆解和数据库设计宿舍水电缴费小程序的核心功能其实不复杂关键是数据流转要清晰2.1 用户身份验证宿舍场景下通常不需要复杂的微信授权直接用学号/工号密码登录更实用。数据库用户表可以这样设计CREATE TABLE user ( id int(11) NOT NULL AUTO_INCREMENT, username varchar(20) NOT NULL COMMENT 学号/工号, password varchar(100) NOT NULL COMMENT 加密后的密码, real_name varchar(20) NOT NULL COMMENT 真实姓名, dorm_building varchar(10) NOT NULL COMMENT 宿舍楼栋, dorm_room varchar(10) NOT NULL COMMENT 房间号, phone varchar(15) DEFAULT NULL COMMENT 手机号, create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;登录接口要注意密码加密传输前端用 MD5 或 SHA256 简单加密后端再加盐存储。2.2 水电费数据管理水电费数据通常由后勤系统导入需要设计合理的表结构CREATE TABLE utility_bill ( id int(11) NOT NULL AUTO_INCREMENT, dorm_building varchar(10) NOT NULL, dorm_room varchar(10) NOT NULL, utility_type tinyint(1) NOT NULL COMMENT 1-水费 2-电费, period varchar(10) NOT NULL COMMENT 账期如2024-01, amount decimal(10,2) NOT NULL COMMENT 应缴金额, paid_amount decimal(10,2) NOT NULL DEFAULT 0.00 COMMENT 已缴金额, status tinyint(1) NOT NULL DEFAULT 0 COMMENT 0-未缴 1-已缴, deadline date NOT NULL COMMENT 缴费截止日期, create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_dorm (dorm_building,dorm_room), KEY idx_period (period) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;这里最容易出错的是金额字段类型一定要用decimal(10,2)避免浮点数精度问题。2.3 支付记录管理支付成功后要记录详细日志便于对账和排查问题CREATE TABLE payment_record ( id int(11) NOT NULL AUTO_INCREMENT, user_id int(11) NOT NULL, bill_ids varchar(500) NOT NULL COMMENT 关联的账单ID多个用逗号分隔, out_trade_no varchar(32) NOT NULL COMMENT 商户订单号, transaction_id varchar(32) DEFAULT NULL COMMENT 微信支付订单号, total_fee decimal(10,2) NOT NULL COMMENT 支付金额, payment_type tinyint(1) NOT NULL COMMENT 支付方式1-微信支付, status tinyint(1) NOT NULL COMMENT 支付状态0-待支付 1-支付成功 2-支付失败, pay_time datetime DEFAULT NULL COMMENT 支付成功时间, create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY out_trade_no (out_trade_no), KEY idx_user (user_id), KEY idx_create_time (create_time) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;商户订单号out_trade_no要保证唯一性可以用时间戳随机数生成。3. 前端页面开发和注意事项小程序前端开发要注意微信平台的特性限制。3.1 页面布局和样式适配微信小程序使用 rpx 单位适配不同屏幕但在实际开发中要注意/* 不推荐直接用固定rpx值 */ .container { width: 750rpx; /* 这样在非750设计稿上会出问题 */ } /* 推荐使用flex布局配合百分比 */ .container { display: flex; flex-direction: column; width: 100%; } .header { height: 88rpx; line-height: 88rpx; background-color: #007AFF; color: white; text-align: center; font-size: 36rpx; }顶部导航栏高度要动态获取不能写死// app.js App({ onLaunch() { // 获取系统信息 wx.getSystemInfo({ success: (res) { this.globalData.statusBarHeight res.statusBarHeight this.globalData.navBarHeight res.platform android ? 48 : 44 } }) }, globalData: { statusBarHeight: 0, navBarHeight: 0 } })3.2 网络请求封装和错误处理小程序网络请求要统一封装便于管理域名和错误处理// utils/request.js const baseURL https://your-domain.com/api const request (options) { return new Promise((resolve, reject) { wx.request({ url: baseURL options.url, method: options.method || GET, data: options.data || {}, header: { content-type: application/json, token: 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) { wx.showToast({ title: 网络错误请检查网络连接, icon: none }) reject(err) } }) }) } module.exports { request }3.3 支付功能实现微信支付是小程序的核心功能实现时要注意// pages/pay/pay.js const app getApp() Page({ data: { billList: [], totalAmount: 0 }, // 发起支付 handlePayment() { const that this // 1. 调用后端生成预支付订单 wx.request({ url: https://your-domain.com/api/payment/create, method: POST, data: { billIds: this.data.billList.map(bill bill.id), totalAmount: this.data.totalAmount }, success: function(res) { if (res.data.code 200) { // 2. 调用微信支付 wx.requestPayment({ timeStamp: res.data.timeStamp, nonceStr: res.data.nonceStr, package: res.data.package, signType: MD5, paySign: res.data.paySign, success: function() { // 支付成功 wx.showToast({ title: 支付成功, icon: success }) // 跳转到账单页面 wx.navigateTo({ url: /pages/bill/bill }) }, fail: function(err) { console.error(支付失败:, err) wx.showToast({ title: 支付失败, icon: none }) } }) } } }) } })支付功能最容易出问题的是签名验证要确保后端生成的签名参数和小程序端调用参数完全一致。4. 后端接口设计和安全考虑后端可以用任何语言开发但接口设计要规范。4.1 接口返回格式统一所有接口返回格式要统一便于前端处理{ code: 200, msg: success, data: { // 实际业务数据 } }常用状态码定义200: 成功400: 参数错误401: 未登录或token过期403: 无权限访问500: 服务器内部错误4.2 身份验证和权限控制小程序通过 wx.login 获取 code后端用 code 换 session_key 和 openid// 登录接口示例 app.post(/api/login, async (req, res) { const { code, username, password } req.body try { // 1. 用code换取openid const result await axios.get(https://api.weixin.qq.com/sns/jscode2session?appid${appid}secret${secret}js_code${code}grant_typeauthorization_code) const { openid } result.data // 2. 验证用户名密码 const user await UserModel.findOne({ where: { username, password: encryptPassword(password) } }) if (!user) { return res.json({ code: 400, msg: 用户名或密码错误 }) } // 3. 生成token const token jwt.sign({ userId: user.id, openid }, your-secret-key, { expiresIn: 7d }) res.json({ code: 200, msg: 登录成功, data: { token, userInfo: { username: user.username, realName: user.real_name } } }) } catch (error) { console.error(登录错误:, error) res.json({ code: 500, msg: 登录失败 }) } })4.3 支付接口安全支付接口要防止重复支付和金额篡改// 创建支付订单 app.post(/api/payment/create, authMiddleware, async (req, res) { const { billIds, totalAmount } req.body const userId req.user.userId // 验证账单是否存在且属于当前用户 const bills await UtilityBill.findAll({ where: { id: { [Op.in]: billIds.split(,) }, status: 0 // 未支付 } }) // 验证总金额是否匹配 const calculatedAmount bills.reduce((sum, bill) sum parseFloat(bill.amount), 0) if (calculatedAmount ! parseFloat(totalAmount)) { return res.json({ code: 400, msg: 金额不匹配 }) } // 生成商户订单号 const outTradeNo generateOutTradeNo() // 调用微信支付统一下单接口 const unifiedOrderResult await createUnifiedOrder({ out_trade_no: outTradeNo, total_fee: Math.round(totalAmount * 100), // 转为分 body: 宿舍水电费缴纳, openid: req.user.openid }) // 保存支付记录 await PaymentRecord.create({ user_id: userId, bill_ids: billIds, out_trade_no: outTradeNo, total_fee: totalAmount, status: 0 }) res.json({ code: 200, data: { timeStamp: Math.floor(Date.now() / 1000).toString(), nonceStr: unifiedOrderResult.nonce_str, package: prepay_id${unifiedOrderResult.prepay_id}, signType: MD5, paySign: generatePaySign(unifiedOrderResult) } }) })5. 部署上线和运维考虑毕业设计项目往往只注重开发忽略部署和运维但这恰恰是体现工程能力的地方。5.1 小程序上线准备小程序上线前要完成微信认证个人类型无法使用支付功能服务器域名配置request合法域名、uploadFile合法域名、downloadFile合法域名业务域名配置如果使用web-view组件隐私协议配置涉及用户信息收集的需要在微信公众平台-开发-开发管理-开发设置中配置域名。5.2 服务器环境部署推荐使用云服务器配置建议CPU: 1核以上内存: 2GB以上系统: CentOS 7.6 或 Ubuntu 18.04环境: Nginx Node.js/PHP/Java MySQL/Redis部署步骤安装基础环境Node.js、PM2、Nginx、MySQL上传后端代码安装依赖导入数据库结构配置Nginx反向代理用PM2启动Node.js应用配置SSL证书HTTPS是微信小程序强制要求5.3 数据备份和监控即使是毕业设计也要考虑数据安全定期备份数据库每天自动备份到云存储日志记录访问日志、错误日志、支付日志基础监控CPU、内存、磁盘使用率可以用简单的脚本实现自动备份#!/bin/bash # 数据库备份脚本 DATE$(date %Y%m%d_%H%M%S) BACKUP_DIR/data/backups DB_NAMEdorm_utility mysqldump -uusername -ppassword $DB_NAME $BACKUP_DIR/${DB_NAME}_${DATE}.sql # 上传到云存储 rclone copy $BACKUP_DIR/${DB_NAME}_${DATE}.sql oss:backup-bucket/ # 删除7天前的备份 find $BACKUP_DIR -name *.sql -mtime 7 -delete6. 常见问题排查在实际开发中会遇到各种问题这里列几个典型的排查思路。6.1 微信开发者工具常见错误问题网络请求失败检查域名是否在微信公众平台配置检查域名是否备案且支持HTTPS检查服务器防火墙是否开放443端口问题wx.login 获取不到code检查AppID和AppSecret是否正确检查网络连接是否正常检查微信开发者工具基础库版本问题支付调起失败检查商户号是否正确配置检查签名算法是否正确检查支付金额单位分还是元6.2 后端接口调试技巧开发阶段可以用这些方法调试使用Postman测试接口先确保后端接口单独测试通过查看服务器日志定位具体错误信息小程序端开启调试在微信开发者工具中开启调试模式使用Charles抓包分析网络请求和响应数据6.3 数据库连接问题数据库连接失败通常因为数据库服务未启动连接地址、端口、用户名、密码错误数据库权限设置问题防火墙阻止连接检查顺序服务状态 → 连接参数 → 权限设置 → 网络连通性。7. 毕业设计文档编写要点除了代码实现毕业设计文档也很重要。文档要体现技术选型理由和设计思路。7.1 需求分析部分不要简单罗列功能要分析真实场景学生缴费的痛点排队、时间限制、忘记缴费管理员管理的需求数据导入、账单生成、统计报表系统非功能需求响应速度、数据安全、易用性7.2 技术选型理由解释为什么选择这些技术微信小程序跨平台、开发成本低、用户基数大云开发/自建服务器根据项目规模和预算选择数据库选型MySQL的成熟稳定 vs MongoDB的灵活扩展7.3 系统架构设计用图表展示系统架构包括前端页面结构后端模块划分数据库表关系接口调用流程7.4 测试方案设计设计完整的测试用例功能测试登录、查询、支付、对账性能测试并发用户数、响应时间安全测试SQL注入、XSS攻击、越权访问我个人更建议先把单任务跑稳再考虑批量和接口。这个项目真正落地时最该盯住的不是功能列表而是支付流程的稳定性和数据的一致性。如果只是毕业设计演示重点展示核心流程的完整性和代码规范性如果要实际使用就要把日志监控、数据备份和异常处理做得更扎实。
返回列表