一、鴻蒙開(kāi)發(fā)的環(huán)境準(zhǔn)備

• 開(kāi)發(fā)工具：使用 DevEco Studio，支持 ArkTS 語(yǔ)法。? ? ? ? ??
• 系統(tǒng)要求：確保計(jì)算機(jī)符合 DevEco Studio 的最低系統(tǒng)需求。
• 安裝步驟：下載 DevEco Studio，安裝合適的 SDK 和模擬器

二、鴻蒙應(yīng)用可以用哪些語(yǔ)言進(jìn)行開(kāi)發(fā)?

• ArkTS（方舟編程語(yǔ)言）：這是HarmonyOS 3開(kāi)始引入的一種全新語(yǔ)言，類似于TypeScript。它適合用于開(kāi)發(fā)UI和應(yīng)用邏輯，特別是在HarmonyOS應(yīng)用和跨平臺(tái)開(kāi)發(fā)中具有很好的支持。

• JavaScript：主要用于輕量級(jí)的應(yīng)用開(kāi)發(fā)，特別適合界面開(kāi)發(fā)和簡(jiǎn)單的邏輯處理。HarmonyOS早期版本對(duì)JavaScript的支持較好。

• Java：適合開(kāi)發(fā)一些通用應(yīng)用邏輯和業(yè)務(wù)邏輯，特別是移動(dòng)設(shè)備相關(guān)的應(yīng)用。HarmonyOS底層對(duì)Java有良好的支持，但最新版本推薦轉(zhuǎn)向ArkTS。

• C/C++：適合開(kāi)發(fā)系統(tǒng)底層、驅(qū)動(dòng)、性能要求高的組件以及跨平臺(tái)應(yīng)用邏輯。C/C++在HarmonyOS中用于高性能和底層開(kāi)發(fā)，并且可以通過(guò)NDK（Native Development Kit）進(jìn)行開(kāi)發(fā)。

• Kotlin：雖然Kotlin在鴻蒙中不是官方推薦的語(yǔ)言，但由于其與Java兼容，可以通過(guò)Java的方式間接使用。

• Python、Rust等：雖然鴻蒙官方不直接支持這些語(yǔ)言，但可以通過(guò)綁定或其他中間層的方式進(jìn)行集成，適合特定需求的項(xiàng)目。

其中ArkTS 是目前鴻蒙系統(tǒng)推薦的主要開(kāi)發(fā)語(yǔ)言，ArkTS 基于 TypeScript，并在 HarmonyOS 上進(jìn)行了定制和優(yōu)化，方便開(kāi)發(fā)者在鴻蒙系統(tǒng)的多設(shè)備和跨平臺(tái)環(huán)境中使用。ArkTS 在設(shè)計(jì)上支持多種設(shè)備，包括手機(jī)、平板、智能家居、智能手表等。同時(shí)ArkTS 由鴻蒙的方舟編譯器（Ark Compiler）進(jìn)行編譯，這種編譯器可以將 ArkTS 代碼直接編譯成機(jī)器碼而不是通過(guò)虛擬機(jī)運(yùn)行，從而顯著提升運(yùn)行速度和性能?

三、ArkTS中常用的UI組件有哪些

1.Text - 文本組件??(用于顯示靜態(tài)文本內(nèi)容，可以自定義字體大小、顏色、對(duì)齊方式等)

Text("Hello HarmonyOS").fontSize(20).fontColor('#333333').alignment('center');

2.Button - 按鈕組件??(用于觸發(fā)點(diǎn)擊事件，支持樣式自定義)

Button("Click Me").onClick(() => {console.log("Button clicked");}).width(200).height(50).backgroundColor('#007DFF');

3.TextInput - 文本輸入框??(允許用戶輸入文本內(nèi)容，可以設(shè)置占位符、最大長(zhǎng)度等屬性)

TextInput({ placeholder: 'Enter your name' }).fontSize(18).textColor('#000000').placeholderColor('#AAAAAA').onChange((value) => {console.log("User input:", value);});

4.Image - 圖片組件??(用于顯示圖片，支持本地和網(wǎng)絡(luò)圖片路徑)

Image($r('image.icon')).width(100).height(100).objectFit('cover');  // cover, contain, fill 等

5.List - 列表組件??(用于顯示一系列相同結(jié)構(gòu)的內(nèi)容。通過(guò) ForEach 動(dòng)態(tài)渲染列表數(shù)據(jù))

List({ space: 10 }) {ForEach([1, 2, 3, 4, 5], (item) => {Text(`Item: ${item}`).fontSize(16).margin(10);});
}

6.Toggle - 開(kāi)關(guān)組件??(用于切換開(kāi)啟和關(guān)閉狀態(tài))

@Observed isToggled: boolean = false;Toggle({ value: this.isToggled }).onChange((newValue) => {this.isToggled = newValue;console.log("Toggle status:", newValue);});

7.Slider - 滑塊組件??(用于選擇一個(gè)范圍值，比如音量、亮度等)

@Observed volume: number = 50;Slider({ value: this.volume, min: 0, max: 100 }).onChange((value) => {this.volume = value;console.log("Volume:", value);});

8.Progress - 進(jìn)度條證件??(用于顯示任務(wù)進(jìn)度，例如下載進(jìn)度、加載進(jìn)度等)

Progress({ value: 0.7 }).color('#4CAF50').trackColor('#E0E0E0').strokeWidth(5);

9.Checkbox - 復(fù)選框組件??(用戶可以選擇或取消選擇，適合多選的場(chǎng)景)

@Observed isChecked: boolean = false;Checkbox({ value: this.isChecked }).onChange((newValue) => {this.isChecked = newValue;console.log("Checkbox checked:", newValue);});

10.Radio - 單選按鈕??(用于單項(xiàng)選擇，常配合 RadioGroup 使用)

@Observed selectedValue: number = 1;RadioGroup({ value: this.selectedValue }).onChange((value) => {this.selectedValue = value;}) {Radio({ value: 1, label: 'Option 1' });Radio({ value: 2, label: 'Option 2' });Radio({ value: 3, label: 'Option 3' });
}

11.Grid - 網(wǎng)格布局? (用于創(chuàng)建多列布局的網(wǎng)格視圖)

Grid({ columns: 3, space: 10 }) {ForEach([1, 2, 3, 4, 5, 6], (item) => {Text(`Item ${item}`).fontSize(16).backgroundColor('#E0E0E0').padding(10);});
}

12.ScrollView - 滾動(dòng)視圖? (用于容納可滾動(dòng)的內(nèi)容，例如長(zhǎng)列表、長(zhǎng)文本)

ScrollView() {Column() {Text("Scrollable Content").fontSize(20).margin(10);// 其他長(zhǎng)內(nèi)容...}
}

13.Picker - 選擇器? (適用于日期、時(shí)間等數(shù)據(jù)選擇)

Picker({ range: ['Option 1', 'Option 2', 'Option 3'] }).onChange((value) => {console.log("Picker selected:", value);});

四、基礎(chǔ)組件的使用

1.鴻蒙使用聲明式語(yǔ)法創(chuàng)建 UI 組件，以下示例創(chuàng)建了一個(gè)文本組件和按鈕組件

import { Component, Observed } from '@ohos/arkui';@Component
struct HelloWorld {@Observed count: number = 0;build() {Column() {Text(`Hello HarmonyOS! Current count: ${this.count}`).fontSize(20).fontColor('#333333').margin(20);Button("Click Me").onClick(() => {this.count += 1;}).width('80%').height(50).backgroundColor('#007DFF').margin(20);}}
}

2.使用 ArkTS 通過(guò)條件語(yǔ)句和循環(huán)來(lái)動(dòng)態(tài)控制組件顯示

build() {Column() {if (this.count > 5) {Text("Count is greater than 5!").fontSize(18).fontColor('#FF0000');}ForEach([1, 2, 3, 4, 5], (item) => {Text(`Item: ${item}`).fontSize(16);});}
}

3.函數(shù)定義和調(diào)用

@Entry
@Component
struct MyComponent {@State result: number = 0;// 定義一個(gè)函數(shù)，用于計(jì)算兩個(gè)數(shù)字的和addNumbers(a: number, b: number): number {return a + b;}// 調(diào)用函數(shù)并更新?tīng)顟B(tài)onCalculate() {this.result = this.addNumbers(5, 10); // 調(diào)用 addNumbers 函數(shù)，傳入?yún)?shù) 5 和 10}// 組件的界面布局build() {Column() {// 按鈕用于觸發(fā)計(jì)算Button("計(jì)算 5 + 10") {onClick: () => this.onCalculate()  // 調(diào)用 onCalculate 來(lái)更新 result}// 顯示計(jì)算結(jié)果Text("計(jì)算結(jié)果: " + this.result).fontSize(20)}}
}

4.頁(yè)面路由跳轉(zhuǎn)

import { router } from '@kit.ArkUI'@Entry
@Component
struct MainPage {build() {Column() {Button('跳轉(zhuǎn)到詳情頁(yè)').onClick(() => {// 跳轉(zhuǎn)到 DetailPage 頁(yè)面router.pushUrl({uri: 'pages/DetailPage' // 目標(biāo)url});});}}
}/**
* 其他適用方法
*/// push page
router.pushUrl({ url:"pages/pageOne", params: null })// pop page
router.back({ url: "pages/pageOne" })// replace page
router.replaceUrl({ url: "pages/pageOne" })// clear all page
router.clear()// 獲取頁(yè)面棧大小
let size = router.getLength()// 獲取頁(yè)面狀態(tài)
let pageState = router.getState()

5.發(fā)送http請(qǐng)求

import { http } from '@kit.NetworkKit'let httpRequest = http.createHttp(); // 每一個(gè)httpRequest對(duì)應(yīng)一個(gè)HTTP請(qǐng)求任務(wù)，不可復(fù)用function sendPostRequest() {httpRequest.request({method: 'POST',url: 'https://jsonplaceholder.typicode.com/posts',header: {'Content-Type': 'application/json'},connectTimeout: 5000,readTimeout: 5000,extraData: postData // 設(shè)置 POST 請(qǐng)求的 body 數(shù)據(jù)}, (err, data) => {if (err) {console.error('請(qǐng)求失敗:', err);return;}console.log('請(qǐng)求成功，返回?cái)?shù)據(jù):', data);})
}sendPostRequest()

?6.父子組件

// 父組件
import { ChildComponent } from './ChildComponent';@Entry
@Component
struct ParentComponent {private message: string = 'Hello from Parent';private handleChildClick() {this.message = '子組件按鈕已點(diǎn)擊!';console.log('子組件的按鈕被點(diǎn)擊了');}build() {Column() {Text('這是父組件').fontSize(20).margin({ bottom: 20 })// 嵌套子組件，并傳遞屬性ChildComponent({message: this.message,onMessageClick: this.handleChildClick.bind(this)});}}
}

// 子組件@Component
struct ChildComponent {@Prop message: string;@Prop onMessageClick: () => void;build() {Column() {Text(this.message).fontSize(18).margin({ bottom: 10 })Button('點(diǎn)擊我').onClick(() => {// 調(diào)用父組件傳入的回調(diào)函數(shù)if (this.onMessageClick) {this.onMessageClick();}});}}
}

五、ArkTS 裝飾器

ArkTS 中，裝飾器（Decorator）是一種特殊的語(yǔ)法，用于給類、方法或?qū)傩蕴砑犹囟ǖ墓δ芑蛐袨?。鴻蒙系統(tǒng)中的 ArkTS 裝飾器提供了特定的標(biāo)記，以便開(kāi)發(fā)者快速定義頁(yè)面結(jié)構(gòu)、組件類型和狀態(tài)管理等。

• @Component：表示自定義組件。
• @Entry：表示該自定義組件為入口組件。
• @State：表示組件中的狀態(tài)變量，狀態(tài)變量變化會(huì)觸發(fā)UI刷新。
• @Prop：用于父子組件間的單向數(shù)據(jù)同步。
• @Link：用于父子組件間的雙向數(shù)據(jù)同步。
• @Provide和@Consume：用于與后代組件雙向同步。
• @Observed和@ObjectLink：用于嵌套類對(duì)象屬性變化時(shí)的雙向數(shù)據(jù)同步。
• @Builder和@BuilderParam：用于封裝和復(fù)用UI描述。
• @Styles：用于定義組件重用樣式。
• @Extend：用于擴(kuò)展原生組件樣式。

六、組件生命周期

自定義組件和頁(yè)面之間的關(guān)系

• 自定義組件：@Component裝飾的UI單元，可以組合多個(gè)系統(tǒng)組件實(shí)現(xiàn)UI的復(fù)用，可以調(diào)用組件的生命周期。

• 頁(yè)面：即應(yīng)用的UI頁(yè)面。可以由一個(gè)或者多個(gè)自定義組件組成，@Entry裝飾的自定義組件為頁(yè)面的入口組件，即頁(yè)面的根節(jié)點(diǎn)，一個(gè)頁(yè)面有且僅能有一個(gè)@Entry。只有被@Entry裝飾的組件才可以調(diào)用頁(yè)面的生命周期。

頁(yè)面生命周期，即被@Entry裝飾的組件生命周期，提供以下生命周期接口：

• onPageShow：頁(yè)面每次顯示時(shí)觸發(fā)一次，包括路由過(guò)程、應(yīng)用進(jìn)入前臺(tái)等場(chǎng)景。

• onPageHide：頁(yè)面每次隱藏時(shí)觸發(fā)一次，包括路由過(guò)程、應(yīng)用進(jìn)入后臺(tái)等場(chǎng)景。

• onBackPress：當(dāng)用戶點(diǎn)擊返回按鈕時(shí)觸發(fā)。

組件生命周期，即一般用@Component裝飾的自定義組件的生命周期，提供以下生命周期接口：

• aboutToAppear：組件即將出現(xiàn)時(shí)回調(diào)該接口，具體時(shí)機(jī)為在創(chuàng)建自定義組件的新實(shí)例后，在執(zhí)行其build()函數(shù)之前執(zhí)行。

• onDidBuild：組件build()函數(shù)執(zhí)行完成之后回調(diào)該接口，不建議在onDidBuild函數(shù)中更改狀態(tài)變量、使用animateTo等功能，這可能會(huì)導(dǎo)致不穩(wěn)定的UI表現(xiàn)。

• aboutToDisappear：aboutToDisappear函數(shù)在自定義組件析構(gòu)銷毀之前執(zhí)行。不允許在aboutToDisappear函數(shù)中改變狀態(tài)變量，特別是@Link變量的修改可能會(huì)導(dǎo)致應(yīng)用程序行為不穩(wěn)定。

?生命周期流程如下圖所示，下圖展示的是被@Entry裝飾的組件（頁(yè)面）生命周期。