前言

隨著華為HarmonyOS生態(tài)的不斷發(fā)展，越來越多的開發(fā)者開始關(guān)注并投入到HarmonyOS應(yīng)用開發(fā)中。本文將通過一個(gè)實(shí)際的項(xiàng)目案例，詳細(xì)講解HarmonyOS應(yīng)用開發(fā)的核心技術(shù)和最佳實(shí)踐，幫助開發(fā)者快速掌握HarmonyOS應(yīng)用開發(fā)的要點(diǎn)。

項(xiàng)目概述

本項(xiàng)目是一個(gè)基于HarmonyOS的學(xué)習(xí)應(yīng)用，主要包含了一個(gè)儀表盤示例頁面，用于展示業(yè)務(wù)數(shù)據(jù)概覽。項(xiàng)目采用了ArkTS語言開發(fā)，使用了HarmonyOS提供的UI框架和組件，實(shí)現(xiàn)了響應(yīng)式布局和頁面路由等功能。

HarmonyOS應(yīng)用架構(gòu)

項(xiàng)目結(jié)構(gòu)

HarmonyOS應(yīng)用的項(xiàng)目結(jié)構(gòu)遵循一定的規(guī)范，主要包括以下幾個(gè)部分：

• entry：應(yīng)用的入口模塊，包含了應(yīng)用的主要代碼和資源
  • src/main/ets：ArkTS代碼目錄
    • entryability：應(yīng)用的Ability實(shí)現(xiàn)，是應(yīng)用的入口點(diǎn)
    • pages：應(yīng)用的頁面組件
    • components：可復(fù)用的UI組件
    • common：公共工具和常量
  • src/main/resources：應(yīng)用的資源文件，如圖片、字符串等
  • src/main/module.json5：模塊配置文件

Ability生命周期

Ability是HarmonyOS應(yīng)用的基本組成單元，類似于Android的Activity。在本項(xiàng)目中，EntryAbility是應(yīng)用的主入口，它的生命周期包括：

export default class EntryAbility extends UIAbility {onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {// Ability創(chuàng)建時(shí)調(diào)用}onDestroy(): void {// Ability銷毀時(shí)調(diào)用}onWindowStageCreate(windowStage: window.WindowStage): void {// 窗口創(chuàng)建時(shí)調(diào)用，在這里加載主頁面windowStage.loadContent('pages/Index', (err) => {// 頁面加載回調(diào)});}onWindowStageDestroy(): void {// 窗口銷毀時(shí)調(diào)用}onForeground(): void {// Ability進(jìn)入前臺時(shí)調(diào)用}onBackground(): void {// Ability進(jìn)入后臺時(shí)調(diào)用}
}

ArkTS語言特性

ArkTS是HarmonyOS應(yīng)用開發(fā)的首選語言，它基于TypeScript，增加了聲明式UI和狀態(tài)管理等特性。

裝飾器

ArkTS中的裝飾器是一種特殊的聲明，可以附加在類、方法、訪問器、屬性或參數(shù)上。本項(xiàng)目中使用了多種裝飾器：

1. @Entry：標(biāo)記一個(gè)組件為頁面入口
2. @Component：定義一個(gè)自定義組件
3. @State：定義組件內(nèi)部的狀態(tài)變量，當(dāng)狀態(tài)變化時(shí)會觸發(fā)UI刷新
4. @Prop：用于父組件向子組件傳遞數(shù)據(jù)

例如，在NavBar組件中：

@Component
export struct Navbar {@Prop title: string = ''build() {// 組件UI構(gòu)建}
}

狀態(tài)管理

ArkTS提供了多種狀態(tài)管理機(jī)制，用于處理組件內(nèi)部狀態(tài)和組件間通信：

1. @State：組件內(nèi)部狀態(tài)，變化時(shí)會觸發(fā)組件重新渲染
2. @Prop：父組件向子組件傳遞的屬性，子組件不能修改
3. @Link：雙向綁定，父子組件可以共同修改
4. AppStorage：應(yīng)用級的狀態(tài)存儲

在DashboardExample組件中，使用@State管理數(shù)據(jù)：

@State screenWidth: number = 0
@State dataCards: DashboardCardItem[] = [{title: '今日銷售額', value: '8,846', unit: '元', trend: '+12.5%', color: '#2A9D8F'},// 其他數(shù)據(jù)...
]

UI組件與布局

基礎(chǔ)組件

HarmonyOS提供了豐富的基礎(chǔ)UI組件，本項(xiàng)目中使用了：

1. Text：文本顯示組件
2. Image：圖片顯示組件
3. Column：垂直布局容器
4. Row：水平布局容器
5. Flex：彈性布局容器
6. List：列表容器

響應(yīng)式布局

HarmonyOS支持響應(yīng)式布局，可以根據(jù)屏幕尺寸自適應(yīng)調(diào)整UI。在DashboardExample中，通過檢測屏幕寬度實(shí)現(xiàn)響應(yīng)式布局：

aboutToAppear() {// 獲取屏幕寬度，用于響應(yīng)式布局this.screenWidth = px2vp(AppStorage.Get<number>('windowWidth') || 720)
}// 根據(jù)屏幕寬度決定每行顯示的卡片數(shù)量
Flex({ wrap: FlexWrap.Wrap, justifyContent: this.screenWidth > 600 ? FlexAlign.Start : FlexAlign.SpaceAround }) {// 卡片布局
}

樣式與主題

ArkTS支持鏈?zhǔn)秸{(diào)用設(shè)置組件樣式，使UI代碼更加簡潔：

Text(card.value).fontSize(28).fontWeight(FontWeight.Bold).fontColor(card.color)

還可以通過設(shè)置backgroundColor、borderRadius、shadow等屬性實(shí)現(xiàn)豐富的視覺效果：

.width(this.screenWidth > 600 ? '22%' : '45%')
.height(120)
.padding(16)
.margin(8)
.borderRadius(12)
.backgroundColor(Color.White)
// 添加卡片陰影效果
.shadow({radius: 4, color: '#1A000000', offsetY: 2})

頁面路由與參數(shù)傳遞

HarmonyOS提供了router模塊用于頁面間導(dǎo)航和參數(shù)傳遞。

頁面跳轉(zhuǎn)

在Index頁面中，通過router.pushUrl實(shí)現(xiàn)頁面跳轉(zhuǎn)：

router.pushUrl({url: item.path,params: {desc: item.desc,value: item.value}
})

參數(shù)接收

在目標(biāo)頁面中，通過router.getParams獲取傳遞的參數(shù)：

onPageShow(): void {// 獲取傳遞過來的參數(shù)對象const params = router.getParams() as Record<string, string>;//   獲取傳遞的值if (params) {this.desc = params.desc as stringthis.title = params.value as string}
}

數(shù)據(jù)綁定與循環(huán)渲染

數(shù)據(jù)接口定義

使用TypeScript接口定義數(shù)據(jù)結(jié)構(gòu)，提高代碼的可讀性和可維護(hù)性：

export interface DashboardCardItem {title: string;    // 卡片標(biāo)題value: string;    // 數(shù)值內(nèi)容unit: string;     // 數(shù)值單位trend: string;    // 趨勢變化color: string;    // 卡片主題顏色
}

循環(huán)渲染

使用ForEach語法實(shí)現(xiàn)列表循環(huán)渲染：

ForEach(this.dataCards, (card: DashboardCardItem) => {// 數(shù)據(jù)卡片UI構(gòu)建
})

條件渲染

ArkTS支持在UI構(gòu)建中使用條件表達(dá)式，實(shí)現(xiàn)動態(tài)UI：

// 根據(jù)趨勢是否為正值顯示不同顏色
Text(card.trend).fontSize(14).fontColor(card.trend.includes('+') ? '#2A9D8F' : '#E76F51')

組件生命周期

ArkTS組件有多個(gè)生命周期回調(diào)函數(shù)：

1. aboutToAppear：組件即將出現(xiàn)時(shí)調(diào)用，用于初始化
2. aboutToDisappear：組件即將消失時(shí)調(diào)用，用于清理資源
3. onPageShow：頁面顯示時(shí)調(diào)用
4. onPageHide：頁面隱藏時(shí)調(diào)用
5. onBackPress：處理返回按鍵事件

aboutToAppear() {// 初始化工作this.screenWidth = px2vp(AppStorage.Get<number>('windowWidth') || 720)
}onPageShow(): void {// 頁面顯示時(shí)的處理const params = router.getParams() as Record<string, string>;// ...
}

最佳實(shí)踐與性能優(yōu)化

組件復(fù)用

將通用UI封裝為可復(fù)用組件，如本項(xiàng)目中的NavBar組件：

@Component
export struct Navbar {@Prop title: string = ''build() {Row(){Image($r('app.media.tornLeft')).width(30).onClick(()=>{router.back()})Text(this.title).fontSize(20).fontWeight(800)}.justifyContent(FlexAlign.SpaceBetween).width('100%').height('50')}
}

響應(yīng)式設(shè)計(jì)

根據(jù)不同屏幕尺寸調(diào)整布局，提升用戶體驗(yàn)：

.width(this.screenWidth > 600 ? '22%' : '45%')

性能優(yōu)化

1. 懶加載：只在需要時(shí)加載組件和資源
2. 狀態(tài)管理：合理使用狀態(tài)管理機(jī)制，避免不必要的重渲染
3. 資源復(fù)用：復(fù)用組件和資源，減少內(nèi)存占用