HarmonyOS 官方模板优秀案例（第 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 绘制柱状图，展示一周热量摄入信息。

3) 代码参考

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

四、模板代码

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

详细代码结构如下所示：

2.关键代码解读

本篇代码非应用的全量代码，只包括应用的部分能力的关键代码。

若需获取全量代码，请查看模板集成章节。

1) 个人信息

・华为账号一键登录

2) 分类搜索

・分类列表

3) 热量计算

・环形图

・柱状图

3.模板集成

本模板提供了两种代码集成方式，供开发者自由选用。

1) 整体集成（下载模板）

开发者可以选择直接基于模板工程开发自己的应用工程。

・模板代码获取：

通过 IDE 插件创建模板工程，开发指导。

通过生态市场下载源码，下载模板。

通过开源仓访问源码，仓库地址。

・打开模板工程，根据 README 说明中的快速入门章节，将自己的应用信息配置在模板工程内，即可运行并查看模板效果。

・对接开发者自己的服务器接口，转换数据结构，展示真实的云侧数据。

将

commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets 文件中的 mock 接口替换为真实的服务器接口。

在

commons/lib_common/src/main/ets/httprequest/HttpRequest.ets 文件中将云侧开发者自定义的数据结构转换为端侧数据结构。

根据自己的业务内容修改模板，进行定制化开发。

2) 按需集成

若开发者已搭建好自己的应用工程，但暂未实现其中的部分场景能力，可以选择取用其中的业务组件，集成在自己的工程中。

・组件代码获取：

通过 IDE 插件下载组件源码。开发指导

通过生态市场下载组件源码。下载地址

・下载组件源码，根据 README 中的说明，将组件包配置在自己的工程中。

・根据 API 参考和示例代码，将组件集成在自己的对应场景中。

以上是第四期“餐饮行业-美食菜谱”行业优秀案例的内容，更多行业敬请期待~

欢迎下载使用行业模板“点击下载”，若您有体验和开发问题，或者迫不及待想了解 XX 行业的优秀案例，欢迎在评论区留言，小编会快马加鞭为您解答~

HarmonyOS 官方模板优秀案例系列持续更新，点击查看往期案例汇总贴，点击收藏“♥

”方便查找！【互动有礼】邀请你成为 HarmonyOS 官方模板产品经理，优化方案由你制定！点击参加

HarmonyOS 组件模板相关推荐：鸿蒙应用开发者激励计划 2025，点击查看

广告声明：文内含有的对外跳转链接（包括不限于超链接、二维码、口令等形式），用于传递更多信息，节省甄选时间，结果仅供参考，IT之家所有文章均包含本声明。