微信小程序实战案例 - 餐馆点餐系统 阶段1 - 菜单浏览

阶段 1 – 菜单浏览（超详细版）

目标：完成「首页＝菜品卡片列表」

• 打好 UI 地基
• 会从 云数据库 拉取 categories / dishes 并渲染
• 打 Git Tag v1.0‑menu

---

1. 技术/知识点速览

知识点	关键词	说明
云数据库	db.collection().where().get()	小程序端查询示例
图片优化	<image lazy-load />	懒加载，减少首屏体积
性能	Skeleton / 分段加载	骨架屏 + 滚动分页（可选）

---

2. 前置准备

1. 创建首页页面

   # 工具中新建
   miniprogram/pages/index/
   

---

3. 设计数据结构（仅 2 张核心表）

集合	主要字段	备注
categories	_id, name, sort	sort 用于 Tab 顺序
dishes	_id, name, price, img, categoryId, spicyLevel, sold	后续统计销量可用

种子数据：在 阶段 0 的 db/seed.js 里补充 3‑5 个分类、每类 4‑5 道菜。

你可以在微信开发者工具「云开发控制台 → 数据库」中手动插入测试数据：

// categories
{ "_id": "001", "name": "热菜", "sort": 1 }
{ "_id": "002", "name": "凉菜", "sort": 2 }// dishes
{ "name": "宫保鸡丁", "price": 18, "img": "xxx", "categoryId": "001" }
{ "name": "拍黄瓜", "price": 10, "img": "xxx", "categoryId": "002" }

---

4. 页面文件详解

4.1 index.json

{"navigationBarTitleText": "点餐"
}

4.2 index.wxml —— 结构布局

<view class="dish-list"><view wx:for="{{dishes}}" wx:key="_id" class="dish-card"><image class="thumb" src="{{item.img}}" mode="aspectFill" lazy-load /><view class="info"><text class="name">{{item.name}}</text><text class="price">¥{{item.price}}</text></view><button class="add-btn" data-dish="{{item}}" bindtap="onAddCart">加入</button></view>
</view>

• lazy-load 属性让图片只在进入视口时加载，提高性能。

4.3 index.wxss —— 简易样式

.dish-list {display: flex;flex-direction: column;padding: 16rpx;
}
.dish-card {display: flex;align-items: center;margin-bottom: 20rpx;background: #fff;border-radius: 12rpx;overflow: hidden;box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}
.thumb {width: 100rpx;height: 100rpx;flex-shrink: 0;border-radius: 8rpx;margin: 12rpx;
}
.info {flex: 1;display: flex;flex-direction: column;
}
.name {font-size: 30rpx;font-weight: bold;
}
.price {color: #fa541c;margin-top: 8rpx;
}
.add-btn {background-color: #07c160;color: white;font-size: 24rpx;padding: 0 20rpx;margin-right: 12rpx;height: 60rpx;line-height: 60rpx;border-radius: 30rpx;
}

4.4 index.js —— 业务逻辑

const cart = require('../../store/cart')Page({data: {dishes: []},onLoad() {this.loadDishes()},async loadDishes() {const db = wx.cloud.database()const res = await db.collection('dishes').get()this.setData({ dishes: res.data })},onAddCart(e) {const dish = e.currentTarget.dataset.dishcart.add(dish)wx.setTabBarBadge({ index: 1, text: String(cart.totalCount()) })wx.showToast({ title: '已加入购物车', icon: 'success' })}
})

---

5. 性能小贴士（可选提升）

场景	做法
图片很多时	给 <image> 加 mode="aspectFill" + lazy-load，并在云存储里裁剪到 300×300
数据过多	分页：limit(20).skip(page*20)；滑到列表底部触发 onReachBottom 追加
切换 Tab 卡顿	预取下一分类的菜品（Promise.all）或使用本地缓存

---

6. Git Tag & 自测清单

1. git add . && git commit -m "feat: menu browse"
2. git tag v1.0-menu && git push --tags
3. 打开开发者工具 → 真机预览，确认：
   • 菜品卡片加载、价格/销量显示正确
   • 图片懒加载生效（网络面板可观察请求）
   • 点击卡片能弹出「已加入」提示
     

---

7. 练习（巩固 & 拓展）

难度	练习内容
⭐	给 dishes 增加 spicyLevel 字段（0‑3），在卡片右侧用 🌶️ 图标展示辣度。
⭐⭐⭐	实现「下拉刷新」：onPullDownRefresh 重新拉取当前分类数据。
⭐⭐⭐	引入 IntersectionObserver，把列表改成 瀑布流 + 懒加载分页（体验电商式长列表）。

---

阶段小结

• 至此，你已掌握 页面结构 → 云数据库查询 → 图片优化 的完整闭环。
• 代码行数 ≈ 150，适合新手阅读。
• 下一阶段（购物车）将基于本页数据做 状态管理，建议 保持当前目录结构 并直接开新分支：

  git checkout -b feat/cart
  

祝你编码愉快，继续加油！