鸿蒙HarmonyOS 开发简介

鸿蒙开发入门教程

一、技术简介

鸿蒙操作系统（HarmonyOS）是面向万物互联时代的全场景分布式操作系统，具备分布式软总线、分布式数据管理、分布式任务调度等核心能力，能让设备间实现无缝连接与协同，为用户提供统一、流畅的交互体验。

开发语言方面，ArkTS 是专门为鸿蒙开发设计的语言，结合了 TypeScript 的类型系统与声明式编程范式，提升了开发效率和代码的可维护性。值得一提的是功能写法也和前端VUE框架颇为相似，相信在我国具有大基数的前端开发者会很容易上手吧

二、工具安装

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

三、核心单元介绍

1. 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 组件

1. 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 = 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

用于显示图片。

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

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

3. router.pushUrl 和 router.back

用于页面导航，router.pushUrl 用于跳转到指定页面，router.back 用于返回上一页，如前面页面导航示例所示。