《寵知匯》應(yīng)用案例熱點(diǎn)技術(shù)解析

2025-10-31 15:35:21

《寵知匯》以極小的代碼代價(jià)接入了鴻蒙新的特性，通過(guò)引入了一多、智能體能力，HarmonyOS實(shí)現(xiàn)了其他系統(tǒng)沒(méi)有的創(chuàng)新體驗(yàn)，帶給用戶絲滑、流暢的體驗(yàn)。

《寵知匯》作為一款深度適配 HarmonyOS 的寵物主題應(yīng)用，匯聚專業(yè)養(yǎng)寵知識(shí)，構(gòu)建全場(chǎng)景養(yǎng)護(hù)生態(tài)，為寵物主人打造覆蓋寵物生命周期的一站式智慧服務(wù)入口。

依托鴻蒙系統(tǒng)的分布式能力與智能化特性，讓科學(xué)養(yǎng)寵更簡(jiǎn)單、更便捷。

《寵知匯》借助 HarmonyOS 的跨設(shè)備優(yōu)勢(shì)，實(shí)現(xiàn)手機(jī)、平板、智慧屏等多終端的無(wú)縫協(xié)同，成為寵物主人身邊的移動(dòng)養(yǎng)寵管家。

第一章：借助“一多”能力，實(shí)現(xiàn)全設(shè)備適配

《寵知匯》通過(guò) HarmonyOS 的一次開(kāi)發(fā)，多端部署能力，實(shí)現(xiàn)了應(yīng)用在不同設(shè)備形態(tài)上的完美適配。基于統(tǒng)一的 ArkTS 開(kāi)發(fā)框架，應(yīng)用能夠智能識(shí)別設(shè)備類型和屏幕尺寸，自動(dòng)調(diào)整界面布局和交互方式。

需要掌握一次開(kāi)發(fā)、多端部署的知識(shí)，就需要了解一多和三層架構(gòu)的關(guān)系。

· 一次開(kāi)發(fā)、多端部署是目標(biāo)

· 三層架構(gòu)是具體實(shí)現(xiàn)方式

三層架構(gòu)

開(kāi)發(fā)一個(gè)應(yīng)用，就像建一棟能適配不同住戶（設(shè)備）的智能公寓樓。三層架構(gòu)就是把這棟樓分成三個(gè)部分，每層各司其職：

1、公共能力層（地下室和基礎(chǔ)設(shè)施）

o 這是整棟樓的“地基”，包含水管、電網(wǎng)、網(wǎng)絡(luò)線路等共享資源。

o 在應(yīng)用中，就是公共組件：比如統(tǒng)一的按鈕樣式、網(wǎng)絡(luò)請(qǐng)求工具、數(shù)據(jù)管理庫(kù)等。所有上層功能都能調(diào)用這些基礎(chǔ)能力，避免重復(fù)造輪子。

o 通俗的說(shuō)，公共能力層就像樓里的公用健身房和停車場(chǎng)，所有住戶都能用，但不需要每家自己修。

2、 基礎(chǔ)特性層（標(biāo)準(zhǔn)戶型模塊）

o 這一層是預(yù)先設(shè)計(jì)好的功能模塊，比如臥室、廚房、衛(wèi)生間。每個(gè)模塊獨(dú)立且完整（高內(nèi)聚），能靈活組合。

o 在應(yīng)用中，就是核心功能：比如登錄模塊、支付模塊、視頻播放模塊等。這些模塊可以打包成功能包（Feature HAP），根據(jù)需要安裝到不同的設(shè)備。

o 通俗的說(shuō)，基礎(chǔ)特性層就像樂(lè)高積木，你可以用同樣的積木塊拼出不同房子，比如手機(jī)版用少量積木，平板版用更多積木。

3、 產(chǎn)品定制層（個(gè)性化裝修和入口）

o 這一層是針對(duì)不同住戶（設(shè)備）的個(gè)性化定制。比如給年輕人的公寓用現(xiàn)代風(fēng)格，給家庭的用溫馨風(fēng)格。

o 在應(yīng)用中，就是設(shè)備專屬的UI和配置：比如手機(jī)的簡(jiǎn)潔界面、平板的分屏布局、PC的窗口模式。這一層編譯成入口包（Entry HAP），作為用戶直接交互的界面。

o 通俗的說(shuō)，同樣是臥室模塊，在手機(jī)上顯示為底部標(biāo)簽，在平板上顯示為側(cè)邊欄，但背后的功能（睡覺(jué)）是一樣的。

為什么這樣分層？

· 維護(hù)簡(jiǎn)單：如果水管壞了（公共能力層更新），只需修一次，全樓受益。

· 靈活擴(kuò)展：如果想新增一個(gè)“智能廚房”（新功能），只需在基礎(chǔ)特性層開(kāi)發(fā)，然后就能夠輕松添加到不同戶型（設(shè)備）。

· 復(fù)用性強(qiáng)：同樣的廚房模塊，既能用在公寓，也能用在別墅（不同設(shè)備）。

實(shí)際開(kāi)發(fā)中，可以參考以下表格來(lái)了解三層架構(gòu)。

表格已提煉每一層的核心維度，覆蓋開(kāi)發(fā)中最需關(guān)注的產(chǎn)物、作用和規(guī)則，便于快速查閱和對(duì)比。

架構(gòu)層級(jí)	核心編譯產(chǎn)物	核心作用	關(guān)鍵規(guī)則
產(chǎn)品定制層	Entry 類型 HAP（最終打包為.app 文件）	作為應(yīng)用主入口，針對(duì)不同設(shè)備定制 UI 和功能	支持一次編譯生成多 HAP 組合，用于應(yīng)用市場(chǎng)上架
基礎(chǔ)特性層	1. 需 Ability：Feature 類型 HA 2. P2. 無(wú)需 Ability：HAR 包 / HSP 包	提供獨(dú)立功能模塊，支撐上層產(chǎn)品需求	按 “是否需 Ability”“是否需按需加載” 選擇產(chǎn)物
公共能力層	HAR 包	提供公共基礎(chǔ)能力（接口 / 工具），提升復(fù)用率	僅允許產(chǎn)品定制層、基礎(chǔ)特性層依賴，禁止反向依賴

對(duì)應(yīng) 《寵知匯》目錄結(jié)構(gòu)：

一次開(kāi)發(fā)、多端部署

根據(jù)一次開(kāi)發(fā)、多端部署的理念，一多又可以分為三種一多，它們分別是界面級(jí)一多、工程級(jí)一多和能力級(jí)一多。

1、 工程級(jí)一多是基礎(chǔ)和骨架。它決定了代碼怎么組織、怎么打包。

2、 功能級(jí)一多是神經(jīng)和肌肉。它讓應(yīng)用能感知并適應(yīng)設(shè)備的硬件能力，確保功能上的兼容性。

3、界面級(jí)一多是外表和皮膚。它最終決定了用戶在屏幕上看到的是什么樣子，確保視覺(jué)和交互的完美體驗(yàn)。

其中工程級(jí)一多，就是上面剛剛描述過(guò)的三層架構(gòu)。

功能級(jí)一多

手機(jī)上支持拍照，手表上不支持，那么一套代碼下，該如何完美解決？

答案是借助即SystemCapability，縮寫為SysCap。

和硬件相關(guān)的如攝像、麥克風(fēng)、wifi等都是系統(tǒng)的能力。每一個(gè)系統(tǒng)能力對(duì)應(yīng)多個(gè)API，支持某個(gè)系統(tǒng)能力也等于支持這些API調(diào)用。

系統(tǒng)能力又分為支持能力集、聯(lián)想能力集和要求能力集三個(gè)核心概念。

· 支持能力集：設(shè)備具備的系統(tǒng)能力集合，在設(shè)備配置文件中配置。

· 要求能力集：應(yīng)用需要的系統(tǒng)能力集合，在應(yīng)用配置文件中配置。

· 聯(lián)想能力集：開(kāi)發(fā)應(yīng)用時(shí)DevEco Studio可聯(lián)想的API所在的系統(tǒng)能力集合，在應(yīng)用配置文件中配置。

開(kāi)發(fā)多設(shè)備應(yīng)用時(shí)，工程中默認(rèn)的要求能力集是多個(gè)設(shè)備支持能力集的交集，默認(rèn)的聯(lián)想能力集是多個(gè)設(shè)備支持能力集的并集。

如果某個(gè)系統(tǒng)能力沒(méi)有寫入應(yīng)用的要求能力集中，那么在使用前需要判斷設(shè)備是否支持該系統(tǒng)能力。

· 方法1：canIUse()接口幫助開(kāi)發(fā)者來(lái)判斷該設(shè)備是否支持某個(gè)特定的syscap。

· 方法2：開(kāi)發(fā)者可通過(guò)import的方式將模塊導(dǎo)入，若當(dāng)前設(shè)備不支持該模塊，import的結(jié)果為undefined，開(kāi)發(fā)者在使用其API時(shí)，需要判斷其是否存在。

配置聯(lián)想能力集和要求能力集

DevEco Studio會(huì)根據(jù)創(chuàng)建的工程所支持的設(shè)備自動(dòng)配置聯(lián)想能力集和要求能力集，同時(shí)也支持開(kāi)發(fā)者修改。

另外，實(shí)際開(kāi)發(fā)中，如果想要實(shí)現(xiàn)某一段功能代碼，可以根據(jù)用戶系統(tǒng)的API版本進(jìn)行調(diào)整，

可以使用 @kit.BasicServicesKit中的sdkApiVersion來(lái)實(shí)現(xiàn)，如：

或者在ArkUI中使用。

界面級(jí)一多

界面級(jí)一多指的是如何使用一套代碼，實(shí)現(xiàn)適配多種寬度不同的設(shè)備，HarmonyOS中提供的解決方案主要有：

1、自適應(yīng)布局

2、響應(yīng)式布局

所謂的自適應(yīng)布局可以理解為頁(yè)面布局元素可以跟隨屏幕的大小變化而等比例變化。

響應(yīng)式布局則是可以根據(jù)不同的條件，實(shí)現(xiàn)屏幕布局更大的變化，如

1、大屏幕，一行顯示4個(gè)卡片

2、小屏幕，一行顯示1個(gè)卡片。

自適應(yīng)布局比較好實(shí)現(xiàn)，像flex容器、grid、線性布局等可以跟隨屏幕寬度變化而變化的容器，都可以輕易實(shí)現(xiàn)自適應(yīng)布局，結(jié)合尺寸的百分百單位，或者layoutWeight屬性，頁(yè)面元素也可以直接實(shí)現(xiàn)自適應(yīng)布局。

針對(duì)常見(jiàn)的開(kāi)發(fā)場(chǎng)景，方舟開(kāi)發(fā)框架提煉了七種自適應(yīng)布局能力，這些布局可以獨(dú)立使用，也可多種布局疊加使用。

自適應(yīng)布局類別	自適應(yīng)布局能力	使用場(chǎng)景	實(shí)現(xiàn)方式
自適應(yīng)拉伸	拉伸能力	容器組件尺寸發(fā)生變化時(shí)，增加或減小的空間全部分配給容器組件內(nèi)指定區(qū)域。	Flex布局的flexGrow和flexShrink屬性
	均分能力	容器組件尺寸發(fā)生變化時(shí)，增加或減小的空間均勻分配給容器組件內(nèi)所有空白區(qū)域。	Row組件、Column組件或Flex組件的justifyContent屬性設(shè)置為FlexAlign.SpaceEvenly
自適應(yīng)縮放	占比能力	子組件的寬或高按照預(yù)設(shè)的比例，隨容器組件發(fā)生變化。	基于通用屬性的兩種實(shí)現(xiàn)方式：- 將子組件的寬高設(shè)置為父組件寬高的百分比- layoutWeight屬性
	縮放能力	子組件的寬高按照預(yù)設(shè)的比例，隨容器組件發(fā)生變化，且變化過(guò)程中子組件的寬高比不變。	布局約束的aspectRatio屬性
自適應(yīng)延伸	延伸能力	容器組件內(nèi)的子組件，按照其在列表中的先后順序，隨容器組件尺寸變化顯示或隱藏。	基于容器組件的兩種實(shí)現(xiàn)方式：- 通過(guò)List組件實(shí)現(xiàn)- 通過(guò)Scroll組件配合Row組件或Column組件實(shí)現(xiàn)
	隱藏能力	容器組件內(nèi)的子組件，按照其預(yù)設(shè)的顯示優(yōu)先級(jí)，隨容器組件尺寸變化顯示或隱藏。相同顯示優(yōu)先級(jí)的子組件同時(shí)顯示或隱藏。	布局約束的displayPriority屬性
自適應(yīng)折行	折行能力	容器組件尺寸發(fā)生變化時(shí)，如果布局方向尺寸不足以顯示完整內(nèi)容，自動(dòng)換行。	Flex組件的wrap屬性設(shè)置為FlexWrap.Wr

更加常用的其實(shí)是響應(yīng)式布局響應(yīng)式布局有四種實(shí)現(xiàn)方式，分別是斷點(diǎn)、媒體查詢以及柵格布局以及響應(yīng)式工具。這四種實(shí)現(xiàn)方式可以互相搭配和關(guān)聯(lián)。

**斷點(diǎn) (Breakpoints)**將設(shè)備的窗口寬度（或高寬比）劃分為幾個(gè)關(guān)鍵的范圍（區(qū)間）

· xs (超小): 0 ~ 320vp （智能穿戴）

· sm (小): 320vp ~ 600vp （手機(jī)豎屏）

· md (中): 600vp ~ 840vp （平板豎屏/折疊屏）

· lg (大): 840vp ~ 1440vp （平板橫屏/PC）

· xl (超大): 1440vp及以上（大屏設(shè)備）

實(shí)際開(kāi)發(fā)中，可以監(jiān)聽(tīng)屏幕尺寸的變化，然后把斷點(diǎn)存儲(chǔ)在全局中，方便使用。《寵知匯》就是采用這種方式。

《寵知匯》的屏幕適配流程

1. V2 狀態(tài)管理設(shè)計(jì)

文件：commons/base/src/main/ets/utils/BreakpointSystem.ets

全局狀態(tài)類定義：

關(guān)鍵設(shè)計(jì)要點(diǎn)：

· 使用 @ObservedV2 裝飾器標(biāo)記可觀察類

· 使用 @Trace 裝飾器追蹤 currentBreakpoint 屬性變化

· 全局單例模式確保狀態(tài)一致性

· 導(dǎo)出 breakpointState 供其他模塊直接訂閱

斷點(diǎn)配置：

斷點(diǎn)劃分遵循 HarmonyOS 官方建議，覆蓋主流設(shè)備尺寸：

· xs/sm：手機(jī)豎屏模式

· md：平板或手機(jī)橫屏

· lg：大屏平板、折疊屏展開(kāi)狀態(tài)

2. 窗口尺寸監(jiān)聽(tīng)機(jī)制

在 API 18 中，推薦使用 window.on('windowSizeChange') 替代已廢棄的 mediaquery.matchMediaSync：

關(guān)鍵技術(shù)點(diǎn)：

1、使用 window.getWindowProperties() 獲取窗口實(shí)際尺寸

2、通過(guò) UIContext.px2vp() 進(jìn)行像素到虛擬像素的轉(zhuǎn)換

3、監(jiān)聽(tīng)窗口尺寸變化事件，支持分屏、折疊屏等場(chǎng)景

3、V2 狀態(tài)更新機(jī)制

狀態(tài)初始化：

窗口尺寸變化響應(yīng)：

V2 狀態(tài)管理優(yōu)勢(shì)：

1. 精準(zhǔn)追蹤：@Trace裝飾器實(shí)現(xiàn)屬性級(jí)別的變化追蹤

2. 自動(dòng)更新：狀態(tài)變化自動(dòng)觸發(fā)訂閱組件的 UI 刷新

3. 性能優(yōu)化：僅在斷點(diǎn)實(shí)際變化時(shí)觸發(fā)更新，避免不必要的重渲染

4. 雙向兼容：V2 狀態(tài)與 AppStorage 雙向同步，支持新舊兩種訂閱方式

4. 應(yīng)用生命周期集成

文件：products/phone/src/main/ets/entryability/EntryAbility.ets

生命周期管理：

·在 onWindowStageCreate 中注冊(cè)斷點(diǎn)監(jiān)聽(tīng)

·在 onWindowStageDestroy 中注銷監(jiān)聽(tīng)，避免內(nèi)存泄漏

5、斷點(diǎn)值映射工具

BreakpointType 提供了類型安全的斷點(diǎn)值映射機(jī)制，支持任意類型的響應(yīng)式配置。

6. UI V2 組件狀態(tài)管理

文件：products/phone/src/main/ets/pages/HomePage.ets

組件狀態(tài)定義：

通過(guò) @StorageProp 訂閱全局?jǐn)帱c(diǎn)狀態(tài)，根據(jù)不同斷點(diǎn)動(dòng)態(tài)調(diào)整：

· 間距：xs(16) → sm(20) → md(24) → lg(28)

· 內(nèi)邊距：xs/sm(16) → md(24) → lg(32)

頁(yè)面間距與尺寸適配：

通過(guò) @StorageProp 訂閱全局?jǐn)帱c(diǎn)狀態(tài)，根據(jù)不同斷點(diǎn)動(dòng)態(tài)調(diào)整：

· 間距：xs(16) → sm(20) → md(24) → lg(28)

· 內(nèi)邊距：xs/sm(16) → md(24) → lg(32)

7. 柵格布局響應(yīng)式配置

響應(yīng)式布局策略：

· 手機(jī)端（xs/sm）：2列2行，緊湊布局

· 平板端（md/lg）：4列1行，橫向展開(kāi)

8. 字體與圖標(biāo)尺寸適配

9. 條件布局切換

根據(jù)斷點(diǎn)切換布局方向，提升大屏設(shè)備的空間利用率。

10. 內(nèi)容寬度約束

在大屏設(shè)備上限制內(nèi)容最大寬度，避免內(nèi)容過(guò)度拉伸導(dǎo)致閱讀體驗(yàn)下降。

11. 全局狀態(tài)訂閱模式

直接訂閱 V2 狀態(tài)

第二章：HarmonyOS 智能體，實(shí)現(xiàn)智能化寵物服務(wù)

《寵知匯》背后依靠海量的寵物飼養(yǎng)百科技術(shù)，包含有寵物種類、喂養(yǎng)食物、陪伴技巧、注意事項(xiàng)等專業(yè)知識(shí)，利用HarmonyOS上的智能體知識(shí)打造出配套可用的智能體，給廣大HarmonyOS用戶提供貼心幫助。

利用 Agent Framework Kit 功能實(shí)現(xiàn)在應(yīng)用內(nèi)拉起相關(guān)智能體，第一時(shí)間提供給用戶使用的寵物飼養(yǎng)知識(shí)。

開(kāi)發(fā)者接入智能體只需要兩個(gè)步驟：

1.小藝智能體平臺(tái)中創(chuàng)建智能體

2. 你的應(yīng)用中引入智能體

創(chuàng)建智能體

1. 登錄小藝智能體平臺(tái)

https://developer.huawei.com/consumer/cn/hag/abilityportal/#/

登錄華為賬號(hào)即可

2. 快速創(chuàng)建智能體

在小藝智能體平臺(tái)，智能體是一個(gè)最終的產(chǎn)品，智能體可以通過(guò)知識(shí)庫(kù)、工作流、和資源來(lái)增強(qiáng)自身的功能。

3. 配置智能體

剛?cè)腴T的小伙伴可以選擇單Agent （LLM模式）

智能體提供了很多配置項(xiàng)

這些配置從交互開(kāi)場(chǎng)、多模態(tài)體驗(yàn)、功能擴(kuò)展、自動(dòng)化流程、數(shù)據(jù)管理及用戶引導(dǎo)等方面，全方位定制智能體的交互方式、功能范圍與運(yùn)行邏輯，助力其實(shí)現(xiàn)個(gè)性化、高效且專業(yè)的服務(wù)。

配置項(xiàng)	作用
開(kāi)場(chǎng)對(duì)話	設(shè)置智能體與用戶初次交互的開(kāi)場(chǎng)白，建立初始溝通場(chǎng)景。
輸入文件設(shè)置	配置可上傳的文件類型、大小等，支持智能體處理用戶上傳的文件。
用戶問(wèn)題建議	開(kāi)啟后為用戶提供問(wèn)題示例或引導(dǎo)，幫助用戶發(fā)起提問(wèn)。
快捷指令	可設(shè)置最多 10 條快捷指令，用戶通過(guò)指令快速觸發(fā)特定功能或流程，提升交互效率。
背景圖片	設(shè)置智能體界面的背景圖片，美化界面、營(yíng)造特定氛圍。
角色聲音	開(kāi)啟后智能體以特定聲音交互，增強(qiáng)語(yǔ)音交互的體驗(yàn)感和角色辨識(shí)度。
插件	可配置最多 20 個(gè)插件，擴(kuò)展智能體功能，如接入工具、調(diào)用外部服務(wù)等。
工作流	可配置最多 20 個(gè)工作流，定義復(fù)雜任務(wù)的自動(dòng)化處理流程。
觸發(fā)器	可設(shè)置最多 10 個(gè)觸發(fā)器，滿足特定條件時(shí)自動(dòng)觸發(fā)相應(yīng)動(dòng)作或?qū)υ挕?/span>
關(guān)聯(lián)應(yīng)用	可關(guān)聯(lián)最多 10 個(gè)應(yīng)用，實(shí)現(xiàn)與應(yīng)用的數(shù)據(jù)交互或功能聯(lián)動(dòng)。
知識(shí)庫(kù)	可配置最多 10 個(gè)知識(shí)庫(kù)，存儲(chǔ)特定領(lǐng)域知識(shí)，支持智能體專業(yè)回答問(wèn)題。
變量	定義和管理交互中的動(dòng)態(tài)數(shù)據(jù)，支持個(gè)性化、動(dòng)態(tài)交互邏輯。
長(zhǎng)期記憶	開(kāi)啟后智能體記住長(zhǎng)期交互信息，保持對(duì)話的連續(xù)性。