零基础上手鸿蒙开发：用ArkTS打造你的第一个HarmonyOS应用

摘要

随着HarmonyOS的不断发展，越来越多开发者开始关注这套以分布式能力为核心的国产操作系统。不同于传统Android开发，HarmonyOS引入了更现代的Stage模型以及更高效的声明式UI语言——ArkTS，让应用开发更灵活、更统一。本文将带你从零开始构建一个完整的鸿蒙应用，从环境配置、页面开发到交互实现，逐步掌握入门技能。

引言：鸿蒙开发为啥值得学？

从2019年首次发布到现在，HarmonyOS 已经逐渐建立起自己的生态圈，尤其是在智能家居、穿戴设备、车载系统等场景中表现出色。随着鸿蒙 NEXT 的推进，应用开发正从传统 Java 向 ArkTS 转型，并全面支持分布式协同。

相比传统开发，ArkTS 更像是 TypeScript 和 Swift 的结合体，具有声明式语法、强类型系统以及响应式UI特性，非常适合构建现代化跨设备应用。

开发环境准备

安装官方IDE：DevEco Studio

首先你需要安装 DevEco Studio，它是鸿蒙官方提供的IDE，和 Android Studio 十分类似。可以在官网下载：

https://developer.harmonyos.com/

安装后，记得配置好 SDK、模拟器等开发工具。

创建第一个鸿蒙应用：Hello HarmonyOS

我们来做一个最简单的页面，显示文字 + 按钮，并在点击时输出日志。

新建项目步骤

在 DevEco Studio 中：

创建新项目 → 选择 Empty Ability (Stage模型) 模板
编程语言选 ArkTS
应用包名：如 com.example.hello
命名入口页为 Index

目录结构介绍

项目结构大致如下：

entry/
├── src/
│   └── main/
│       ├── ets/
│       │   ├── app.ets        // 应用主入口
│       │   └── pages/
│       │       └── index.ets  // 页面定义
│       ├── resources/         // 静态资源
│       └── config.json        // 应用配置文件

核心代码解析

页面UI代码（index.ets）

@Component
struct Index {
  build() {
    Column({ space: 20 })  // 垂直布局容器，控件间距20
      .width('100%')
      .height('100%')
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .backgroundColor('#f5f5f5')
      .children([
        Text('Hello HarmonyOS!')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .fontColor('#000000'),

        Button('点击我')
          .margin({ top: 20 })
          .onClick(() => {
            console.log('按钮被点击了')
          })
      ])
  }
}

说明：

@Component 是组件声明

Column() 代表垂直布局

Text 和 Button 是基础组件

.onClick() 绑定点击事件处理

应用入口配置（app.ets）

@Entry
@Component
struct App {
  build() {
    Navigation.push("pages/index")
  }
}

应用启动时，会自动加载这个组件并导航到 index.ets 页面。

实战场景举例

场景一：欢迎页 + 登录跳转

目录结构

pages/
├── index.ets
└── login.ets

login.ets 内容示例

@Component
struct Login {
  build() {
    Column()
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .children([
        Text('欢迎登录')
          .fontSize(24),
        Button('返回首页')
          .margin({ top: 20 })
          .onClick(() => {
            Navigation.pop()  // 返回上一页
          })
      ])
  }
}

修改 index.ets：跳转到 login 页面

Button('前往登录页')
  .onClick(() => {
    Navigation.push("pages/login")
  })

场景二：展示图片与列表

添加图片到 resources/base/media/logo.png

Image($r('app.media.logo'))
  .width(100)
  .height(100)

展示列表组件

List({ space: 10 })  // 创建列表组件
  .width('90%')
  .height(200)
  .children([
    ListItem({ builder: () => Text('项目一') }),
    ListItem({ builder: () => Text('项目二') }),
    ListItem({ builder: () => Text('项目三') })
  ])

常见问题 QA

Q1：运行时提示设备不兼容怎么办？

确保模拟器或真机是支持ArkTS的最新系统（推荐使用鸿蒙 NEXT Dev 版本）。
配置文件中 ABI 类型要匹配（如 arm64-v8a）。

Q2：为什么我改了代码后模拟器没反应？

检查是否热更新失效，可尝试 Rebuild Project。
DevEco Studio 需要勾选“自动部署”选项。

Q3：Button 无法触发点击？

看下是否设置了布局高度；
控件被其他组件遮挡时可能会无响应。

总结

入门鸿蒙应用开发其实并不复杂，只要掌握了：

使用 DevEco Studio 创建 Stage 模型项目；
理解 @Component 和布局容器用法；
学会通过 Navigation 页面跳转；
掌握基本组件如 Text、Button、Image、List；

后续你就可以继续深入到分布式开发、系统能力调用、服务卡片设计等更高级话题了。