菜谱食谱抖音快手微信小程序看广告流量主开源

抖音小程序食谱菜谱工具项目总结

项目概述

这是一个严格按照抖音小程序开发规范制作的食谱菜谱小工具,使用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     # 文本转菜谱工具

数据管理工具

工具功能

  1. 交互式添加菜谱 - 通过命令行交互方式添加

  2. 文本文件导入 - 支持从文本文件批量导入菜谱

  3. 快速添加菜谱 - 通过命令行参数快速添加

  4. 数据显示 - 显示菜谱总数等信息

使用方式

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作为图标:

  • ? 首页

  • ? 搜索

  • ❤️ 收藏

  • ⏱️ 制作时间

  • ? 难度等级

  • ?️ 份量

  • ? 小贴士

项目优势

  1. 完全符合抖音小程序规范 - 严格按照平台要求开发

  2. 无外部依赖 - 使用emoji图标,减少包体积

  3. 数据丰富 - 包含300多条真实菜谱数据

  4. 易于扩展 - 完整的数据管理工具,便于添加新菜谱

  5. 用户体验优秀 - 滑屏加载、搜索优化、自定义导航

  6. 维护方便 - 清晰的项目结构和完整的文档

使用场景

  1. 用户浏览和搜索菜谱

  2. 学习制作各种菜系的菜品

  3. 收藏喜欢的菜谱

  4. 管理员通过工具添加新菜谱

  5. 批量导入菜谱数据

这个项目为用户提供了一个完整的菜谱浏览和管理解决方案,同时为管理员提供了便捷的数据管理工具,是一个功能完善、易于维护的抖音小程序应用。

以下是对整个小程序项目的详细总结,特别包含了接口(聚合数据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),主要功能包括:

  1. 转发前端API请求到实际的食谱API服务

  2. 解决跨域问题

  3. 处理请求和响应数据

主要修改内容

  1. 页面结构优化

    • 移除了传统网页的顶部导航栏和页脚

    • 添加了固定的底部导航栏,符合移动APP设计风格

    • 配置了禁止缩放的视口设置,提升移动设备体验

  2. UI风格调整

    • 将搜索区域改为圆角输入框和标签式热门搜索

    • 重构分类区域为4列网格布局,并增加了水果类、蔬菜类分类

    • 调整菜谱展示区域为垂直列表布局

    • 优化模态框尺寸和样式,适配移动端

  3. 交互体验优化

    • 实现了底部导航栏的点击事件处理和活跃状态切换

    • 添加了触摸反馈和自动滚动功能

    • 将底部导航栏中的'我的'按钮修改为'返回'按钮,图标从用户图标变为向上箭头,点击后返回页面顶部

  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的无缝对接,提供了丰富的食谱查询功能和流畅的用户体验。



相关推荐
后台开发者Ethan2 小时前
FastAPI之 Python的类型提示
python·fastapi·ai编程
stark张宇3 小时前
超越 Hello World:深入小程序 Hybrid 初衷、安全配置与上线全链路
nginx·微信小程序·php
vipbic4 小时前
使用Cursor开发Strapi5插件bag-strapi-plugin
前端·ai编程·cursor
菜鸟una5 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
算家计算7 小时前
快手推出“工具+模型+平台”AI编程生态!大厂挤占AI赛道,中小企业如何突围?
人工智能·ai编程·资讯
2501_915106327 小时前
iOS 混淆与 IPA 加固全流程,多工具组合实现无源码混淆、源码防护与可审计流水线(iOS 混淆|IPA 加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者87 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆 Ipa Guard)
android·ios·小程序·https·uni-app·iphone·webview
孟健7 小时前
AI 浏览器大战打响:手把手白嫖一个月 Perplexity 会员(Comet 实操 5 步)
ai编程
该用户已不存在8 小时前
Gemini CLI 扩展,把Nano Banana 搬到终端
前端·后端·ai编程
用户4099322502128 小时前
想让PostgreSQL查询快到飞起?分区表、物化视图、并行查询这三招灵不灵?
后端·ai编程·trae