企业官网建设流程全解析

美食之家小程序

项目简介

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

技术栈

项目特点

• 纯前端实现：无需后端服务器，所有数据使用本地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,// 分类IDtitle:'炒菜',// 分类名称cover:'../../images/cate/1.png'// 分类图标}

美食数据 (food)

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

资讯数据 (news)

{id:1,// 资讯IDtitle:'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,// 用户IDfood_id:1,// 美食IDtitle:'水果点心巧克力蛋糕',// 美食名称img:'../../images/food/1.jpg'// 美食封面}

评论数据 (comment)

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

用户数据 (userInfo)

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

核心业务逻辑

1. 美食查询

// 按关键词搜索美食exportfunctionfetchFoodList({title=''}){const{food}=wx.getStorageSync('data');letnewFood=food;if(title){newFood=food.filter((item)=>item.title.includes(title));}returnnewFood;}// 按分类筛选美食exportfunctionfetchFoodByCateList({cate_id=0}){const{food}=wx.getStorageSync('data');returnfood.filter((c)=>c.cate_id==cate_id);}

2. 收藏功能

// 更新收藏状态（收藏/取消收藏）exportfunctionfetchUpdateStar(params){letdata=wx.getStorageSync('data');constresult=data.star.find((c)=>c.user_id==params.user_id&&c.food_id==params.food_id,);if(!result){// 添加收藏data.star.push({id:+newDate(),...params});return'收藏成功';}else{// 取消收藏data.star=data.star.filter((c)=>c.id!=result.id);return'取消收藏';}}

3. 评论功能

// 创建评论exportfunctionfetchAddComment(params){letdata=wx.getStorageSync('data');data.comment.push({id:+newDate(),...params,});wx.setStorageSync('data',{...data});}// 删除评论exportfunctionfetchDelComment(params){letdata=wx.getStorageSync('data');data.comment=data.comment.filter((c)=>c.id!=params.id);wx.setStorageSync('data',{...data});}

4. 发布美食

// 新增美食exportfunctionfetchAddFood(params){letdata=wx.getStorageSync('data');data.food.push({id:+newDate(),...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. 真机调试

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

预置测试数据

美食分类

美食菜谱（部分）

界面预览

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

扩展建议

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

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

注意事项

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

许可证

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