随着 HarmonyOS NEXT 的发布，鸿蒙生态迈入了「纯原生」时代。开发者终于可以摆脱对安卓兼容层的依赖，使用全新语言 ArkTS 和 ArkUI 构建高性能、全场景原生应用。

今天，我们就来带你手把手用 ArkTS 写一个完整鸿蒙原生页面，体验鸿蒙开发的全新范式。

---

✅ 什么是 ArkTS？

ArkTS 是鸿蒙官方定义的“增强版 TypeScript”，专为鸿蒙系统设计，拥有强类型、组件式 UI 编程能力、轻量 DSL 特性，能用更短代码构建原生 UI 和逻辑。

---

🎯 目标

我们将实现一个简洁的“计数器”应用，包含如下功能：

• 展示当前计数；
• 点击按钮，计数 +1；
• 使用 ArkUI 组件化开发。

---

🚀 项目结构简介

使用 DevEco Studio 创建 ArkTS 项目后，默认目录如下：

entry/
└── src/
    └── main/
        └── ets/
            └── pages/
                └── Index.ets  ← 主页面

---

💡 编写第一个页面：Index.ets

// Index.ets
@Entry
@Component
struct Index {
  @State count: number = 0;

  build() {
    Column({ space: 20 }) {
      Text(`当前计数：${this.count}`)
        .fontSize(26)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 30 })

      Button("点击 +1")
        .fontSize(20)
        .backgroundColor('#0A59F7')
        .fontColor(Color.White)
        .padding(12)
        .borderRadius(12)
        .onClick(() => {
          this.count += 1
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

---

🧠 代码解读

@Entry 与 @Component

• @Entry 声明为应用主入口页面；
• @Component 表示这是一个可渲染组件。

@State

• 用于声明组件内部响应式状态。
• this.count += 1 会自动触发 UI 刷新。

ArkUI 的声明式 UI 构建

• 类似 React/Vue 的组合式写法；
• Column() 构建垂直布局，Text() 和 Button() 是内置组件；
• .onClick() 直接挂载事件处理逻辑。

---

📱 实机预览效果

开发完成后点击 DevEco Studio 上的 “Run on Emulator” 或真机运行，即可看到如下页面：

+------------------------+
|   当前计数：0          |
|                        |
|   [   点击 +1   ]      |
+------------------------+

每次点击，数字递增，UI 自动更新，无需手动刷新！

---

🔍 和安卓/JS 的最大不同是什么？

项目	ArkTS	安卓开发（Java/Kotlin）
UI 声明方式	类似 Vue 的组件式 DSL	XML + Java/Kotlin 绑定
状态管理	自动响应式更新（@State）	手动调用 setText() 等
启动速度	ArkTS 编译为 ArkVM 原生执行	依赖 ART/Dalvik 虚拟机

---

🧱 小结

这是一个非常基础但完整的鸿蒙原生应用，你学会了：

• 如何用 ArkTS 写组件；
• 状态与 UI 如何联动；
• 鸿蒙开发的项目结构。

这仅仅是开始！未来我们还会深入讲解：多页面导航、网络请求、动画、数据库、服务卡片等高级特性。

---

如果你想持续了解鸿蒙开发实战、源码剖析、项目落地，欢迎点赞 + 收藏 + 关注我，下一篇我们将带来：

📘《彻底告别安卓兼容层：ArkTS原生开发实战指南》