10分钟创建你的第一个鸿蒙5 ArkTS应用

准备工作
在开始之前，请确保你已经安装了以下工具：

鸿蒙开发工具DevEco Studio最新版本
鸿蒙5 SDK
Node.js (推荐16.x或更高版本)
第一步：创建新项目
打开DevEco Studio
选择"Create Project"
选择"Application" -> “Empty Ability” (ArkTS)
配置项目信息：
Project Name: MyFirstApp
Project Type: Application
Bundle Name: com.example.myfirstapp
Save Location: 选择你的项目保存路径
Compile SDK: HarmonyOS 5.0
Model: Stage (推荐)
点击"Finish"创建项目
第二步：了解项目结构
创建完成后，你会看到以下主要目录结构：

MyFirstApp/
├── entry/
│ ├── src/
│ │ ├── main/
│ │ │ ├── ets/
│ │ │ │ ├── pages/
│ │ │ │ │ └── Index.ets // 主页面文件
│ │ │ ├── resources/ // 资源文件
│ │ │ └── module.json5 // 模块配置文件
第三步：编写第一个ArkTS页面
打开Index.ets文件，替换为以下代码：

// Index.ets
@Entry
@Component
struct Index {
@State message: string = ‘Hello, HarmonyOS 5!’
@State count: number = 0
@State isActive: boolean = false

build() {
Column() {
Text(this.message)
.fontSize(30)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 20 })

  Button(this.isActive ? 'Active' : 'Inactive')
    .width(150)
    .height(50)
    .backgroundColor(this.isActive ? '#007DFF' : '#999999')
    .onClick(() => {
      this.isActive = !this.isActive
    })

  Button(`Click me (${this.count})`)
    .width(150)
    .height(50)
    .margin({ top: 20 })
    .onClick(() => {
      this.count++
      this.message = `You clicked ${this.count} times`
    })

  if (this.isActive) {
    Text('Welcome to ArkTS!')
      .fontSize(20)
      .margin({ top: 20 })
      .fontColor('#007DFF')
  }
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)

}
}
第四步：运行应用
点击工具栏中的"Run"按钮
选择你想要运行的设备模拟器或连接的真实设备
等待应用构建和部署完成
代码解析
让我们分解一下上面的代码：

​​@Entry装饰器​​：标记这是一个入口组件
​​@Component装饰器​​：表示这是一个自定义组件
​​@State装饰器​​：标记状态变量，当这些变量变化时，UI会自动更新
​​build()方法​​：定义UI布局和组件
​​Column和Text组件​​：基本的布局和文本显示组件
​​Button组件​​：可点击的按钮，带有onClick事件处理
​​条件渲染​​：使用if语句根据条件显示不同内容
第五步：添加页面跳转功能
让我们添加一个新页面并实现页面跳转：

在pages目录下创建新文件Detail.ets：
// Detail.ets
@Component
export struct Detail {
@State detailText: string = ‘This is the detail page’

build() {
Column() {
Text(this.detailText)
.fontSize(25)
.margin({ bottom: 20 })

  Button('Back to Home')
    .width(150)
    .height(50)
    .onClick(() => {
      router.back()
    })
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)

}
}
修改Index.ets添加跳转功能：
// 在Index.ets顶部添加导入
import router from ‘@ohos.router’

// 在build()方法的Column中添加新按钮
Button(‘Go to Detail’)
.width(150)
.height(50)
.margin({ top: 20 })
.onClick(() => {
router.pushUrl({
url: ‘pages/Detail’
})
})
在module.json5中注册新页面：
{
“pages”: “$profile:main_pages”,
“abilities”: [
{
“name”: “EntryAbility”,
“srcEntry”: “./ets/entryability/EntryAbility.ts”,
“label”: “$string:EntryAbility_label”,
“icon”: “$media:icon”,
“startWindowIcon”: “$media:icon”,
“startWindowBackground”: “$color:start_window_background”,
“exported”: true,
“skills”: [
{
“entities”: [“entity.system.home”],
“actions”: [“action.system.home”]
}
]
}
]
}
在src/main/resources/base/profile/main_pages.json中添加：

{
“src”: [
“pages/Index”,
“pages/Detail”
]
}
第六步：添加样式和动画
让我们为应用添加一些视觉效果：

// 在Index.ets中修改build()方法
build() {
Column() {
Text(this.message)
.fontSize(30)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 20 })
.fontColor(this.isActive ? ‘#007DFF’ : ‘#333333’)
.opacity(this.isActive ? 1 : 0.8)
.animation({
duration: 500,
curve: Curve.EaseInOut
})

// ... 其他组件保持不变 ...

}
// … 其他属性保持不变 …
}
第七步：构建和发布
点击菜单栏中的"Build" -> “Build HAP(s)/APP(s)” -> “Build HAP(s)”
构建完成后，你可以在entry/build/default/outputs/default目录下找到.hap文件
这个.hap文件可以安装到鸿蒙设备上进行测试
总结
通过这10分钟的教程，你已经学会了：

创建鸿蒙5 ArkTS应用的基本步骤
使用ArkTS编写UI组件
管理应用状态
实现页面导航
添加简单的动画效果
ArkTS结合了TypeScript的强类型特性和声明式UI编程的优势，是鸿蒙应用开发的高效工具。随着鸿蒙5的发布，ArkCompiler进一步优化了性能，使得应用运行更加流畅。

你可以继续探索鸿蒙5的其他功能，如：

多设备协同
原子化服务
分布式能力
高级动画和手势处理