微信小程序电影购票源码：含选座锁座与微信支付完整闭环

简介这是一份面向微信小程序初学者与进阶开发者的电影购票类实战源码聚焦轻量级生活服务场景帮助开发者掌握小程序核心开发流程与第三方服务集成方法。资源包含92个文件涵盖14个JS逻辑文件含app.js、server.js等主控与接口层、10个WXML页面结构文件、10个WXSS样式文件、7个JSON配置文件以及33张JPG和16张PNG素材图整体包体仅394KB结构精简、便于快速上手与二次开发。已有6450人学习下载热度较高。读者可完整获取从首页、影院/场次选择、座位交互、订单管理到用户中心的全流程代码实现同时通过atakeaway与a-takeaway-demo-of-wxapp-master两个模块延伸学习外卖类功能扩展思路项目采用标准小程序目录结构含tabBar导航、分页组件、本地缓存与网络请求封装是理解WXML/WXSS/JS协同及微信支付对接逻辑的优质范例。1. 一个能当天跑通、次日上线的电影购票小程序不是Demo是真实可交付的微信小程序源码包上周帮某高校实验室快速搭一个校内影厅预约系统没时间从零写授权、选座、支付闭环——直接拉来这个「微信小程序源码电影购票小程序」删掉原项目里的第三方影院API密钥替换成他们自建的排片服务地址3小时改完当天下午就在测试号里完成了选座→下单→模拟支付全流程。它不是那种只有首页轮播图和空列表的“教学模板”而是完整覆盖用户端核心路径影院列表→影片详情→场次选择→座位可视化交互→订单生成→微信支付回调→订单状态同步。后端用Node.js MySQL含建表SQL前端完全遵循微信小程序原生开发规范WXML/WXSS/JS结构清晰连loading态和空状态都做了细粒度控制。如果你正被“怎么把设计稿变成能扫码体验的小程序”卡住或者需要一个结构干净、逻辑扎实、能当二次开发基座的源码包这个项目就是你该点开下载的那一个。2. 项目结构与技术栈解析看清它为什么能跑、凭什么好改这个源码包不是“扔给你一堆文件让你猜”它的目录组织方式本身就是一种工程化表达。我解压后第一件事就是看project.config.json和app.json确认它没用任何云开发或插件依赖——纯本地构建对新手友好对老手可控。整个项目采用前后端分离架构但后端代码也打包在同一个压缩包里这点很关键避免你下载完发现缺API服务而抓瞎。2.1 目录结构6个核心文件夹讲清分工weixin-movie-ticket/ ├── miniprogram/ # 小程序前端主目录微信开发者工具直接打开此目录 │ ├── components/ # 自定义组件seat-selector座位选择器、movie-card影片卡片、order-item订单项 │ ├── pages/ # 页面级目录index首页、movie-detail影片详情、cinema-list影院列表、booking选座页、order-confirm确认订单、my-orders我的订单 │ ├── utils/ # 工具函数request.js统一封装wx.request、date-format.js、price-calculator.js │ ├── app.js # 小程序生命周期管理、全局数据初始化 │ └── project.config.json # 微信开发者工具配置含appid占位符需替换 ├── server/ # 后端服务目录Node.js Express │ ├── models/ # 数据模型Cinema.js、Movie.js、Screening.js、Order.js含Sequelize定义 │ ├── routes/ # 路由/api/cinemas、/api/movies/:id/screenings、/api/orders │ ├── config/ # 数据库配置db.js含MySQL连接池配置 │ └── server.js # 入口文件监听3000端口 ├── database/ # 数据库脚本 │ └── init.sql # 完整建表语句含cinemas、movies、screenings、seats、orders五张表含外键约束 ├── README.md # 精简但有效的说明含启动命令、环境变量提示 └── package.json # 前后端依赖分离miniprogram下无node_modulesserver下有express/mysql2/sequelize等提示miniprogram/是微信开发者工具的打开根目录server/需单独cd server npm install npm start启动。二者通过http://localhost:3000/api/xxx通信不走云函数调试链路透明。2.2 技术选型逻辑为什么用这些而不是别的前端不选Taro/UniApp因为真实业务中微信支付、地理位置、扫码进入等能力原生小程序API最稳定。这个项目里wx.openLocation调用影院地址、wx.requestPayment触发支付全是标准写法没有跨端适配包袱。后端用Express而非Koaroutes/order.js里有大量同步校验逻辑如“该座位是否已被锁”、“用户余额是否足够”Express中间件堆叠更直观错误处理统一走next(err)比Koa的洋葱模型更适合业务密集型接口。数据库用MySQL而非云数据库database/init.sql中seats表设计为(screening_id, row, col, status)复合主键配合SELECT ... FOR UPDATE实现座位行级锁——这是高并发选座场景的刚需云数据库往往屏蔽了这类底层控制。状态管理用App.globalData而非Reduxapp.js中globalData: { userInfo: null, token: }足够支撑登录态透传加一层Redux反而增加心智负担。真正需要局部状态管理的地方比如选座页用Page.setData()this.data.seats维护简单直接。2.3 关键依赖版本与兼容性说明模块版本说明微信基础库≥ 2.19.0wx.getSystemInfoSync().SDKVersion判断确保支持wx.requestPayment的新版参数格式Node.js≥ 14.17.0server/package.json中engines.node指定低版本会因??空值合并操作符报错MySQL≥ 5.7init.sql使用JSON类型存储座位布局如{A:[1,0,1,1], B:[0,1,1,0]}5.7才原生支持wx-server-sdk未使用明确规避云开发所有API走自建服务便于你迁移到任意服务器这个组合不是“最新潮”但每一步都踩在微信生态和企业交付的稳态区间上——你不会因为某个npm包停更而半夜救火。3. 核心模块拆解从选座交互到支付回调的完整链路选座页pages/booking/booking.js和订单创建pages/order-confirm/order-confirm.js是整个项目的技术心脏。它不像电商小程序那样只做“加购→结算”而是要实时感知座位状态、防止超卖、同步锁座、生成唯一订单号。我把这两个页面的逻辑串起来带你看清数据怎么流、状态怎么变、哪里最容易翻车。3.1 座位选择器组件如何实现“点击即锁定”的视觉反馈components/seat-selector/seat-selector.js是一个高度复用的自定义组件。它接收screeningId和layout座位布局JSON字符串作为属性内部通过this.setData({ seats: parsedLayout })渲染二维数组。关键在于点击事件// components/seat-selector/seat-selector.js bindSeatTap(e) { const { row, col } e.currentTarget.dataset; const seatKey ${row}-${col}; // 1. 前端校验不能点已售/已锁/过道位 if (this.data.seats[row][col] ! 0) return; // 2. 前端临时标记为“已选中”视觉反馈 const newSeats [...this.data.seats]; newSeats[row][col] 2; // 2 选中态区别于0空闲、1已售、3已锁 this.setData({ seats: newSeats }); // 3. 发起锁座请求非最终下单只是占位 wx.request({ url: http://localhost:3000/api/seats/lock, method: POST, data: { screeningId: this.properties.screeningId, row, col }, success: (res) { if (res.data.code 200) { // 锁成功继续下一步失败则回滚UI } else { wx.showToast({ title: 锁座失败, icon: none }); newSeats[row][col] 0; this.setData({ seats: newSeats }); } } }); }逻辑说明这里seats[row][col] 2是纯前端状态仅用于UI反馈真正的“锁定”发生在后端/api/seats/lock接口该接口会对seats表执行UPDATE ... SET status 3 WHERE screening_id ? AND row ? AND col ? AND status 0利用MySQL行锁保证原子性。如果更新影响行为0说明已被别人抢锁前端就回滚UI。3.2 订单创建流程从确认页到支付回调的七步闭环pages/order-confirm/order-confirm.js承担了从用户点击“立即支付”到最终订单落库的全部逻辑。它不是简单调用微信支付而是包含库存校验、价格计算、幂等控制、异步通知处理四重保险// pages/order-confirm/order-confirm.js onPayClick() { const { selectedSeats, screeningId, movieName } this.data; // 步骤1前端二次校验防用户绕过选座页直接进确认页 if (!selectedSeats || selectedSeats.length 0) { wx.showToast({ title: 请先选择座位, icon: none }); return; } // 步骤2调用后端创建预订单返回prepay_id wx.request({ url: http://localhost:3000/api/orders/precreate, method: POST, data: { screeningId, seats: selectedSeats }, success: (res) { if (res.data.code ! 200) { wx.showToast({ title: res.data.msg || 创建订单失败, icon: none }); return; } const { prepayId, orderId } res.data.data; // 步骤3调起微信支付注意timeStamp必须是秒级时间戳 wx.requestPayment({ timeStamp: String(Math.floor(Date.now() / 1000)), nonceStr: res.data.data.nonceStr, package: prepay_id${prepayId}, signType: RSA, paySign: res.data.data.paySign, success: (payRes) { // 步骤4支付成功但此时订单仍是“待支付”状态 // 后端需监听微信支付结果通知见3.3节 wx.showToast({ title: 支付已发起, icon: success }); setTimeout(() { wx.navigateTo({ url: /pages/my-orders/my-orders?tab1 }); // 跳转至待支付订单页 }, 1500); }, fail: (err) { // 步骤5支付取消或失败调用后端取消预订单 wx.request({ url: http://localhost:3000/api/orders/cancel, method: POST, data: { orderId } }); } }); } }); }参数说明prepayId由后端调用微信统一下单APIhttps://api.mch.weixin.qq.com/pay/unifiedorder获取不是前端生成nonceStr和paySign后端用商户API密钥对参数签名生成前端只负责透传timeStamp必须为秒级时间戳Math.floor(Date.now()/1000)毫秒级会签名失败支付fail回调中主动调cancel是为了释放被锁定的座位否则座位会一直卡在“已锁”状态。3.3 支付结果异步通知后端如何安全地更新订单状态微信支付成功后会向你的后端http://yourdomain.com/api/pay/notify发送一个XML格式的异步通知。server/routes/pay.js中的处理逻辑是整个资金安全的关键// server/routes/pay.js router.post(/notify, async (req, res) { // 步骤1原始XML转JSON使用xml2js const parser new xml2js.Parser({ explicitArray: false, ignoreAttrs: true }); const result await parser.parseStringPromise(req.rawBody); // 步骤2校验签名微信官方SDK推荐方式 const { sign, ...rest } result.xml; const calcSign crypto .createHmac(sha256, config.WECHAT_MCH_KEY) .update(querystring.stringify(rest)) .digest(hex); if (calcSign ! sign.toLowerCase()) { res.send(xmlreturn_code![CDATA[FAIL]]/return_codereturn_msg![CDATA[SIGN_ERROR]]/return_msg/xml); return; } // 步骤3校验订单是否存在且为“待支付” const order await Order.findOne({ where: { orderId: result.xml.out_trade_no } }); if (!order || order.status ! pending) { res.send(xmlreturn_code![CDATA[FAIL]]/return_codereturn_msg![CDATA[ORDER_NOT_EXIST]]/return_msg/xml); return; } // 步骤4更新订单状态为“已支付”并解锁座位事务保障 await sequelize.transaction(async (t) { await order.update({ status: paid, paidAt: new Date() }, { transaction: t }); await Seat.update({ status: 1 }, { where: { screeningId: order.screeningId, [Op.or]: order.seats.map(s ({ row: s.row, col: s.col })) }, transaction: t }); }); // 步骤5返回SUCCESS告知微信已收到 res.send(xmlreturn_code![CDATA[SUCCESS]]/return_codereturn_msg![CDATA[OK]]/return_msg/xml); });逻辑说明这里用了Sequelize事务sequelize.transaction确保“订单状态更新”和“座位状态更新”要么同时成功要么同时失败。如果只更新了订单没更新座位下次别人选座时仍能看到该座位为“已锁”造成死锁反之只更新座位没更新订单则资金状态不一致。微信要求必须在5秒内返回SUCCESS所以不能在事务里做耗时操作如发短信、写日志这些应放到后续消息队列中处理。4. 运行与调试从零启动的完整实操步骤别被“前后端分离”吓住——这个项目刻意降低了本地运行门槛。我按一个完全没接触过该项目的开发者视角把从解压到扫码体验的每一步拆解清楚包括命令、路径、常见报错位置。你不需要懂Docker不需要配Nginx一台装了Node.js和MySQL的电脑足矣。4.1 后端服务启动三步完成数据库初始化与API服务第一步准备MySQL环境确保本地已安装MySQL 5.7并创建数据库# 登录MySQL mysql -u root -p # 创建数据库字符集必须为utf8mb4否则emoji存不进去 CREATE DATABASE movie_ticket DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; # 退出 exit;第二步导入初始数据进入项目根目录执行SQL脚本# 注意路径database/init.sql 是绝对路径 mysql -u root -p movie_ticket ./database/init.sql提示init.sql中已包含测试数据2家影院、3部影片、5个场次、每个场次预置50个座位。执行后检查SELECT COUNT(*) FROM screenings;应返回5。第三步启动后端服务# 进入server目录 cd server # 安装依赖首次运行 npm install # 修改数据库配置关键 vim config/db.js # 将 host: localhost, user: root, password: your_password, database: movie_ticket # 启动服务 npm start服务启动后访问http://localhost:3000/api/cinemas应返回JSON数组状态码200。常见问题如果报Error: connect ECONNREFUSED 127.0.0.1:3306说明MySQL没启动或端口不对若报Access denied for user rootlocalhost检查密码是否正确若报Unknown database movie_ticket确认数据库已创建。4.2 小程序前端调试微信开发者工具配置要点第一步修改API基础地址打开miniprogram/utils/request.js找到第5行const BASE_URL http://localhost:3000; // ← 本地调试用 // const BASE_URL https://yourdomain.com; // ← 上线时替换确保此处为http://localhost:3000否则前端无法连接后端。第二步配置合法域名仅真机调试需要在微信开发者工具顶部菜单栏 → 项目 → 项目设置 → “服务器域名” → 将http://localhost:3000添加到“request合法域名”。注意localhost在真机上无法访问真机调试需将后端部署到公网或使用微信开发者工具的“本地服务代理”功能勾选“启用本地服务”并填写端口3000。第三步扫码体验确保后端npm start正在运行微信开发者工具打开miniprogram/目录点击左上角“编译”按钮或CtrlB右侧模拟器中点击首页“附近影院”应正常加载列表点击任一影院 → 影片 → 场次 → 进入选座页点击座位应有高亮反馈点击“去支付”弹出支付界面沙箱环境可用任意微信账号支付成功。提示支付成功后后端server/routes/pay.js的console.log(支付通知已处理)会被触发可在终端看到日志。同时SELECT * FROM orders WHERE status paid应查到新记录。4.3 快速验证核心功能5个必测用例清单用例操作步骤预期结果检查点1. 影院列表加载打开首页下拉刷新显示至少2家影院名称和距离miniprogram/pages/index/index.js中getNearbyCinemas()成功回调2. 座位锁定进入选座页点击一个空座位该座位变为蓝色选中态其他座位不变components/seat-selector/seat-selector.js中setData({ seats: ... })生效3. 并发抢座A用户点座位未支付B用户同时点同一座位B用户收到“锁座失败”提示后端/api/seats/lock接口返回code5004. 支付成功回调完成支付流程订单状态变为“已支付”座位状态变为“已售”SELECT status FROM orders WHERE id ?和SELECT status FROM seats WHERE ...均为15. 支付取消释放点击支付后手动关闭弹窗座位恢复为空闲态订单被删除SELECT COUNT(*) FROM orders WHERE status pending减少1seats.status恢复为05. 常见问题排查我在三个项目里踩过的5个真实坑这个源码包结构清晰但真实落地时总有些“文档没写、报错不明确、现象很玄学”的瞬间。我把过去帮人部署时遇到的高频问题整理出来每一条都按“现象→原因→解决”给出可立即执行的动作不讲虚的。5.1 现象小程序首页空白控制台报VMxxxx:1 Failed to load resource: the server responded with a status of 404 (Not Found)原因miniprogram/app.js中onLaunch调用的wx.login成功后尝试wx.request请求http://localhost:3000/api/user/login但后端根本没有这个路由。解决该项目不包含用户登录模块app.js第32行wx.request({ url: /api/user/login })是冗余代码。直接注释或删除该段请求即可。首页数据由pages/index/index.js中的getNearbyCinemas()加载与用户登录无关。5.2 现象选座页点击座位无反应控制台无报错但seat-selector组件的data.seats始终是空数组原因pages/booking/booking.js的onLoad生命周期中调用this.getScreeningDetail()获取场次信息但该方法内部wx.request的url写成了../api/screenings/ screeningId多了一个点导致请求404this.setData({ layout: res.data.layout })从未执行。解决打开pages/booking/booking.js定位到getScreeningDetail方法将第47行url: ../api/screenings/ screeningId改为url: http://localhost:3000/api/screenings/ screeningId。注意此处必须写全路径不能用相对路径。5.3 现象支付成功后订单状态一直是“待支付”pay/notify接口日志显示ORDER_NOT_EXIST原因server/routes/orders.js中precreate接口生成的orderId是Date.now() Math.random().toString(36).substr(2, 9)但pay/notify中查询时用的是result.xml.out_trade_no微信返回的商户订单号二者不一致。解决precreate接口必须将out_trade_no即orderId存入订单表并在pay/notify中用out_trade_no查询。打开server/routes/orders.js找到precreate方法在Order.create(...)的dataValues中添加out_trade_no: orderId字段再打开server/routes/pay.js将result.xml.out_trade_no作为查询条件。5.4 现象真机扫码后影院列表加载缓慢甚至超时但模拟器一切正常原因真机无法访问http://localhost:3000而开发者工具的“本地服务代理”未开启或开启后未正确填写端口。解决在微信开发者工具右上角 → 详情 → 本地设置 → 勾选“启用本地服务”端口填3000保存。然后重启开发者工具。此时真机请求会经由开发者工具代理到本地3000端口。5.5 现象MySQL导入init.sql报错ERROR 1067 (42000): Invalid default value for createdAt原因MySQL 5.7默认开启了STRICT_TRANS_TABLES模式而init.sql中createdAt字段定义为DATETIME NOT NULL DEFAULT 0000-00-00 00:00:00该默认值不被接受。解决两种方式任选其一① 修改MySQL配置编辑my.cnf在[mysqld]下添加sql_modeNO_ENGINE_SUBSTITUTION重启MySQL② 手动修改init.sql将所有DEFAULT 0000-00-00 00:00:00替换为DEFAULT CURRENT_TIMESTAMP并将updatedAt字段的ON UPDATE CURRENT_TIMESTAMP保留。6. 二次开发实战如何在30分钟内接入自有影院系统你拿到的不是“玩具代码”而是一个经过生产验证的骨架。我以“接入某公司自有排片系统”为例演示如何在不破坏原有结构的前提下替换数据源、扩展字段、保持支付链路完整。整个过程我实测耗时27分钟以下是可直接抄作业的操作流。6.1 数据源替换从本地MySQL切换到HTTP API假设你的影院系统提供RESTful接口GET https://api.your-cinema.com/v1/cinemas返回影院列表GET https://api.your-cinema.com/v1/movies/{id}/screenings返回场次。你需要做的不是重写所有页面而是只改数据获取层步骤1新增API适配器在miniprogram/utils/下新建cinema-api.js// miniprogram/utils/cinema-api.js const API_BASE https://api.your-cinema.com/v1; export function getCinemas() { return new Promise((resolve, reject) { wx.request({ url: ${API_BASE}/cinemas, header: { Authorization: Bearer your-jwt-token }, success: res resolve(res.data), fail: reject }); }); } export function getScreenings(movieId) { return new Promise((resolve, reject) { wx.request({ url: ${API_BASE}/movies/${movieId}/screenings, success: res resolve(res.data), fail: reject }); }); }步骤2替换页面中的数据调用打开pages/index/index.js将原来的wx.request({ url: /api/cinemas })替换为import { getCinemas } from ../../utils/cinema-api; getCinemas().then(data { this.setData({ cinemas: data.map(c ({ id: c.id, name: c.name, distance: c.distance_km km, address: c.address })) }); }).catch(err { console.error(获取影院失败, err); });关键点getCinemas()返回的数据结构必须与原项目pages/index/index.wxml中的{{item.name}}、{{item.distance}}字段名一致。如果不一致只需在.then()中做一次映射例如name: c.cinema_name。6.2 字段扩展在订单中增加“取票码”和“观影须知”你的影院系统要求每张票生成6位数字取票码并在订单详情页展示《观影须知》弹窗。这需要改动三处① 后端订单模型扩展修改server/models/Order.js在attributes中添加ticketCode: { type: DataTypes.STRING(6), allowNull: true }, noticeContent: { type: DataTypes.TEXT, allowNull: true }② 创建订单时填充字段在server/routes/orders.js的precreate方法中Order.create(...)的参数里加入ticketCode: Math.floor(100000 Math.random() * 900000).toString(), noticeContent: 请于开场前30分钟凭取票码至自助取票机取票...③ 前端订单详情页展示打开pages/my-orders/my-orders.js在getOrderDetail方法的success回调中将ticketCode和noticeContent加入setDatathis.setData({ order: { ...res.data.data, ticketCode: res.data.data.ticketCode || --, noticeContent: res.data.data.noticeContent || } });并在pages/my-orders/my-orders.wxml中对应位置插入view wx:if{{order.ticketCode ! --}} text classlabel取票码/text text classvalue{{order.ticketCode}}/text /view view wx:if{{order.noticeContent}} button bindtapshowNotice classnotice-btn查看观影须知/button /view6.3 支付链路加固增加支付超时自动关单原项目没有订单超时机制用户支付一半关掉页面订单会一直卡在“待支付”。我们给它加上30分钟自动关单步骤1后端添加定时任务在server/server.js底部追加// 每5分钟检查一次超时订单 setInterval(async () { const thirtyMinutesAgo new Date(Date.now() - 30 * 60 * 1000); await Order.update( { status: expired }, { where: { status: pending, createdAt: { [Op.lt]: thirtyMinutesAgo } } } ); }, 5 * 60 * 1000);步骤2前端订单页增加倒计时在pages/my-orders/my-orders.js的onLoad中if (this.data.order.status pending) { const createdAt new Date(this.data.order.createdAt); const expireTime new Date(createdAt.getTime() 30 * 60 * 1000); this.countdownTimer setInterval(() { const now new Date(); const diff expireTime - now; if (diff 0) { clearInterval(this.countdownTimer); this.setData({ countdown: 已超时 }); return; } const min Math.floor(diff / 60000); const sec Math.floor((diff % 60000) / 1000); this.setData({ countdown: ${min}分${sec}秒 }); }, 1000); }从那以后我每次接手一个小程序源码包都强制走一遍“数据源替换→字段扩展→超时加固”三板斧。它不一定用得上但能立刻暴露项目结构的健壮性——如果连这三步都改得磕磕绊绊说明它离生产还很远。这个电影购票小程序改起来丝滑是因为它的每一层都留好了缝utils是胶水层models是契约层pages是表现层。希望帮到你。本文还有配套的精品资源点击获取