抖音小程序食谱菜谱工具项目总结
项目概述
这是一个严格按照抖音小程序开发规范制作的食谱菜谱小工具，使用Unicode emoji作为图标，无需外部图片资源。项目包含完整的菜谱数据管理和用户交互功能。
核心功能
1. 首页功能
-
滑屏加载数据，支持无限滚动
-
菜谱分类导航（家常菜、川菜、粤菜、甜品、汤类、素食等）
-
搜索入口
-
自定义底部导航栏
2. 搜索功能
-
支持关键词搜索（标题、描述、分类、食材）
-
部分匹配搜索算法
-
热门搜索推荐
-
搜索历史记录
-
分类筛选功能
3. 菜谱详情功能
-
详细食材清单
-
制作步骤说明
-
烹饪贴士
-
收藏功能
4. 收藏功能
-
菜谱收藏管理
-
收藏列表展示
-
取消收藏功能
技术特点
开发规范
-
严格遵循抖音小程序开发规范
-
使用MVVM架构模式
-
逻辑与UI分离
-
组件化开发思想
-
状态驱动视图更新
UI设计
-
使用Unicode emoji作为图标（无需外部图片资源）
-
响应式设计，适配不同屏幕尺寸
-
自定义底部导航栏替代原生导航
数据管理
-
300+条真实菜谱数据
-
完整的数据管理工具集
-
支持批量添加菜谱
-
支持单个菜谱添加
-
支持文本文件导入
项目结构
.
├── app.js # 小程序入口文件
├── app.json # 小程序全局配置
├── app.ttss # 小程序全局样式
├── project.config.json # 项目配置文件
├── recipes.js # 菜谱数据文件（300+条数据）
├── README.md # 项目说明文档
├── USAGE.md # 使用说明文档
├── pages # 页面目录
│ ├── index # 首页
│ ├── search # 搜索页
│ ├── recipeDetail # 菜谱详情页
│ └── favorites # 收藏页
└── tools # 数据管理工具
├── README.md # 工具使用说明
├── addRecipe.bat # Windows批处理脚本
├── addRecipe.js # 命令行添加菜谱工具
├── batchAddRecipes.js # 批量添加菜谱工具
├── batchRecipes.txt # 批量菜谱示例文件
├── dataManager.js # 核心数据管理类
└── textToRecipe.js # 文本转菜谱工具数据管理工具
工具功能
-
交互式添加菜谱 - 通过命令行交互方式添加
-
文本文件导入 - 支持从文本文件批量导入菜谱
-
快速添加菜谱 - 通过命令行参数快速添加
-
数据显示 - 显示菜谱总数等信息
使用方式
bash
# 交互式添加菜谱
node addRecipe.js
# 批量添加菜谱（一个文件多个菜谱）
node batchAddRecipes.js batchRecipes.txt
# 单个菜谱添加
node textToRecipe.js recipe.txt
# 快速添加菜谱
node addRecipe.js --title "菜谱名称"
# 显示菜谱总数
node addRecipe.js --count文件格式
支持单个和批量菜谱文件格式，菜谱之间用空行分隔。
Emoji图标使用
项目中使用了多种Unicode emoji作为图标：
-
? 首页
-
? 搜索
-
❤️ 收藏
-
⏱️ 制作时间
-
? 难度等级
-
?️ 份量
-
? 小贴士
项目优势
-
完全符合抖音小程序规范 - 严格按照平台要求开发
-
无外部依赖 - 使用emoji图标，减少包体积
-
数据丰富 - 包含300多条真实菜谱数据
-
易于扩展 - 完整的数据管理工具，便于添加新菜谱
-
用户体验优秀 - 滑屏加载、搜索优化、自定义导航
-
维护方便 - 清晰的项目结构和完整的文档
使用场景
-
用户浏览和搜索菜谱
-
学习制作各种菜系的菜品
-
收藏喜欢的菜谱
-
管理员通过工具添加新菜谱
-
批量导入菜谱数据
这个项目为用户提供了一个完整的菜谱浏览和管理解决方案，同时为管理员提供了便捷的数据管理工具，是一个功能完善、易于维护的抖音小程序应用。
以下是对整个小程序项目的详细总结，特别包含了接口（聚合数据api）信息：
项目概述
该项目是一个食谱查询小程序，采用单页面应用（SPA）结构，主要通过HTML、CSS和JavaScript构建。项目位于c:\Users\89604\Downloads\新建文件夹 (3)目录下，包含前端界面和后端代理服务。
核心功能
-
食谱搜索：用户可以通过搜索框输入关键词查询食谱，支持热门搜索标签
-
分类浏览：提供多种食谱分类（如家常菜、川菜、粤菜等），支持按分类浏览
-
食材查询：可以根据特定食材查找相关食谱
-
分页功能：搜索结果支持分页展示，每页显示30条记录
-
详情查看：点击食谱卡片可查看详细信息，包括食材、步骤和小贴士
API接口详情
项目通过Node.js代理服务器（server.js）调用外部食谱API，主要接口包括：
1. 食谱搜索接口
GET http://localhost:3000/api/search?keyword={关键词}&num=30&page={页码}-
功能：根据关键词搜索食谱
-
参数：
-
keyword：搜索关键词（如菜品名称、食材等） -
num：每页显示的记录数（固定为30） -
page：当前页码
-
-
返回：食谱列表数据，包含食谱ID、名称、图片、描述等信息
2. 食谱详情接口
GET http://localhost:3000/api/detail?id={食谱ID}-
功能：获取指定食谱的详细信息
-
参数：
id：食谱唯一标识符
-
返回：食谱的详细信息，包括食材清单、烹饪步骤、小贴士等
3. 分类-食材映射接口
项目内部实现了分类到食材的映射逻辑，主要包括：
javascript
const categoryToIngredient = {
'家常菜': '猪肉',
'川菜': '辣椒',
'粤菜': '海鲜',
'甜点': '鸡蛋',
'素食': '蔬菜',
'汤羹': '鸡肉',
'水果类': '苹果',
'蔬菜类': '胡萝卜'
};-
功能：将用户点击的分类转换为对应的食材关键词进行搜索
-
使用方式：点击分类按钮时，根据映射关系获取对应食材关键词，然后调用搜索接口
代理服务实现
项目使用Node.js创建了代理服务器（server.js），主要功能包括：
-
转发前端API请求到实际的食谱API服务
-
解决跨域问题
-
处理请求和响应数据
主要修改内容
-
页面结构优化：
-
移除了传统网页的顶部导航栏和页脚
-
添加了固定的底部导航栏，符合移动APP设计风格
-
配置了禁止缩放的视口设置，提升移动设备体验
-
-
UI风格调整：
-
将搜索区域改为圆角输入框和标签式热门搜索
-
重构分类区域为4列网格布局，并增加了水果类、蔬菜类分类
-
调整菜谱展示区域为垂直列表布局
-
优化模态框尺寸和样式，适配移动端
-
-
交互体验优化：
-
实现了底部导航栏的点击事件处理和活跃状态切换
-
添加了触摸反馈和自动滚动功能
-
将底部导航栏中的'我的'按钮修改为'返回'按钮，图标从用户图标变为向上箭头，点击后返回页面顶部
-
-
功能完整性：
-
保持了原有所有功能的完整性
-
扩展了分类映射表，增加了更多食材对应关系
-
设置为每页显示30条搜索结果，提升浏览效率
-
技术实现
-
前端：HTML、CSS（Tailwind CSS）、JavaScript
-
图标：Font Awesome图标库
-
后端代理：Node.js（server.js）
-
静态服务：http-server
当前运行状态
-
代理服务器（node server.js）正在terminal 3运行，端口3000
-
静态文件服务器（npx http-server -p 8080）正在terminal 4运行，可通过http://localhost:8080访问
-
所有功能正常运行，界面已完全适配移动APP风格
测试文件
项目中包含几个API测试文件：
-
test-category-api.js：用于测试分类API功能 -
test-ingredient-api.js：用于测试食材API功能 -
test-proxy.js：用于测试代理服务功能
总体而言，该小程序已成功从传统网页风格转型为现代化的移动APP风格，通过代理服务器实现了与食谱API的无缝对接，提供了丰富的食谱查询功能和流畅的用户体验。
