简介这是一份面向微信小程序初学者与进阶开发者的外卖应用实战Demo源码聚焦小程序核心架构、API调用与交互逻辑实现帮助开发者快速掌握从页面搭建到功能落地的完整链路。资源包含45个文件涵盖7个JS逻辑文件含app.js、server.js及页面级脚本、5个WXML结构文件、5个WXSS样式文件、2个JSON配置文件app.json等、1个README.md说明文档以及16张JPG和9张PNG素材图整体压缩包仅286KB轻量易读、结构清晰。已有1778人学习下载适合边学边练。读者可直接运行项目深入理解WXML/WXSS双层渲染机制、数据双向绑定实践、页面生命周期管理、基于scroll事件与createSelectorQuery模拟锚点的技巧以及商品页、订单页、个人中心等典型模块的组件化组织方式是入门即上手、进阶有抓手的高实用性学习样本。1. 这不是“套模板”而是用真实外卖业务逻辑跑通微信小程序最小闭环你下载到的“微信小程序-外卖小程序Demo源码”常被误认为是可直接上线的成品实际它是一套聚焦核心链路验证的轻量级工程骨架用户浏览商家列表 → 点击进入店铺页 → 加入购物车 → 提交订单 → 查看订单状态。它不包含支付对接、骑手调度、库存扣减等生产级模块但完整复现了微信小程序生态下「页面跳转、数据绑定、本地缓存、API请求拦截、tabBar导航、自定义组件封装」这六类高频开发动作。适合两类人一是刚学完基础 API 想快速验证知识闭环的新手二是需要在 2 小时内搭建一个可演示的 MVP 原型给产品/客户看的前端工程师。它不解决“如何做千万级并发”但能清晰告诉你——当用户点击“去结算”按钮时wx.request的header里为什么必须带Authorization字段wx.setStorageSync存的cartItems怎么被onShow生命周期自动读取以及wx.navigateTo跳转时 URL 参数如何被options正确解析。所有代码都运行在微信开发者工具基础库 2.30.2 环境下无需额外编译或 polyfill。2. 从项目结构开始理解app.js、app.json和project.config.json的分工边界微信小程序的启动流程由三类配置文件协同控制它们各自承担不可替代的角色。很多初学者把接口地址写死在app.js里结果上线后无法切换测试/生产环境也有人误改project.config.json中的miniprogramRoot导致真机调试白屏。本 Demo 的结构设计严格遵循微信官方推荐实践我们逐层拆解其意图与约束。2.1app.json声明式页面路由与全局视觉规范这是小程序的“宪法性文件”决定哪些页面会被编译、以何种方式呈现。Demo 中关键配置如下{ pages: [ pages/index/index, pages/shop/list, pages/shop/detail, pages/cart/index, pages/order/submit, pages/order/list ], tabBar: { list: [ { pagePath: pages/index/index, text: 首页, iconPath: assets/icons/home.png, selectedIconPath: assets/icons/home-active.png }, { pagePath: pages/cart/index, text: 购物车, iconPath: assets/icons/cart.png, selectedIconPath: assets/icons/cart-active.png } ] }, window: { navigationBarTitleText: 外卖小程序, navigationBarBackgroundColor: #ffffff, navigationBarTextStyle: black } }注意tabBar中的pagePath必须精确匹配pages数组中的路径且不能包含.wxml后缀iconPath和selectedIconPath必须是本地静态资源路径非网络 URL且尺寸为 81×81px否则真机上图标不显示。window配置仅影响非 tabBar 页面的导航栏样式TabBar 页面的标题由对应页面的navigationBarTitleText属性覆盖。2.2app.js全局状态初始化与请求统一管理app.js是小程序的入口逻辑中心Demo 在此完成三件事初始化用户登录态、挂载全局请求方法、设置默认 API 基础路径。关键代码如下// app.js App({ globalData: { userInfo: null, apiBase: https://api.demo-waimai.com/v1 // 生产环境需替换为真实域名 }, onLaunch() { // 检查登录态优先读取本地缓存再尝试静默登录 const token wx.getStorageSync(auth_token); if (token) { this.globalData.token token; this.checkTokenValidity(); } else { // 未登录则跳转至授权页非强制按业务需求调整 wx.navigateTo({ url: /pages/auth/login }); } }, // 封装 request 方法自动注入 token 和错误处理 request(options) { return new Promise((resolve, reject) { wx.request({ url: this.globalData.apiBase options.url, method: options.method || GET, data: options.data || {}, header: { Content-Type: application/json, Authorization: Bearer ${this.globalData.token || } }, success: (res) { if (res.statusCode 200) { resolve(res.data); } else if (res.statusCode 401) { // token 失效清空并跳转登录 wx.removeStorageSync(auth_token); wx.navigateTo({ url: /pages/auth/login }); reject(new Error(登录已过期)); } else { reject(new Error(API 错误: ${res.statusCode})); } }, fail: (err) reject(err) }); }); } });提示onLaunch只在小程序冷启动时执行一次热启动如从后台切回不会触发。因此checkTokenValidity()应设计为异步校验接口返回200才视为有效而非仅依赖本地缓存存在。request方法返回 Promise方便在页面中使用async/await避免回调地狱。2.3project.config.json开发者工具专属配置不影响线上包该文件仅在微信开发者工具中生效用于指定项目根目录、基础库版本、云开发环境等。Demo 中关键字段说明{ description: 外卖小程序 Demo, packOptions: { ignore: [node_modules/**, dist/**, .git/**] }, setting: { urlCheck: false, // 关闭域名校验便于本地调试 mock 接口 es6: true, enhance: true, postcss: true, minified: false, // 开发阶段关闭压缩便于调试 newFeature: true } }注意urlCheck: false是调试阶段必需项否则调用本地 mock 接口会报 “不在以下 request 合法域名列表中”。但上线前必须设为true并在小程序管理后台配置合法域名。minified: false保证console.log输出可读但正式提审前应设为true以减小包体积。3. 页面级实现从index.wxml到shop/detail.wxml的数据流穿透外卖小程序的核心交互发生在商家列表页index与店铺详情页shop/detail之间。Demo 采用“参数传递 页面生命周期钩子”组合方案确保数据精准流转避免全局变量污染。我们以用户点击商家卡片跳转为例完整还原数据从点击到渲染的每一步。3.1index.wxml使用>!-- pages/index/index.wxml -- view classshop-item wx:for{{shops}} wx:keyid bindtapgoToShopDetail >// pages/index/index.js Page({ data: { shops: [] }, onLoad() { this.loadShops(); }, loadShops() { getApp().request({ url: /shops }) .then(res { this.setData({ shops: res.data }); }); }, goToShopDetail(e) { const id e.currentTarget.dataset.id; const name e.currentTarget.dataset.name; // 使用 encodeURI 防止中文参数被截断 wx.navigateTo({ url: /pages/shop/detail?id${encodeURIComponent(id)}name${encodeURIComponent(name)} }); } });注意e.currentTarget.dataset.*获取的是bindtap元素上的>// pages/shop/detail.js Page({ data: { shop: {}, goods: [] }, onLoad(options) { // 解析 URL 参数 const { id, name } options; this.setData({ shop.id: id, shop.name: decodeURIComponent(name) }); // 根据 ID 请求店铺详情和商品列表 Promise.all([ getApp().request({ url: /shops/${id} }), getApp().request({ url: /shops/${id}/goods }) ]).then(([shopRes, goodsRes]) { this.setData({ shop: shopRes.data, goods: goodsRes.data }); }).catch(err { console.error(加载店铺详情失败, err); wx.showToast({ title: 加载失败, icon: none }); }); } });提示onLoad是页面首次加载时的唯一入口options对象只在此时可用。若需在页面多次显示时如从购物车页返回保持数据应在onShow中补充校验逻辑例如检查this.data.shop.id是否为空再决定是否重拉。3.4shop/detail.wxml使用wx:for渲染商品列表并绑定加购事件商品列表采用wx:for循环每个商品卡片绑定独立的addCart事件并通过>!-- pages/shop/detail.wxml -- view classgoods-list view classgoods-item wx:for{{goods}} wx:keyid >// pages/shop/detail.js addCart(e) { const index e.currentTarget.dataset.index; const goodsItem this.data.goods[index]; // 从全局 cart 数据中读取当前购物车 let cart wx.getStorageSync(cartItems) || []; // 查找是否已存在该商品 const existing cart.find(item item.id goodsItem.id); if (existing) { existing.count 1; } else { cart.push({ id: goodsItem.id, name: goodsItem.name, price: goodsItem.price, count: 1, image: goodsItem.image }); } wx.setStorageSync(cartItems, cart); wx.showToast({ title: 已加入购物车, icon: success }); }注意wx.setStorageSync是同步写入频繁调用会影响性能。实际项目中建议使用防抖debounce或批量合并策略。cartItems存储格式为数组而非对象便于wx:for直接遍历且find方法比filter更高效。4. 购物车与订单提交本地缓存 接口校验的双保险机制购物车是外卖小程序最易出错的模块——用户反复加减、跨页面同步、库存变化导致的超卖都要求本地与服务端状态强一致。Demo 采用“本地缓存主导 提交时服务端最终校验”的策略既保证操作流畅性又规避数据不一致风险。4.1cart/index.js读取、计算、渲染购物车数据购物车页在onShow中读取缓存并实时计算总价与商品数// pages/cart/index.js Page({ data: { cartItems: [], totalPrice: 0, totalCount: 0 }, onShow() { this.loadCart(); }, loadCart() { const cart wx.getStorageSync(cartItems) || []; let total 0; let count 0; cart.forEach(item { total item.price * item.count; count item.count; }); this.setData({ cartItems: cart, totalPrice: parseFloat(total.toFixed(2)), totalCount: count }); }, updateCount(e) { const { index, type } e.currentTarget.dataset; const cart wx.getStorageSync(cartItems) || []; const item cart[index]; if (type add) { item.count 1; } else if (type minus item.count 1) { item.count - 1; } else if (type minus item.count 1) { cart.splice(index, 1); // 删除商品 } wx.setStorageSync(cartItems, cart); this.loadCart(); // 重新计算并刷新 UI }, clearCart() { wx.setStorageSync(cartItems, []); this.setData({ cartItems: [], totalPrice: 0, totalCount: 0 }); } });提示onShow比onLoad更适合购物车页因为用户可能从其他页面如商品页返回此时需重新读取最新缓存。updateCount中item.count的修改直接作用于cart数组splice删除后需调用loadCart()重算而非setData单独更新cartItems避免totalPrice和totalCount不同步。4.2order/submit.js提交前校验 接口幂等性保障订单提交页不直接发送请求而是先校验本地购物车非空再调用服务端创建订单接口// pages/order/submit.js Page({ data: { address: null, remark: }, onLoad() { this.loadAddress(); }, loadAddress() { const address wx.getStorageSync(defaultAddress); if (address) { this.setData({ address }); } }, formSubmit(e) { const cart wx.getStorageSync(cartItems) || []; if (cart.length 0) { wx.showToast({ title: 购物车为空, icon: none }); return; } const orderData { items: cart.map(item ({ goods_id: item.id, count: item.count, price: item.price })), address_id: this.data.address?.id, remark: this.data.remark }; getApp().request({ url: /orders, method: POST, data: orderData }).then(res { // 提交成功后清空购物车 wx.setStorageSync(cartItems, []); wx.showToast({ title: 下单成功, icon: success }); setTimeout(() { wx.navigateTo({ url: /pages/order/list?order_id${res.data.order_id} }); }, 1500); }).catch(err { console.error(提交订单失败, err); wx.showToast({ title: 提交失败请重试, icon: none }); }); } });注意服务端接口/orders必须实现幂等性如通过X-Idempotency-Key请求头或订单号去重防止用户连续点击“提交”按钮导致重复下单。前端setTimeout跳转是为了给用户明确的成功反馈避免立即跳转导致用户误以为失败。4.3order/list.js分页加载历史订单并处理状态流转订单列表页支持下拉刷新与上拉加载使用wx.pageScrollTo实现滚动定位// pages/order/list.js Page({ data: { orders: [], page: 1, pageSize: 10, hasMore: true, loading: false }, onLoad(options) { if (options.order_id) { // 从提交页跳转时高亮新订单 this.setData({ highlightOrderId: options.order_id }); wx.pageScrollTo({ scrollTop: 0 }); } }, onPullDownRefresh() { this.setData({ page: 1, orders: [], hasMore: true }); this.loadOrders(); }, onReachBottom() { if (this.data.hasMore !this.data.loading) { this.setData({ page: this.data.page 1 }); this.loadOrders(); } }, loadOrders() { this.setData({ loading: true }); getApp().request({ url: /orders?page${this.data.page}size${this.data.pageSize} }).then(res { const newOrders [...this.data.orders, ...res.data.list]; this.setData({ orders: newOrders, hasMore: res.data.has_more, loading: false }); wx.stopPullDownRefresh(); }).catch(() { this.setData({ loading: false }); wx.stopPullDownRefresh(); }); } });提示onReachBottom触发时需双重校验hasMore和loading避免重复请求。highlightOrderId用于在order/list.wxml中给新订单添加highlightclass配合 CSS 动画实现视觉引导。5. 修改刚进入的加载页面从app.js启动屏到pages/splash/index的渐进式过渡“修改刚进入的加载页面”是高频搜索词但微信小程序本身不提供原生启动屏 API。Demo 采用业界通用的“白屏占位 自定义 splash 页面”方案在app.js的onLaunch中插入一层中间页实现可控的加载体验。5.1 创建pages/splash/index作为启动过渡页该页面无复杂逻辑仅展示品牌 Logo 与加载动画并在资源就绪后自动跳转!-- pages/splash/index.wxml -- view classsplash-container image src/assets/logo.png classlogo/image view classloading-indicator view classdot/view view classdot/view view classdot/view /view /view// pages/splash/index.js Page({ data: { loaded: false }, onLoad() { // 模拟资源加载如检查登录态、预加载首屏数据 this.checkReady(); }, checkReady() { // 实际项目中可在此处调用 getApp().checkLogin() 或预拉取首页 banner setTimeout(() { // 加载完成后跳转首页 wx.switchTab({ url: /pages/index/index }); }, 1200); } });注意wx.switchTab只能跳转 tabBar 页面因此index必须在app.json的tabBar.list中。setTimeout时间应根据实际网络请求耗时动态调整硬编码 1200ms 仅作演示。5.2 修改app.js的onLaunch流程插入 splash 页原onLaunch逻辑被重构为“启动 → 显示 splash → 校验 → 跳转”// app.js App({ // ... 其他配置 onLaunch() { // 1. 立即跳转至 splash 页 wx.redirectTo({ url: /pages/splash/index }); // 2. 同时进行后台校验不阻塞 splash 显示 this.checkAuthAndInit(); }, checkAuthAndInit() { const token wx.getStorageSync(auth_token); if (token) { this.globalData.token token; // 可在此处预加载用户信息、常用地址等 getApp().request({ url: /user/profile }) .then(profile { this.globalData.profile profile; }); } } });提示wx.redirectTo会关闭当前页面即空白启动页打开splash页避免白屏时间过长。checkAuthAndInit是异步操作不影响 splash 页的渲染速度。若需更精细控制可在splash.js中暴露setReadyCallback方法由app.js注册回调。5.3splash.wxml的 CSS 实现呼吸式加载动画使用纯 CSS 实现三个圆点依次放大缩小无需 JS 控制/* pages/splash/index.wxss */ .splash-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; background-color: #f8f8f8; } .logo { width: 120rpx; height: 120rpx; margin-bottom: 60rpx; } .loading-indicator { display: flex; justify-content: center; align-items: center; gap: 20rpx; } .dot { width: 20rpx; height: 20rpx; background-color: #007AFF; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out; } .dot:nth-child(1) { animation-delay: -0.32s; } .dot:nth-child(2) { animation-delay: -0.16s; } keyframes bounce { 0%, 80%, 100% { transform: scale(0.3); } 40% { transform: scale(1); } }注意animation-delay为每个点设置不同延迟形成波浪式动画效果。transform: scale()比width/height更高效避免重排。gap属性在基础库 2.25.0 支持旧版本需用margin替代。本文还有配套的精品资源点击获取
简介这是一份面向微信小程序初学者与进阶开发者的外卖应用实战Demo源码聚焦小程序核心架构、API调用与交互逻辑实现帮助开发者快速掌握从页面搭建到功能落地的完整链路。资源包含45个文件涵盖7个JS逻辑文件含app.js、server.js及页面级脚本、5个WXML结构文件、5个WXSS样式文件、2个JSON配置文件app.json等、1个README.md说明文档以及16张JPG和9张PNG素材图整体压缩包仅286KB轻量易读、结构清晰。已有1778人学习下载适合边学边练。读者可直接运行项目深入理解WXML/WXSS双层渲染机制、数据双向绑定实践、页面生命周期管理、基于scroll事件与createSelectorQuery模拟锚点的技巧以及商品页、订单页、个人中心等典型模块的组件化组织方式是入门即上手、进阶有抓手的高实用性学习样本。1. 这不是“套模板”而是用真实外卖业务逻辑跑通微信小程序最小闭环你下载到的“微信小程序-外卖小程序Demo源码”常被误认为是可直接上线的成品实际它是一套聚焦核心链路验证的轻量级工程骨架用户浏览商家列表 → 点击进入店铺页 → 加入购物车 → 提交订单 → 查看订单状态。它不包含支付对接、骑手调度、库存扣减等生产级模块但完整复现了微信小程序生态下「页面跳转、数据绑定、本地缓存、API请求拦截、tabBar导航、自定义组件封装」这六类高频开发动作。适合两类人一是刚学完基础 API 想快速验证知识闭环的新手二是需要在 2 小时内搭建一个可演示的 MVP 原型给产品/客户看的前端工程师。它不解决“如何做千万级并发”但能清晰告诉你——当用户点击“去结算”按钮时wx.request的header里为什么必须带Authorization字段wx.setStorageSync存的cartItems怎么被onShow生命周期自动读取以及wx.navigateTo跳转时 URL 参数如何被options正确解析。所有代码都运行在微信开发者工具基础库 2.30.2 环境下无需额外编译或 polyfill。2. 从项目结构开始理解app.js、app.json和project.config.json的分工边界微信小程序的启动流程由三类配置文件协同控制它们各自承担不可替代的角色。很多初学者把接口地址写死在app.js里结果上线后无法切换测试/生产环境也有人误改project.config.json中的miniprogramRoot导致真机调试白屏。本 Demo 的结构设计严格遵循微信官方推荐实践我们逐层拆解其意图与约束。2.1app.json声明式页面路由与全局视觉规范这是小程序的“宪法性文件”决定哪些页面会被编译、以何种方式呈现。Demo 中关键配置如下{ pages: [ pages/index/index, pages/shop/list, pages/shop/detail, pages/cart/index, pages/order/submit, pages/order/list ], tabBar: { list: [ { pagePath: pages/index/index, text: 首页, iconPath: assets/icons/home.png, selectedIconPath: assets/icons/home-active.png }, { pagePath: pages/cart/index, text: 购物车, iconPath: assets/icons/cart.png, selectedIconPath: assets/icons/cart-active.png } ] }, window: { navigationBarTitleText: 外卖小程序, navigationBarBackgroundColor: #ffffff, navigationBarTextStyle: black } }注意tabBar中的pagePath必须精确匹配pages数组中的路径且不能包含.wxml后缀iconPath和selectedIconPath必须是本地静态资源路径非网络 URL且尺寸为 81×81px否则真机上图标不显示。window配置仅影响非 tabBar 页面的导航栏样式TabBar 页面的标题由对应页面的navigationBarTitleText属性覆盖。2.2app.js全局状态初始化与请求统一管理app.js是小程序的入口逻辑中心Demo 在此完成三件事初始化用户登录态、挂载全局请求方法、设置默认 API 基础路径。关键代码如下// app.js App({ globalData: { userInfo: null, apiBase: https://api.demo-waimai.com/v1 // 生产环境需替换为真实域名 }, onLaunch() { // 检查登录态优先读取本地缓存再尝试静默登录 const token wx.getStorageSync(auth_token); if (token) { this.globalData.token token; this.checkTokenValidity(); } else { // 未登录则跳转至授权页非强制按业务需求调整 wx.navigateTo({ url: /pages/auth/login }); } }, // 封装 request 方法自动注入 token 和错误处理 request(options) { return new Promise((resolve, reject) { wx.request({ url: this.globalData.apiBase options.url, method: options.method || GET, data: options.data || {}, header: { Content-Type: application/json, Authorization: Bearer ${this.globalData.token || } }, success: (res) { if (res.statusCode 200) { resolve(res.data); } else if (res.statusCode 401) { // token 失效清空并跳转登录 wx.removeStorageSync(auth_token); wx.navigateTo({ url: /pages/auth/login }); reject(new Error(登录已过期)); } else { reject(new Error(API 错误: ${res.statusCode})); } }, fail: (err) reject(err) }); }); } });提示onLaunch只在小程序冷启动时执行一次热启动如从后台切回不会触发。因此checkTokenValidity()应设计为异步校验接口返回200才视为有效而非仅依赖本地缓存存在。request方法返回 Promise方便在页面中使用async/await避免回调地狱。2.3project.config.json开发者工具专属配置不影响线上包该文件仅在微信开发者工具中生效用于指定项目根目录、基础库版本、云开发环境等。Demo 中关键字段说明{ description: 外卖小程序 Demo, packOptions: { ignore: [node_modules/**, dist/**, .git/**] }, setting: { urlCheck: false, // 关闭域名校验便于本地调试 mock 接口 es6: true, enhance: true, postcss: true, minified: false, // 开发阶段关闭压缩便于调试 newFeature: true } }注意urlCheck: false是调试阶段必需项否则调用本地 mock 接口会报 “不在以下 request 合法域名列表中”。但上线前必须设为true并在小程序管理后台配置合法域名。minified: false保证console.log输出可读但正式提审前应设为true以减小包体积。3. 页面级实现从index.wxml到shop/detail.wxml的数据流穿透外卖小程序的核心交互发生在商家列表页index与店铺详情页shop/detail之间。Demo 采用“参数传递 页面生命周期钩子”组合方案确保数据精准流转避免全局变量污染。我们以用户点击商家卡片跳转为例完整还原数据从点击到渲染的每一步。3.1index.wxml使用>!-- pages/index/index.wxml -- view classshop-item wx:for{{shops}} wx:keyid bindtapgoToShopDetail >// pages/index/index.js Page({ data: { shops: [] }, onLoad() { this.loadShops(); }, loadShops() { getApp().request({ url: /shops }) .then(res { this.setData({ shops: res.data }); }); }, goToShopDetail(e) { const id e.currentTarget.dataset.id; const name e.currentTarget.dataset.name; // 使用 encodeURI 防止中文参数被截断 wx.navigateTo({ url: /pages/shop/detail?id${encodeURIComponent(id)}name${encodeURIComponent(name)} }); } });注意e.currentTarget.dataset.*获取的是bindtap元素上的>// pages/shop/detail.js Page({ data: { shop: {}, goods: [] }, onLoad(options) { // 解析 URL 参数 const { id, name } options; this.setData({ shop.id: id, shop.name: decodeURIComponent(name) }); // 根据 ID 请求店铺详情和商品列表 Promise.all([ getApp().request({ url: /shops/${id} }), getApp().request({ url: /shops/${id}/goods }) ]).then(([shopRes, goodsRes]) { this.setData({ shop: shopRes.data, goods: goodsRes.data }); }).catch(err { console.error(加载店铺详情失败, err); wx.showToast({ title: 加载失败, icon: none }); }); } });提示onLoad是页面首次加载时的唯一入口options对象只在此时可用。若需在页面多次显示时如从购物车页返回保持数据应在onShow中补充校验逻辑例如检查this.data.shop.id是否为空再决定是否重拉。3.4shop/detail.wxml使用wx:for渲染商品列表并绑定加购事件商品列表采用wx:for循环每个商品卡片绑定独立的addCart事件并通过>!-- pages/shop/detail.wxml -- view classgoods-list view classgoods-item wx:for{{goods}} wx:keyid >// pages/shop/detail.js addCart(e) { const index e.currentTarget.dataset.index; const goodsItem this.data.goods[index]; // 从全局 cart 数据中读取当前购物车 let cart wx.getStorageSync(cartItems) || []; // 查找是否已存在该商品 const existing cart.find(item item.id goodsItem.id); if (existing) { existing.count 1; } else { cart.push({ id: goodsItem.id, name: goodsItem.name, price: goodsItem.price, count: 1, image: goodsItem.image }); } wx.setStorageSync(cartItems, cart); wx.showToast({ title: 已加入购物车, icon: success }); }注意wx.setStorageSync是同步写入频繁调用会影响性能。实际项目中建议使用防抖debounce或批量合并策略。cartItems存储格式为数组而非对象便于wx:for直接遍历且find方法比filter更高效。4. 购物车与订单提交本地缓存 接口校验的双保险机制购物车是外卖小程序最易出错的模块——用户反复加减、跨页面同步、库存变化导致的超卖都要求本地与服务端状态强一致。Demo 采用“本地缓存主导 提交时服务端最终校验”的策略既保证操作流畅性又规避数据不一致风险。4.1cart/index.js读取、计算、渲染购物车数据购物车页在onShow中读取缓存并实时计算总价与商品数// pages/cart/index.js Page({ data: { cartItems: [], totalPrice: 0, totalCount: 0 }, onShow() { this.loadCart(); }, loadCart() { const cart wx.getStorageSync(cartItems) || []; let total 0; let count 0; cart.forEach(item { total item.price * item.count; count item.count; }); this.setData({ cartItems: cart, totalPrice: parseFloat(total.toFixed(2)), totalCount: count }); }, updateCount(e) { const { index, type } e.currentTarget.dataset; const cart wx.getStorageSync(cartItems) || []; const item cart[index]; if (type add) { item.count 1; } else if (type minus item.count 1) { item.count - 1; } else if (type minus item.count 1) { cart.splice(index, 1); // 删除商品 } wx.setStorageSync(cartItems, cart); this.loadCart(); // 重新计算并刷新 UI }, clearCart() { wx.setStorageSync(cartItems, []); this.setData({ cartItems: [], totalPrice: 0, totalCount: 0 }); } });提示onShow比onLoad更适合购物车页因为用户可能从其他页面如商品页返回此时需重新读取最新缓存。updateCount中item.count的修改直接作用于cart数组splice删除后需调用loadCart()重算而非setData单独更新cartItems避免totalPrice和totalCount不同步。4.2order/submit.js提交前校验 接口幂等性保障订单提交页不直接发送请求而是先校验本地购物车非空再调用服务端创建订单接口// pages/order/submit.js Page({ data: { address: null, remark: }, onLoad() { this.loadAddress(); }, loadAddress() { const address wx.getStorageSync(defaultAddress); if (address) { this.setData({ address }); } }, formSubmit(e) { const cart wx.getStorageSync(cartItems) || []; if (cart.length 0) { wx.showToast({ title: 购物车为空, icon: none }); return; } const orderData { items: cart.map(item ({ goods_id: item.id, count: item.count, price: item.price })), address_id: this.data.address?.id, remark: this.data.remark }; getApp().request({ url: /orders, method: POST, data: orderData }).then(res { // 提交成功后清空购物车 wx.setStorageSync(cartItems, []); wx.showToast({ title: 下单成功, icon: success }); setTimeout(() { wx.navigateTo({ url: /pages/order/list?order_id${res.data.order_id} }); }, 1500); }).catch(err { console.error(提交订单失败, err); wx.showToast({ title: 提交失败请重试, icon: none }); }); } });注意服务端接口/orders必须实现幂等性如通过X-Idempotency-Key请求头或订单号去重防止用户连续点击“提交”按钮导致重复下单。前端setTimeout跳转是为了给用户明确的成功反馈避免立即跳转导致用户误以为失败。4.3order/list.js分页加载历史订单并处理状态流转订单列表页支持下拉刷新与上拉加载使用wx.pageScrollTo实现滚动定位// pages/order/list.js Page({ data: { orders: [], page: 1, pageSize: 10, hasMore: true, loading: false }, onLoad(options) { if (options.order_id) { // 从提交页跳转时高亮新订单 this.setData({ highlightOrderId: options.order_id }); wx.pageScrollTo({ scrollTop: 0 }); } }, onPullDownRefresh() { this.setData({ page: 1, orders: [], hasMore: true }); this.loadOrders(); }, onReachBottom() { if (this.data.hasMore !this.data.loading) { this.setData({ page: this.data.page 1 }); this.loadOrders(); } }, loadOrders() { this.setData({ loading: true }); getApp().request({ url: /orders?page${this.data.page}size${this.data.pageSize} }).then(res { const newOrders [...this.data.orders, ...res.data.list]; this.setData({ orders: newOrders, hasMore: res.data.has_more, loading: false }); wx.stopPullDownRefresh(); }).catch(() { this.setData({ loading: false }); wx.stopPullDownRefresh(); }); } });提示onReachBottom触发时需双重校验hasMore和loading避免重复请求。highlightOrderId用于在order/list.wxml中给新订单添加highlightclass配合 CSS 动画实现视觉引导。5. 修改刚进入的加载页面从app.js启动屏到pages/splash/index的渐进式过渡“修改刚进入的加载页面”是高频搜索词但微信小程序本身不提供原生启动屏 API。Demo 采用业界通用的“白屏占位 自定义 splash 页面”方案在app.js的onLaunch中插入一层中间页实现可控的加载体验。5.1 创建pages/splash/index作为启动过渡页该页面无复杂逻辑仅展示品牌 Logo 与加载动画并在资源就绪后自动跳转!-- pages/splash/index.wxml -- view classsplash-container image src/assets/logo.png classlogo/image view classloading-indicator view classdot/view view classdot/view view classdot/view /view /view// pages/splash/index.js Page({ data: { loaded: false }, onLoad() { // 模拟资源加载如检查登录态、预加载首屏数据 this.checkReady(); }, checkReady() { // 实际项目中可在此处调用 getApp().checkLogin() 或预拉取首页 banner setTimeout(() { // 加载完成后跳转首页 wx.switchTab({ url: /pages/index/index }); }, 1200); } });注意wx.switchTab只能跳转 tabBar 页面因此index必须在app.json的tabBar.list中。setTimeout时间应根据实际网络请求耗时动态调整硬编码 1200ms 仅作演示。5.2 修改app.js的onLaunch流程插入 splash 页原onLaunch逻辑被重构为“启动 → 显示 splash → 校验 → 跳转”// app.js App({ // ... 其他配置 onLaunch() { // 1. 立即跳转至 splash 页 wx.redirectTo({ url: /pages/splash/index }); // 2. 同时进行后台校验不阻塞 splash 显示 this.checkAuthAndInit(); }, checkAuthAndInit() { const token wx.getStorageSync(auth_token); if (token) { this.globalData.token token; // 可在此处预加载用户信息、常用地址等 getApp().request({ url: /user/profile }) .then(profile { this.globalData.profile profile; }); } } });提示wx.redirectTo会关闭当前页面即空白启动页打开splash页避免白屏时间过长。checkAuthAndInit是异步操作不影响 splash 页的渲染速度。若需更精细控制可在splash.js中暴露setReadyCallback方法由app.js注册回调。5.3splash.wxml的 CSS 实现呼吸式加载动画使用纯 CSS 实现三个圆点依次放大缩小无需 JS 控制/* pages/splash/index.wxss */ .splash-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; background-color: #f8f8f8; } .logo { width: 120rpx; height: 120rpx; margin-bottom: 60rpx; } .loading-indicator { display: flex; justify-content: center; align-items: center; gap: 20rpx; } .dot { width: 20rpx; height: 20rpx; background-color: #007AFF; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out; } .dot:nth-child(1) { animation-delay: -0.32s; } .dot:nth-child(2) { animation-delay: -0.16s; } keyframes bounce { 0%, 80%, 100% { transform: scale(0.3); } 40% { transform: scale(1); } }注意animation-delay为每个点设置不同延迟形成波浪式动画效果。transform: scale()比width/height更高效避免重排。gap属性在基础库 2.25.0 支持旧版本需用margin替代。本文还有配套的精品资源点击获取
