【寶藏貼】HarmonyOS官方模板優(yōu)秀案例 (第1期:便捷生活 · 購(gòu)物中心)

0 評(píng)論 5548 瀏覽 1 收藏 34 分鐘

?? 鴻蒙生態(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、銀聯(lián)SDK

極光 sdk、同盾SDK、神策數(shù)據(jù) SDK

騰訊微信SDK

高德地圖、百度地圖、騰訊地圖定位、高德地圖定位

穿山甲廣告SDK、廣點(diǎn)通廣告SDK、友盟SDK字節(jié)跳動(dòng)火山引擎增長(zhǎng)營(yíng)銷(xiāo)套件 SDK

聽(tīng)云SDK聲網(wǎng)agoraSDK

騰訊瀏覽器服務(wù)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)擊查看

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!