前言

隨著華為HarmonyOS生態的不斷發展，越來越多的開發者開始關注并投入到HarmonyOS應用開發中。本文將通過一個實際的項目案例，詳細講解HarmonyOS應用開發的核心技術和最佳實踐，幫助開發者快速掌握HarmonyOS應用開發的要點。

項目概述

本項目是一個基于HarmonyOS的學習應用，主要包含了一個儀表盤示例頁面，用于展示業務數據概覽。項目采用了ArkTS語言開發，使用了HarmonyOS提供的UI框架和組件，實現了響應式布局和頁面路由等功能。

HarmonyOS應用架構

項目結構

HarmonyOS應用的項目結構遵循一定的規范，主要包括以下幾個部分：

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

Ability生命周期

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

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

ArkTS語言特性

ArkTS是HarmonyOS應用開發的首選語言，它基于TypeScript，增加了聲明式UI和狀態管理等特性。

裝飾器

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

1. @Entry：標記一個組件為頁面入口
2. @Component：定義一個自定義組件
3. @State：定義組件內部的狀態變量，當狀態變化時會觸發UI刷新
4. @Prop：用于父組件向子組件傳遞數據

例如，在NavBar組件中：

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

狀態管理

ArkTS提供了多種狀態管理機制，用于處理組件內部狀態和組件間通信：

1. @State：組件內部狀態，變化時會觸發組件重新渲染
2. @Prop：父組件向子組件傳遞的屬性，子組件不能修改
3. @Link：雙向綁定，父子組件可以共同修改
4. AppStorage：應用級的狀態存儲

在DashboardExample組件中，使用@State管理數據：

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

UI組件與布局

基礎組件

HarmonyOS提供了豐富的基礎UI組件，本項目中使用了：

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

響應式布局

HarmonyOS支持響應式布局，可以根據屏幕尺寸自適應調整UI。在DashboardExample中，通過檢測屏幕寬度實現響應式布局：

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

樣式與主題

ArkTS支持鏈式調用設置組件樣式，使UI代碼更加簡潔：

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

還可以通過設置backgroundColor、borderRadius、shadow等屬性實現豐富的視覺效果：

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

頁面路由與參數傳遞

HarmonyOS提供了router模塊用于頁面間導航和參數傳遞。

頁面跳轉

在Index頁面中，通過router.pushUrl實現頁面跳轉：

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

參數接收

在目標頁面中，通過router.getParams獲取傳遞的參數：

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

數據綁定與循環渲染

數據接口定義

使用TypeScript接口定義數據結構，提高代碼的可讀性和可維護性：

export interface DashboardCardItem {title: string;    // 卡片標題value: string;    // 數值內容unit: string;     // 數值單位trend: string;    // 趨勢變化color: string;    // 卡片主題顏色
}

循環渲染

使用ForEach語法實現列表循環渲染：

ForEach(this.dataCards, (card: DashboardCardItem) => {// 數據卡片UI構建
})

條件渲染

ArkTS支持在UI構建中使用條件表達式，實現動態UI：

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

組件生命周期

ArkTS組件有多個生命周期回調函數：

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

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

最佳實踐與性能優化

組件復用

將通用UI封裝為可復用組件，如本項目中的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')}
}

響應式設計

根據不同屏幕尺寸調整布局，提升用戶體驗：

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

性能優化

1. 懶加載：只在需要時加載組件和資源
2. 狀態管理：合理使用狀態管理機制，避免不必要的重渲染
3. 資源復用：復用組件和資源，減少內存占用