鴻蒙生態(tài)為開發(fā)者提供海量的HarmonyOS模板/組件，助力開發(fā)效率原地起飛

一鍵直達生態(tài)市場組件&模板市場 , 快速應用DevEco Studio插件市場集成組件&模板

好用的菜譜APP能夠幫助飲食管理事半功倍！小編本期為大家介紹餐飲行業(yè)案例

覆蓋20+行業(yè)，點擊查看往期案例匯總貼，持續(xù)更新，點擊收藏！一鍵三連！?？闯Ｐ拢?/p>

【第4期】餐飲行業(yè) · 美食菜譜

一、 概述

1. 行業(yè)洞察

1) 行業(yè)痛點：

· 傳統(tǒng)餐飲私域流量缺失，依賴第三方平臺導流，傭金成本高且較難沉淀用戶。

· 網(wǎng)絡菜譜步驟描述模糊，用料配比不精確，成功率低。

· 個性化不足：缺乏根據(jù)用戶口味偏好、飲食限制（素食/低糖/無麩質(zhì)）的智能推薦。

· 購物不便：菜譜食材無法一鍵購買，特殊調(diào)料難以配齊。

· 數(shù)據(jù)價值未挖掘：用戶烹飪行為數(shù)據(jù)未形成精準畫像。

· 互動體驗差：用戶作品分享渠道單一，缺乏專業(yè)廚師點評指導。

2) 行業(yè)常用三方SDK

說明：“以上三方庫及鏈接僅為示例，三方庫由三方開發(fā)者獨立提供，以其官方內(nèi)容為準”

2. 案例概覽（下載模板）

基于以上行業(yè)分析，本期將介紹鴻蒙生態(tài)市場餐飲行業(yè)模板——美食菜譜應用模板，為行業(yè)提供常用功能的開發(fā)案例，涵蓋分類搜索、作品分享、菜譜用料、熱量計算、飲食計劃等多個實用功能。

· Stage開發(fā)模型 + 聲明式UI開發(fā)范式。

· 分層架構(gòu)設計 + 組件化拆分，支持開發(fā)者在開發(fā)時既可以選擇完整使用模板，也可以根據(jù)需求單獨選用其中的業(yè)務組件。

· 集成華為賬號、支付等服務，只需做少量配置和定制即可快速實現(xiàn)華為賬號的登錄、菜譜上傳等功能。

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

二、 應用架構(gòu)設計

1. 分層模塊化設計

· 產(chǎn)品定制層：專注于滿足不同設備或使用場景的個性化需求，作為應用的入口，是用戶直接互動的界面。

本實踐暫時只支持直板機，為單HAP包形式，包含路由根節(jié)點、底部導航欄等。

· 基礎特性層：用于存放相對獨立的功能UI和業(yè)務邏輯實現(xiàn)。

本實踐的基礎特性層將應用底部導航欄的每個選項拆分成一個獨立的業(yè)務功能模塊，包含首頁、分類、熱量計算和我的。

每個功能模塊都具備高內(nèi)聚、低耦合、可定制的特點，支持產(chǎn)品的靈活部署。

· 公共能力層：存放公共能力，包括公共UI組件、數(shù)據(jù)管理、外部交互和工具庫等共享功能。

本實踐的公共能力層分為公共基礎能力和可分可合組件，均打包為HAR包被上層業(yè)務組件引用。

公共基礎能力包含日志、文件處理等工具類，公共類型定義，網(wǎng)絡庫，以及彈窗、加載等公共組件。

可分可合組件將包含行業(yè)特點、可完全自閉環(huán)的能力抽出獨立的組件模塊，支持開發(fā)者在開發(fā)中單獨集成使用，詳見業(yè)務組件設計章節(jié)。

2. 業(yè)務組件設計

為支持開發(fā)者單獨獲取特定場景的頁面和功能，例如開發(fā)者已搭建了一個自己的美食菜譜元服務工程，只想單獨取用本模板中的菜籃子或熱量計算功能，本模板將功能完全自閉環(huán)的部分能力抽離出獨立的行業(yè)組件模塊，不依賴公共基礎能力包，開發(fā)者可以單獨集成，開箱即用，降低使用難度。

三、 行業(yè)場景技術(shù)方案

1. 賬號管理

1) 場景說明

支持華為賬號一鍵登錄及其他方式（賬號密碼登錄、微信登錄）。

用戶登錄后展示昵稱和頭像，點擊用戶信息欄可進入用戶主頁，查看并編輯個人信息。

2) 技術(shù)方案

· 華為賬號一鍵登錄

通過Account Kit實現(xiàn)華為賬號一鍵登錄，并獲取用戶手機號，關聯(lián)應用已有用戶。

· 微信登錄

根據(jù)鴻蒙接入指南接入微信SDK，可通過跳轉(zhuǎn)微信并獲取微信用戶授權(quán)進行登錄。

· 頭像修改

通過Scenario Fusion Kit提供的選擇頭像Button快速拉起頭像選擇頁面，供用戶完成華為賬號頭像或其他頭像的選擇與展示。

3) 代碼參考

· 部分核心代碼參見個人信息實現(xiàn)章節(jié)。

2. 分類搜索

1) 場景說明

· 支持按菜譜分類展示和搜索菜譜，點擊菜譜可以查看菜譜詳細信息。

2) 技術(shù)方案

使用List和Grid組件實現(xiàn)分類列表的展示、連續(xù)滾動以及搜索結(jié)果展示。

3) 代碼參考

· 部分核心代碼參見分類搜索實現(xiàn)章節(jié)。

3. 飲食計劃

1) 場景說明

支持制定飲食計劃的食材，也可以自定義食材并填寫熱量。

2) 技術(shù)方案

· 列表展示

使用List和ListItemGroup實現(xiàn)列表的連續(xù)滾動，并快速滾動到指定分類。

· 自定義添加食物

使用bindSheet方法對當前頁面綁定半模態(tài)彈框，實現(xiàn)自定義食物的添加。

4. 熱量計算

1) 場景說明

支持查看當日飲食熱量攝入情況，或者查看一周熱量攝入統(tǒng)計。

2) 技術(shù)方案

· 使用Progress繪制環(huán)形數(shù)據(jù)統(tǒng)計，使用LinearGradient實現(xiàn)環(huán)形顏色的漸變效果。

· 使用三方庫@ohos/mpchart繪制柱狀圖，展示一周熱量攝入信息。

3) 代碼參考

· 部分核心代碼參見熱量計算實現(xiàn)章節(jié)。

四、 模板代碼

1. 工程結(jié)構(gòu)（下載模板）

詳細代碼結(jié)構(gòu)如下所示：

2. 關鍵代碼解讀

本篇代碼非應用的全量代碼，只包括應用的部分能力的關鍵代碼。

若需獲取全量代碼，請查看模板集成章節(jié)。

1) 個人信息

· 華為賬號一鍵登錄

2) 分類搜索

· 分類列表

3) 熱量計算

· 環(huán)形圖

· 柱狀圖

3. 模板集成

本模板提供了兩種代碼集成方式，供開發(fā)者自由選用。

1) 整體集成（下載模板）

開發(fā)者可以選擇直接基于模板工程開發(fā)自己的應用工程。

· 模板代碼獲?。?/p>

通過IDE插件創(chuàng)建模板工程，開發(fā)指導。

通過生態(tài)市場下載源碼， 下載模板。

通過開源倉訪問源碼，倉庫地址。

· 打開模板工程，根據(jù)README說明中的快速入門章節(jié)，將自己的應用信息配置在模板工程內(nèi)，即可運行并查看模板效果。

· 對接開發(fā)者自己的服務器接口，轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)，展示真實的云側(cè)數(shù)據(jù)。

將
commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替換為真實的服務器接口。

在
commons/lib_common/src/main/ets/httprequest/HttpRequest.ets文件中將云側(cè)開發(fā)者自定義的數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換為端側(cè)數(shù)據(jù)結(jié)構(gòu)。

根據(jù)自己的業(yè)務內(nèi)容修改模板，進行定制化開發(fā)。

2) 按需集成

若開發(fā)者已搭建好自己的應用工程，但暫未實現(xiàn)其中的部分場景能力，可以選擇取用其中的業(yè)務組件，集成在自己的工程中。

· 組件代碼獲?。?/p>

通過IDE插件下載組件源碼。開發(fā)指導

通過生態(tài)市場下載組件源碼。 下載地址

· 下載組件源碼，根據(jù)README中的說明，將組件包配置在自己的工程中。

· 根據(jù)API參考和示例代碼，將組件集成在自己的對應場景中。

以上是第四期“餐飲行業(yè)-美食菜譜”行業(yè)優(yōu)秀案例的內(nèi)容，更多行業(yè)敬請期待~

歡迎下載使用行業(yè)模板“點擊下載”，若您有體驗和開發(fā)問題，或者迫不及待想了解XX行業(yè)的優(yōu)秀案例，歡迎在評論區(qū)留言，小編會快馬加鞭為您解答~

HarmonyOS官方模板優(yōu)秀案例系列持續(xù)更新， 點擊查看往期案例匯總貼， 點擊收藏 “?

”方便查找！【互動有禮】邀請你成為HarmonyOS官方模板產(chǎn)品經(jīng)理，優(yōu)化方案由你制定！點擊參加

HarmonyOS組件模板相關推薦：鴻蒙應用開發(fā)者激勵計劃2025，點擊查看