第1章：初识ArkTS

1.3 第一个ArkTS应用

1.3.1 创建新项目

  1. IDE准备
    确保已安装DevEco Studio（以3.1版本为例），打开后选择：

    File > New > Create Project

    选择"Application"模板中的"Empty Ability"，点击"Next"。

  2. 项目配置

    • 项目名称：HelloArkTS
    • 开发语言：ArkTS
    • 设备类型：Phone（默认API 9+）
    • 点击"Finish"完成创建

1.3.2 项目结构解析

HelloArkTS/
├── entry/src/main/
│   ├── ets/               # ArkTS代码目录
│   │   ├── pages/         # 页面目录
│   │   │   └── index.ets  # 首页入口文件
│   ├── resources/         # 资源文件（图片/字体等）
└── ohosTest/             # 测试代码

1.3.3 编写第一个页面

修改index.ets文件：

@Entry
@Component
struct HelloPage {
  @State message: string = 'Hello ArkTS!'

  build() {
    Column() {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 })
      
      Button('Click Me')
        .onClick(() => {
          this.message = 'Welcome to ArkTS World!'
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FontAlign.Center)
  }
}

1.3.4 运行与调试

  1. 预览器模式
    点击工具栏中的"Previewer"按钮，实时查看UI效果。

  2. 模拟器运行

    • 创建Phone模拟器（Tools > Device Manager）
    • 点击"Run"按钮（快捷键Shift+F10）

  3. 真机调试
    通过USB连接HarmonyOS设备，开启开发者模式后选择设备运行。

1.3.5 关键代码解析

语法说明
@Entry标记为应用入口组件
@Component声明自定义组件
@State状态装饰器，数据变化触发UI更新
build()组件UI描述方法
.onClick()事件处理方法

1.3.6 常见问题

  1. 预览器白屏

    • 检查是否保存文件（Ctrl+S）
    • 确认Node.js版本≥14.19.1

  2. 模拟器启动失败

    • 确认BIOS中开启VT-x虚拟化支持
    • 检查HAXM是否安装（Tools > SDK Manager > SDK Tools）

  3. 真机无法识别

    • 在设备的"设置 > 关于手机"中连续点击版本号7次开启开发者模式
    • 在"设置 > 系统和更新 > 开发人员选项"中启用USB调试

最佳实践建议：首次运行时建议选择API 9的Phone模拟器，兼容性最佳。

Last Updated::