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

news2025/4/20 13:50:52

阶段 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, sortsort 用于 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.dish
    cart.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
    

祝你编码愉快,继续加油!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2335514.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Dashboard的安装和基本使用

1.Dashboard简介&#xff1a; Dashboard是Kubernetes的Web图形用户界面&#xff08;GUI&#xff09;&#xff0c;它为用户提供了一个直观的方式来管理和监控Kubernetes集群。 2.实验基础和前置条件&#xff1a; 本实验以Kubernetes集群环境搭建与初始化-CSDN博客为基础和前置…

英语单词 list 11

前言 这一个 list 是一些简单的单词。感觉这个浏览单词的方法比较低效&#xff0c;所以准备每天最多看一个 list &#xff0c;真要提升英语水平&#xff0c;感觉还是得直接做阅读理解题。就像我们接触中文阅读材料一样&#xff0c;当然光知道这个表面意思还不够&#xff0c;还…

通义灵码助力Neo4J开发:快速上手与智能编码技巧

在 Web 应用开发中&#xff0c;Neo4J 作为一种图数据库&#xff0c;用于存储节点及节点间的关系。当图结构复杂化时&#xff0c;关系型数据库的查找效率会显著降低&#xff0c;甚至无法有效查找&#xff0c;这时 Neo4J 的优势便凸显出来。然而&#xff0c;由于其独特的应用场景…

高性能文件上传服务

高性能文件上传服务 —— 您业务升级的不二选择 在当今互联网数据量激增、文件体积日益庞大的背景下&#xff0c;高效、稳定的文件上传方案显得尤为重要。我们的文件分块上传服务端采用业界领先的 Rust HTTP 框架 Hyperlane 开发&#xff0c;凭借其轻量级、低延时和高并发的特…

Java Lambda 表达式详解:发展史、语法、使用场景及代码示例

Java Lambda 表达式详解&#xff1a;发展史、语法、使用场景及代码示例 1. Lambda 表达式的发展史 背景与动机 JDK 7 前&#xff1a;Java的匿名内部类虽强大&#xff0c;但代码冗余&#xff08;如事件监听器、集合遍历&#xff09;。JDK 8&#xff08;2014&#xff09;&#…

【从0到1学Elasticsearch】Elasticsearch从入门到精通(下)

我们在【从0到1学Elasticsearch】Elasticsearch从入门到精通&#xff08;上&#xff09;这边文章详细讲解了如何创建索引库和文档及javaAPI操作&#xff0c;但是在实战当中&#xff0c;我们还需要根据一些特殊字段对文档进行查找搜索&#xff0c;仅仅靠id查找文档是显然不够的。…

Python实现贪吃蛇二

上篇文章Python实现贪吃蛇一&#xff0c;实现了一个贪吃蛇的基础版本&#xff0c;但存在一些不足&#xff0c;也缺乏一些乐趣。本篇文章将对其进行一些改进&#xff0c;主要修改/实现以下几点&#xff1a; 1、解决食物随机生成的位置与蛇身重合问题 2、蛇身移动加速/减速功能 3…

基于51单片机的正负5V数字电压表( proteus仿真+程序+设计报告+讲解视频)

基于51单片机的正负5V数字电压表( proteus仿真程序设计报告讲解视频&#xff09; 仿真图proteus7.8及以上 程序编译器&#xff1a;keil 4/keil 5 编程语言&#xff1a;C语言 设计编号&#xff1a;S0101 1. 主要功能&#xff1a; 设计一个基于51单片机数字电压表 1、能够…

Java雪花算法

以下是用Java实现的雪花算法代码示例&#xff0c;包含详细注释和异常处理&#xff1a; 代码下面有解析 public class SnowflakeIdGenerator {// 起始时间戳&#xff08;2020-01-01 00:00:00&#xff09;private static final long START_TIMESTAMP 1577836800000L;// 各部分…

前端大屏可视化项目 局部全屏(指定盒子全屏)

需求是这样的&#xff0c;我用的项目是vue admin 项目 现在需要在做大屏项目 不希望显示除了大屏的其他东西 于是想了这个办法 至于大屏适配问题 请看我文章 底部的代码直接复制就可以运行 vue2 px转rem 大屏适配方案 postcss-pxtorem-CSDN博客 <template><div …

01_JDBC

文章目录 一、概述1.1、什么是JDBC1.2、JDBC原理 二、JDBC入门2.1、准备工作2.1.1、建库建表2.1.2、新建项目 2.2、建立连接2.2.1、准备四大参数2.2.2、加载驱动2.2.3、准备SQL语句2.2.4、建立连接2.2.5、常见问题 2.3、获取发送SQL的对象2.4、执行SQL语句2.5、处理结果2.6、释…

Spring Boot 热部署详解,包含详细的配置项说明

Spring Boot 热部署详解 1. 热部署简介 热部署&#xff08;Hot Deployment&#xff09;允许在应用运行时修改代码或配置文件&#xff0c;无需重启应用即可使更改生效。Spring Boot 通过 spring-boot-devtools 模块实现这一功能&#xff0c;其核心依赖于 LiveReload 技术和自动…

剑指Offer(数据结构与算法面试题精讲)C++版——day12

剑指Offer&#xff08;数据结构与算法面试题精讲&#xff09;C版——day12 题目一&#xff1a;小行星碰撞题目二&#xff1a;每日温度题目三&#xff1a;直方图最大矩形面积附录&#xff1a;源码gitee仓库 题目一&#xff1a;小行星碰撞 题目&#xff1a;输入一个表示小行星的数…

Docker学习笔记-docker安装、删除

一、在centOS 7中docker的默认安装目录 # Docker 主配置文件目录 ls /etc/docker# Docker 数据目录&#xff08;镜像、容器、卷等&#xff09; ls /var/lib/docker# Docker 可执行文件路径 which docker # 输出类似 /usr/bin/docker 二、docker文件目录说明 目录/文件用途/…

【Python 开源】你的 Windows 关机助手——PyQt5 版定时关机工具

&#x1f5a5;️ 你的 Windows 关机助手——PyQt5 版定时关机工具 相关资源文件已经打包成EXE文件&#xff0c;可双击直接运行程序&#xff0c;且文章末尾已附上相关源码&#xff0c;以供大家学习交流&#xff0c;博主主页还有更多Python相关程序案例&#xff0c;秉着开源精神的…

【Python爬虫】简单介绍

目录 一、基本概念 1.1 什么是爬虫 1.2 Python为什么适合爬虫 1.3 Python爬虫应用领域 &#xff08;1&#xff09;数据采集与分析 市场调研 学术研究 &#xff08;2&#xff09;内容聚合与推荐 新闻聚合 视频内容聚合 &#xff08;3&#xff09;金融领域 股票数据获…

使用MCP服务通过自然语言操作数据库(vscode+cline版本)

使用MCP服务操纵数据库(vscodecline版本) 本文主要介绍&#xff0c;在vscode中使用cline插件调用deepseek模型&#xff0c;通过MCP服务器 使用自然语言去操作指定数据库。本文使用的是以己经创建号的珠海航展数据库。 理解MCP服务&#xff1a; MCP&#xff08;Model Context…

Vue 3 + TypeScript 实现一个多语言国际化组件(支持语言切换与内容加载)

文章目录 一、项目背景与功能概览二、项目技术架构与依赖安装2.1 技术栈2.2 安装依赖 三、国际化组件实现3.1 创建 i18n 实例3.2 配置 i18n 到 Vue 应用3.3 在组件中使用国际化内容3.4 支持语言切换 四、支持类型安全4.1 添加类型支持4.2 自动加载语言文件 一、项目背景与功能概…

PhalApi 2.x:让PHP接口开发从“简单”到“极简”的开源框架

—— 专为高效开发而生&#xff0c;助你轻松构建高可用API接口 一、为什么选择PhalApi 2.x&#xff1f; 1.轻量高效&#xff0c;性能卓越 PhalApi 2.x 是一款专为接口开发设计的轻量级PHP框架&#xff0c;其核心代码精简但功能强大。根据开发者实测&#xff0c;在2核2G服务器…

Java 企业级应用:SOA 与微服务的对比与选择

企业级应用开发中&#xff0c;架构设计是决定系统可扩展性、可维护性和性能的关键因素。SOA&#xff08;面向服务的架构&#xff09;和微服务架构是两种主流的架构模式&#xff0c;它们各自有着独特的和设计理念适用场景。本文将深入探讨 SOA 和微服务架构的对比&#xff0c;并…