美食之家小程序

美食之家小程序

项目简介

这是一个美食菜谱分享的微信小程序，采用纯前端实现，使用本地Mock数据模拟后端接口。项目完整实现了美食浏览、分类筛选、菜谱详情、收藏管理、评论互动、用户发布等核心功能，适合作为微信小程序开发学习项目或计算机设计参考。

技术栈

技术	版本/说明
开发框架	微信小程序原生框架
基础库版本	v2 (最新稳定版)
开发语言	JavaScript (ES6+)
样式语言	WXSS (微信小程序样式)
模板语言	WXML (微信小程序模板)
数据存储	本地Storage持久化
数据模拟	Mock Data (本地模拟数据)

项目特点

• 纯前端实现：无需后端服务器，所有数据使用本地Mock模拟
• 数据持久化：菜谱、收藏、评论数据使用 wx.setStorageSync 本地存储，关闭小程序后数据不丢失
• 完整业务流程：涵盖美食浏览、分类筛选、收藏管理、评论互动、用户发布等完整流程
• UI设计精美：界面风格简洁大方，橙红色主题配色，符合美食类应用调性
• 用户系统：支持用户信息管理和个人中心功能

功能模块

1. 首页模块 (pages/index)

• 轮播图展示精选美食
• 美食分类入口（炒菜、午餐、汤羹、早餐、甜点、其他）
• 热门美食推荐列表
• 搜索入口
• 点击美食进入详情页

2. 分类模块 (pages/cate)

• 左侧分类导航栏
• 右侧分类美食列表
• 支持分类切换筛选
• 点击进入美食详情

3. 搜索模块 (pages/search)

• 关键词搜索美食
• 搜索结果列表展示
• 点击进入美食详情

4. 美食详情模块 (pages/detail)

• 美食封面图展示
• 美食名称、分类、制作方式
• 所需原料介绍
• 制作步骤说明
• 收藏/取消收藏功能
• 评论列表展示
• 跳转评论页面

5. 收藏模块 (pages/star)

• 我的收藏列表展示
• 收藏美食封面、名称
• 点击进入美食详情
• 支持取消收藏

6. 评论模块 (pages/comment)

• 发表评论功能
• 评论列表展示
• 编辑评论功能
• 删除评论功能

7. 资讯模块 (pages/news)

• 美食资讯列表展示
• 资讯封面、标题、时间
• 点击进入资讯详情

8. 资讯详情模块 (pages/news_detail)

• 资讯完整内容展示
• 标题、发布时间
• 正文内容

9. 发布美食模块 (pages/add)

• 美食标题输入
• 原料输入
• 制作方式输入
• 制作步骤输入
• 分类选择
• 封面图片上传
• 提交发布功能

10. 我的发布模块 (pages/my_add)

• 我发布的美食列表
• 支持删除已发布美食
• 点击进入美食详情

11. 我的模块 (pages/my)

• 用户头像、昵称展示
• 我的收藏入口
• 我的发布入口
• 发布美食入口
• 个人信息设置入口

12. 个人信息模块 (pages/userInfo)

• 修改头像
• 修改昵称
• 修改性别
• 保存个人信息

项目结构

meishi/
├── app.js                    # 小程序入口文件，全局数据管理
├── app.json                  # 小程序全局配置（页面路由、TabBar、窗口样式）
├── app.wxss                  # 全局样式文件
├── project.config.json       # 项目配置文件
├── project.private.config.json # 项目私有配置
├── sitemap.json              # 小程序索引配置
├── images/                   # 图片资源目录
│   ├── tabbar/               # TabBar图标
│   │   ├── index.png         # 首页图标
│   │   ├── index_color.png   # 首页选中图标
│   │   ├── category.png      # 分类图标
│   │   ├── category_color.png # 分类选中图标
│   │   ├── xuancai.png       # 资讯图标
│   │   ├── xuancai_color.png # 资讯选中图标
│   │   ├── star.png          # 收藏图标
│   │   ├── star_color.png    # 收藏选中图标
│   │   ├── my.png            # 我的图标
│   │   └── my_color.png      # 我的选中图标
│   ├── cate/                 # 分类图标
│   │   ├── 1.png ~ 6.png     # 各分类图标
│   ├── food/                 # 美食图片
│   │   ├── 1.jpg ~ 24.jpg    # 美食封面图
│   │   └── default-avatar.jpg # 默认头像
│   ├── banner.jpg            # 轮播图
│   ├── search.png            # 搜索图标
│   ├── star.png              # 收藏图标
│   ├── star1.png             # 已收藏图标
│   ├── right.png             # 右箭头图标
│   └── mine.png              # 我的图标
├── pages/                    # 页面目录
│   ├── index/                # 首页
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── cate/                 # 分类页
│   │   ├── cate.js
│   │   ├── cate.json
│   │   ├── cate.wxml
│   │   └── cate.wxss
│   ├── search/               # 搜索页
│   │   ├── search.js
│   │   ├── search.json
│   │   ├── search.wxml
│   │   └── search.wxss
│   ├── detail/               # 美食详情页
│   │   ├── detail.js
│   │   ├── detail.json
│   │   ├── detail.wxml
│   │   └── detail.wxss
│   ├── star/                 # 收藏页
│   │   ├── star.js
│   │   ├── star.json
│   │   ├── star.wxml
│   │   └── star.wxss
│   ├── comment/              # 评论页
│   │   ├── comment.js
│   │   ├── comment.json
│   │   ├── comment.wxml
│   │   └── comment.wxss
│   ├── news/                 # 资讯列表页
│   │   ├── news.js
│   │   ├── news.json
│   │   ├── news.wxml
│   │   └── news.wxss
│   ├── news_detail/          # 资讯详情页
│   │   ├── detail.js
│   │   ├── detail.json
│   │   ├── detail.wxml
│   │   └── detail.wxss
│   ├── add/                  # 发布美食页
│   │   ├── add.js
│   │   ├── add.json
│   │   ├── add.wxml
│   │   └── add.wxss
│   ├── my_add/               # 我的发布页
│   │   ├── my_add.js
│   │   ├── my_add.json
│   │   ├── my_add.wxml
│   │   └── my_add.wxss
│   ├── my/                   # 我的页面
│   │   ├── my.js
│   │   ├── my.json
│   │   ├── my.wxml
│   │   └── my.wxss
│   └── userInfo/             # 个人信息页
│       ├── userInfo.js
│       ├── userInfo.json
│       ├── userInfo.wxml
│       └── userInfo.wxss
└── utils/                    # 工具类目录
    ├── api.js                # API接口封装
    ├── data.js               # Mock数据文件
    ├── request.js            # 请求封装
    └── util.js               # 工具函数

数据模型

分类数据 (cate)

{
  id: 1,                      // 分类ID
  title: '炒菜',              // 分类名称
  cover: '../../images/cate/1.png'  // 分类图标
}

美食数据 (food)

{
  id: 1,                      // 美食ID
  title: '水果点心巧克力蛋糕', // 美食名称
  cate_id: 4,                 // 所属分类ID
  material: '水果、巧克力、蛋糕粉', // 所需原料
  money: 12,                  // 预估成本
  ways: '烘焙',               // 制作方式
  img: '../../images/food/1.jpg', // 封面图片
  create_time: '2022-11-6',   // 创建时间
  step: '先切好水果点心，然后再烘焙蛋糕', // 制作步骤
  user_id: 1                  // 发布用户ID
}

资讯数据 (news)

{
  id: 1,                      // 资讯ID
  title: '80、90、00、10后喜欢去的餐厅有哪些...', // 标题
  poster: '../../images/news_1.jpeg', // 封面图
  content: '资讯正文内容...',  // 正文内容
  create_time: '2023-12-30 09:36:49' // 发布时间
}

收藏数据 (star)

{
  id: 1672531200000,          // 收藏记录ID（时间戳）
  user_id: 1,                 // 用户ID
  food_id: 1,                 // 美食ID
  title: '水果点心巧克力蛋糕', // 美食名称
  img: '../../images/food/1.jpg' // 美食封面
}

评论数据 (comment)

{
  id: 1672531200000,          // 评论ID（时间戳）
  user_id: 1,                 // 用户ID
  food_id: 1,                 // 美食ID
  content: '这道菜太好吃了！'  // 评论内容
}

用户数据 (userInfo)

{
  id: 1,                      // 用户ID
  nickname: '微信用户',       // 昵称
  avatar: 'https://...',      // 头像URL
  username: '',               // 用户名
  sex: 1                      // 性别：1男 2女
}

核心业务逻辑

1. 美食查询

// 按关键词搜索美食
export function fetchFoodList({ title = '' }) {
  const { food } = wx.getStorageSync('data');
  let newFood = food;
  if (title) {
    newFood = food.filter((item) => item.title.includes(title));
  }
  return newFood;
}

// 按分类筛选美食
export function fetchFoodByCateList({ cate_id = 0 }) {
  const { food } = wx.getStorageSync('data');
  return food.filter((c) => c.cate_id == cate_id);
}

2. 收藏功能

// 更新收藏状态（收藏/取消收藏）
export function fetchUpdateStar(params) {
  let data = wx.getStorageSync('data');
  const result = data.star.find(
    (c) => c.user_id == params.user_id && c.food_id == params.food_id,
  );

  if (!result) {
    // 添加收藏
    data.star.push({ id: +new Date(), ...params });
    return '收藏成功';
  } else {
    // 取消收藏
    data.star = data.star.filter((c) => c.id != result.id);
    return '取消收藏';
  }
}

3. 评论功能

// 创建评论
export function fetchAddComment(params) {
  let data = wx.getStorageSync('data');
  data.comment.push({
    id: +new Date(),
    ...params,
  });
  wx.setStorageSync('data', { ...data });
}

// 删除评论
export function fetchDelComment(params) {
  let data = wx.getStorageSync('data');
  data.comment = data.comment.filter((c) => c.id != params.id);
  wx.setStorageSync('data', { ...data });
}

4. 发布美食

// 新增美食
export function fetchAddFood(params) {
  let data = wx.getStorageSync('data');
  data.food.push({
    id: +new Date(),
    ...params,
  });
  wx.setStorageSync('data', { ...data });
}

5. 数据初始化

// app.js 中初始化数据
onLaunch() {
  if (!wx.getStorageSync('data')) {
    wx.setStorageSync('data', data);  // 写入默认数据
  }
}

页面路由配置

{
  "pages": [
    "pages/index/index", // 首页（默认启动页）
    "pages/cate/cate", // 分类页
    "pages/search/search", // 搜索页
    "pages/comment/comment", // 评论页
    "pages/userInfo/userInfo", // 个人信息页
    "pages/detail/detail", // 美食详情页
    "pages/star/star", // 收藏页
    "pages/add/add", // 发布美食页
    "pages/my_add/my_add", // 我的发布页
    "pages/my/my", // 我的页面
    "pages/news/news", // 资讯列表页
    "pages/news_detail/detail" // 资讯详情页
  ]
}

TabBar配置

{
  "tabBar": {
    "selectedColor": "#FB6650",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/cate/cate",
        "text": "分类"
      },
      {
        "pagePath": "pages/news/news",
        "text": "资讯"
      },
      {
        "pagePath": "pages/star/star",
        "text": "收藏"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的"
      }
    ]
  }
}

运行环境要求

• 微信开发者工具：建议使用最新稳定版
• 基础库版本：2.19.0 及以上
• AppID：需替换为自己的AppID

快速开始

1. 克隆/下载项目

将项目文件夹下载到本地

2. 导入项目

1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择项目目录 meishi
4. 填入AppID（可使用测试号或自己的AppID）
5. 点击"导入"

3. 运行项目

导入成功后，项目会自动编译运行，可在模拟器中预览效果

4. 真机调试

点击工具栏"预览"按钮，扫码在手机上体验

预置测试数据

美食分类

分类ID	分类名称
1	炒菜
2	午餐
3	汤羹
4	早餐
5	甜点
6	其他

美食菜谱（部分）

名称	分类	制作方式	原料
水果点心巧克力蛋糕	早餐	烘焙	水果、巧克力、蛋糕粉
花生酥糖点心	早餐	烘焙	花生碎、白砂糖、面粉
西蓝花炒豆腐	炒菜	清炒	西蓝花、豆腐
酸菜鱼	炒菜	煮	草鱼、酸菜
可乐鸡翅	炒菜	炸	鸡翅
玉米排骨汤	午餐	炖	排骨、玉米
灌汤小笼包	汤羹	蒸	面粉、肉沫
自制酸梅汤	甜点	研磨再煮	酸梅

界面预览

项目包含演示视频文件 美食-效果展示.mp4，可查看完整功能演示。

扩展建议

如需进一步完善项目，可考虑以下扩展：

1. 接入真实后端：将Mock数据替换为真实API接口
2. 用户登录系统：接入微信登录，实现真实用户体系
3. 图片上传：接入云存储，实现真实图片上传功能
4. 点赞功能：为美食和评论添加点赞功能
5. 分享功能：支持分享美食到好友和朋友圈
6. 视频教程：添加美食制作视频教程
7. 营养分析：添加菜品营养成分分析
8. 智能推荐：根据用户喜好推荐美食
9. 食材购买：接入电商平台购买食材
10. 社区互动：添加美食达人关注、私信功能

注意事项

1. 本项目为学习演示项目，所有数据均为模拟数据
2. 登录功能需要配置真实的AppID和AppSecret
3. 图片上传功能为本地模拟，实际使用需接入云存储
4. 如需发布上线，请替换为自己的AppID并完善相关资质

许可证

本项目仅供学习交流使用，请勿用于商业用途。

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/food_min_only-meishi