【寶藏貼】HarmonyOS官方模板優(yōu)秀案例 (第1期:便捷生活 · 購(gòu)物中心)
?? 鴻蒙生態(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è),本帖下方以匯總形式持續(xù)更新中,點(diǎn)擊收藏!常看常新!
【第1期】便捷生活行業(yè) ·?購(gòu)物中心
一、概述
1. 行業(yè)洞察
行業(yè)痛點(diǎn):
- 傳統(tǒng)零售流量缺失,依賴(lài)第三方平臺(tái)導(dǎo)流,傭金成本高且較難沉淀用戶;
- 離場(chǎng)排隊(duì)繳費(fèi)耗時(shí)、找車(chē)難、支付流程復(fù)雜是用戶最大的“離場(chǎng)焦慮”;
- 傳統(tǒng)積分體系感知弱、兌換門(mén)檻高、缺乏即時(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á)率低。
行業(yè)常用三方SDK
SDK鏈接:
極光 sdk、同盾SDK、神策數(shù)據(jù) SDK
穿山甲廣告SDK、廣點(diǎn)通廣告SDK、友盟SDK、字節(jié)跳動(dòng)火山引擎增長(zhǎng)營(yíng)銷(xiāo)套件 SDK
2.優(yōu)秀案例概覽(下載模板)
購(gòu)物中心元服務(wù)模板是基于以上行業(yè)分析實(shí)現(xiàn)的參考,為行業(yè)元服務(wù)提供了常用功能的開(kāi)發(fā)樣例,涵蓋停車(chē)?yán)U費(fèi)、自助積分、店鋪導(dǎo)購(gòu)、個(gè)人錢(qián)包、券包等多個(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)的登錄、停車(chē)?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)品定制層:
專(zhuā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ǔ)能力包含日志、文件處理等工具類(lèi),公共類(lèi)型定義,網(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包,車(chē)牌鍵盤(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è)組件模塊,不依賴(lài)公共基礎(chǔ)能力包,開(kāi)發(fā)者可以單獨(dú)集成,開(kāi)箱即用,降低使用難度。
三、行業(yè)場(chǎng)景技術(shù)方案
1. 賬號(hào)管理
場(chǎng)景說(shuō)明
元服務(wù)打開(kāi)后無(wú)需用戶手動(dòng)登錄,通過(guò)靜默登錄后展示默認(rèn)頭像和默認(rèn)昵稱(chēng)。
用戶可自行選擇點(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),例如頭像、昵稱(chēng)、生日等。
技術(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. 停車(chē)?yán)U費(fèi)
場(chǎng)景說(shuō)明
點(diǎn)擊車(chē)牌號(hào)輸入框拉起自定義鍵盤(pán),根據(jù)車(chē)牌的位數(shù)展示省份、市區(qū)編號(hào)、車(chē)牌等自定義內(nèi)容。
點(diǎn)擊新增車(chē)牌支持存儲(chǔ)常用車(chē)牌。
技術(shù)方案
特殊鍵盤(pán)綁定
通過(guò)TextInput組件的customKeyboard屬性,傳入自定義UI,實(shí)現(xiàn)特殊鍵盤(pán)和輸入框的關(guān)聯(lián)。
常用車(chē)牌存儲(chǔ):
將車(chē)牌輸入能力封裝成獨(dú)立組件,通過(guò)bindSheet方法對(duì)當(dāng)前頁(yè)面綁定半模態(tài)彈框,并復(fù)用車(chē)牌輸入組件。
3. 會(huì)員積分
場(chǎng)景說(shuō)明
用戶在商場(chǎng)內(nèi)消費(fèi)后,可通過(guò)掃描小票二維碼或拍攝小票照片等方式提交自助積分申請(qǐng)。
技術(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)如下所示:
ShoppingMall
├─commons │ ?└─lib_common/src/main/ets │ ??????├─components │ ??????│ ??├── AlertDialog.ets ?????????????????????????// 警告對(duì)話框 │ ??????│ ??├── AsWebRichText.ets ???????????????????????// 富文本編輯器 │ ??????│ ??├── CallTelSheet.ets ????????????????????????// 電話呼叫 │ ??????│ ??├── EmptyComp.ets ???????????????????????????// 空白組件 │ ??????│ ??├── LoadingDialog.ets ???????????????????????// 加載組件 │ ??????│ ??├── LoginComp.ets ???????????????????????????// 登錄組件 │ ??????│ ??├── NavHeaderBar.ets ????????????????????????// 頁(yè)面導(dǎo)航欄頭部組件 │ ??????│ ??├── PageHeaderComp.ets ??????????????????????// 頁(yè)面標(biāo)題組件 │ ??????│ ??└── SheetHeaderComp.ets ?????????????????????// 半模態(tài)標(biāo)題組件 │ ??????│ │ ??????├─constants │ ??????│ ??├── Common.ets ??????????????????????????????// 通用常量 │ ??????│ ??└── RouterMap.ets ???????????????????????????// 路由表常量 │ ??????│ │ ??????├─httprequest │ ??????│ ??├── AxiosHttp.ets ???????????????????????????// axios二次封裝 │ ??????│ ??├── AxiomRequest.ets ????????????????????????// 創(chuàng)建請(qǐng)求實(shí)例 │ ??????│ ??├── HttpRequest.ets ?????????????????????????// 業(yè)務(wù)接口封裝 │ ??????│ ??└── HttpRequestApi.ets ??????????????????????// 業(yè)務(wù)接口定義 │ ??????│ │ ??????├─mock/MockData.ets ?????????????????????????????// mock數(shù)據(jù) │ ??????│ │ ??????├─models │ ??????│ ??├── ParamsModel.ets ?????????????????????????// 接口參數(shù)模型 │ ??????│ ??├── RequestModel.ets ????????????????????????// 接口請(qǐng)求模型 │ ??????│ ??├── ResponseModel.ets ???????????????????????// 接口響應(yīng)模型 │ ??????│ ??├── RouterModel.ets ?????????????????????????// 路由跳轉(zhuǎn)模型 │ ??????│ ??├── StorageModel.ets ????????????????????????// 狀態(tài)變量模型 │ ??????│ ??└── TabBarModel.ets ?????????????????????????// Tab模型 │ ??????│ │ ??????├─utils │ ??????│ ??├── EmitUtils.ets ???????????????????????????// 全局事件方法類(lèi) │ ??????│ ??├── FileUtils.ets ???????????????????????????// 文件處理方法類(lèi) │ ??????│ ??├── FormatUtils.ets ?????????????????????????// 格式化方法類(lèi) │ ??????│ ??├── GlobalUtils.ets ?????????????????????????// 全局變量類(lèi) │ ??????│ ??├── Logger.ets ??????????????????????????????// 日志類(lèi) │ ??????│ ??├── LoginUtils.ets ??????????????????????????// 登錄方法 │ ??????│ ??├── RouterUtil.ets ??????????????????????????// 路由管理類(lèi) │ ??????│ ??└── Utils.ets ???????????????????????????????// 通用方法 │ ??????│ │ ??????└─viewmodels/BaseViewModel.ets ??????????????????// 基礎(chǔ)viewmodel抽象類(lèi) │ ├─components │ ?├── module_coupon ????????????????????????????????????// 優(yōu)惠券組件 │ ?├── module_keyboard ??????????????????????????????????// 車(chē)牌鍵盤(pán)組件 │ ?└── module_points ????????????????????????????????????// 自助積分組件 │ ├─features │ ?├─business_home/src/main/ets ?????????????????????????// 首頁(yè)模塊 │ ?│ ???├─components │ ?│ ???│ ??├── AddPlateComp.ets ????????????????????????// 添加車(chē)牌組件 │ ?│ ???│ ??└── GuideListComp.ets ???????????????????????// 指南列表組件 │ ?│ ???├─constants │ ?│ ???│ ??└── Constants.ets ???????????????????????????// 常量定義 │ ?│ ???├─pages │ ?│ ???│ ??├── ConsiderateServicePage.ets ??????????????// 尊享服務(wù)頁(yè)面 │ ?│ ???│ ??├── FindCarPage.ets ?????????????????????????// 尋車(chē)頁(yè)面 │ ?│ ???│ ??├── FindCarResultPage.ets ???????????????????// 尋車(chē)結(jié)果頁(yè)面 │ ?│ ???│ ??├── ParkingPaymentPage.ets ??????????????????// 停車(chē)?yán)U費(fèi)入口頁(yè)面 │ ?│ ???│ ??├── PayDetailPage.ets ???????????????????????// 支付詳情頁(yè) │ ?│ ???│ ??├── PayRecordPage.ets ???????????????????????// 繳費(fèi)記錄頁(yè)面 │ ?│ ???│ ??├── PaySuccessPage.ets ??????????????????????// 支付成功頁(yè)面 │ ?│ ???│ ??├── PlateNumberMgtPage.ets ??????????????????// 車(chē)牌管理頁(yè)面 │ ?│ ???│ ??├── PlateNumberPage.ets ?????????????????????// 停車(chē)?yán)U費(fèi)頁(yè)面 │ ?│ ???│ ??├── ServiceDetailPage.ets ???????????????????// 貼心服務(wù)二級(jí)頁(yè)面 │ ?│ ???│ ??├── StoreGuideDetailPage.ets ????????????????// 店鋪詳情頁(yè)面 │ ?│ ???│ ??├── StoreGuidePage.ets ??????????????????????// 店鋪導(dǎo)航頁(yè)面 │ ?│ ???│ ??└── WebPage.ets ?????????????????????????????// 網(wǎng)頁(yè)頁(yè)面 │ ?│ ???└─viewmodel │ ?│ ???????├── PayDetailViewModel.ets ??????????????????// 支付詳情視圖模型 │ ?│ ???????├── PayRecordViewModel.ets ??????????????????// 繳費(fèi)記錄視圖模型 │ ?│ ???????├── PaySuccessViewModel.ets ?????????????????// 支付成功視圖模型 │ ?│ ???????├── ServiceDetailViewModel.ets ??????????????// 服務(wù)詳細(xì)視圖模型 │ ?│ ???????├── StoreGuideDetailViewModel.ets ???????????// 店鋪指南詳細(xì)視圖模型 │ ?│ ???????└── StoreGuideViewModel.ets ?????????????????// 店鋪指南視圖模型 │ ?│ │ ?└─business_mine/src/main/ets ????????????????????????// 我的模塊 │ ??????├──components │ ??????│ ??├── MenuComp.ets ???????????????????????????// 菜單組件 │ ??????│ ??└── UserInfoComp.ets ???????????????????????// 用戶信息組件 │ ??????├──constants │ ??????│ ??└── WalletConstants.ets ????????????????????// 錢(qián)包常量 │ ??????├──pages │ ??????│ ??├── MembershipManualPage.ets ???????????????// 成員手冊(cè)頁(yè)面 │ ??????│ ??├── MembershipPage.ets ?????????????????????// 成員頁(yè)面 │ ??????│ ??├── MinePage.ets ???????????????????????????// 我的頁(yè)面 │ ??????│ ??├── MyCouponsPage.ets ??????????????????????// 我的優(yōu)惠券頁(yè)面 │ ??????│ ??├── MyWalletPage.ets ???????????????????????// 我的錢(qián)包頁(yè)面 │ ??????│ ??├── PrivacyPage.ets ????????????????????????// 隱私政策頁(yè)面 │ ??????│ ??├── RechargeWalletPage.ets ?????????????????// 充值錢(qián)包頁(yè)面 │ ??????│ ??├── SettingPage.ets ????????????????????????// 設(shè)置頁(yè)面 │ ??????│ ??└── UserInfoPage.ets ???????????????????????// 用戶信息頁(yè)面 │ ??????└──viewmodel │ ??????????├── MinePageViewModel.ets ??????????????????// 我的頁(yè)面視圖模型 │ ??????????├── MyWalletViewModel.ets ??????????????????// 我的錢(qián)包頁(yè)面視圖模型 │ ??????????├── RechargeWalletViewModel.ets ????????????// 充值錢(qián)包頁(yè)面視圖模型 │ ??????????├── SettingPageViewModel.ets ???????????????// 設(shè)置頁(yè)面視圖模型 │ ??????????└── UserInfoViewModel.ets ??????????????????// 用戶信息頁(yè)面視圖模型 │ └─products └─entry/src/main/ets ├── common/Constants.ets ???????????????????????// 常量定義 ├── components/CustomTabBar.ets ????????????????// 自定義標(biāo)簽欄組件 ├── entryability/EntryAbility.ets ??????????????// 主入口能力 ├── entryformability/EntryFormAbility.ets ??????// 表單主入口能力 ├── pages │ ??├── HomePage.ets ???????????????????????????// 首頁(yè) │ ??├── Index.ets ??????????????????????????????// 入口頁(yè)面 │ ??├── IndexPage.ets ??????????????????????????// Tab頁(yè)面 │ ??└── IntroducePage.ets ??????????????????????// 商場(chǎng)介紹頁(yè)面 ├── utils/WidgetUtil.ets ???????????????????????// 卡片工具類(lèi) ├── viewModels/IndexViewModel.ets ??????????????// Tab頁(yè)面ViewModel └── widget/pages/WidgetCard.ets ????????????????// 服務(wù)卡片 |
2. 關(guān)鍵代碼解讀
靜默登錄及手機(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)靜默登錄。
?// products/phone/src/main/ets/viewmodel/IndexViewModel.ets
private?loginWithHuaweiID(): Promise<HuaweiIDResp> { return?new?Promise((resolve, reject) => { // 創(chuàng)建靜默登錄請(qǐng)求 let?loginRequest = new?authentication.HuaweiIDProvider().createLoginWithHuaweiIDRequest(); loginRequest.forceLogin = false; let?controller = new?authentication.AuthenticationController(); controller.executeRequest(loginRequest).then((data) => { let?loginWithHuaweiIDResponse = data as?authentication.LoginWithHuaweiIDResponse; let?authCode = loginWithHuaweiIDResponse.data?.authorizationCode; let?openId = loginWithHuaweiIDResponse.data?.openID; let?unionId = loginWithHuaweiIDResponse.data?.unionID; // 靜默登錄成功,返回賬號(hào)相關(guān)的ID數(shù)據(jù) resolve({ openId, unionId, authCode } as?HuaweiIDResp); }).catch((error: BusinessError) => { Logger.error(TAG, ‘loginWithHuaweiID error: ‘?+ JSON.stringify(error)); }).finally(() => { // 靜默登錄失敗,返回空值 resolve({ openId: ”, unionId: ”, authCode: ”, } as?HuaweiIDResp); }); }); } |
使用ScenarioFusion Kit的快速驗(yàn)證手機(jī)號(hào)Button請(qǐng)求云側(cè)獲取手機(jī)號(hào)需要的authCode。
// commons/lib_common/src/main/ets/components/LoginComp.ets
FunctionalButton({ params: { openType: functionalButtonComponentManager.OpenType.GET_PHONE_NUMBER, label: ”, styleOption: { styleConfig: new?functionalButtonComponentManager .ButtonConfig() .size({ width: 48, height: 48?}) .borderRadius(24) .backgroundImage($r(‘app.media.ic_tab_code_pass’)) .backgroundImageSize(ImageSize.Cover) }, }, controller: new?functionalButtonComponentManager.FunctionalButtonController() .onGetPhoneNumber((err, data) => { if?(err) { // 使用該方法的元服務(wù)未獲取scope權(quán)限時(shí),使用mock賬戶返回結(jié)果。獲取權(quán)限參考上一節(jié)【代碼使用效果】的第三步【開(kāi)發(fā)前提工作】 LoginUtils.onBindFail(this.callback); return; } LoginUtils.onBindSuccess(data.code || ”, this.callback); }), }) |
端側(cè)使用獲取到的auth_code調(diào)用接口,云側(cè)參考服務(wù)端開(kāi)發(fā)獲取用戶的手機(jī)號(hào)信息后,端側(cè)將號(hào)碼與登錄用戶進(jìn)行關(guān)聯(lián),并持久化存儲(chǔ)到本地。
// commons/lib_common/src/main/ets/utils/LoginUtils.ets
export?class?LoginUtils?{ /** ???* 關(guān)聯(lián)成功 ???* @param code ???* @param callback ???*/ static?onBindSuccess(code: string, callback?: () => void) { HttpRequestApi.getOpenLoginHm(encodeURIComponent(code)).then((res) => { if?(res.code === HttpCode.SUCCESS) { let?tel = res.data.userTel ?? ” let?userInfo: UserInfoModel = AppStorageV2.connect(UserInfoModel, () => new?UserInfoModel())!; userInfo.userInfo.userTel = `${tel.substring(0, tel.length – 8)}****${tel.substring(tel.length – 4)}` userInfo.isRelative = true if?(callback) { callback(); } } else?{ promptAction.showToast({ message: ‘賬號(hào)關(guān)聯(lián)失敗,請(qǐng)重試~’?}) } }).catch(() => { promptAction.showToast({ message: ‘賬號(hào)關(guān)聯(lián)失敗’?}) }).finally(() => { LoadingDialogUtil.close() }) }; } |
動(dòng)態(tài)服務(wù)卡片
代碼使用效果
將停車(chē)服務(wù)卡片加桌后,可顯示剩余車(chē)位和用戶積分(當(dāng)前為純端模擬數(shù)據(jù));
點(diǎn)擊卡片刷新按鈕將刷新剩余車(chē)位數(shù),并實(shí)時(shí)同步給元服務(wù)內(nèi)停車(chē)?yán)U費(fèi)頁(yè)面;
在元服務(wù)內(nèi)繳費(fèi)消耗積分后,最新剩余積分實(shí)時(shí)同步給桌面卡片。
核心代碼實(shí)現(xiàn)
通過(guò)commonEventManager公共事件管理實(shí)現(xiàn)卡片事件的注冊(cè)和實(shí)時(shí)通信。
?import?{ preferences } from?‘@kit.ArkData’;
import?{ BusinessError, commonEventManager } from?‘@kit.BasicServicesKit’; import?{ formBindingData, formProvider } from?‘@kit.FormKit’; import?{ Logger } from?‘lib_common’; import?{ CardManager } from?‘module_points’; const?TAG = ‘[WidgetUtil]’; export?class?WidgetUtil?{ // … private?static?readonly?_formClickEventName: string?= ‘form_click_event_name’; // 發(fā)布卡片按鈕點(diǎn)擊事件 public?static?publishFormClick(formId: string) { commonEventManager.publish( WidgetUtil._formClickEventName, { data: formId }, (err: BusinessError) => { if?(err) { Logger.error( TAG, `Failed to publish form_click_event_name. Code is ${err.code}, message is ${err.message}`, ); } else?{ Logger.info(TAG, ‘Succeeded in publishing form_click_event_name.’); } }, ); } // 訂閱卡片按鈕點(diǎn)擊事件 public?static?async?subscribeFormClick(ctx: Context) { let?subscriber: commonEventManager.CommonEventSubscriber | undefined?= undefined; let?subscribeInfo: commonEventManager.CommonEventSubscribeInfo = { events: [WidgetUtil._formClickEventName], publisherPermission: ”, }; commonEventManager.createSubscriber(subscribeInfo, (err1, data1) => { if?(data1) { subscriber = data1; // 訂閱公共事件回調(diào) commonEventManager.subscribe(subscriber, async?(err2, data2) => { if?(data2) { Logger.info(TAG, ‘Succeeded in creating subscribeFormClick.’); const?formData = CardManager.get().getCardData(true); // 在回調(diào)中獲取當(dāng)前的卡片數(shù)據(jù),并通過(guò)formProvider.updateForm方法刷新卡片數(shù)據(jù) formProvider.updateForm( data2.data, formBindingData.createFormBindingData(formData), ); } }); } }); } // … } |
3. 模板集成
本模板提供了兩種代碼集成方式,供開(kāi)發(fā)者自由選用。
整體集成
開(kāi)發(fā)者可以選擇直接基于模板工程開(kāi)發(fā)自己的應(yīng)用工程。
模板代碼獲?。?/strong>
通過(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ō)明中的快速入門(mén)章節(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ā)。
按需集成
若開(kāi)發(fā)者已搭建好自己的應(yīng)用工程,但暫未實(shí)現(xiàn)其中的部分場(chǎng)景能力,可以選擇取用其中的業(yè)務(wù)組件,集成在自己的工程中。
組件代碼獲?。?/strong>
通過(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ì)快馬加鞭為您解答~
同時(shí)誠(chéng)邀您添加下方二維碼加入“組件模板活動(dòng)社群”,精彩上新&活動(dòng)不錯(cuò)過(guò)!
? ?
?? 本系列持續(xù)更新,歡迎收藏本帖!
第1期:HarmonyOS官方模板優(yōu)秀案例 |?便捷生活行業(yè) ·?購(gòu)物中心
?? HarmonyOS組件模板相關(guān)推薦
【活動(dòng)ing】HarmonyOS組件/模板集成創(chuàng)新活動(dòng),報(bào)名時(shí)間截止2025年8月30日,點(diǎn)擊查看
- 目前還沒(méi)評(píng)論,等你發(fā)揮!