更新记录

1.0.0（2026-06-01） 下载此版本

v1.0.0 首次发布

• 首页：搜索栏 + Banner 轮播 + 4 分类入口（饮品/凉菜/烧烤/小吃）+ 推荐商家列表
• 分类页：左侧一级分类 + 右侧菜品列表 + 动态加购
• 商家详情页：菜品 Tab 切换 + 加购 + 底部购物车栏
• 购物车页：商品管理 + 全选/单选 + 数量增减 + 总价计算 + 结算跳转
• 订单确认页：收货地址选择 + 费用明细 + 备注 + 防抖提交
• 个人中心：用户头像 + 订单状态入口 + 地址管理/优惠券/设置功能入口
• 设计系统：毛玻璃 glassmorphism + 落日橘配色 + 35 个独立单图图标
• 双端适配：微信小程序原生 custom-tab-bar + H5 条件编译

平台兼容性

uni-app

科秒外卖点餐小程序模板

基于 uni-app + Vue3 Composition API 的外卖点餐小程序前端模板，支持微信小程序和 H5 双端运行。

功能模块

技术栈

• 框架: uni-app 3.0+ (Vue3 Composition API)
• 语言: JavaScript (script setup)
• 样式: SCSS + CSS 变量设计令牌
• 图标: 独立 PNG 单图方案 (data-icon + CSS background-image)
• 状态管理: getApp().globalData 桥接（Vue 页面 ↔ 原生 TabBar）

快速开始

1. 导入项目

将本模板导入 HBuilderX：

• HBuilderX → 文件 → 导入 → 从本地目录导入
• 选择解压后的 qianduan 目录

2. 配置

编辑 manifest.json：

{
  "mp-weixin": {
    "appid": "你的小程序AppID"
  }
}

3. 运行

微信小程序（需要微信开发者工具）：

HBuilderX → 运行 → 运行到小程序模拟器 → 微信开发者工具

H5 网页预览（快速调试 UI）：

HBuilderX → 运行 → 运行到浏览器 → Chrome

4. 图片资源

模板内置 43 个视觉资产（35 图标 + 1 背景 + 7 横幅），默认为毛玻璃落日橘风格。

• 微信小程序：图片通过 HTTP 服务器提供，需在 static/ 目录下启动 python -m http.server 9999
• H5：图片通过 /static/ 本地路径加载

如要替换为自己的图片，修改 App.vue 中 [data-icon]、[data-bg]、[data-banner] 对应的 url()。

目录结构

├── App.vue                 # 全局设计令牌 + 图标注入
├── manifest.json            # uni-app 配置
├── pages.json               # 路由 + TabBar 配置
├── pages/
│   ├── index/index.vue      # 首页
│   ├── menu/menu.vue        # 分类/菜品列表
│   ├── cart/cart.vue        # 购物车
│   ├── mine/mine.vue        # 个人中心
│   ├── shop/shop.vue        # 商家详情
│   └── order-confirm/       # 订单确认
├── components/
│   └── TabBarH5.vue         # H5 端 TabBar 回退组件
├── custom-tab-bar/          # 微信原生自定义 TabBar
│   ├── index.js/wxml/wxss/json
├── static/
│   ├── icons/               # 35 个独立图标 PNG
│   ├── bg/                  # 1 张页面背景
│   └── banners/             # 7 张横幅 Banner
└── design_brief.json        # 设计参数参考

设计系统

平台兼容

交互规范

• 所有可点击元素配置 hover-class
• 加购/操作按钮调用 wx.vibrateShort 触感反馈
• 提交按钮有 loading 状态 + 防抖
• 异常操作通过 uni.showToast 反馈用户
• 底部悬浮按钮适配 safe-area-inset-bottom
• 购物车数据通过 getApp().globalData 桥接

注意事项

1. 模板数据为本地 mock，接入真实接口需替换 pages/*/ 中的数据请求逻辑
2. 微信小程序需在开发者工具中勾选"不校验合法域名"
3. 图片资源可替换为自己的品牌视觉，保留 data-icon 命名体系即可
4. 如需发布到其他小程序平台，custom-tab-bar 需要对应改写