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

简介：这是一份面向微信小程序初学者与进阶开发者的电影购票类实战源码，聚焦轻量级生活服务场景，帮助开发者掌握小程序核心开发流程与第三方服务集成方法。资源包含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_modules，server下有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而非Koa：routes/order.js里有大量同步校验逻辑（如“该座位是否已被锁”、“用户余额是否足够”），Express中间件堆叠更直观，错误处理统一走next(err)，比Koa的洋葱模型更适合业务密集型接口。
• 数据库用MySQL而非云数据库：database/init.sql中seats表设计为(screening_id, row, col, status)复合主键，配合SELECT ... FOR UPDATE实现座位行级锁——这是高并发选座场景的刚需，云数据库往往屏蔽了这类底层控制。
• 状态管理用App.globalData而非Redux：app.js中globalData: { userInfo: null, token: '' }足够支撑登录态透传，加一层Redux反而增加心智负担。真正需要局部状态管理的地方（比如选座页），用Page.setData()+this.data.seats维护，简单直接。

2.3 关键依赖版本与兼容性说明

这个组合不是“最新潮”，但每一步都踩在微信生态和企业交付的稳态区间上——你不会因为某个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?tab=1` }); // 跳转至待支付订单页 }, 1500); }, fail: (err) => { // 步骤5：支付取消或失败，调用后端取消预订单 wx.request({ url: 'http://localhost:3000/api/orders/cancel', method: 'POST', data: { orderId } }); } }); } }); }

参数说明：

• prepayId：由后端调用微信统一下单API（https://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('<xml><return_code><![CDATA[FAIL]]></return_code><return_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('<xml><return_code><![CDATA[FAIL]]></return_code><return_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('<xml><return_code><![CDATA[SUCCESS]]></return_code><return_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 'root'@'localhost'，检查密码是否正确；若报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/目录；
• 点击左上角“编译”按钮（或Ctrl+B）；
• 右侧模拟器中点击首页“附近影院”，应正常加载列表；
• 点击任一影院 → 影片 → 场次 → 进入选座页，点击座位应有高亮反馈；
• 点击“去支付”，弹出支付界面（沙箱环境，可用任意微信账号支付成功）。

提示：支付成功后，后端server/routes/pay.js的console.log('支付通知已处理')会被触发，可在终端看到日志。同时SELECT * FROM orders WHERE status = 'paid'应查到新记录。

4.3 快速验证核心功能：5个必测用例清单

5. 常见问题排查：我在三个项目里踩过的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（多了一个点），导致请求404，this.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_mode=NO_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加入setData：

this.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 class="label">取票码：</text> <text class="value">{{order.ticketCode}}</text> </view> <view wx:if="{{order.noticeContent}}"> <button bindtap="showNotice" class="notice-btn">查看观影须知</button> </view>

6.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是表现层。希望帮到你。

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