简介面向高校计算机专业学生的食堂点餐微信小程序源码是一份经导师指导并获99分评审的高分毕业设计项目。作者为大四学生代码完整且确保可运行适合正在准备毕业设计、课程设计或期末大作业的学生也方便新手对照学习。资源包共65个文件约31.22MB涵盖18个JavaScript逻辑文件、13个WXSS样式、11个WXML页面结构、11个JSON配置以及PNG图标、字体文件等页面、逻辑、样式与工具模块划分清晰便于二次开发与局部替换。包内页面和脚本、静态资源按小程序规范组织启动配置与路由关系一目了然。项目中包含食堂点餐小助手等核心模块涉及全局配置、页面交互、字体图标与静态资源组织能帮助读者快速理解微信小程序从入口到功能页面的完整实现思路对准备论文与答辩的学生来说也是一份完整可演示的落地项目。已有77人浏览学习可作为实战参考。1. 这个 99 分食堂菜单小程序源码里其实藏着三条主链路食堂点餐微信小程序源码很多但多数是只拿一套页面模板套壳点菜不能加购、订单不能提交评分自然上不去。这份拿到 99 分的高分毕业设计不一样它是把菜单数据展示、购物车状态维护、订单生成与提交三条主链路完整串起来的项目代码结构也保持了课程设计阶段不太常见的模块分离。拿到源码后不要只盯着页面换图片先跟着入口文件把路由、全局数据、工具函数跑通再去改业务逻辑答辩时老师问到哪里都能接住。适合正在做微信小程序毕业设计的学生也适合想用最短时间跑通一个真实点餐闭环的初级开发者。2. 启动与路由从 app.json 和 project.config.json 理解小程序骨架2.1 源码目录里每一层在干什么解压食堂点餐微信小程序源码.zip后master-messHall目录下会看到app.js、app.json、app.wxss、project.config.json、pages、utils、static、font、img、wxParse这几类内容。它们不是随便摆放的而是小程序工程里最常见的四层结构全局入口、全局配置、页面代码和公共资源。文件/目录职责关键点app.js全局逻辑入口定义全局数据、API 地址、启动时登录态初始化app.json全局配置注册页面、设置窗口样式、配置 tabBarapp.wxss全局面样式公共颜色、字体、按钮样式pages业务页面首页、菜单、购物车、订单、订单详情等utils公共工具请求封装、日期格式化、价格计算wxParse富文本解析用于展示菜品详情、公告等 HTML 内容static/img/font静态资源菜品图片、图标和字体文件pages目录下的每个模块都遵循四件套约定.js、.wxml、.wxss、.json同名放置。微信开发者工具里右键新建页面会自动生成这四件套但是毕设源码里更常见的做法是手动维护app.json中的pages数组因为这样能精确控制页面加载顺序和路由层级。另一个容易忽略的是project.config.json里面的appid字段直接决定你是否能在真机上预览这个源码。2.2 页面注册与底部导航配置小程序冷启动时不会去找index.html而是先读取app.json的pages数组加载第一个页面作为首屏。下面是一个典型的食堂点餐小程序app.json配置我把首页、菜单、购物车、订单、订单详情五个页面全部注册其中购物车页面既做展示也做空态兜底。{ pages: [ pages/index/index, pages/menu/menu, pages/cart/cart, pages/orders/orders, pages/orderDetail/orderDetail ], window: { navigationBarBackgroundColor: #35812e, navigationBarTitleText: 食堂点餐, navigationBarTextStyle: white, backgroundColor: #f5f5f5 }, tabBar: { color: #999999, selectedColor: #35812e, list: [ { pagePath: pages/index/index, text: 首页 }, { pagePath: pages/menu/menu, text: 点餐 }, { pagePath: pages/cart/cart, text: 购物车 }, { pagePath: pages/orders/orders, text: 订单 } ] } }pages数组第一项pages/index/index就是启动页所以如果想改成直接进入菜单页只需要把pages/menu/menu挪到第一位。tabBar最多支持 5 个列表项这里配置 4 个符合业务需要。navigationBarBackgroundColor和navigationBarTextStyle要搭配使用绿底必须配白字否则顶部导航栏高度固定后会出现前景色和背景色对比度不足的问题这也是微信小程序顶部导航栏高度相关的一个高频样式坑。2.3 全局数据与工具函数初始化app.js不仅是生命周期入口还要承担两件事设置接口地址、挂载全局数据。毕设阶段后端接口大多是本机的 Spring Boot 服务如果不把接口地址抽到全局变量每一页都要改域名换台电脑整个项目接口就全部失效。App({ globalData: { userInfo: null, apiBase: http://127.0.0.1:8080, tableNo: null }, onLaunch() { if (wx.getStorageSync(userInfo)) { this.globalData.userInfo wx.getStorageSync(userInfo); } } });onLaunch里用wx.getStorageSync同步读取缓存可以在首页渲染前恢复登录态。如果换用异步版wx.getStorage会出现首页数据渲染时userInfo还是空对象的问题需要额外处理回调时机。全局变量改成wx.getStorageSync双写的好处是页面重启后数据不丢同时不会每次都读硬盘这是答辩时老师比较认可的缓存策略。3. 点餐核心流程菜单加载、购物车状态与订单生成3.1 数据模型设计菜品与购物车字段食堂点餐和电商最大的区别在于菜品规格少、库存变化快比如“今日红烧肉剩余 20 份”。所以菜单页面的数据模型可以用一个menuList数组加一个cart对象来维护。购物车不建议用数组因为删除和修改菜品时需要反复findIndex而是用id - quantity的映射关系更合适。Page({ data: { menuList: [], cart: {}, totalCount: 0, totalPrice: 0 }, onLoad() { this.loadMenu(); }, loadMenu() { const list [ { id: 1, name: 土豆红烧肉, price: 12, stock: 20, detail: p微辣含土豆与红烧肉/p }, { id: 2, name: 番茄炒蛋, price: 8, stock: 15, detail: p不辣适合配饭/p } ]; this.setData({ menuList: list }); } });cart对象的结构是{ 1: 2, 2: 1 }表示 id 为 1 的菜品点了 2 份。这个结构的性能开销恒定和菜单列表长度无关。这里要特别注意setData的使用方式毕设阶段menuList只有几十条时可以整包传输如果菜品数量超过 50 条就需要改成setData({ [menuList[ index ].stock]: newVal })做局部更新否则操作购物车时会明显感觉到页面卡顿。3.2 菜单渲染与 addToCart 事件处理菜单项通常通过wx:for循环渲染并把菜品的id绑到>addToCart(e) { const id e.currentTarget.dataset.id; const menu this.data.menuList.find(item item.id id); if (!menu || menu.stock 0) { wx.showToast({ title: 库存不足, icon: none }); return; } const cart this.data.cart; cart[id] cart[id] ? cart[id] 1 : 1; const totalData this.calcCart(cart); this.setData({ cart, ...totalData }); }, calcCart(cart) { let totalCount 0; let totalPrice 0; this.data.menuList.forEach(item { const count cart[item.id] || 0; totalCount count; totalPrice count * item.price; }); return { totalCount, totalPrice }; }cart[id] cart[id] ? cart[id] 1 : 1这行代码是购物车加购的核心逻辑第一次点某道菜时值为 1再次点击就累加。calcCart方法每次都会重新遍历整个menuList再同步totalCount和totalPrice这样写的好处是逻辑集中不容易出现角标数量对不上总价的情况。缺点是在菜品很多时计算耗时比如超过 200 个菜品时每秒点击会有明显延迟解决办法是只在addToCart里单独更新当前 id 对应的数量和金额。find是 ES6 数组方法小程序基础库 2.2.1 以上可以直接使用。如果使用的开发者工具基础库版本较老需要改成for循环。这里还有一个容易被忽视的问题this.data.cart直接修改对象属性后再setData虽然能触发视图更新但在 WXML 里访问cart[id]时需要先用wx:if判断是否存在否则首次渲染会显示undefined。3.3 订单生成与 wxParse 富文本展示订单生成的难点不在提交动作而在菜品详情的富文本展示。wxParse是微信小程序早期常用的富文本解析库源码目录里的wxParse文件夹就是专门干这个的。它的用法是在 JS 里把 HTML 字符串解释成节点再渲染到rich-text组件中。const WxParse require(../../utils/wxParse/wxParse.js); Page({ onLoad(option) { const dishId option.id; const detailData this.getDishDetail(dishId); WxParse.wxParse(detailHtml, html, detailData, this, 5); } });view classdish-detail rich-text nodes{{detailHtml}}/rich-text /viewWxParse.wxParse第五个参数5表示图片按屏幕宽度等比缩放超过屏幕宽度的图片会自动压缩避免横向滚动。rich-text接收解析后的节点信息不需要手动处理 HTML 实体和样式。需要注意wxParse解析出的节点不能直接放到scroll-view里配合某些 CSS 动画否则 iOS 上滑动时容易出现白屏或卡顿。订单提交逻辑一般是这样先校验购物车是否为空再读取globalData里的桌号或地址最后把cart对象转换成订单明细数组连同totalPrice一起通过wx.request发给后端。这里必须重新计算一次价格不能直接使用渲染层显示的价格否则在开发者工具里修改data就能篡改订单金额答辩时的安全审查环节会直接被扣分。4. 导入、联调与典型坑位排查4.1 把源码导入微信开发者工具这个项目的源码解压后不需要执行npm install因为wxParse和utils都是原生 JavaScript没有第三方依赖。打开微信开发者工具选择“导入项目”目录选到master-messHall这一层然后输入自己的小程序 AppID。如果只是本地预览也可以选择测试号。# 模拟在命令行里检查目录结构 unzip 食堂点餐微信小程序源码.zip cd master-messHall ls -la不要选到master-messHall的上一级目录否则project.config.json读取不到工具会报“缺少 app.json”。导入成功后如果发现appid不匹配打开project.config.json将appid替换成你自己的。真机预览之前还需要在“详情—本地设置”中勾选“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”这一步在毕设调试阶段必不可少。4.2 API 地址与 Mock 切换既然代码里没有附带后端源码联调时就必须要有一个接口地址。常见做法是在utils/request.js里封装一个wx.requestPromise 方法再利用一个布尔变量切换 Mock 环境和真实环境。const isDev true; const request (url, method GET, data {}) { const base isDev ? http://127.0.0.1:8080 : https://api.example.com; return new Promise((resolve, reject) { wx.request({ url: base url, method, data, header: { content-type: application/json }, success: res { if (res.statusCode 200) { resolve(res.data); } else { reject(res); } }, fail: reject }); }); }; module.exports { request };把isDev改成false就能切换正式域名。这里要注意的是http://127.0.0.1:8080只适用于开发者工具真机上必须改成局域网 IP 或已备案的 HTTPS 域名否则wx.request会直接 fail。同时success回调里不要只取res.data要先判断res.statusCode否则后端返回 404 时前端也会把错误页当成成功数据渲染导致页面白屏。4.3 常见报错对照表与 setData 优化报错或现象原因处理方式app.json未找到导入目录层级错误选到含project.config.json的根目录url not in domain list请求域名未配置开发时勾选“不校验合法域名”上线前配白名单Cannot read property setData of undefined回调函数没有保留 this 指针在success之前用const that thiswxParse is not defined路径引用错误或文件缺失检查require路径是否指向wxParse.js购物车角标显示NaNtotalPrice被字符串拼接在calcCart中先对item.price执行Number()所有错误里setData的滥用是最难排查的。小程序每次setData都会把数据从逻辑层传到渲染层如果一次性传输整个menuList页面会重新渲染大量节点。常见的优化方案是将购物车数量独立成cartMap传给 WXML菜单列表静态渲染这样每次点餐只更新购物车相关的几个字段而不是整个菜单列表。页面卸载时清理定时器也是必须做的。首页如果有轮播图或倒计时用过了setInterval但没有在onUnload里执行clearInterval页面返回后定时器依然运行。再下一次进入页面又创建新的定时器旧定时器没释放内存会持续增长这个问题在模拟器上不明显真机跑几分钟后就会出现点击无响应。5. 把这套毕设改成可接真实支付的小程序5.1 用订单状态机替代硬编码状态毕设里订单状态经常是 0、1、2 这种魔法数字短期写起来方便一旦加入取消、退款、备餐中就会失控。建议在utils/orderStatus.js里集中定义状态机。const ORDER_STATE { pending: { value: 0, label: 待支付, next: [paid, cancel] }, paid: { value: 1, label: 已支付, next: [ready, refund] }, ready: { value: 2, label: 待取餐, next: [done] }, done: { value: 3, label: 已完成, next: [] }, cancel: { value: -1, label: 已取消, next: [] } }; function canTransition(from, to) { const state ORDER_STATE[from]; return state state.next.includes(to); }状态机的核心价值是让订单操作按钮能动态生成不再嵌套多层if/else。后续接微信支付 v3 时只要前端要置为的状态不在next列表里就直接拦截操作避免订单落进未知状态。5.2 缓存菜品数据与餐桌码定位食堂菜单一天可能改好几次但每次点餐间隔不会太长所以给菜单加一个 60 秒缓存是性价比最高的优化。用wx.setStorageSync(menuCache, { time: Date.now(), list })保存onShow时判断是否过期新鲜度不够就重新请求。餐桌码可以直接用二维码参数传递例如pages/menu/menu?tableNoA12在onLoad里读取options.tableNo存入globalData。要注意onLoad只在页面第一次创建时执行一次从后台切换到前台时只触发onShow所以扫码参数一定不能放在onShow里读取否则会拿到空值。5.3 支付完成后刷新订单列表的验证方法接完真实支付后不能在wx.requestPayment的success回调里直接刷新订单列表因为支付回调是异步的服务端状态可能比前端回调慢几秒。更稳妥的做法是轮询订单详情接口直到拿到“已支付”状态或超时。function waitOrderPayed(orderId, retry 10) { if (retry 0) return Promise.reject(new Error(timeout)); return request(/order/${orderId}).then(res { if (res.data.status 1) return res.data; return new Promise(resolve { setTimeout(() resolve(waitOrderPayed(orderId, retry - 1)), 1000); }); }); }retry控制最大重试次数每次间隔 1 秒10 秒后超时。生产环境建议把轮询次数降到 3后续改为 WebSocket 或订阅消息推送但毕设里用轮询能更直观地看到状态变化过程。这段逻辑放在全局工具文件里订单列表和订单详情页都能复用最终让支付、出餐、取餐整个流程在前端闭环起来。本文还有配套的精品资源点击获取 微信小程序毕业设计：食堂点餐源码架构与订单流程详解
简介面向高校计算机专业学生的食堂点餐微信小程序源码是一份经导师指导并获99分评审的高分毕业设计项目。作者为大四学生代码完整且确保可运行适合正在准备毕业设计、课程设计或期末大作业的学生也方便新手对照学习。资源包共65个文件约31.22MB涵盖18个JavaScript逻辑文件、13个WXSS样式、11个WXML页面结构、11个JSON配置以及PNG图标、字体文件等页面、逻辑、样式与工具模块划分清晰便于二次开发与局部替换。包内页面和脚本、静态资源按小程序规范组织启动配置与路由关系一目了然。项目中包含食堂点餐小助手等核心模块涉及全局配置、页面交互、字体图标与静态资源组织能帮助读者快速理解微信小程序从入口到功能页面的完整实现思路对准备论文与答辩的学生来说也是一份完整可演示的落地项目。已有77人浏览学习可作为实战参考。1. 这个 99 分食堂菜单小程序源码里其实藏着三条主链路食堂点餐微信小程序源码很多但多数是只拿一套页面模板套壳点菜不能加购、订单不能提交评分自然上不去。这份拿到 99 分的高分毕业设计不一样它是把菜单数据展示、购物车状态维护、订单生成与提交三条主链路完整串起来的项目代码结构也保持了课程设计阶段不太常见的模块分离。拿到源码后不要只盯着页面换图片先跟着入口文件把路由、全局数据、工具函数跑通再去改业务逻辑答辩时老师问到哪里都能接住。适合正在做微信小程序毕业设计的学生也适合想用最短时间跑通一个真实点餐闭环的初级开发者。2. 启动与路由从 app.json 和 project.config.json 理解小程序骨架2.1 源码目录里每一层在干什么解压食堂点餐微信小程序源码.zip后master-messHall目录下会看到app.js、app.json、app.wxss、project.config.json、pages、utils、static、font、img、wxParse这几类内容。它们不是随便摆放的而是小程序工程里最常见的四层结构全局入口、全局配置、页面代码和公共资源。文件/目录职责关键点app.js全局逻辑入口定义全局数据、API 地址、启动时登录态初始化app.json全局配置注册页面、设置窗口样式、配置 tabBarapp.wxss全局面样式公共颜色、字体、按钮样式pages业务页面首页、菜单、购物车、订单、订单详情等utils公共工具请求封装、日期格式化、价格计算wxParse富文本解析用于展示菜品详情、公告等 HTML 内容static/img/font静态资源菜品图片、图标和字体文件pages目录下的每个模块都遵循四件套约定.js、.wxml、.wxss、.json同名放置。微信开发者工具里右键新建页面会自动生成这四件套但是毕设源码里更常见的做法是手动维护app.json中的pages数组因为这样能精确控制页面加载顺序和路由层级。另一个容易忽略的是project.config.json里面的appid字段直接决定你是否能在真机上预览这个源码。2.2 页面注册与底部导航配置小程序冷启动时不会去找index.html而是先读取app.json的pages数组加载第一个页面作为首屏。下面是一个典型的食堂点餐小程序app.json配置我把首页、菜单、购物车、订单、订单详情五个页面全部注册其中购物车页面既做展示也做空态兜底。{ pages: [ pages/index/index, pages/menu/menu, pages/cart/cart, pages/orders/orders, pages/orderDetail/orderDetail ], window: { navigationBarBackgroundColor: #35812e, navigationBarTitleText: 食堂点餐, navigationBarTextStyle: white, backgroundColor: #f5f5f5 }, tabBar: { color: #999999, selectedColor: #35812e, list: [ { pagePath: pages/index/index, text: 首页 }, { pagePath: pages/menu/menu, text: 点餐 }, { pagePath: pages/cart/cart, text: 购物车 }, { pagePath: pages/orders/orders, text: 订单 } ] } }pages数组第一项pages/index/index就是启动页所以如果想改成直接进入菜单页只需要把pages/menu/menu挪到第一位。tabBar最多支持 5 个列表项这里配置 4 个符合业务需要。navigationBarBackgroundColor和navigationBarTextStyle要搭配使用绿底必须配白字否则顶部导航栏高度固定后会出现前景色和背景色对比度不足的问题这也是微信小程序顶部导航栏高度相关的一个高频样式坑。2.3 全局数据与工具函数初始化app.js不仅是生命周期入口还要承担两件事设置接口地址、挂载全局数据。毕设阶段后端接口大多是本机的 Spring Boot 服务如果不把接口地址抽到全局变量每一页都要改域名换台电脑整个项目接口就全部失效。App({ globalData: { userInfo: null, apiBase: http://127.0.0.1:8080, tableNo: null }, onLaunch() { if (wx.getStorageSync(userInfo)) { this.globalData.userInfo wx.getStorageSync(userInfo); } } });onLaunch里用wx.getStorageSync同步读取缓存可以在首页渲染前恢复登录态。如果换用异步版wx.getStorage会出现首页数据渲染时userInfo还是空对象的问题需要额外处理回调时机。全局变量改成wx.getStorageSync双写的好处是页面重启后数据不丢同时不会每次都读硬盘这是答辩时老师比较认可的缓存策略。3. 点餐核心流程菜单加载、购物车状态与订单生成3.1 数据模型设计菜品与购物车字段食堂点餐和电商最大的区别在于菜品规格少、库存变化快比如“今日红烧肉剩余 20 份”。所以菜单页面的数据模型可以用一个menuList数组加一个cart对象来维护。购物车不建议用数组因为删除和修改菜品时需要反复findIndex而是用id - quantity的映射关系更合适。Page({ data: { menuList: [], cart: {}, totalCount: 0, totalPrice: 0 }, onLoad() { this.loadMenu(); }, loadMenu() { const list [ { id: 1, name: 土豆红烧肉, price: 12, stock: 20, detail: p微辣含土豆与红烧肉/p }, { id: 2, name: 番茄炒蛋, price: 8, stock: 15, detail: p不辣适合配饭/p } ]; this.setData({ menuList: list }); } });cart对象的结构是{ 1: 2, 2: 1 }表示 id 为 1 的菜品点了 2 份。这个结构的性能开销恒定和菜单列表长度无关。这里要特别注意setData的使用方式毕设阶段menuList只有几十条时可以整包传输如果菜品数量超过 50 条就需要改成setData({ [menuList[ index ].stock]: newVal })做局部更新否则操作购物车时会明显感觉到页面卡顿。3.2 菜单渲染与 addToCart 事件处理菜单项通常通过wx:for循环渲染并把菜品的id绑到>addToCart(e) { const id e.currentTarget.dataset.id; const menu this.data.menuList.find(item item.id id); if (!menu || menu.stock 0) { wx.showToast({ title: 库存不足, icon: none }); return; } const cart this.data.cart; cart[id] cart[id] ? cart[id] 1 : 1; const totalData this.calcCart(cart); this.setData({ cart, ...totalData }); }, calcCart(cart) { let totalCount 0; let totalPrice 0; this.data.menuList.forEach(item { const count cart[item.id] || 0; totalCount count; totalPrice count * item.price; }); return { totalCount, totalPrice }; }cart[id] cart[id] ? cart[id] 1 : 1这行代码是购物车加购的核心逻辑第一次点某道菜时值为 1再次点击就累加。calcCart方法每次都会重新遍历整个menuList再同步totalCount和totalPrice这样写的好处是逻辑集中不容易出现角标数量对不上总价的情况。缺点是在菜品很多时计算耗时比如超过 200 个菜品时每秒点击会有明显延迟解决办法是只在addToCart里单独更新当前 id 对应的数量和金额。find是 ES6 数组方法小程序基础库 2.2.1 以上可以直接使用。如果使用的开发者工具基础库版本较老需要改成for循环。这里还有一个容易被忽视的问题this.data.cart直接修改对象属性后再setData虽然能触发视图更新但在 WXML 里访问cart[id]时需要先用wx:if判断是否存在否则首次渲染会显示undefined。3.3 订单生成与 wxParse 富文本展示订单生成的难点不在提交动作而在菜品详情的富文本展示。wxParse是微信小程序早期常用的富文本解析库源码目录里的wxParse文件夹就是专门干这个的。它的用法是在 JS 里把 HTML 字符串解释成节点再渲染到rich-text组件中。const WxParse require(../../utils/wxParse/wxParse.js); Page({ onLoad(option) { const dishId option.id; const detailData this.getDishDetail(dishId); WxParse.wxParse(detailHtml, html, detailData, this, 5); } });view classdish-detail rich-text nodes{{detailHtml}}/rich-text /viewWxParse.wxParse第五个参数5表示图片按屏幕宽度等比缩放超过屏幕宽度的图片会自动压缩避免横向滚动。rich-text接收解析后的节点信息不需要手动处理 HTML 实体和样式。需要注意wxParse解析出的节点不能直接放到scroll-view里配合某些 CSS 动画否则 iOS 上滑动时容易出现白屏或卡顿。订单提交逻辑一般是这样先校验购物车是否为空再读取globalData里的桌号或地址最后把cart对象转换成订单明细数组连同totalPrice一起通过wx.request发给后端。这里必须重新计算一次价格不能直接使用渲染层显示的价格否则在开发者工具里修改data就能篡改订单金额答辩时的安全审查环节会直接被扣分。4. 导入、联调与典型坑位排查4.1 把源码导入微信开发者工具这个项目的源码解压后不需要执行npm install因为wxParse和utils都是原生 JavaScript没有第三方依赖。打开微信开发者工具选择“导入项目”目录选到master-messHall这一层然后输入自己的小程序 AppID。如果只是本地预览也可以选择测试号。# 模拟在命令行里检查目录结构 unzip 食堂点餐微信小程序源码.zip cd master-messHall ls -la不要选到master-messHall的上一级目录否则project.config.json读取不到工具会报“缺少 app.json”。导入成功后如果发现appid不匹配打开project.config.json将appid替换成你自己的。真机预览之前还需要在“详情—本地设置”中勾选“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”这一步在毕设调试阶段必不可少。4.2 API 地址与 Mock 切换既然代码里没有附带后端源码联调时就必须要有一个接口地址。常见做法是在utils/request.js里封装一个wx.requestPromise 方法再利用一个布尔变量切换 Mock 环境和真实环境。const isDev true; const request (url, method GET, data {}) { const base isDev ? http://127.0.0.1:8080 : https://api.example.com; return new Promise((resolve, reject) { wx.request({ url: base url, method, data, header: { content-type: application/json }, success: res { if (res.statusCode 200) { resolve(res.data); } else { reject(res); } }, fail: reject }); }); }; module.exports { request };把isDev改成false就能切换正式域名。这里要注意的是http://127.0.0.1:8080只适用于开发者工具真机上必须改成局域网 IP 或已备案的 HTTPS 域名否则wx.request会直接 fail。同时success回调里不要只取res.data要先判断res.statusCode否则后端返回 404 时前端也会把错误页当成成功数据渲染导致页面白屏。4.3 常见报错对照表与 setData 优化报错或现象原因处理方式app.json未找到导入目录层级错误选到含project.config.json的根目录url not in domain list请求域名未配置开发时勾选“不校验合法域名”上线前配白名单Cannot read property setData of undefined回调函数没有保留 this 指针在success之前用const that thiswxParse is not defined路径引用错误或文件缺失检查require路径是否指向wxParse.js购物车角标显示NaNtotalPrice被字符串拼接在calcCart中先对item.price执行Number()所有错误里setData的滥用是最难排查的。小程序每次setData都会把数据从逻辑层传到渲染层如果一次性传输整个menuList页面会重新渲染大量节点。常见的优化方案是将购物车数量独立成cartMap传给 WXML菜单列表静态渲染这样每次点餐只更新购物车相关的几个字段而不是整个菜单列表。页面卸载时清理定时器也是必须做的。首页如果有轮播图或倒计时用过了setInterval但没有在onUnload里执行clearInterval页面返回后定时器依然运行。再下一次进入页面又创建新的定时器旧定时器没释放内存会持续增长这个问题在模拟器上不明显真机跑几分钟后就会出现点击无响应。5. 把这套毕设改成可接真实支付的小程序5.1 用订单状态机替代硬编码状态毕设里订单状态经常是 0、1、2 这种魔法数字短期写起来方便一旦加入取消、退款、备餐中就会失控。建议在utils/orderStatus.js里集中定义状态机。const ORDER_STATE { pending: { value: 0, label: 待支付, next: [paid, cancel] }, paid: { value: 1, label: 已支付, next: [ready, refund] }, ready: { value: 2, label: 待取餐, next: [done] }, done: { value: 3, label: 已完成, next: [] }, cancel: { value: -1, label: 已取消, next: [] } }; function canTransition(from, to) { const state ORDER_STATE[from]; return state state.next.includes(to); }状态机的核心价值是让订单操作按钮能动态生成不再嵌套多层if/else。后续接微信支付 v3 时只要前端要置为的状态不在next列表里就直接拦截操作避免订单落进未知状态。5.2 缓存菜品数据与餐桌码定位食堂菜单一天可能改好几次但每次点餐间隔不会太长所以给菜单加一个 60 秒缓存是性价比最高的优化。用wx.setStorageSync(menuCache, { time: Date.now(), list })保存onShow时判断是否过期新鲜度不够就重新请求。餐桌码可以直接用二维码参数传递例如pages/menu/menu?tableNoA12在onLoad里读取options.tableNo存入globalData。要注意onLoad只在页面第一次创建时执行一次从后台切换到前台时只触发onShow所以扫码参数一定不能放在onShow里读取否则会拿到空值。5.3 支付完成后刷新订单列表的验证方法接完真实支付后不能在wx.requestPayment的success回调里直接刷新订单列表因为支付回调是异步的服务端状态可能比前端回调慢几秒。更稳妥的做法是轮询订单详情接口直到拿到“已支付”状态或超时。function waitOrderPayed(orderId, retry 10) { if (retry 0) return Promise.reject(new Error(timeout)); return request(/order/${orderId}).then(res { if (res.data.status 1) return res.data; return new Promise(resolve { setTimeout(() resolve(waitOrderPayed(orderId, retry - 1)), 1000); }); }); }retry控制最大重试次数每次间隔 1 秒10 秒后超时。生产环境建议把轮询次数降到 3后续改为 WebSocket 或订阅消息推送但毕设里用轮询能更直观地看到状态变化过程。这段逻辑放在全局工具文件里订单列表和订单详情页都能复用最终让支付、出餐、取餐整个流程在前端闭环起来。本文还有配套的精品资源点击获取