企业官网建设流程全解析

简介：本资源是一套完整的微信小程序电影购票系统源码，面向小程序初学者与进阶开发者，聚焦轻量级生活服务类应用的实战开发。项目不仅实现影院选择、场次查询、座位可视化选座、微信支付等核心购票流程，还集成外卖模块（如atakeaway子目录），拓展餐饮配套服务能力，适合学习多业务场景融合开发。压缩包共92个文件，含14个JS逻辑文件（处理页面交互与API调用）、10个WXML结构文件（页面骨架）、10个WXSS样式文件（响应式界面设计）、33个JPG/PNG图片资源（UI素材）及7个JSON配置文件（路由与页面注册），整体仅394KB，轻量易读。已有6450人学习下载，代码结构清晰，包含完整tabBar导航、mine个人中心、order订单管理等标准模块，附带app.js全局逻辑与utils工具函数，便于理解小程序生命周期、数据绑定与第三方API对接实践。

1. 这不是个“能跑就行”的Demo：一个真实可上线的微信小程序电影购票系统，从选座逻辑到支付闭环全在源码里

上周帮某高校实验室做课程设计评审，看到学生交上来一个“电影购票小程序”，点开首页就卡顿、选座后价格不更新、点击支付直接跳404——结果一查，用的是网上随便搜的“仿猫眼UI模板”，连wx.requestPayment都没配签名密钥。而你手上的这份「微信小程序源码电影购票小程序」，是某公司2023年实际交付过3家小型影城的真实项目压缩包：它不只渲染海报和列表，而是完整实现了影院排片管理（含多厅、多场次、座位状态实时锁）、用户选座防重（前端校验+后端幂等扣减）、微信支付回调验签与订单状态机驱动、以及最关键的——座位图渲染与交互逻辑完全解耦，支持任意尺寸影厅（5×8 / 7×12 / 弧形厅）动态生成。如果你正卡在“怎么让选座不翻车”“支付成功后订单状态总对不上”“后台改了排期前端不刷新”这些具体问题上，这份源码就是你该打开的第一个工程级参考。它不是教学玩具，是压过线、跑过量、修过凌晨三点线上Bug的生产级代码。

2. 项目结构与技术栈：看清骨架再动手，别一上来就改app.js

这个项目不是“小程序模板套壳”，它的目录结构清晰暴露了真实业务分层。我解压后第一件事就是用tree -L 3看清层级（Windows 用户可用dir /s /b），核心结构如下：

├── miniprogram/ # 小程序主包（非云开发，纯客户端+自建API） │ ├── components/ # 自研高复用组件（非npm引入） │ │ ├── seat-selector/ # 座位选择器：核心！含状态管理、拖拽选座、禁售区标记 │ │ ├── movie-card/ # 电影卡片：带评分、热映标识、预售倒计时 │ │ └── pay-result/ # 支付结果页：状态机驱动（pending → success/fail → retry） │ ├── pages/ │ │ ├── index/ # 首页：影院列表 + 热门电影轮播 │ │ ├── cinema/ # 影院详情页：排片日历 + 场次Tab │ │ ├── schedule/ # 场次页：座位图 + 座位状态（已售/锁定/可选） │ │ ├── order/ # 订单确认页：座位快照、价格明细、优惠券联动 │ │ └── my/ # 个人中心：订单列表（含状态过滤）、观影历史 │ ├── utils/ │ │ ├── request.js # 封装wx.request：自动添加token、错误统一拦截、loading控制 │ │ ├── seat-utils.js # 座位计算核心：将后端返回的"1,2,5-8"字符串解析为二维坐标数组 │ │ └── payment.js # 支付工具：统一下单、签名生成、回调验签逻辑 │ └── app.js # 全局状态：用户登录态、购物车（内存存储，未用云数据库） ├── server/ # 后端Node.js Express服务（非云函数，需自行部署） │ ├── routes/ │ │ ├── cinema.js # 影院/排片接口（GET /cinemas, GET /schedules/:date） │ │ ├── seat.js # 座位状态接口（GET /seats/:scheduleId, POST /seats/lock） │ │ └── order.js # 订单接口（POST /orders, POST /orders/:id/pay） │ └── models/ # 简单数据模型（MongoDB连接、Schema定义） └── project.config.json # 关键配置：appid、服务器域名（需替换为你的HTTPS地址）

提示：这不是“云开发一键部署”项目。server/目录是独立Express服务，必须部署到自有服务器（或腾讯云CVM），且必须配置HTTPS域名并加入小程序后台的“request合法域名”白名单，否则所有网络请求会静默失败——这是新手90%卡住的第一步。

2.1 前端技术选型：为什么不用WXML原生写死座位图？

很多教程教你在WXML里用<view wx:for="{{seats}}">渲染座位，但这份源码的components/seat-selector/组件彻底放弃了这种写法。原因很现实：当影厅是7×12（84个座位）时，WXML节点数暴增，iOS低端机首次渲染卡顿超2秒；更致命的是，无法实现“拖拽连续选座”（比如按住左键从A3拉到C5自动选中矩形区域）。它的解法是——Canvas动态绘制。

核心逻辑在seat-selector/index.js的drawSeats()方法：

// components/seat-selector/index.js drawSeats() { const query = wx.createSelectorQuery().in(this); query.select('#seatCanvas').fields({ node: true, size: true }).exec((res) => { const canvas = res[0].node; const ctx = canvas.getContext('2d'); const dpr = wx.getSystemInfoSync().pixelRatio; canvas.width = res[0].width * dpr; canvas.height = res[0].height * dpr; ctx.scale(dpr, dpr); // 1. 绘制影厅轮廓（梯形/矩形，由后端返回shape字段决定） this.drawHallOutline(ctx); // 2. 动态计算每个座位坐标（关键！） const seatSize = Math.min(res[0].width, res[0].height) * 0.06; const paddingX = (res[0].width - this.seatCols * seatSize) / 2; const paddingY = 40; // 距离顶部距离 this.seats.forEach((seat, index) => { const row = Math.floor(index / this.seatCols); const col = index % this.seatCols; const x = paddingX + col * seatSize + seatSize / 2; const y = paddingY + row * seatSize + seatSize / 2; // 根据seat.status渲染不同颜色（0:可选, 1:已售, 2:锁定, 3:禁售） ctx.fillStyle = this.getStatusColor(seat.status); ctx.beginPath(); ctx.arc(x, y, seatSize / 2.5, 0, 2 * Math.PI); ctx.fill(); // 座位编号文字（如 A1, B5） ctx.fillStyle = '#333'; ctx.font = 'bold 12px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(seat.code, x, y); }); }); }

参数说明：

• this.seatCols：由后端/seats/:scheduleId接口返回的cols字段决定，非写死；
• seat.code：后端返回的座位编码（如"A1"），前端不做任何拼接，避免A10被误认为A1和0；
• getStatusColor()：状态色值表硬编码在组件内，修改只需改这里，不影响布局逻辑。

为什么这比WXML方案强？
Canvas绘制84个圆点耗时<50ms（实测iPhone 7），而WXML渲染84个<view>平均耗时320ms；拖拽选座时，Canvas可监听touchmove事件实时重绘选中区域，WXML需反复setData触发diff，卡顿明显。这是性能取舍，不是炫技。

2.2 后端核心接口设计：排片与座位状态如何解耦？

server/routes/schedule.js和seat.js是业务中枢。关键设计在于：排片信息（时间、影厅、影片）与座位状态（哪个座位被谁锁了）完全分离。这样做的好处是——影院管理员改排期（比如把19:00场提前到18:30）时，无需清空历史座位锁，新场次自动继承原影厅座位配置。

GET /api/seats/:scheduleId返回结构示例：

{ "scheduleId": "sch_20231015_001", "hallName": "VIP厅", "totalSeats": 84, "cols": 7, "rows": 12, "disabledZones": ["A1-A3", "G10-G12"], // 禁售区（设备故障/维修） "lockedSeats": ["A5", "B2", "C7"], // 当前被其他用户锁定的座位（15分钟有效期） "soldSeats": ["A1", "A2", "D4", "E5"] // 已支付成功的座位 }

注意disabledZones字段：它不是简单数组，而是支持范围表达式（A1-A3表示A行1至3列）。解析逻辑在utils/seat-utils.js的parseDisabledZones()函数中，用正则匹配并转换为坐标数组，供Canvas绘制时跳过。

2.3 支付闭环：为什么你的wx.requestPayment总失败？

支付模块是翻车重灾区。这份源码的utils/payment.js把微信支付拆成三步，每步都有明确状态记录：

1. 统一下单（前端调用/api/orders）：传入用户选中的座位ID、价格、优惠券ID，后端生成prepay_id并存入订单表；
2. 前端调起支付（wx.requestPayment）：用prepay_id+ 时间戳 + 随机串 + 签名调起；
3. 支付结果异步通知（后端接收微信回调）：验签通过后，更新订单状态为paid，并主动调用座位锁释放接口（防止用户支付成功但前端没收到回调导致座位一直被锁）。

关键代码在server/routes/order.js的支付回调处理：

// server/routes/order.js router.post('/notify', async (req, res) => { const xmlData = await getRawBody(req); // 获取原始XML const data = parseXML(xmlData); // 解析为JS对象 // 1. 验签（必须！否则黑客可伪造支付成功） const sign = data.sign; delete data.sign; const calcSign = generateSign(data, 'your_mch_key_here'); // 商户密钥 if (sign !== calcSign) { return res.send('<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[SIGN_ERROR]]></return_msg></xml>'); } // 2. 更新订单状态 await Order.findByIdAndUpdate(data.out_trade_no, { status: 'paid', transactionId: data.transaction_id, paidAt: new Date() }); // 3. 释放对应场次的锁定座位（关键！） const order = await Order.findById(data.out_trade_no); await SeatLock.deleteMany({ scheduleId: order.scheduleId, seatCode: { $in: order.seats } }); // 4. 返回成功XML（微信要求） res.send('<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[OK]]></return_msg></xml>'); });

血泪经验：generateSign()必须严格按微信文档拼接参数（key=value&key=value&key=...&key=商户密钥），且所有参数值需URL编码。我曾因漏掉body字段的编码，调试3小时才发现验签失败。

3. 运行起来：5步走通本地调试到真机预览

别急着改代码，先确保环境能跑通。以下步骤基于 macOS / Windows 10+，Node.js v16+，微信开发者工具 Stable 1.06.2308310。

3.1 后端服务启动（必须先跑通）

# 进入server目录 cd server # 安装依赖（注意：用npm，非yarn） npm install # 修改配置：复制config.example.js为config.js，填入你的MongoDB连接串和微信支付参数 cp config.example.js config.js # 编辑config.js，重点改： # - dbUrl: "mongodb://localhost:27017/movie-ticket" # - mchId: "1900000109" （你的微信商户号） # - mchKey: "your_mch_key_here" （32位密钥，在微信商户平台获取） # 启动服务（默认端口3000） npm start # 验证：浏览器访问 http://localhost:3000/api/health 应返回 {"status":"ok"}

注意：MongoDB需提前安装并运行。若无本地MongoDB，可临时改用内存数据库（如npm install mongodb-memory-server），但仅限调试，勿用于生产。

3.2 小程序前端配置：域名、AppID、登录态

打开微信开发者工具，导入miniprogram/目录。关键配置在project.config.json：

{ "description": "电影购票小程序", "setting": { "urlCheck": false, // 开发时关闭域名校验（上线必须true！） "es6": true, "enhance": true, "postcss": true, "minified": false, "newFeature": true }, "compileType": "miniprogram", "libVersion": "2.28.2", "appid": "wx1234567890abcdef", // 替换为你自己的小程序AppID "projectname": "movie-ticket", "condition": { "search": { "current": -1, "list": [] } }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "permission": { "scope.userLocation": { "desc": "获取位置用于推荐附近影院" } } }

必须修改的三项：

• appid：在 微信公众平台 > 开发管理 > 开发者ID处获取；
• request合法域名：在公众平台 > 开发管理 > 开发者设置 > 服务器域名，添加你的后端域名（如https://api.yourdomain.com），必须HTTPS，且不能带端口；
• socket合法域名：同上，若用WebSocket（本项目未用，可忽略）。

3.3 模拟登录与数据初始化

小程序启动时会检查app.js中的globalData.userInfo。为快速验证，手动注入测试用户：

// miniprogram/app.js App({ globalData: { userInfo: null, // 添加测试用户（上线时删除！） testUser: { openid: 'oAbc1234567890DefGhIjKlMnOpQrStUv', nickname: '测试用户', avatarUrl: 'https://example.com/avatar.png' } }, onLaunch() { // 开发时直接赋值，绕过登录 if (process.env.NODE_ENV === 'development') { this.globalData.userInfo = this.globalData.testUser; } } })

提示：process.env.NODE_ENV在微信开发者工具中需手动设置。点击工具栏“详情” > “本地设置” > 勾选“环境变量”，添加NODE_ENV=development。

3.4 真机预览：扫码前必做三件事

1. 检查utils/request.js中的 baseURL：

   // miniprogram/utils/request.js const BASE_URL = 'https://api.yourdomain.com'; // 开发时可先用 http://localhost:3000

   真机预览时，手机和电脑必须在同一局域网，且BASE_URL改为电脑IP（如http://192.168.1.100:3000），不能用 localhost。

2. 开启开发者工具的“不校验合法域名”：
   在开发者工具右上角“详情” > “本地设置” > 勾选“不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书”。（上线前必须取消！）

3. 重启开发者工具：
   修改配置后，必须完全退出并重开，否则缓存可能导致配置不生效。

完成以上，点击“预览”生成二维码，用真机微信扫码即可看到首页。若空白，请打开真机微信的“调试”功能（摇一摇），查看Console报错——90%是域名未配置或后端未启动。

3.5 首页数据加载失败？排查这四个点

• 现象：首页轮播图不显示，影院列表为空
  原因：miniprogram/pages/index/index.js的onLoad中调用getHotMovies()，该方法依赖utils/request.js的get请求，若BASE_URL错误或后端未运行，请求超时。
  解决：在开发者工具Network面板看GET /api/movies/hot是否返回200；若为0，检查后端日志是否报MongoDB连接失败。

• 现象：点击影院进入空白页，Console报Cannot read property 'map' of undefined
  原因：pages/cinema/cinema.js的getSchedules()成功返回了数据，但data.schedules是null（后端排片接口未返回数据）。
  解决：访问http://localhost:3000/api/schedules?cinemaId=xxx，确认返回非空数组；若为空，需在MongoDB中插入测试排片数据（server/scripts/init-data.js提供脚本）。

• 现象：座位图渲染错位，A1显示在右下角
  原因：components/seat-selector/index.js的this.seatCols未正确赋值，通常因后端/seats/:id接口返回的cols字段缺失或为0。
  解决：在Canvas绘制前加console.log('cols:', this.seatCols)，确认值有效；检查后端接口是否返回了cols字段。

• 现象：点击支付后弹出“支付验证失败”
  原因：utils/payment.js中的generateSign()使用的mchKey与微信商户平台不一致，或timeStamp未转为字符串。
  解决：打印generateSign()的输入参数和输出签名，与微信官方签名工具对比；确保timeStamp是字符串类型（String(Date.now())）。

4. 核心模块深度拆解：座位选择器的防重逻辑与状态同步

components/seat-selector/是整个项目最易出错也最值得深挖的模块。它表面是“画几个圆点”，实则承载了高并发下的数据一致性保障。我们一层层剥开。

4.1 前端防重：为什么setData不能直接更新座位状态？

初学者常犯的错误：用户点击A1，立刻this.setData({ selectedSeats: ['A1'] })，然后调用锁座接口。问题在于——如果用户快速连点两次A1，前端会发出两个锁座请求，后端若无幂等控制，可能重复扣减库存。

这份源码的解法是：前端维护一个“待提交队列”，每次点击只推入队列，由统一的提交函数批量处理。

// components/seat-selector/index.js methods: { handleSeatClick(e) { const seatCode = e.currentTarget.dataset.code; const seat = this.seats.find(s => s.code === seatCode); // 1. 前端校验：已售/禁售座位不可点 if (seat.status === 1 || seat.status === 3) return; // 2. 加入待提交队列（而非立即setData） if (this.data.selectedSeats.includes(seatCode)) { // 取消选择 this.data.pendingRemoves.push(seatCode); } else { // 新增选择 this.data.pendingAdds.push(seatCode); } // 3. 重新渲染（此时selectedSeats未变，但pending队列已更新） this.updateSeatView(); }, submitSelection() { // 合并adds和removes，去重 const adds = [...new Set(this.data.pendingAdds)]; const removes = [...new Set(this.data.pendingRemoves)]; // 调用锁座接口（后端保证幂等） wx.request({ url: `${BASE_URL}/api/seats/lock`, method: 'POST', data: { scheduleId: this.data.scheduleId, adds, removes }, success: (res) => { if (res.data.code === 0) { // 成功：清空队列，更新本地状态 this.setData({ selectedSeats: [...new Set([...this.data.selectedSeats, ...adds])].filter(s => !removes.includes(s)) }); this.data.pendingAdds = []; this.data.pendingRemoves = []; } } }); } }

关键设计点：

• pendingAdds/pendingRemoves是内存数组，不触发视图更新，避免频繁setData；
• submitSelection()是显式调用（如点击“确定选座”按钮），而非点击即锁，给用户反悔机会；
• 后端/api/seats/lock接口必须实现幂等：对同一scheduleId+seatCode的多次adds请求，只执行一次锁操作。

4.2 后端幂等锁座：Redis原子操作保安全

server/routes/seat.js的锁座接口使用Redis实现毫秒级原子操作：

// server/routes/seat.js const redisClient = require('../utils/redis'); router.post('/lock', async (req, res) => { const { scheduleId, adds = [], removes = [] } = req.body; try { // 使用Redis pipeline批量操作，保证原子性 const pipeline = redisClient.pipeline(); // 对每个要添加的座位，执行：SETNX seat_lock:sch_123:A1 1 EX 900 adds.forEach(seatCode => { const key = `seat_lock:${scheduleId}:${seatCode}`; pipeline.setex(key, 900, '1'); // 15分钟过期 }); // 对每个要移除的座位，执行：DEL seat_lock:sch_123:A1 removes.forEach(seatCode => { const key = `seat_lock:${scheduleId}:${seatCode}`; pipeline.del(key); }); const results = await pipeline.exec(); // 统计成功数量（setex返回'OK'，del返回数字） const successCount = results.filter(r => r[1] === 'OK' || typeof r[1] === 'number').length; res.json({ code: 0, message: 'success', successCount }); } catch (err) { res.status(500).json({ code: -1, message: err.message }); } });

为什么不用数据库行锁？
MySQL行锁在高并发下有性能瓶颈，且锁粒度是整行（一个场次记录），而我们需要精确到单个座位。Redis的SETNX（set if not exists）天然适合分布式锁场景，且900秒过期可防死锁。

4.3 状态同步：前端如何知道“别人刚买了A1”？

座位状态不是静态的。用户A在手机选了A1，用户B在iPad上同时看到A1还是“可选”，这就产生了脏读。解决方案是——长轮询（Long Polling），而非WebSocket（降低后端复杂度）。

pages/schedule/schedule.js在页面显示时启动轮询：

// pages/schedule/schedule.js Page({ data: { seats: [], pollingTimer: null }, onLoad(options) { this.loadSeats(); this.startPolling(); }, startPolling() { // 每10秒拉一次最新座位状态 this.data.pollingTimer = setInterval(() => { this.loadSeats(); }, 10000); }, loadSeats() { wx.request({ url: `${BASE_URL}/api/seats/${this.data.scheduleId}`, success: (res) => { if (res.data.code === 0) { // 关键：只更新状态，不重置已选座位 const newSeats = res.data.data.seats.map(seat => { const existed = this.data.seats.find(s => s.code === seat.code); return { ...seat, // 保留用户已选状态（避免已选的A1被刷新成“已售”） status: existed?.isSelected ? 4 : seat.status // 4表示“用户已选但未提交” }; }); this.setData({ seats: newSeats }); } } }); }, onUnload() { // 页面卸载时清除定时器 if (this.data.pollingTimer) { clearInterval(this.data.pollingTimer); } } })

状态码约定（在seat-utils.js中定义）：

• 0: 可选
• 1: 已售
• 2: 已锁定（他人正在支付）
• 3: 禁售区
• 4: 本用户已选（前端标记，非后端状态）

这样，用户B看到的A1状态是实时的，而用户A自己选的座位不会被轮询覆盖，体验流畅。

5. 二次开发实战：接入优惠券系统与多语言支持

现在你已跑通整个流程，下一步是定制化。我以两个高频需求为例：接入优惠券、支持简体/繁体切换。它们不改变核心架构，但暴露了源码的扩展设计思想。

5.1 接入优惠券：三步嵌入，不碰核心支付逻辑

优惠券是典型的“订单前置增强”，不应侵入支付主干。源码预留了order/页面的扩展点。

第一步：后端新增优惠券接口
在server/routes/coupon.js中添加：

// server/routes/coupon.js const router = require('express').Router(); // 获取用户可用优惠券 router.get('/user/:userId', async (req, res) => { const coupons = await Coupon.find({ userId: req.params.userId, status: 'active', // 未使用 validFrom: { $lte: new Date() }, validTo: { $gte: new Date() } }).select('id name discountType discountValue minOrderAmount'); res.json({ code: 0, data: coupons }); }); // 校验优惠券是否可用（下单前调用） router.post('/validate', async (req, res) => { const { couponId, orderAmount } = req.body; const coupon = await Coupon.findById(couponId); if (!coupon || coupon.status !== 'active') { return res.json({ code: -1, message: '优惠券不可用' }); } if (orderAmount < coupon.minOrderAmount) { return res.json({ code: -1, message: '未达最低消费' }); } res.json({ code: 0, data: { finalAmount: orderAmount - coupon.discountValue, discount: coupon.discountValue } }); }); module.exports = router;

第二步：前端订单页集成
修改pages/order/order.js，在onLoad中加载优惠券：

// pages/order/order.js Page({ data: { coupons: [], selectedCoupon: null, orderAmount: 0, finalAmount: 0 }, onLoad() { this.loadCoupons(); this.calculateAmount(); // 计算原价 }, loadCoupons() { wx.request({ url: `${BASE_URL}/api/coupons/user/${this.data.userId}`, success: (res) => { this.setData({ coupons: res.data.data }); } }); }, selectCoupon(e) { const coupon = e.currentTarget.dataset.coupon; this.setData({ selectedCoupon: coupon }); this.calculateAmount(); }, calculateAmount() { let amount = this.data.orderAmount; if (this.data.selectedCoupon) { amount = Math.max(0, amount - this.data.selectedCoupon.discountValue); } this.setData({ finalAmount: amount }); } })

第三步：下单接口透传优惠券ID
修改pages/order/order.js的提交订单逻辑，在placeOrder()中加入couponId：

placeOrder() { wx.request({ url: `${BASE_URL}/api/orders`, method: 'POST', data: { scheduleId: this.data.scheduleId, seats: this.data.selectedSeats, couponId: this.data.selectedCoupon?.id || null, // 关键：透传 totalPrice: this.data.finalAmount } }); }

为什么这样设计？
优惠券校验和折扣计算完全在订单创建前完成，支付环节仍调用原wx.requestPayment，不改动支付核心。后端订单表只需增加couponId字段，零侵入。

5.2 多语言支持：用i18n-js实现无感切换

小程序原生不支持i18n，但i18n-js库轻量可靠。我们只改三处文件。

第一步：安装与初始化

cd miniprogram npm install i18n-js

创建utils/i18n.js：

// miniprogram/utils/i18n.js const I18n = require('i18n-js'); // 语言包 const translations = { zh: { home: '首页', cinema: '影院', schedule: '场次', seats: '座位', pay: '支付', total: '合计', discount: '优惠' }, zh_TW: { home: '首頁', cinema: '電影院', schedule: '場次', seats: '座位', pay: '支付', total: '合計', discount: '優惠' } }; const i18n = new I18n(); i18n.translations = translations; i18n.locale = wx.getStorageSync('lang') || 'zh'; // 读取本地存储 module.exports = i18n;

第二步：全局挂载
在app.js中：

// miniprogram/app.js const i18n = require('./utils/i18n'); App({ globalData: { i18n // 挂载到全局 }, onLaunch() { // ... } })

第三步：页面中使用
在pages/index/index.wxml中：

<!-- miniprogram/pages/index/index.wxml --> <view class="nav-item" bindtap="switchLang"> {{appData.i18n.t('home')}} </view>

在pages/index/index.js中：

// miniprogram/pages/index/index.js const i18n = getApp().globalData.i18n; Page({ data: { appData: { i18n } // 传递给WXML }, switchLang() { const newLang = i18n.locale === 'zh' ? 'zh_TW' : 'zh'; i18n.locale = newLang; wx.setStorageSync('lang', newLang); this.setData({ appData: { i18n } }); // 触发WXML重渲染 } })

玄学提示：WXML中不能直接写{{i18n.t('home')}}，必须通过appData传递，否则编译报错。这是小程序WXML的限制，不是bug。

6. 避坑指南：那些让我凌晨三点改完又回滚的5个致命细节

别笑，这些坑我都踩过，而且不止一次。有些看似微小，却能让整个流程在某个环节静默失败，排查起来像大海捞针。以下是血泪整理的5条，按发生频率排序：

6.1 现象：支付成功后，订单状态一直是“待支付”，座位也没释放

原因：微信支付回调地址（notify_url）配置错误。后端server/routes/order.js的路由是POST /api/notify，但你在微信商户平台填的是/notify（少了/api前缀），导致微信服务器根本找不到接口，自然不发回调。
解决：登录 微信商户平台 > 产品中心 > 开发配置 > API安全 > 修改“支付结果异步通知URL”，填入完整路径https://yourdomain.com/api/notify。填完后务必点击“保存”并“确认”。

6.2 现象：真机预览时，Canvas座位图一片空白，开发者工具里正常

原因：Canvas在真机上需要显式声明type="2d"，而开发者工具兼容性好，会自动降级。miniprogram/components/seat-selector/index.wxml中的<canvas>标签缺少该属性。
解决：将<canvas id="seatCanvas" />改为<canvas id="seatCanvas" type="2d" />。注意：type="2d"是微信小程序Canvas 2D API的强制要求，缺了就无法获取context。

6.3 现象：用户登录后，app.js中的userInfo有时是null，有时又有值

原因：wx.login()和wx.getUserProfile()的调用时机混乱。源码中app.js的onLaunch先调wx.login()获取code，再用code换取openid，但wx.getUserProfile()是用户主动触发，若用户未授权，userInfo就是null。而很多页面在onLoad里直接读getApp().globalData.userInfo

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