微信小程序实战案例 - 餐馆点餐系统 阶段 0 - 环境就绪

阶段 0 – 环境就绪（超详细版）

目标：把本地开发环境、云端资源和版本管理都准备好，并打上 v0.1‑init Tag，为后续 1‑5 阶段奠定基础。

1. 硬件 & 软件准备

2. 安装微信开发者工具

1. 打开官方下载页（工具内含模拟器与 IDE）：
   https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
   选择 Stable Build，按系统下载并安装。citeturn4search1
2. 启动工具 → 使用 微信扫码登录（须与小程序后台同一微信号或被授权的体验者）。
3. 勾选 “同意并发送匿名数据” 可选；保持默认插件即可。

3. 申请 / 绑定 AppID

⚠️ 测试号仅供开发调试，发布前需换成正式 AppID，否则无法上线。

4. 创建云开发环境

1. 在开发者工具顶部菜单点击 云开发 → 根据提示 开通云开发。
2. 选择计费方式：按量计费（默认免费额度足够学习）。
3. 创建环境时命名为 canteen-prod（正式）或 canteen-dev（测试），记下 环境 ID。
4. 首次开通后需等待约 10 分钟，后台才会完成初始化，否则调用 API 会报 invalid scope。citeturn2search0

5. 初始化项目骨架

1. 新建项目
   • 开发者工具首页 → + → 选择 云开发快速启动模版 或 空白项目。
   • 目录建议：~/workspace/canteen-miniapp。
2. 推荐目录结构（空白项目）：

   canteen-miniapp/
   ├─ miniprogram/          # 前端
   │   ├─ pages/
   │   ├─ components/
   │   └─ utils/
   ├─ cloudfunctions/       # 云函数
   ├─ .gitignore
   └─ project.config.json
   

3. 在 项目详情 → 云开发设置 中，确认默认环境已指向第 4 步创建的环境 ID。

6. Git 版本库 & 首个 Tag

cd ~/workspace/canteen-miniapp
git init
echo ".DS_Store\nnode_modules\n/miniprogram/npm\ncloudfunctions/*/node_modules" > .gitignore
git add .
git commit -m "chore: init project skeleton"
git tag v0.1-init
git remote add origin git@github.com:<your‑name>/canteen-miniapp.git
git push -u origin main --tags

7. 上传示例菜品图片（云存储）

1. 在 云开发控制台 → 存储，创建文件夹 dishes/。
2. 上传 3‑5 张示例菜图（命名如 dish01.jpg）。
3. 复制其中一张的 临时链接，在 miniprogram/pages/index/index.json 里测试绑定，确保能正常显示。

8. 运行 & 本地测试

• 点击 编译 按钮（或 Cmd/Ctrl + B）查看模拟器效果。
• 右键项目根目录 → 在终端中打开，执行 npm install vant-weapp -S（后续阶段 1 会用到）。

9. 阶段里程碑检查

• ✅ 微信开发者工具可正常编译并预览空白页面。
• ✅ 云开发环境 ID 正确、可在「数据库」「存储」看到资源。
• ✅ GitHub/Gitee 上出现 v0.1‑init Tag。
• ✅ 项目目录与 .gitignore 设置完成。

完成以上步骤，即宣告 阶段 0 – 环境就绪 结束。接下来可切 git checkout -b feat/menu，进入 阶段 1 – 菜单浏览 的开发。祝编码愉快！