鸿蒙HarmonyOS 开发简介

鸿蒙开发入门教程

一、技术简介

鸿蒙操作系统（HarmonyOS）是面向万物互联时代的全场景分布式操作系统，具备分布式软总线、分布式数据管理、分布式任务调度等核心能力，能让设备间实现无缝连接与协同，为用户提供统一、流畅的交互体验。
开发语言方面，ArkTS 是专门为鸿蒙开发设计的语言，结合了 TypeScript 的类型系统与声明式编程范式，提升了开发效率和代码的可维护性。值得一提的是功能写法也和前端VUE框架颇为相似，相信在我国具有大基数的前端开发者会很容易上手吧

二、工具安装

下载 DevEco Studio
访问华为开发者官网，在官网找到 DevEco Studio 的下载链接，依据自身操作系统（Windows、Mac 或 Linux）选择合适版本下载。
安装 DevEco Studio
运行下载好的安装程序，按照提示完成安装。安装过程中可按需选择安装路径和组件。
配置 SDK
打开 DevEco Studio，选择 “Tools” -> “SDK Manager”，在 “SDK Platforms” 中选择所需的鸿蒙 SDK 版本进行下载安装；在 “SDK Tools” 中安装必要工具，如 Build Tools、Platform - Tools 等。
创建项目
打开 DevEco Studio，点击 “File” -> “New” -> “New Project”，选择基于 ArkTS 的项目模板（如 “Empty Ability (ArkTS)”），点击 “Next”，配置项目信息（项目名称、保存位置、包名等），最后点击 “Finish” 完成项目创建。

三、核心单元介绍

Ability
Ability 是鸿蒙应用的基本功能单元，负责处理应用的各种能力和业务逻辑。分为 FA（Feature Ability）和 PA（Particle Ability）。
FA（Feature Ability）
用于实现具有用户界面的功能，类似于 Android 中的 Activity。通常用于展示界面、与用户交互等。

// 在 pages 目录下创建 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）

用于实现无用户界面的功能，如后台服务、数据处理等，类似于 Android 中的 Service。

// 在 service 目录下创建 MyService.ets 文件
@Service
@Component
struct MyService {onStart() {console.log('MyService started.')// 在这里可以执行后台任务，如数据同步、定时任务等}onStop() {console.log('MyService stopped.')}
}

2. Module

Module 是对 Ability 的进一步封装，包含多个 Ability 以及相关的资源和配置信息，便于对应用功能进行模块化管理。在 config.json 中可以对 Module 进行配置，例如指定 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 组件

Text
用于显示文本内容。

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

2. Button

用于触发操作。

@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 实现垂直布局，Row 实现水平布局。

@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. 条件渲染

根据条件决定是否渲染组件。

@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 组件渲染列表数据。

@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. 页面导航

在不同页面间进行导航。

// 在 pages 目录下创建 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 中添加导航按钮
@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%')}
}

六、常用函数

1. onClick

用于绑定按钮等组件的点击事件。

@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%')}
}