大家好,我是锋哥。最近连载更新《Cursor+Claude AI编程 2小时打造微信小程序扫码点餐系统(云函数,云数据库)》
本课程主要结合AI编程 Cursor 实现一个开源商业项目是-微信小程序扫码点餐系统,使用微信云函数和云数据库。讲解内容包括需求分析,架构和设计,利用Cursor AI编程实现Plan沟通项目方案,Agent生成项目,Agent修复bug和完善功能。同时也配套视频教程 《2027版 Cursor+Claude AI编程 2小时打造微信小程序扫码点餐系统(云函数,云数据库)》
基于微信小程序 + 云开发的扫码点餐系统,适用于小型门店、饭店等餐饮场景。顾客扫描桌号二维码即可自助点餐,管理员通过后台管理菜品、订单和桌号,无需额外服务器部署。
功能特性
顾客端
- 扫码点餐:扫描桌号小程序码直接进入对应桌号的菜单页
- 热门推荐:首页轮播展示热门标记菜品
- 分类浏览:按分类查看菜品,支持数量加减选择
- 提交订单:下单时可填写备注(口味偏好、忌口等)
- 追加点餐:下单后支持继续加菜
- 历史订单:查看个人历史订单记录
- 线下支付:无需在线支付,支持到店结账
管理员端
- 今日统计:实时查看当日顾客数、订单量、营业额
- 订单管理:接单、标记完成、取消订单,支持按状态筛选
- 新订单提醒:实时监听 + 轮询兜底,新订单到达时声音与震动提示
- 分类管理:菜品分类的增删改操作
- 菜品管理:菜品的增删改,支持图片上传、热门标记、上下架控制
- 桌号管理:桌号的增删改,一键生成小程序码
- 用户管理:查看用户列表,冻结/解冻用户
安全机制
- 手机号绑定登录,所有业务接口校验 openid
- 每日请求频率限制,单用户超 100 次/天自动冻结并记录日志
- 管理员身份独立校验,非管理员无法访问后台功能
系统演示图
技术栈
| 层级 | 技术 |
|---|---|
| 前端 | 微信小程序原生开发(WXML / WXSS / JS) |
| 后端 | 微信云函数(Node.js + wx-server-sdk) |
| 数据库 | 微信云开发数据库(文档型 NoSQL) |
| 存储 | 微信云存储(菜品图片、小程序码等) |
项目结构
├── miniprogram/ # 小程序前端
│ ├── app.js # 应用入口,云环境初始化
│ ├── app.json # 页面路由与全局配置
│ ├── app.wxss # 全局样式
│ ├── pages/ # 页面目录
│ │ ├── login/ # 登录页(手机号绑定)
│ │ ├── frozen/ # 账号冻结提示页
│ │ ├── index/ # 顾客首页(热门菜品)
│ │ ├── menu/ # 分类菜单与点餐
│ │ ├── order-confirm/ # 订单确认页
│ │ ├── order-result/ # 下单结果页
│ │ ├── my-orders/ # 我的订单
│ │ └── admin/ # 管理员模块
│ │ ├── index/ # 今日数据统计
│ │ ├── orders/ # 订单管理
│ │ ├── categories/ # 分类管理
│ │ ├── dishes/ # 菜品列表
│ │ ├── dish-edit/ # 菜品编辑
│ │ ├── tables/ # 桌号管理
│ │ └── users/ # 用户管理
│ ├── components/ # 公共组件
│ │ └── tab-bar/ # 自定义底部导航栏
│ ├── utils/ # 工具模块
│ │ ├── auth.js # 登录与权限
│ │ ├── adminOrderWatcher.js # 新订单监听器
│ │ └── util.js # 通用工具函数
│ ├── audio/ # 音频资源(新订单提示音)
│ └── images/ # 图片资源
│
├── cloudfunctions/ # 云函数目录
│ └── diancan/ # 主云函数
│ ├── index.js # 入口,action 路由分发
│ ├── config.json # 权限与超时配置
│ ├── package.json # 依赖(wx-server-sdk)
│ └── handlers/ # 业务处理模块
│ ├── common.js # 公共初始化与工具
│ ├── user.js # 用户相关
│ ├── category.js # 分类相关
│ ├── dish.js # 菜品相关
│ ├── table.js # 桌号相关
│ ├── order.js # 订单相关
│ ├── userManage.js # 用户管理
│ └── init.js # 初始化数据
│
├── project.config.json # 小程序项目配置
└── project.private.config.json # 本地私有配置
云数据库集合
| 集合名 | 说明 |
|---|---|
t_admin | 管理员信息 |
t_user | 用户信息(openid、手机号、状态等) |
t_category | 菜品分类 |
t_dish | 菜品(名称、价格、图片、分类、上架状态、热门标记等) |
t_table | 桌号(桌号名、小程序码) |
t_order | 订单(菜品明细、桌号、金额、状态、备注等) |
t_request_log | 请求日志(用于频率限制与异常检测) |
订单状态流转:0 待处理 → 1 制作中 → 2 已完成 / 3 已取消
云函数接口一览
所有业务通过调用云函数 diancan 的不同 action 实现:
| 模块 | action | 说明 |
|---|---|---|
| 用户 | getOpenId | 获取用户 openid |
bindPhone | 绑定手机号 | |
getUserInfo | 获取用户信息 | |
checkAdmin | 检查管理员身份 | |
| 分类 | getCategories | 获取分类列表 |
addCategory | 新增分类 | |
updateCategory | 更新分类 | |
deleteCategory | 删除分类 | |
| 菜品 | getDishes | 获取菜品列表 |
getHotDishes | 获取热门菜品 | |
addDish | 新增菜品 | |
updateDish | 更新菜品 | |
deleteDish | 删除菜品 | |
| 桌号 | getTables | 获取桌号列表 |
addTable | 新增桌号 | |
updateTable | 更新桌号 | |
deleteTable | 删除桌号 | |
genTableQRCode | 生成桌号小程序码 | |
| 订单 | createOrder | 创建订单 |
getOrders | 获取订单列表(管理员) | |
getMyOrders | 获取我的订单(顾客) | |
getTableOrders | 获取桌号订单 | |
updateOrderStatus | 更新订单状态 | |
getTodayStats | 获取今日统计 | |
getNewOrders | 获取新订单(轮询) | |
markNotified | 标记订单已通知 | |
| 用户管理 | getUserList | 获取用户列表 |
freezeUser | 冻结用户 | |
unfreezeUser | 解冻用户 | |
| 初始化 | initData | 初始化数据库集合与示例数据 |
cleanRequestLog | 清理请求日志 |
部署步骤
1. 导入项目
使用 微信开发者工具 导入本项目目录。
2. 开通云开发
在微信开发者工具中点击「云开发」按钮,开通云开发环境并记录环境 ID。
3. 配置云环境
打开 miniprogram/app.js,将 wx.cloud.init 中的 env 替换为你自己的云环境 ID:
wx.cloud.init({
env: '你的云环境ID',
traceUser: true
})
4. 部署云函数
在微信开发者工具中,右键点击 cloudfunctions/diancan 目录,选择「上传并部署:云端安装依赖」。
5. 初始化系统
- 编译并预览小程序,首次进入会跳转到登录页
- 使用手机号绑定登录
- 首位用户登录后系统会提示是否初始化为管理员,确认后自动创建数据库集合和示例数据
6. 配置运营数据
- 进入管理员后台,在「分类管理」中添加菜品分类
- 在「菜品管理」中添加菜品,上传图片并设置价格
- 在「桌号管理」中添加桌号并生成小程序码
- 将小程序码打印并放置在对应餐桌上
7. 新订单提示音(可选)
在 miniprogram/audio/ 目录下放入名为 new-order.mp3 的音频文件,管理员端收到新订单时将自动播放提示音。
注意事项
- 管理员通过 openid 识别,首位绑定手机号的用户可初始化为管理员
- 顾客扫描桌号小程序码后自动关联桌号并进入点餐页面
- 订单采用线下支付方式,不涉及微信支付接口
- 管理员端需保持小程序处于前台以接收新订单的声音和震动提醒
- 云函数超时时间配置为 20 秒,如遇超时可在
config.json中调整 getOpenId、bindPhone、checkAdmin、getUserInfo、initData为白名单接口,无需登录即可调用