美食菜谱应用模板

案例介绍

适合谁	难度与预计投入	可以学到	完成成果	实践环境
有 ArkTS 基础的开发者	进阶 · 2~4 小时	Tabs 导航、MVVM 架构、Repository 数据层、组件化开发、华为账号与支付集成	可运行的美食菜谱应用 + 9 个可复用组件	HarmonyOS 真机 + DevEco Studio 6.1.1+

本模板为美食菜谱类应用提供了常用功能的开发样例，模板主要分首页、分类、热量计算和我的四大模块：

• 首页：展示菜谱信息，支持按名称、类别搜索菜谱。
• 分类：按类别展示菜谱，支持查看详情、收藏菜谱、加入菜篮子和管理菜篮子。
• 热量计算：展示每日热量和每周热量，支持按时间段增加饮食计划，展示计划饮食的热量。
• 我的：展示账号相关信息，展示我的菜谱和上传菜谱，展示收藏的菜谱，展示浏览记录，以及设置等功能。

本模板已集成华为账号服务，只需做少量配置和定制即可快速实现华为账号的登录等功能。

首页	分类	热量计算	我的

本模板主要页面及核心功能清单如下所示：

 美食菜谱模板
  |-- 开屏页
  |-- 首页
 |    |-- banner
 |    |-- 搜索
 |    |-- 分类搜索
 |    |    |-- 综合搜索
 |    |    |-- 收藏最多
 |    |    └-- 浏览最多
 |    |-- 菜谱瀑布流
 |    |-- 博主详情
 |    └-- 博主关注
 |-- 分类
 |    |-- 分类列表
 |    |-- 菜谱详情
 |    |    |-- 收藏
 |    |    └-- 加入菜篮子
 |    └-- 菜篮子
 |         |-- 全部用料
 |         |-- 菜谱用料
 |         |-- 菜谱新增用料
 |         └-- 删除菜谱
 |-- 热量计算
 |    |-- 日/周热量
 |    └-- 饮食计算
 |         |-- 管理饮食计划
 |         |-- 食物自定义重量
 |         |-- 搜索食物
 |         └-- 添加自定义食物
 └-- 我的
      |-- 用户信息
      |    |-- 登录
      |    |-- 用户信息
      |    └-- 开通会员
      |         └-- 支付
      |-- 我的菜谱
      |    |-- 新增菜谱
      |-- 我的收藏
      |-- 服务
      |    |-- 浏览记录
      |    |-- 菜篮子
      |    └-- 设置
      |         |-- 个人信息
      |         |-- 隐私协议
      |         |-- 用户协议
      |         |-- 清除缓存
      |         └-- 退出登录
      └-- 通知

本模板工程代码结构如下所示：

Recipes
  ├─commons/commonlib/src/main
  │  ├─ets
  │  │  ├─components
  │  │  │      BaseHeader.ets                 // 一级页面标题组件
  │  │  │      BuildTitleBar.ets              // 二级页面标题组件
  │  │  │      HeaderMenuBuilder.ets          // 标题菜单内容组件
  │  │  │      MenuItemBuilder.ets            // 下拉菜单选项
  │  │  ├─constants
  │  │  │      CommonContants.ets             // 公共常量
  │  │  │      CommonEnums.ets                // 公共枚举值
  │  │  ├─model
  │  │  │      Types.ets                      // 公共数据模型
  │  │  └─utils
  │  │         AccountUtil.ets                // 账号工具类
  │  │         DialogUtil.ets                 // 弹窗工具类
  │  │         FormatUtil.ets                 // 格式化工具类
  │  │         Logger.ets                     // 日志工具类
  │  │         PermissionUtil.ets             // 权限获取工具类
  │  │         PreferenceUtil.ets             // 数据持久化工具类
  │  │         RouterModule.ets               // 路由工具类
  │  │         WindowUtil.ets                 // 窗口管理工具类
  │  └─resources
  ├─commons/network/src/main
  │  ├─ets
  │  │  ├─apis
  │  │  │      APIList.ets                    // 网络请求API
  │  │  │      HttpRequest.ets                // 网络请求
  │  │  ├─mocks
  │  │  │  └─MockData
  │  │  │         Calories.ets                // 热量mock数据
  │  │  │         Mine.ets                    // 我的mock数据
  │  │  │         Notice.ets                  // 通知mock数据
  │  │  │         RecipeList.ets              // 菜谱mock数据
  │  │  │      AxiosMock.ets                  // mock请求
  │  │  │      RequestMock.ets                // mock API
  │  │  ├─model
  │  │  │      Calories.ets                   // 热量数据模型
  │  │  │      Member.ets                     // 会员数据模型
  │  │  │      Notice.ets                     // 通知数据模型
  │  │  │      Recipe.ets                     // 菜谱数据模型
  │  │  └─repository
  │  │         RecipeRepository.ets           // 菜谱数据仓库（SSOT）
  │  │         CaloriesRepository.ets         // 热量数据仓库
  │  │         BloggerRepository.ets          // 博主数据仓库
  │  │         NoticeRepository.ets           // 通知数据仓库
  │  │         MemberRepository.ets           // 会员数据仓库
  │  └─resources
  │─components/aggregated_login/src/main   
  │  ├─ets
  │  │  ├─common
  │  │  │      Constant.ets                   // 常量类
  │  │  │      Logger.ets                     // 日志类
  │  │  ├─components
  │  │  │      AgreementDialog.ets            // 协议弹窗组件
  │  │  │      LoginService.ets               // 登录组件
  │  │  ├─model
  │  │  │      Index.ets                      // 数据类型
  │  │  │      WXApiWrap.ets                  // 微信登录数据类型
  │  │  └─viewmodel
  │  │         AggregatedLoginVM.ets          // 登录组件数据模型
  │  └─resources
  │─components/aggregated_payment/src/main   
  │  ├─ets
  │  │  ├─common
  │  │  │      Constant.ets                   // 常量类
  │  │  ├─components
  │  │  │      AggregatedPaymentPicker.ets    // 支付组件
  │  │  ├─model
  │  │  │      Index.ets                      // 数据类型
  │  │  │      WXApiWrap.ets                  // 微信支付数据类型
  │  │  ├─util
  │  │  │      MockApi.ets                    // 支付mock数据
  │  │  │      OrderInfoUtil.ets              // 支付mock参数工具
  │  │  │      SignUtils.ets                  // 支付mock签名工具
  │  │  └─viewmodel
  │  │         AggregatedPaymentVM.ets        // 支付组件数据模型
  │  └─resources
  │─components/base_ui/src/main   
  │  ├─ets
  │  │  ├─components
  │  │  │      BaseTabs.ets                   // Tabs组件
  │  │  └──model
  │  │         Index.ets                      // 数据类型
  │  └─resources
  │─components/calorie_calculation/src/main
  │  ├─ets
  │  │  ├─components
  │  │  │      BarChart.ets                   // 协议弹窗组件
  │  │  │      CalorieCalculation.ets         // 热量计算组件
  │  │  │      CaloriesSummary.ets            // 热量汇总组件
  │  │  │      FoodDiary.ets                  // 饮食计划组件
  │  │  ├─model
  │  │  │      Index.ets                      // 数据类型
  │  │  └─viewModels
  │  │         CaloriesSummaryVM.ets          // 热量计算数据模型
  │  └─resources
  │─components/featured_recipes/src/main   
  │  ├─ets
  │  │  ├─components
  │  │  │      FeaturedRecipes.ets            // 菜谱瀑布流组件
  │  │  │      RecommendedCard.ets            // 菜谱卡片
  │  │  │─model
  │  │  │      Index.ets                      // 数据类型
  │  │  └─utils
  │  │         LazyDataSource.ets             // 懒加载对象
  │  │         Logger.ets                     // 日志工具
  │  │         ObservedArray.ets              // 数组监听工具
  │  └─resources
  │─components/home_search/src/main   
  │  ├─ets
  │  │  ├─components
  │  │  │      HomeSearch.ets                 // 搜索组件
  │  │  │      SearchKeys.ets                 // 热搜词组件
  │  │  │      SearchResult.ets               // 搜索结果组件
  │  │  └─model
  │  │         Index.ets                      // 数据类型
  │  └─resources
  │─components/link_category/src/main   
  │  ├─ets
  │  │  ├─components
  │  │  │      LinkCategory.ets               // 分类列表组件
  │  │  └─model
  │  │         Index.ets                      // 数据类型
  │  └─resources
  │─components/personal_homepage/src/main   
  │  ├─ets
  │  │  ├─components
  │  │  │      BloggerInformation.ets          // 个人介绍组件
  │  │  │      PersonalHomepage.ets           // 个人中心组件
  │  │  └─model
  │  │         Index.ets                      // 数据类型
  │  └─resources
  │─components/shopping_basket/src/main   
  │  ├─ets
  │  │  ├─components
  │  │  │      IngredientList.ets             // 用料列表
  │  │  │      PurchaseIngredients.ets        // 用料组件
  │  │  │      ShoppingBasket.ets             // 菜篮子组件
  │  │  └─model
  │  │         Index.ets                      // 数据类型
  │  └─resources
  │─components/upload_recipe/src/main   
  │  ├─ets
  │  │  ├─components
  │  │  │      UploadRecipe.ets               // 上传菜谱组件
  │  │  ├─model
  │  │  │      Index.ets                      // 数据类型
  │  │  └─viewmodel
  │  │         UploadRecipeVM.ets             // 上传菜谱数据模型
  │  └─resources
  │─features/calories/src/main   
  │  ├─ets
  │  │  ├─pages
  │  │  │      CaloriesPage.ets               // 热量页面
  │  │  │      DietPlanPage.ets               // 饮食计划食物列表页面
  │  │  │      SearchFoodPage.ets             // 食物搜索页面
  │  │  ├─model
  │  │  │      Index.ets                      // 数据对象
  │  │  └─viewModels
  │  │         CaloriesPageVM.ets             // 热量页面数据模型
  │  │         DietPlanPageVM.ets             // 食物列表页面数据模型
  │  │         SearchFoodPageVM.ets           // 食物搜索页面数据模型
  │  └─resources
  │─features/classification/src/main   
  │  ├─ets
  │  │  ├─constants
  │  │  │      Enums.ets                      // 枚举数据
  │  │  ├─pages
  │  │  │      ClassificationPage.ets         // 分类页面
  │  │  │      DishesPage.ets                 // 菜谱详情页面
  │  │  │      ShoppingBasketPage.ets         // 菜篮子页面
  │  │  ├─model
  │  │  │      Index.ets                      // 菜谱数据对象
  │  │  └─viewModels
  │  │         ClassificationVM.ets           // 分类页面数据模型
  │  │         DishesVM.ets                   // 菜谱详情页面数据模型
  │  └─resources
  │─features/home/src/main   
  │  ├─ets
  │  │  ├─pages
  │  │  │      BloggerProfilePage.ets         // 博主信息页面
  │  │  │      FollowersPage.ets              // 博主关注页面
  │  │  │      HomePage.ets                   // 首页页面
  │  │  │      SearchPage.ets                 // 搜索页面
  │  │  ├─model
  │  │  │      Index.ets                      // 首页数据对象
  │  │  └─viewModels
  │  │         BloggerProfilePageVM.ets       // 博主信息页面数据模型
  │  │         FollowersPageVM.ets            // 博主关注页面数据模型
  │  │         HomePageVM.ets                 // 首页页面数据模型
  │  │         SearchPageVM.ets               // 搜索页面数据模型
  │─features/mine/src/main   
  │  ├─ets
  │  │  ├─components
  │  │  │      ConfirmDialogComponent.ets     // 确认弹窗组件
  │  │  │      Recipes.ets                    // 菜谱卡片组件
  │  │  ├─mapper
  │  │  │      Index.ets                      // 数据映射
  │  │  ├─model
  │  │  │      Index.ets                      // 数据模型（含枚举、接口、ViewModel类）
  │  │  ├─pages
  │  │  │      BrowsingHistory.ets            // 浏览历史页面
  │  │  │      MemberCenterPage.ets           // 会员中心页面
  │  │  │      MinePage.ets                   // 我的页面
  │  │  │      MyCollection.ets               // 我的收藏页面
  │  │  │      NoticeCenterPage.ets           // 通知中心页面
  │  │  │      NoticeDetailPage.ets           // 通知详情页面
  │  │  │      PersonalInfo.ets               // 个人信息页面
  │  │  │      PrivacyPolicyDetailPage.ets    // 用户协议页面
  │  │  │      QuickLoginPage.ets             // 一键登录页面
  │  │  │      SettingsPage.ets               // 设置页面
  │  │  │      SideBarPage.ets                // 服务菜单页面
  │  │  │      TermsOfServicePage.ets         // 隐私政策页面
  │  │  │      UploadRecipe.ets               // 上传菜谱页面
  │  │  └─viewModels
  │  │         BrowsingHistoryVM.ets          // 浏览历史页面数据模型
  │  │         MemberCenterPageVM.ets         // 会员中心页面数据模型
  │  │         MinePageVM.ets                 // 我的页面数据模型
  │  │         MyCollectionVM.ets             // 我的收藏页面数据模型
  │  │         MyRecipeVM.ets                 // 我的菜谱页面数据模型
  │  │         NoticeCenterPageVM.ets         // 通知中心页面数据模型
  │  │         SettingsPageVM.ets             // 设置页面数据模型
  │  │         UploadRecipeVM.ets             // 上传菜谱页面数据模型
  │  └─resources
  └─products/entry/src/main   
     ├─ets
     │  ├─entryability
     │  │      EntryAbility.ets               // 应用程序入口
     │  ├─entryformability
     │  │      EntryFormAbility.ets           // 卡片程序入口
     │  ├─pages
     │  │      Index.ets                      // 入口页面
     │  │      LaunchPage.ets                 // 开屏页面
     │  │      MainEntry.ets                  // 主页面
     │  │      PrivacyPolicyPage.ets          // 隐私协议页面
     │  ├─model
     │  │      Types.ets                      // 数据模型
     │  ├─viewModels
     │  │      MainEntryVM.ets                // 入口页面数据
     │  └─widget/pages
     │         WidgetCard.ets                 // 卡片页面
     └─resources

运行案例

环境准备

• DevEco Studio 6.1.1 Release 版本
• API Version 24 Release 版本
• HarmonyOS 真机（不支持模拟器调试）
• 网络权限：ohos.permission.INTERNET

配置工程

在运行此模板前，需要完成以下配置：

1. 在 AppGallery Connect 创建应用，将包名配置到模板中。

   a. 参考创建应用为应用创建 APP ID，并将 APP ID 与应用进行关联。

   b. 返回应用列表页面，查看应用的包名。

   c. 将模板工程根目录下 AppScope/app.json5 文件中的 bundleName 替换为创建应用的包名。

2. 配置华为账号服务。

   a. 将应用的 Client ID 配置到 products/entry/src/main 路径下的 module.json5 文件中，详细参考：配置 Client ID。

   b. 申请华为账号一键登录所需的 quickLoginMobilePhone 权限，详细参考：配置 scope 权限。

3. 配置支付服务。

   华为支付当前仅支持商户接入，在使用服务前，需要完成商户入网、开发服务等相关配置，本模板仅提供了端侧集成的示例。详细参考：支付服务接入准备。

4. 对应用进行手工签名。

5. 添加手工签名所用证书对应的公钥指纹。详细参考：配置应用签名证书指纹。

运行调试

1. 连接调试手机和 PC。

2. 菜单选择 "Run > Run 'entry'" 或者 "Run > Debug 'entry'"，运行或调试模板工程。

3. 应用启动后，可体验以下功能：

快捷搜索	菜谱详情	饮食计划	服务菜单

二次开发

可修改范围与约束

本模板采用 MVVM 架构，Repository 层作为唯一数据源（SSOT）。二次开发时请遵循以下约束：

层级	可修改范围	约束
View（页面）	自由修改 UI 布局、样式、交互逻辑	不直接调用 API，通过 ViewModel 获取数据
ViewModel	自由修改状态管理和业务逻辑	通过 Repository 访问数据，不直接调用 API
Repository	可替换 Mock 为真实 API	保持接口不变，确保数据模型兼容
Model	可扩展数据结构	不破坏现有字段定义
Components	可提取、修改、替换组件	组件间通过 props 通信，不直接依赖外部状态

组件清单与使用指导

本模板中提供了 9 个可复用组件，所有组件存放在工程根目录的 components 下：

组件	描述	使用指导
登录组件（aggregated_login）	支持华为一键登录和微信登录	使用指导
支付组件（aggregated_payment）	支持华为支付，微信支付，支付宝支付	使用指导
热量计算组件（calorie_calculation）	提供统计饮食计划的卡路里	使用指导
菜谱瀑布流组件（featured_recipes）	提供展示菜谱列表瀑布流	使用指导
搜索组件（home_search）	提供菜谱搜索的相关功能	使用指导
分类列表组件（link_category）	提供按分类展示菜谱列表	使用指导
个人中心组件（personal_homepage）	提供个人中心页面展示	使用指导
菜篮子组件（shopping_basket）	提供菜篮子相关功能	使用指导
上传菜谱组件（upload_recipe）	提供上传菜谱的功能	使用指导

组件提取与接入

每个组件都是独立的 HarmonyOS 模块，可提取到其他工程中使用：

1. 将目标组件目录（如 components/calorie_calculation）复制到目标工程
2. 在目标工程的 build-profile.json5 中添加模块引用
3. 在 oh-package.json5 中添加依赖配置
4. 检查组件的依赖链（部分组件依赖 commons/commonlib 和 commons/network）

具体业务定制任务

定制任务	涉及文件	难度
替换 Mock 数据为真实 API	commons/network/src/main/ets/repository/RecipeRepository.ets	中等
修改首页菜谱推荐排序	features/home/src/main/ets/viewModels/HomePageVM.ets	中等
新增菜谱分类类别	features/classification/src/main/ets/constants/Enums.ets	简单
自定义热量计算目标值	components/calorie_calculation/src/main/ets/viewModels/CaloriesSummaryVM.ets	简单
替换应用图标和名称	AppScope/resources/base/media/、AppScope/resources/base/element/string.json	简单

检查与排障

构建检查

检查项	预期	验证方法
SDK 版本	compatibleSdkVersion 6.1.1(24)	检查 build-profile.json5
DevEco Studio 版本	6.1.1+	Help > About
依赖完整性	oh_modules 已安装	执行 ohpm install
签名配置	已配置手工签名	File > Project Structure > Signing Configs

运行检查

检查项	预期	验证方法
设备连接	真机已连接	hdc list targets 显示设备
应用安装	安装成功无报错	Run > Run 'entry'
首页加载	菜谱瀑布流正常显示	打开应用查看首页
账号登录	登录功能可用	我的页面 > 登录

常见问题

问题	原因	解决方案
构建报错：SDK 版本不匹配	DevEco Studio 版本低于 6.1.1 或 SDK API 低于 24	升级 DevEco Studio 到 6.1.1+，确认 build-profile.json5 中 compatibleSdkVersion 为 6.1.1(24)
运行报错：模拟器不支持	本模板不支持模拟器调试	使用 HarmonyOS 真机调试，通过 hdc list targets 确认设备连接
登录失败：Client ID 未配置	未在 module.json5 中配置华为账号服务的 Client ID	在 AppGallery Connect 创建应用，将 Client ID 配置到 products/entry/src/main/module.json5
签名错误：证书指纹不匹配	手工签名证书的公钥指纹未添加到 AGC	对应用进行手工签名，将证书对应的公钥指纹添加到 AppGallery Connect 的签名配置中
hdc install 失败	HAP 文件路径解析异常	cd 到 HAP 所在目录后用相对路径安装
支付功能不可用	华为支付需商户入网配置	参考支付服务接入准备文档，完成商户入网和服务配置

来源与维护

项目	内容
上游仓库	gitcode.com/yinzheng001/Recipes
最近提交	2ea13c5 fix: README.md 补充修复
适用版本	HarmonyOS API 24 (6.1.1)
许可证	Apache 2.0
维护反馈	通过 GitCode 仓库 Issue 提交

该代码经过 Apache 2.0 授权许可。每个模块目录下均包含 LICENSE 文件。