Cursor+Claude AI编程 2小时打造微信小程序扫码点餐系统(云函数,云数据库)

0 阅读6分钟

大家好,我是锋哥。最近连载更新《Cursor+Claude AI编程 2小时打造微信小程序扫码点餐系统(云函数,云数据库)》

QQ截图20260411204031.jpg

本课程主要结合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. 初始化系统

  1. 编译并预览小程序,首次进入会跳转到登录页
  2. 使用手机号绑定登录
  3. 首位用户登录后系统会提示是否初始化为管理员,确认后自动创建数据库集合和示例数据

6. 配置运营数据

  1. 进入管理员后台,在「分类管理」中添加菜品分类
  2. 在「菜品管理」中添加菜品,上传图片并设置价格
  3. 在「桌号管理」中添加桌号并生成小程序码
  4. 将小程序码打印并放置在对应餐桌上

7. 新订单提示音(可选)

在 miniprogram/audio/ 目录下放入名为 new-order.mp3 的音频文件,管理员端收到新订单时将自动播放提示音。

注意事项

  • 管理员通过 openid 识别,首位绑定手机号的用户可初始化为管理员
  • 顾客扫描桌号小程序码后自动关联桌号并进入点餐页面
  • 订单采用线下支付方式,不涉及微信支付接口
  • 管理员端需保持小程序处于前台以接收新订单的声音和震动提醒
  • 云函数超时时间配置为 20 秒,如遇超时可在 config.json 中调整
  • getOpenIdbindPhonecheckAdmingetUserInfoinitData 为白名单接口,无需登录即可调用