HarmonyOS鸿蒙Next官方模板优秀案例 （第4期：餐饮行业 · 美食菜谱） 💡 鸿蒙生态为开发者提供海量的HarmonyOS模板/组件，助力开发效率原地起飞 💡

★ 一键直达生态市场组件&模板市场 , 快速应用DevEco Studio插件市场集成组件&模板 ★

好用的菜谱APP能够帮助饮食管理事半功倍！小编本期为大家介绍餐饮行业案例

👉 覆盖20+行业，本帖以汇总形式持续更新中，点击收藏！一键三连！常看常新！

【第4期】餐饮行业 · 美食菜谱

一、概述

1.行业洞察

1）行业痛点：

• 传统餐饮私域流量缺失，依赖第三方平台导流，佣金成本高且较难沉淀用户。
• 网络菜谱步骤描述模糊，用料配比不精确，成功率低。
• 个性化不足：缺乏根据用户口味偏好、饮食限制（素食/低糖/无麸质）的智能推荐。
• 购物不便：菜谱食材无法一键购买，特殊调料难以配齐。
• 数据价值未挖掘：用户烹饪行为数据未形成精准画像。
• 互动体验差：用户作品分享渠道单一，缺乏专业厨师点评指导。

2）行业常用三方SDK

说明：“以上三方库及链接仅为示例，三方库由三方开发者独立提供，以其官方内容为准”

2.案例概览（下载模板）

基于以上行业分析，本期将介绍鸿蒙生态市场餐饮行业模板——美食菜谱应用模板，为行业提供常用功能的开发案例，涵盖分类搜索、作品分享、菜谱用料、热量计算、饮食计划等多个实用功能。

• Stage开发模型 + 声明式UI开发范式。
• 分层架构设计 + 组件化拆分，支持开发者在开发时既可以选择完整使用模板，也可以根据需求单独选用其中的业务组件。
• 集成华为账号、支付等服务，只需做少量配置和定制即可快速实现华为账号的登录、菜谱上传等功能。

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

二、应用架构设计

1.分层模块化设计

• 产品定制层： 专注于满足不同设备或使用场景的个性化需求，作为应用的入口，是用户直接互动的界面。
  • 本实践暂时只支持直板机，为单HAP包形式，包含路由根节点、底部导航栏等。
• 基础特性层： 用于存放相对独立的功能UI和业务逻辑实现。
  • 本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块，包含首页、分类、热量计算和我的。
  • 每个功能模块都具备高内聚、低耦合、可定制的特点，支持产品的灵活部署。
• 公共能力层： 存放公共能力，包括公共UI组件、数据管理、外部交互和工具库等共享功能。
  • 本实践的公共能力层分为公共基础能力和可分可合组件，均打包为HAR包被上层业务组件引用。
  • 公共基础能力包含日志、文件处理等工具类，公共类型定义，网络库，以及弹窗、加载等公共组件。
  • 可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块，支持开发者在开发中单独集成使用，详见业务组件设计章节。

2.业务组件设计

为支持开发者单独获取特定场景的页面和功能，例如开发者已搭建了一个自己的美食菜谱元服务工程，只想单独取用本模板中的菜篮子或热量计算功能，本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块，不依赖公共基础能力包，开发者可以单独集成，开箱即用，降低使用难度。

三、行业场景技术方案

1.账号管理

1）场景说明

支持华为账号一键登录及其他方式（账号密码登录、微信登录）。

用户登录后展示昵称和头像，点击用户信息栏可进入用户主页，查看并编辑个人信息。

2）技术方案

• 华为账号一键登录
  • 通过Account Kit实现华为账号一键登录，并获取用户手机号，关联应用已有用户。
• 微信登录
  • 根据鸿蒙接入指南接入微信SDK，可通过跳转微信并获取微信用户授权进行登录。
• 头像修改
  • 通过Scenario Fusion Kit提供的选择头像Button快速拉起头像选择页面，供用户完成华为账号头像或其他头像的选择与展示。

3）代码参考

• 部分核心代码参见个人信息实现章节。

2.分类搜索

1）场景说明

• 支持按菜谱分类展示和搜索菜谱，点击菜谱可以查看菜谱详细信息。

2）技术方案

使用List和Grid组件实现分类列表的展示、连续滚动以及搜索结果展示。

3）代码参考

• 部分核心代码参见分类搜索实现章节。

3.饮食计划

1）场景说明

支持制定饮食计划的食材，也可以自定义食材并填写热量。

2）技术方案

• 列表展示
  • 使用List和ListItemGroup实现列表的连续滚动，并快速滚动到指定分类。
• 自定义添加食物
  • 使用bindSheet方法对当前页面绑定半模态弹框，实现自定义食物的添加。

4.热量计算

1）场景说明

支持查看当日饮食热量摄入情况，或者查看一周热量摄入统计。

2）技术方案

• 使用Progress绘制环形数据统计，使用LinearGradient实现环形颜色的渐变效果。
• 使用三方库[@ohos/mpchart](https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fmpchart)绘制柱状图，展示一周热量摄入信息。

3）代码参考

• 部分核心代码参见热量计算实现章节。

四、模板代码

1.工程结构**（下载模板）**

详细代码结构如下所示

Recipes
  ├─commons/commonlib/src/main
  │  ├─ets
  │  │  ├─components
  │  │  │      BaseHeader.ets                 // 一级页面标题组件
  │  │  │      BuildTitleBar.ets              // 二级页面标题组件
  │  │  │      HeaderMenuBuilder.ets          // 标题菜单内容组件
  │  │  │      MenuItemBuilder.ets            // 下拉菜单选项
  │  │  ├─constants
  │  │  │      CommonContants.ets             // 公共常量
  │  │  │      CommonEnums.ets                // 公共枚举值
  │  │  ├─types
  │  │  │      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
  │  │  └─types
  │  │         Calories.ets                   // 热量抽象类
  │  │         Member.ets                     // 会员抽象类
  │  │         Notice.ets                     // 通知抽象类
  │  │         Recipe.ets                     // 菜谱抽象类
  │  └─resources
  │─components/aggregated_ads/src/main   
  │  ├─ets
  │  │  ├─common
  │  │  │      Constant.ets                   // 常量类
  │  │  ├─components
  │  │  │      AdServicePage.ets              // 广告服务组件
  │  │  │      HwAdService.ets                // 华为广告
  │  │  ├─util
  │  │  │      UIUtil.ets                     // UI工具类
  │  │  └─viewmodel
  │  │         AggreagetedAdVM.ets            // 广告页面数据模型
  │  └─resources
  │─components/aggregated_login/src/main   
  │  ├─ets
  │  │  ├─common
  │  │  │      Constant.ets                   // 常量类
  │  │  │      Logger.ets                     // 日志类
  │  │  ├─components
  │  │  │      AgreementDialog.ets            // 协议弹窗组件
  │  │  │      LoginService.ets               // 登录组件
  │  │  ├─model
  │  │  │      Index.ets                      // 数据类型
  │  │  │      WXApiWrap.ets