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

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

如何通過(guò)行業(yè)模板，快速高效完成項(xiàng)目開(kāi)發(fā)？

HarmonyOS官方模板優(yōu)秀案例，帶您找到答案！

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

【第1期】便捷生活行業(yè) · 購(gòu)物中心

一、 概述

1. 行業(yè)洞察

1) 行業(yè)痛點(diǎn)：

· 傳統(tǒng)零售流量缺失，依賴第三方平臺(tái)導(dǎo)流，傭金成本高且較難沉淀用戶；

· 離場(chǎng)排隊(duì)繳費(fèi)耗時(shí)、找車難、支付流程復(fù)雜是用戶最大的“離場(chǎng)焦慮”；

· 傳統(tǒng)積分體系感知弱、兌換門檻高、缺乏即時(shí)激勵(lì)，導(dǎo)致會(huì)員活躍度低；

· 傳統(tǒng)服務(wù)鏈接割裂（App、小程序、收銀系統(tǒng)獨(dú)立），用戶需在不同平臺(tái)跳轉(zhuǎn)，體驗(yàn)碎片化；

· 低頻使用的獨(dú)立App極易被用戶遺忘刪除；公眾號(hào)/小程序需主動(dòng)打開(kāi)，入口深且觸達(dá)率低。

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

2. 優(yōu)秀案例概覽（下載模板）

購(gòu)物中心元服務(wù)模板是基于以上行業(yè)分析實(shí)現(xiàn)的參考，為行業(yè)元服務(wù)提供了常用功能的開(kāi)發(fā)樣例，涵蓋停車?yán)U費(fèi)、自助積分、店鋪導(dǎo)購(gòu)、個(gè)人錢包、券包等多個(gè)實(shí)用場(chǎng)景。

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

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

· 集成華為賬號(hào)、支付等服務(wù)，只需做少量配置和定制即可快速實(shí)現(xiàn)華為賬號(hào)的登錄、停車?yán)U費(fèi)等功能。

基于本模板構(gòu)建的【XX購(gòu)物中心】元服務(wù)已正式發(fā)布上線，開(kāi)發(fā)者反饋模板高度適配業(yè)務(wù)需求，顯著提升了團(tuán)隊(duì)開(kāi)發(fā)效率。

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

二、 應(yīng)用架構(gòu)設(shè)計(jì)

1. 分層模塊化設(shè)計(jì)

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

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

· 基礎(chǔ)特性層：用于存放相對(duì)獨(dú)立的功能UI和業(yè)務(wù)邏輯實(shí)現(xiàn)。

本實(shí)踐的基礎(chǔ)特性層將應(yīng)用底部導(dǎo)航欄的每個(gè)選項(xiàng)拆分成一個(gè)獨(dú)立的業(yè)務(wù)功能模塊，包含首頁(yè)和我的。

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

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

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

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

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

本模板整體工程共分為7個(gè)包：

· 產(chǎn)品定制層

phone HAP包，手機(jī)設(shè)備的主入口模塊

· 基礎(chǔ)特性層

business_home HSP包，首頁(yè)場(chǎng)景

business_mine HSP包，我的場(chǎng)景

· 公共能力層

lib_common HAR包，封裝全局工具方法及公共組件

module_coupon HAR包，優(yōu)惠券組件

module_keyboard HAR包，車牌鍵盤(pán)組件

module_points HAR包，自助積分組件

詳細(xì)工程結(jié)構(gòu)可見(jiàn)工程結(jié)構(gòu)章節(jié)。

2. 業(yè)務(wù)組件設(shè)計(jì)

為支持開(kāi)發(fā)者單獨(dú)獲取特定場(chǎng)景的頁(yè)面和功能，例如開(kāi)發(fā)者已搭建了一個(gè)自己的購(gòu)物中心元服務(wù)工程，只想單獨(dú)取用本模板中的優(yōu)惠券或積分功能，本模板將功能完全自閉環(huán)的部分能力抽離出獨(dú)立的行業(yè)組件模塊，不依賴公共基礎(chǔ)能力包，開(kāi)發(fā)者可以單獨(dú)集成，開(kāi)箱即用，降低使用難度。

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

1. 賬號(hào)管理

1) 場(chǎng)景說(shuō)明

元服務(wù)打開(kāi)后無(wú)需用戶手動(dòng)登錄，通過(guò)靜默登錄后展示默認(rèn)頭像和默認(rèn)昵稱。

用戶可自行選擇點(diǎn)擊關(guān)聯(lián)賬號(hào)按鈕獲取華為賬號(hào)關(guān)聯(lián)手機(jī)號(hào)，可將靜默登錄賬號(hào)與用戶歷史注冊(cè)賬號(hào)關(guān)聯(lián)，同步用戶歷史數(shù)據(jù)資產(chǎn)，例如頭像、昵稱、生日等。

2) 技術(shù)方案

· 靜默登錄

通過(guò)Account Kit實(shí)現(xiàn)元服務(wù)靜默登錄。

· 手機(jī)號(hào)獲取

通過(guò)Scenario Fusion Kit的快速驗(yàn)證手機(jī)號(hào)Button，向用戶發(fā)起手機(jī)號(hào)授權(quán)申請(qǐng)；

經(jīng)用戶同意后，根據(jù)獲取到的Authorization Code，以及元服務(wù)服務(wù)器使用Client ID、Client Secret實(shí)現(xiàn)服務(wù)端開(kāi)發(fā)。

2. 停車?yán)U費(fèi)

1) 場(chǎng)景說(shuō)明

點(diǎn)擊車牌號(hào)輸入框拉起自定義鍵盤(pán)，根據(jù)車牌的位數(shù)展示省份、市區(qū)編號(hào)、車牌等自定義內(nèi)容。

點(diǎn)擊新增車牌支持存儲(chǔ)常用車牌。

2) 技術(shù)方案

· 特殊鍵盤(pán)綁定

通過(guò)TextInput組件的customKeyboard屬性，傳入自定義UI，實(shí)現(xiàn)特殊鍵盤(pán)和輸入框的關(guān)聯(lián)。

· 常用車牌存儲(chǔ)：

將車牌輸入能力封裝成獨(dú)立組件，通過(guò)bindSheet方法對(duì)當(dāng)前頁(yè)面綁定半模態(tài)彈框，并復(fù)用車牌輸入組件。

3. 會(huì)員積分

1) 場(chǎng)景說(shuō)明

用戶在商場(chǎng)內(nèi)消費(fèi)后，可通過(guò)掃描小票二維碼或拍攝小票照片等方式提交自助積分申請(qǐng)。

2) 技術(shù)方案

· 本模板使用Scan Kit提供的默認(rèn)界面掃碼能力，實(shí)現(xiàn)系統(tǒng)級(jí)體驗(yàn)一致的掃碼界面以及相冊(cè)掃碼入口。開(kāi)發(fā)者也可以通過(guò)自定義界面掃碼實(shí)現(xiàn)更定制化的界面樣式和功能。

· 使用Media Library Kit提供的特定接口安全Picker拉起系統(tǒng)圖庫(kù)，用戶可以自行選擇相冊(cè)內(nèi)資源或拍攝照片，開(kāi)發(fā)者通過(guò)獲取到的圖片uri進(jìn)行后續(xù)的分享、上傳等操作。

四、 模板代碼

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

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

2. 關(guān)鍵代碼解讀

1) 靜默登錄及手機(jī)號(hào)關(guān)聯(lián)

· 代碼使用效果

當(dāng)系統(tǒng)華為賬號(hào)未登錄時(shí)，打開(kāi)本元服務(wù)模板，靜默登錄不成功，自動(dòng)拉起系統(tǒng)半模態(tài)彈窗提示登錄/注冊(cè)華為賬號(hào)；

當(dāng)系統(tǒng)華為賬號(hào)已登錄時(shí)，打開(kāi)本元服務(wù)模板，靜默登錄成功，顯示“華為用戶”；

用戶可以選擇點(diǎn)擊關(guān)聯(lián)賬號(hào)，將靜默登錄賬號(hào)與已注冊(cè)賬號(hào)關(guān)聯(lián)，為用戶同步歷史數(shù)據(jù)資產(chǎn)。注意若要完整體驗(yàn)該功能，對(duì)應(yīng)包名的元服務(wù)需要完成對(duì)應(yīng)開(kāi)發(fā)前提工作。

· 核心代碼實(shí)現(xiàn)

通過(guò)AccountKit實(shí)現(xiàn)靜默登錄。

使用Scenario Fusion Kit的快速驗(yàn)證手機(jī)號(hào)Button請(qǐng)求云側(cè)獲取手機(jī)號(hào)需要的authCode。

端側(cè)使用獲取到的auth_code調(diào)用接口，云側(cè)參考服務(wù)端開(kāi)發(fā)獲取用戶的手機(jī)號(hào)信息后，端側(cè)將號(hào)碼與登錄用戶進(jìn)行關(guān)聯(lián)，并持久化存儲(chǔ)到本地。

2) 動(dòng)態(tài)服務(wù)卡片

· 代碼使用效果

將停車服務(wù)卡片加桌后，可顯示剩余車位和用戶積分(當(dāng)前為純端模擬數(shù)據(jù))；

點(diǎn)擊卡片刷新按鈕將刷新剩余車位數(shù)，并實(shí)時(shí)同步給元服務(wù)內(nèi)停車?yán)U費(fèi)頁(yè)面；

在元服務(wù)內(nèi)繳費(fèi)消耗積分后，最新剩余積分實(shí)時(shí)同步給桌面卡片。

· 核心代碼實(shí)現(xiàn)

通過(guò)commonEventManager公共事件管理實(shí)現(xiàn)卡片事件的注冊(cè)和實(shí)時(shí)通信。

3. 模板集成

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

1) 整體集成

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

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

通過(guò)IDE插件創(chuàng)建模板工程，開(kāi)發(fā)指導(dǎo)。

通過(guò)生態(tài)市場(chǎng)下載源碼， 下載地址。

通過(guò)開(kāi)源倉(cāng)訪問(wèn)源碼，倉(cāng)庫(kù)地址。

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

· 對(duì)接開(kāi)發(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è)開(kāi)發(fā)者自定義的數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換為端側(cè)數(shù)據(jù)結(jié)構(gòu)。

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

2) 按需集成

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

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

通過(guò)IDE插件下載組件源碼。開(kāi)發(fā)指導(dǎo)

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

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

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

以上是本期“便捷生活行業(yè)”行業(yè)優(yōu)秀案例的內(nèi)容，更多行業(yè)敬請(qǐng)期待~

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

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

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

HarmonyOS組件模板相關(guān)推薦：鴻蒙應(yīng)用開(kāi)發(fā)者激勵(lì)計(jì)劃2025，點(diǎn)擊查看