HarmonyOS 5 应用开发导读：从入门到实践

一、HarmonyOS 5 概述

HarmonyOS 5 是华为推出的新一代分布式操作系统，其核心设计理念是"一次开发，多端部署"。与传统的移动操作系统不同，HarmonyOS 5 提供了更强大的跨设备协同能力，支持手机、平板、智能穿戴、智慧屏等多种设备形态的无缝连接和协同工作。

作为开发者，了解 HarmonyOS 5 的应用开发框架至关重要。HarmonyOS 5 提供了两种主要的应用开发范式：

声明式开发范式：基于 ArkTS 语言，采用声明式 UI 描述方式
类 Web 开发范式：兼容传统的 Web 开发方式（HML + CSS + JS）

本文将重点介绍基于 ArkTS 的声明式开发范式，这是 HarmonyOS 5 推荐的主力开发方式。

二、ArkTS 语言基础

ArkTS 是 HarmonyOS 5 的主力应用开发语言，它在 TypeScript 的基础上进行了扩展和优化，强化了静态检查和分析能力，以提升程序的稳定性和性能。

ArkTS 的主要特性：

强制静态类型：所有变量必须声明类型，减少运行时错误
声明式 UI：简洁直观的 UI 描述方式
多维度状态管理：提供灵活的状态管理机制
高性能渲染：优化的渲染管线，确保流畅的用户体验

下面是一个简单的 ArkTS 组件示例：

// 定义一个简单的文本组件
@Component
struct GreetingComponent {@State message: string = 'Hello HarmonyOS 5'build() {Column() {Text(this.message).fontSize(20).fontWeight(FontWeight.Bold).onClick(() => {this.message = 'Welcome to HarmonyOS 5!'})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

这个示例展示了一个简单的文本组件，点击文本后会改变显示内容。@Component 装饰器表示这是一个自定义组件，@State 装饰器表示这是一个可变的组件状态。

三、ArkUI 框架基础

ArkUI 是 HarmonyOS 5 的 UI 开发框架，提供了丰富的组件和布局方式。让我们通过一个完整的示例来了解 ArkUI 的基本用法。

示例：创建一个简单的待办事项列表

// 导入必要的模块
import { Task } from './model/Task'// 定义任务数据模型
class Task {id: numbertitle: stringcompleted: booleanconstructor(id: number, title: string) {this.id = idthis.title = titlethis.completed = false}
}// 主页面组件
@Entry
@Component
struct TodoList {// 使用 @State 管理任务列表状态@State tasks: Task[] = [new Task(1, '学习 ArkTS 基础'),new Task(2, '掌握 ArkUI 组件'),new Task(3, '开发第一个 HarmonyOS 5 应用')]// 添加新任务的方法private addTask(title: string) {const newTask = new Task(this.tasks.length + 1, title)this.tasks = [...this.tasks, newTask]}// 切换任务完成状态private toggleTask(task: Task) {task.completed = !task.completedthis.tasks = [...this.tasks]}build() {Column() {// 标题Text('待办事项').fontSize(24).fontWeight(FontWeight.Bold).margin({ bottom: 20 })// 添加新任务的输入框Row() {TextInput({ placeholder: '输入新任务' }).id('taskInput').layoutWeight(1)Button('添加').onClick(() => {const input = this.$refs['taskInput'] as TextInputif (input.text.trim()) {this.addTask(input.text.trim())input.text = ''}})}.margin({ bottom: 20 })// 任务列表List({ space: 10 }) {ForEach(this.tasks, (task: Task) => {ListItem() {Row() {Checkbox().selected(task.completed).onChange((checked: boolean) => {this.toggleTask(task)})Text(task.title).fontSize(18).textDecoration(task.completed ? TextDecoration.LineThrough : TextDecoration.None).opacity(task.completed ? 0.5 : 1.0)}.width('100%').justifyContent(FlexAlign.SpaceBetween)}}, (task: Task) => task.id.toString())}.layoutWeight(1).width('100%')}.padding(20).width('100%').height('100%')}
}

这个示例展示了 ArkUI 的几个核心概念：

组件化开发：将 UI 拆分为可复用的组件
状态管理：使用 @State 管理组件内部状态
列表渲染：使用 ForEach 渲染动态列表
事件处理：处理用户交互事件

四、状态管理进阶

HarmonyOS 5 提供了多种状态管理机制，适用于不同规模的应用程序。让我们通过一个计数器示例来了解状态管理的进阶用法。

示例：全局状态管理的计数器

// 定义全局状态类
class CounterState {count: number = 0increment() {this.count++}decrement() {this.count--}
}// 创建全局状态实例
const counterState = new CounterState()// 计数器组件
@Entry
@Component
struct CounterApp {// 使用 @Link 连接全局状态@Link count: numberbuild() {Column() {Text(`当前计数: ${this.count}`).fontSize(24).margin({ bottom: 20 })Row() {Button('增加').onClick(() => {counterState.increment()})Button('减少').onClick(() => {counterState.decrement()})}.width('100%').justifyContent(FlexAlign.SpaceEvenly)}.padding(20).width('100%').height('100%')}
}// 入口文件
@Entry
@Component
struct App {// 使用 @State 管理全局状态@State private state: CounterState = counterStatebuild() {Column() {CounterApp({ count: $state.count })}}
}

这个示例展示了：

全局状态管理：通过类实例管理全局状态
状态共享：使用 @Link 在组件间共享状态
状态更新：通过方法修改状态，触发 UI 更新

五、HarmonyOS 5 特色功能

1. 分布式能力

HarmonyOS 5 的核心优势之一是其分布式能力，允许应用跨设备协同工作。下面是一个简单的分布式调用示例：

import { distributedObject } from '@kit.ArkUI'// 创建分布式对象
const localObject = distributedObject.create({message: 'Hello from Device A'
})// 在其他设备上获取这个对象
const remoteObject = distributedObject.get(localObject.sessionId)// 监听远程变化
remoteObject.on('change', (key: string, value: any) => {console.log(`远程属性 ${key} 变为 ${value}`)
})// 修改属性，会自动同步到所有设备
localObject.message = 'Updated message'

2. 卡片开发

HarmonyOS 5 的卡片是一种轻量级的 UI 表现形式，可以在桌面上直接展示应用的核心信息。

// widget.ets
@Entry
@Component
struct WidgetCard {@State message: string = '卡片内容'build() {Column() {Text(this.message).fontSize(16)Button('刷新').onClick(() => {this.message = `更新于 ${new Date().toLocaleTimeString()}`})}.padding(12).width('100%').height('100%')}
}