鸿蒙应用开发初探：用 ArkTS 写个页面并跑在真机

鸿蒙（HarmonyOS）这两年存在感越来越强，很多团队开始考虑"顺手做个鸿蒙版"。它的应用开发用的是 ArkTS 语言 + 声明式 UI，写法和前端框架（尤其是 Vue/React）有神似之处，但底层和运行模型完全不同。这篇文章带你从零写一个能跑的页面，把状态管理、组件结构、真机运行这条线走通，后端同学也能顺着建立直觉。

一、开发环境怎么准备

官方工具是 DevEco Studio（基于 IDEA），首次打开会引导你装 SDK。关键点：

• 装好 Node.js（ArkTS 构建链依赖它）和 HarmonyOS SDK；
• 准备一台鸿蒙真机，或开启本地模拟器；
• 真机调试需要在"设置-关于手机"里连点版本号打开开发者模式，并开启 USB 调试。
• 首次编译会下载依赖和工具链，建议在网络好时一次性装完，避免中途断。

环境这块和 Android 开发很接近，卡住多半是 SDK 版本或 USB 驱动。

二、ArkTS 页面长什么样

ArkTS 用"声明式"写法描述 UI：你描述"界面应该是什么样"，框架负责渲染和更新。一个最小带状态的页面：

// 一个计数器页面
@Entry
@Component
struct CounterPage {
  @State count: number = 0;   // 状态：变化会触发 UI 重渲染

  build() {
    Column() {
      Text(`当前计数：${this.count}`)
        .fontSize(24)
      Button('点我 +1')
        .onClick(() => { this.count++ })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@State 修饰的变量一变，引用了它的 UI 自动刷新——这和前端的响应式更新是一个思路。

三、状态装饰器：组件内外怎么传

鸿蒙有一组状态装饰器，分工明确：

和前端的 props / v-model / provide-inject 一一能对上，有前端底子转过来很快。比如父子双向同步一个开关：

// 父
@State on: boolean = false;
Child({ isOn: $on })   // $ 表示传引用

// 子
@Component
struct Child {
  @Link isOn: boolean;
  build() {
    Toggle({ isOn: this.isOn })
      .onChange(v => this.isOn = v) // 改子，父也跟着变
  }
}

四、列表与表单：真实页面长这样

真实页面很少只有一个按钮，多是列表加输入。ArkTS 用 ForEach 渲染列表，用 @State 接表单输入：

@State items: string[] = ['任务一', '任务二', '任务三'];
@State input: string = '';

build() {
  Column() {
    TextInput({ placeholder: '输入新任务' })
      .onChange(v => this.input = v)
    Button('添加').onClick(() => {
      this.items.push(this.input);
      this.input = '';
    })
    List() {
      ForEach(this.items, (item) => {
        ListItem() { Text(item).fontSize(18) }
      }, (item) => item)
    }
  }
}

组件还有生命周期：aboutToAppear（出现前）、aboutToDisappear（销毁前），用来做数据初始化和清理，对应前端的 onMounted / onUnmounted。

五、跑在真机上要注意什么

• 签名：真机运行必须配签名（debug 签名 DevEco 可自动生成），不签名装不上。
• 权限：用到网络、存储、定位要在 module.json5 里声明，否则运行时直接被拦。
• 预览 vs 真机：模拟器能快速看效果，但有些传感器、性能表现只有真机准，关键场景一定上真机验。
• 多端适配：鸿蒙强调"一次开发、多端部署"，布局尽量用相对单位，别写死像素。

六、和前端、和其他跨端的异同

相同点：声明式 UI、响应式状态、组件化拆分，思维模型几乎一致。

不同点：ArkTS 是强类型语言，编译期就能拦很多错；UI 描述最终编译成原生渲染，性能比 WebView 套壳好；运行在鸿蒙的分布式软总线上，能天然做跨设备协同（手机拉起平板继续看）。

七、新手最容易踩的坑

第一，忘了在 module.json5 声明权限，运行时静默失败找不到原因——先看权限清单。

第二，把 @State 当成普通变量到处传，结果子组件不刷新。跨组件传要用 @Prop/@Link，别混。

第三，真机连不上，多半是 USB 调试没开或驱动没装，先确认 hdc list targets 能看到设备。

第四，布局写死像素，换设备就错位。多用 百分比 / vp 单位 / 弹性布局。

小结

鸿蒙应用开发对前端同学很友好——ArkTS 的声明式 + 状态装饰器，和 Vue/React 大同小异，转过来成本低；对后端同学，重点先建立"状态驱动 UI 重渲染"这个心智模型。真正上手时，卡点通常在环境签名、权限声明和真机联调这几步，把这几样理顺，写个像样的页面一天就能跑起来。多端部署和分布式协同的能力，是它相比单纯写个 App 更值得关注的地方，也是未来值得提前布局的方向。