鴻蒙生態(tài)為開發(fā)者提供海量的HarmonyOS模板/組件，助力開發(fā)效率原地起飛
一鍵直達(dá)生態(tài)市場組件&模板市場 , 快速應(yīng)用DevEco Studio插件市場集成組件&模板
好用的菜譜APP能夠幫助飲食管理事半功倍！小編本期為大家介紹餐飲行業(yè)案例
覆蓋20+行業(yè)，點(diǎn)擊查看往期案例匯總貼，持續(xù)更新，點(diǎn)擊收藏！一鍵三連！?？闯Ｐ拢?/p>
【第4期】餐飲行業(yè) · 美食菜譜
一、 概述
1. 行業(yè)洞察
1) 行業(yè)痛點(diǎn)：
· 傳統(tǒng)餐飲私域流量缺失，依賴第三方平臺導(dǎo)流，傭金成本高且較難沉淀用戶。
· 網(wǎng)絡(luò)菜譜步驟描述模糊，用料配比不精確，成功率低。
· 個(gè)性化不足：缺乏根據(jù)用戶口味偏好、飲食限制（素食/低糖/無麩質(zhì)）的智能推薦。
· 購物不便：菜譜食材無法一鍵購買，特殊調(diào)料難以配齊。
· 數(shù)據(jù)價(jià)值未挖掘：用戶烹飪行為數(shù)據(jù)未形成精準(zhǔn)畫像。
· 互動(dòng)體驗(yàn)差：用戶作品分享渠道單一，缺乏專業(yè)廚師點(diǎn)評指導(dǎo)。
2) 行業(yè)常用三方SDK
說明：“以上三方庫及鏈接僅為示例，三方庫由三方開發(fā)者獨(dú)立提供，以其官方內(nèi)容為準(zhǔn)”
2. 案例概覽（下載模板）
基于以上行業(yè)分析，本期將介紹鴻蒙生態(tài)市場餐飲行業(yè)模板——美食菜譜應(yīng)用模板，為行業(yè)提供常用功能的開發(fā)案例，涵蓋分類搜索、作品分享、菜譜用料、熱量計(jì)算、飲食計(jì)劃等多個(gè)實(shí)用功能。
· Stage開發(fā)模型 + 聲明式UI開發(fā)范式。
· 分層架構(gòu)設(shè)計(jì) + 組件化拆分，支持開發(fā)者在開發(fā)時(shí)既可以選擇完整使用模板，也可以根據(jù)需求單獨(dú)選用其中的業(yè)務(wù)組件。
· 集成華為賬號、支付等服務(wù)，只需做少量配置和定制即可快速實(shí)現(xiàn)華為賬號的登錄、菜譜上傳等功能。
本模板主要頁面及核心功能如下所示：
二、 應(yīng)用架構(gòu)設(shè)計(jì)
1. 分層模塊化設(shè)計(jì)
· 產(chǎn)品定制層：專注于滿足不同設(shè)備或使用場景的個(gè)性化需求，作為應(yīng)用的入口，是用戶直接互動(dòng)的界面。
本實(shí)踐暫時(shí)只支持直板機(jī)，為單HAP包形式，包含路由根節(jié)點(diǎn)、底部導(dǎo)航欄等。
· 基礎(chǔ)特性層：用于存放相對獨(dú)立的功能UI和業(yè)務(wù)邏輯實(shí)現(xiàn)。
本實(shí)踐的基礎(chǔ)特性層將應(yīng)用底部導(dǎo)航欄的每個(gè)選項(xiàng)拆分成一個(gè)獨(dú)立的業(yè)務(wù)功能模塊，包含首頁、分類、熱量計(jì)算和我的。
每個(gè)功能模塊都具備高內(nèi)聚、低耦合、可定制的特點(diǎn)，支持產(chǎn)品的靈活部署。
· 公共能力層：存放公共能力，包括公共UI組件、數(shù)據(jù)管理、外部交互和工具庫等共享功能。
本實(shí)踐的公共能力層分為公共基礎(chǔ)能力和可分可合組件，均打包為HAR包被上層業(yè)務(wù)組件引用。
公共基礎(chǔ)能力包含日志、文件處理等工具類，公共類型定義，網(wǎng)絡(luò)庫，以及彈窗、加載等公共組件。
可分可合組件將包含行業(yè)特點(diǎn)、可完全自閉環(huán)的能力抽出獨(dú)立的組件模塊，支持開發(fā)者在開發(fā)中單獨(dú)集成使用，詳見業(yè)務(wù)組件設(shè)計(jì)章節(jié)。
2. 業(yè)務(wù)組件設(shè)計(jì)
為支持開發(fā)者單獨(dú)獲取特定場景的頁面和功能，例如開發(fā)者已搭建了一個(gè)自己的美食菜譜元服務(wù)工程，只想單獨(dú)取用本模板中的菜籃子或熱量計(jì)算功能，本模板將功能完全自閉環(huán)的部分能力抽離出獨(dú)立的行業(yè)組件模塊，不依賴公共基礎(chǔ)能力包，開發(fā)者可以單獨(dú)集成，開箱即用，降低使用難度。
三、 行業(yè)場景技術(shù)方案
1. 賬號管理
1) 場景說明
支持華為賬號一鍵登錄及其他方式（賬號密碼登錄、微信登錄）。
用戶登錄后展示昵稱和頭像，點(diǎn)擊用戶信息欄可進(jìn)入用戶主頁，查看并編輯個(gè)人信息。
2) 技術(shù)方案
· 華為賬號一鍵登錄
通過Account Kit實(shí)現(xiàn)華為賬號一鍵登錄，并獲取用戶手機(jī)號，關(guān)聯(lián)應(yīng)用已有用戶。
· 微信登錄
根據(jù)鴻蒙接入指南接入微信SDK，可通過跳轉(zhuǎn)微信并獲取微信用戶授權(quán)進(jìn)行登錄。
· 頭像修改
通過Scenario Fusion Kit提供的選擇頭像Button快速拉起頭像選擇頁面，供用戶完成華為賬號頭像或其他頭像的選擇與展示。
3) 代碼參考
· 部分核心代碼參見個(gè)人信息實(shí)現(xiàn)章節(jié)。
2. 分類搜索
1) 場景說明
· 支持按菜譜分類展示和搜索菜譜，點(diǎn)擊菜譜可以查看菜譜詳細(xì)信息。
2) 技術(shù)方案
使用List和Grid組件實(shí)現(xiàn)分類列表的展示、連續(xù)滾動(dòng)以及搜索結(jié)果展示。
3) 代碼參考
· 部分核心代碼參見分類搜索實(shí)現(xiàn)章節(jié)。
3. 飲食計(jì)劃
1) 場景說明
支持制定飲食計(jì)劃的食材，也可以自定義食材并填寫熱量。
2) 技術(shù)方案
· 列表展示
使用List和ListItemGroup實(shí)現(xiàn)列表的連續(xù)滾動(dòng)，并快速滾動(dòng)到指定分類。
· 自定義添加食物
使用bindSheet方法對當(dāng)前頁面綁定半模態(tài)彈框，實(shí)現(xiàn)自定義食物的添加。
4. 熱量計(jì)算
1) 場景說明
支持查看當(dāng)日飲食熱量攝入情況，或者查看一周熱量攝入統(tǒng)計(jì)。
2) 技術(shù)方案
· 使用Progress繪制環(huán)形數(shù)據(jù)統(tǒng)計(jì)，使用LinearGradient實(shí)現(xiàn)環(huán)形顏色的漸變效果。
· 使用三方庫@ohos/mpchart繪制柱狀圖，展示一周熱量攝入信息。
3) 代碼參考
· 部分核心代碼參見熱量計(jì)算實(shí)現(xiàn)章節(jié)。
四、 模板代碼
1. 工程結(jié)構(gòu)（下載模板）
詳細(xì)代碼結(jié)構(gòu)如下所示：
2. 關(guān)鍵代碼解讀
本篇代碼非應(yīng)用的全量代碼，只包括應(yīng)用的部分能力的關(guān)鍵代碼。
若需獲取全量代碼，請查看模板集成章節(jié)。
1) 個(gè)人信息
· 華為賬號一鍵登錄
2) 分類搜索
· 分類列表
3) 熱量計(jì)算
· 環(huán)形圖
· 柱狀圖
3. 模板集成
本模板提供了兩種代碼集成方式，供開發(fā)者自由選用。
1) 整體集成（下載模板）
開發(fā)者可以選擇直接基于模板工程開發(fā)自己的應(yīng)用工程。
· 模板代碼獲?。?/p>
通過IDE插件創(chuàng)建模板工程，開發(fā)指導(dǎo)。
通過生態(tài)市場下載源碼， 下載模板。
通過開源倉訪問源碼，倉庫地址。
· 打開模板工程，根據(jù)README說明中的快速入門章節(jié)，將自己的應(yīng)用信息配置在模板工程內(nèi)，即可運(yùn)行并查看模板效果。
· 對接開發(fā)者自己的服務(wù)器接口，轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)，展示真實(shí)的云側(cè)數(shù)據(jù)。
將
commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替換為真實(shí)的服務(wù)器接口。
在
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è)務(wù)內(nèi)容修改模板，進(jìn)行定制化開發(fā)。
2) 按需集成
若開發(fā)者已搭建好自己的應(yīng)用工程，但暫未實(shí)現(xiàn)其中的部分場景能力，可以選擇取用其中的業(yè)務(wù)組件，集成在自己的工程中。
· 組件代碼獲取：
通過IDE插件下載組件源碼。開發(fā)指導(dǎo)
通過生態(tài)市場下載組件源碼。 下載地址
· 下載組件源碼，根據(jù)README中的說明，將組件包配置在自己的工程中。
· 根據(jù)API參考和示例代碼，將組件集成在自己的對應(yīng)場景中。
以上是第四期“餐飲行業(yè)-美食菜譜”行業(yè)優(yōu)秀案例的內(nèi)容，更多行業(yè)敬請期待~
歡迎下載使用行業(yè)模板“點(diǎn)擊下載”，若您有體驗(yàn)和開發(fā)問題，或者迫不及待想了解XX行業(yè)的優(yōu)秀案例，歡迎在評論區(qū)留言，小編會(huì)快馬加鞭為您解答~
HarmonyOS官方模板優(yōu)秀案例系列持續(xù)更新， 點(diǎn)擊查看往期案例匯總貼， 點(diǎn)擊收藏 “?
”方便查找！【互動(dòng)有禮】邀請你成為HarmonyOS官方模板產(chǎn)品經(jīng)理，優(yōu)化方案由你制定！點(diǎn)擊參加
HarmonyOS組件模板相關(guān)推薦：鴻蒙應(yīng)用開發(fā)者激勵(lì)計(jì)劃2025，點(diǎn)擊查看
