效果抢先看

❝

扫码即点、自动识别桌号、前后端一体管理 —— 一个完整的点餐系统原来可以这么快上线！

---

一、开发环境准备

1.1 安装 HBuilder X（uni-app 官方 IDE）

下载地址：https://dcloud.io/hbuilderx.html
这是我们的核心开发工具，支持 Vue 语法，一键编译到微信小程序。

1.2 安装微信开发者工具

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
用于真机预览、调试与上传审核。

1.3 安装 Trae 国际版（AI 编程助手）

下载地址：https://www.trae.ai/
我们将用它辅助生成 UI 与逻辑代码，提升 3 倍开发效率。

---

二、快速创建用户端小程序

2.1 导入现成模板，5分钟搭建基础框架

我们使用 “私房菜点餐项目前端模板” 快速启动。
模板地址：https://ext.dcloud.net.cn/plugin?id=19865

点击“下载插件并导入 HBuilderX”，系统会自动创建项目：

导入后的项目结构清晰，包含基础页面与组件：

2.2 一键运行到小程序模拟器

在 HBuilderX 中选择“运行 → 运行到小程序模拟器 → 微信开发者工具”，即可预览效果：

---

三、AI 助力，智能开发桌号管理功能

3.1 配置 Trae 开发规则

在 Trae 中设置个人与项目规则，确保生成的代码符合项目规范：

个人规则配置：

- 代码精简，不写冗余测试代码
- 忽略注释问题
- 不自主创建图片资源
- 回答直接、准确，避免泛泛而谈
- 默认使用中文回复

项目规则配置：

- 本项目基于 vue2 + uni-app + uniCloud 开发扫码点餐微信小程序

3.2 关联 uniCloud 云空间

在 HBuilderX 中关联或新建云服务空间，后续所有数据与逻辑将托管在云端：

3.3 创建云对象与数据库

• 云对象：table.obj.js，用于处理桌号生成、二维码生成等业务逻辑

• 云数据库：zhuohao.schema.json，存储桌号、二维码、时间等字段

3.4 使用 AI 提示词生成核心功能

向 Trae 输入以下提示词，自动生成桌号管理相关代码：

# 开发扫码点餐小程序桌号管理功能
## 要求：
1. 通过云对象生成带桌号的小程序码，并上传至云数据库
2. 数据库包含：桌号、点餐二维码、创建时间、更新时间
3. 用户扫码后自动弹出桌号与人数选择窗
## 参考文档：
https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/qr-code/getUnlimitedQRCode.html

AI 会自动生成云函数逻辑、数据库操作及前端弹窗组件：

3.5 用户端实际效果

扫码后自动识别桌号，并弹出人数选择窗口，体验流畅：

---

四、搭建可视化管理系统（管理端）

4.1 基于 uni-admin 快速创建管理后台

在 HBuilderX 中选择“新建 → 项目 → uni-admin”，一键生成后台管理系统：

4.2 同步云对象与数据库

将之前创建的云对象和数据库同步到管理端项目中，实现数据互通：

4.3 使用 schema2code 自动生成管理页面

右键点击 zhuohao.schema.json，选择 schema2code，系统自动生成列表、新增、编辑等页面：

4.4 运行管理端并配置菜单

首次运行后，在 uni-admin 后台中配置“桌号管理”菜单，刷新即可见：

4.5 新增桌号并生成二维码

进入桌号管理页面，点击“新增”，输入桌号后提交，系统自动生成该桌的点餐二维码：