鸿蒙开发入门教程
一、技术简介
鸿蒙操作系统（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。通常用于展示界面、与用户交互等。
ts
// 在 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。
ts
// 在 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 等。
json
{
"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
用于显示文本内容。
ts
@Entry
@Component
struct Index {
build() {
Text('Hello, HarmonyOS!')
.fontSize(30)
.fontWeight(FontWeight.Bold)
.textAlign(TextAlign.Center)
}
}2. Button
用于触发操作。
ts
@Entry
@Component
struct Index {
@State clickCount: number = 0
build() {
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
用于显示图片。
ts
@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 实现水平布局。
ts
@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. 条件渲染
根据条件决定是否渲染组件。
ts
@Entry
@Component
struct Index {
@State showText: boolean = false
build() {
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 组件渲染列表数据。
ts
@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. 页面导航
在不同页面间进行导航。
ts
// 在 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
用于绑定按钮等组件的点击事件。
ts
@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
用于绑定输入框等组件的值变化事件。
ts
@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
用于页面导航，router.pushUrl 用于跳转到指定页面，router.back 用于返回上一页，如前面页面导航示例所示。