鴻蒙開發(fā)入門教程

一、技術(shù)簡(jiǎn)介

鴻蒙操作系統(tǒng)（HarmonyOS）是面向萬物互聯(lián)時(shí)代的全場(chǎng)景分布式操作系統(tǒng)，具備分布式軟總線、分布式數(shù)據(jù)管理、分布式任務(wù)調(diào)度等核心能力，能讓設(shè)備間實(shí)現(xiàn)無縫連接與協(xié)同，為用戶提供統(tǒng)一、流暢的交互體驗(yàn)。
開發(fā)語言方面，ArkTS 是專門為鴻蒙開發(fā)設(shè)計(jì)的語言，結(jié)合了 TypeScript 的類型系統(tǒng)與聲明式編程范式，提升了開發(fā)效率和代碼的可維護(hù)性。值得一提的是功能寫法也和前端VUE框架頗為相似，相信在我國具有大基數(shù)的前端開發(fā)者會(huì)很容易上手吧

二、工具安裝

1. 下載 DevEco Studio
   訪問 華為開發(fā)者官網(wǎng)，在官網(wǎng)找到 DevEco Studio 的下載鏈接，依據(jù)自身操作系統(tǒng)（Windows、Mac 或 Linux）選擇合適版本下載。
2. 安裝 DevEco Studio
   運(yùn)行下載好的安裝程序，按照提示完成安裝。安裝過程中可按需選擇安裝路徑和組件。
3. 配置 SDK
   打開 DevEco Studio，選擇 “Tools” -> “SDK Manager”，在 “SDK Platforms” 中選擇所需的鴻蒙 SDK 版本進(jìn)行下載安裝；在 “SDK Tools” 中安裝必要工具，如 Build Tools、Platform - Tools 等。
4. 創(chuàng)建項(xiàng)目
   打開 DevEco Studio，點(diǎn)擊 “File” -> “New” -> “New Project”，選擇基于 ArkTS 的項(xiàng)目模板（如 “Empty Ability (ArkTS)”），點(diǎn)擊 “Next”，配置項(xiàng)目信息（項(xiàng)目名稱、保存位置、包名等），最后點(diǎn)擊 “Finish” 完成項(xiàng)目創(chuàng)建。

三、核心單元介紹

1. Ability
   Ability 是鴻蒙應(yīng)用的基本功能單元，負(fù)責(zé)處理應(yīng)用的各種能力和業(yè)務(wù)邏輯。分為 FA（Feature Ability）和 PA（Particle Ability）。
   FA（Feature Ability）
   用于實(shí)現(xiàn)具有用戶界面的功能，類似于 Android 中的 Activity。通常用于展示界面、與用戶交互等。

// 在 pages 目錄下創(chuàng)建 Index.ets 文件
@Entry
@Component
struct Index {build() {Column({ space: 50 }) {Text('This is a Feature Ability page.').fontSize(30).width('100%').textAlign(TextAlign.Center)}.width('100%')}
}

PA（Particle Ability）

用于實(shí)現(xiàn)無用戶界面的功能，如后臺(tái)服務(wù)、數(shù)據(jù)處理等，類似于 Android 中的 Service。

// 在 service 目錄下創(chuàng)建 MyService.ets 文件
@Service
@Component
struct MyService {onStart() {console.log('MyService started.')// 在這里可以執(zhí)行后臺(tái)任務(wù)，如數(shù)據(jù)同步、定時(shí)任務(wù)等}onStop() {console.log('MyService stopped.')}
}

2. Module

Module 是對(duì) Ability 的進(jìn)一步封裝，包含多個(gè) Ability 以及相關(guān)的資源和配置信息，便于對(duì)應(yīng)用功能進(jìn)行模塊化管理。在 config.json 中可以對(duì) Module 進(jìn)行配置，例如指定 Module 的名稱、包含的 Ability 等。

{"module": {"name": "entry","reqPermissions": [{"name": "ohos.permission.INTERNET","reason": "Need internet access to fetch data","usedScene": {"ability": ["com.example.myapp.MainAbility"],"when": "always"}}],"abilities": [{"name": "com.example.myapp.MainAbility","icon": "$media:icon","label": "$string:mainability_label","srcEntrance": "pages/Index.ets","description": "$string:mainability_description","type": "page","launchType": "standard"},{"name": "com.example.myapp.MyService","srcEntrance": "service/MyService.ets","description": "$string:myservice_description","type": "service"}]}
}

四、重要 UI 組件

1. Text
   用于顯示文本內(nèi)容。

@Entry
@Component
struct Index {build() {Text('Hello, HarmonyOS!').fontSize(30).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center)}
}

2. Button

用于觸發(fā)操作。

@Entry
@Component
struct Index {@State clickCount: number = 0build() {Column({ space: 50 }) {Text(`Button clicked ${this.clickCount} times.`).fontSize(20).width('100%').textAlign(TextAlign.Center)Button('Click me').onClick(() => {this.clickCount++}).width('50%').margin({ left: '25%' })}.width('100%')}
}

3. Image

用于顯示圖片。

@Entry
@Component
struct Index {build() {Image($r('app.media.sample_image')).width(200).height(200).objectFit(ImageFit.Contain).margin({ top: 100 }).width('100%').imageAlign(ImageAlign.Center)}
}

4. Column 和 Row

用于布局組件，Column 實(shí)現(xiàn)垂直布局，Row 實(shí)現(xiàn)水平布局。

@Entry
@Component
struct Index {build() {Column({ space: 20 }) {Text('Vertical Item 1')Text('Vertical Item 2')Row({ space: 20 }) {Text('Horizontal Item 1')Text('Horizontal Item 2')}}.width('100%')}
}

五、常用功能

1. 條件渲染

根據(jù)條件決定是否渲染組件。

@Entry
@Component
struct Index {@State showText: boolean = falsebuild() {Column({ space: 50 }) {Button(this.showText? 'Hide Text' : 'Show Text').onClick(() => {this.showText =!this.showText}).width('50%').margin({ left: '25%' })if (this.showText) {Text('This text is conditionally rendered.').fontSize(20).width('100%').textAlign(TextAlign.Center)}}.width('100%')}
}

2. 列表渲染

使用 ForEach 組件渲染列表數(shù)據(jù)。

@Entry
@Component
struct Index {private fruits: string[] = ['Apple', 'Banana', 'Cherry']build() {Column({ space: 20 }) {ForEach(this.fruits, (fruit) => {Text(fruit).fontSize(20).width('100%').textAlign(TextAlign.Center)}, (fruit) => fruit)}.width('100%')}
}

3. 頁面導(dǎo)航

在不同頁面間進(jìn)行導(dǎo)航。

// 在 pages 目錄下創(chuàng)建 SecondPage.ets 文件
@Component
struct SecondPage {build() {Column({ space: 50 }) {Text('This is the second page.').fontSize(30).width('100%').textAlign(TextAlign.Center)Button('Go back to first page').onClick(() => {router.back()}).width('50%').margin({ left: '25%' })}.width('100%')}
}// 在 Index.ets 中添加導(dǎo)航按鈕
@Entry
@Component
struct Index {build() {Column({ space: 50 }) {Text('This is the first page.').fontSize(30).width('100%').textAlign(TextAlign.Center)Button('Go to second page').onClick(() => {router.pushUrl({ url: 'pages/SecondPage' })}).width('50%').margin({ left: '25%' })}.width('100%')}
}

六、常用函數(shù)

1. onClick

用于綁定按鈕等組件的點(diǎn)擊事件。

@Entry
@Component
struct Index {@State message: string = 'Button not clicked'build() {Button('Click me').onClick(() => {this.message = 'Button clicked!'})Text(this.message).fontSize(20).width('100%').textAlign(TextAlign.Center)}
}

2. onChange

用于綁定輸入框等組件的值變化事件。

@Entry
@Component
struct Index {@State inputValue: string = ''build() {Column({ space: 20 }) {Input({ placeholder: 'Enter text' }).onChange((value: string) => {this.inputValue = value})Text(`You entered: ${this.inputValue}`).fontSize(20).width('100%').textAlign(TextAlign.Center)}.width('100%')}
}

3. router.pushUrl 和 router.back

用于頁面導(dǎo)航，router.pushUrl 用于跳轉(zhuǎn)到指定頁面，router.back 用于返回上一頁，如前面頁面導(dǎo)航示例所示。