一、开发环境准备
1.1 安装 HBuilder X(uni-app 官方 IDE)
下载地址:https://dcloud.io/hbuilderx.html 这是核心开发工具,支持 Vue 语法,可编译到微信小程序。
介绍如何使用 uni-app 结合 AI 编程助手 Trae 快速开发扫码点餐微信小程序。内容包括环境准备(HBuilder X、微信开发者工具、Trae)、用户端模板导入与运行、利用云对象和数据库实现桌号管理与二维码生成,以及通过 uni-admin 搭建可视化管理后台。重点展示了 AI 辅助生成代码及 schema2code 自动化页面构建的流程。
下载地址:https://dcloud.io/hbuilderx.html 这是核心开发工具,支持 Vue 语法,可编译到微信小程序。

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

下载地址:https://www.trae.ai/ 用于辅助生成 UI 与逻辑代码。

使用'私房菜点餐项目前端模板'快速启动。 模板地址:https://ext.dcloud.net.cn/plugin?id=19865 点击'下载插件并导入 HBuilderX',系统会自动创建项目。

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

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

在 Trae 中设置个人与项目规则,确保生成的代码符合项目规范。
个人规则配置:
- 代码精简,不写冗余测试代码
- 忽略注释问题
- 不自主创建图片资源
- 回答直接、准确,避免泛泛而谈
- 默认使用中文回复
项目规则配置:
- 本项目基于 vue2 + uni-app + uniCloud 开发扫码点餐微信小程序
在 HBuilderX 中关联或新建云服务空间,后续所有数据与逻辑将托管在云端。

table.obj.js,用于处理桌号生成、二维码生成等业务逻辑zhuohao.schema.json,存储桌号、二维码、时间等字段
向 Trae 输入以下提示词,自动生成桌号管理相关代码:
# 开发扫码点餐小程序桌号管理功能
## 要求:
1. 通过云对象生成带桌号的小程序码,并上传至云数据库
2. 数据库包含:桌号、点餐二维码、创建时间、更新时间
3. 用户扫码后自动弹出桌号与人数选择窗
## 参考文档:
https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/qr-code/getUnlimitedQRCode.html
AI 会自动生成云函数逻辑、数据库操作及前端弹窗组件。

扫码后自动识别桌号,并弹出人数选择窗口。

在 HBuilderX 中选择'新建 → 项目 → uni-admin',一键生成后台管理系统。

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

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

首次运行后,在 uni-admin 后台中配置'桌号管理'菜单,刷新即可见。

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


微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online
基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online
Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online