学习鸿蒙（HarmonyOS）的 ArkTS​ 是开发鸿蒙应用的核心技能之一。ArkTS 是鸿蒙生态中基于 TypeScript 的扩展语言，专为鸿蒙应用开发设计，支持声明式 UI、状态管理和多端适配。以下是系统学习 ArkTS 的路径和关键知识点，适合从入门到进阶：

一、前置基础

ArkTS 基于 TypeScript（TS），因此建议先掌握：

• •

  TypeScript 基础：变量、函数、接口、类、泛型等语法。

• •

  鸿蒙系统基础：了解鸿蒙分布式架构、Ability 开发模型（FA/PA 模型，当前主流为 FA 模型）。

• •

  前端开发经验（可选但推荐）：HTML/CSS/JS 基础对理解 UI 构建有帮助。

二、环境搭建

1. 1.

   安装 DevEco Studio​

   鸿蒙应用开发的官方 IDE，集成 ArkTS 编译器、模拟器和调试工具。

   下载地址：华为开发者官网 - DevEco Studio

   （选择对应系统版本，如 Windows/macOS）

2. 2.

   配置开发环境​

   安装后，根据引导配置鸿蒙 SDK（建议选择最新稳定版），并连接鸿蒙设备（或使用模拟器）。

三、ArkTS 核心语法与特性

1. 基础语法

ArkTS 保留了 TS 的大部分语法，同时针对鸿蒙开发优化了声明式 UI 和状态管理：

• •

  变量与类型：强类型支持，如 let name: string = "Harmony";。

• •

  函数：支持箭头函数、异步函数（async/await）。

• •

  类与接口：类似 TS，支持继承和接口定义。

2. 声明式 UI

ArkTS 的核心特性是 声明式 UI，通过简洁的语法描述 UI 结构，框架自动管理渲染。

关键概念：

• •

  组件（Component）：UI 的基本单元，如文本（Text）、按钮（Button）、图片（Image）等。

• •

  容器组件（Container）：用于布局，如列（Column）、行（Row）、堆叠（Stack）、滚动（Scroll）等。

• •

  装饰器（Decorator）：标记组件的元信息，如 @Component定义自定义组件，@Entry标记入口组件。

示例：简单页面

// 入口组件（@Entry 标记）
@Component
struct Index {
  // 状态变量（@State 装饰器，变化时自动更新 UI）
  @State count: number = 0;

  build() {
    // 列布局容器
    Column({ space: 20 }) {
      Text(`点击次数：${this.count}`)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      Button("增加")
        .onClick(() => {
          this.count++; // 修改状态，触发 UI 重新渲染
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

3. 状态管理

ArkTS 通过 装饰器​ 实现响应式状态管理，核心装饰器包括：

• •

  @State：组件内部状态，变化时自动更新当前组件的 UI。

• •

  @Prop：父组件传递的属性，子组件依赖该属性，父组件修改时子组件更新。

• •

  @Link：与父组件的 @State双向绑定（类似 Vue 的 v-model）。

• •

  @ObjectLink：传递对象类型的状态，嵌套属性变化时触发更新。

• •

  @Provide/@Consume：跨组件层级传递状态（类似全局状态管理）。

示例：@Prop 与 @Link

// 父组件
@Component
struct Parent {
  @State num: number = 10;

  build() {
    Column() {
      Text(`父组件数值：${this.num}`).fontSize(20)
      Child({ childNum: this.num }) // 传递 @Prop
      ChildLink({ linkNum: $num }) // 传递 @Link（$ 符号表示引用）
    }
  }
}

// 子组件（@Prop 接收）
@Component
struct Child {
  @Prop childNum: number; // 父组件修改 childNum 时，子组件更新

  build() {
    Text(`子组件（Prop）：${this.childNum}`).fontSize(16)
  }
}

// 子组件（@Link 接收）
@Component
struct ChildLink {
  @Link linkNum: number; // 与父组件的 @State 双向绑定

  build() {
    Text(`子组件（Link）：${this.linkNum}`).fontSize(16)
    Button("子组件修改")
      .onClick(() => {
        this.linkNum += 1; // 修改会同步到父组件的 num
      })
  }
}

4. 事件处理

通过 onClick、onTouch、onInput等事件绑定函数，处理用户交互：

Button("提交")
  .onClick(() => {
    // 处理点击逻辑
  })
  .onTouch((event: TouchEvent) => {
    // 触摸事件（按下/移动/抬起）
  })

5. 页面路由与导航

鸿蒙通过 router模块实现页面跳转：

import router from '@ohos.router';

// 跳转到新页面（带参数）
router.pushUrl({
  url: 'pages/DetailPage', // 目标页面路径（在 entry/src/main/ets/pages 下）
  params: { id: 123 } // 传递参数
});

// 获取路由参数（在目标页面的 aboutToAppear 生命周期）
aboutToAppear() {
  const params = router.getParams() as Record<string, any>;
  console.log(params?.id); // 123
}

四、进阶能力

1. 自定义组件

通过 @Component装饰器封装可复用的 UI 组件，支持属性（@Prop）、事件（@Event）和插槽（Slot）：

@Component
export struct MyCard {
  @Prop title: string;
  @Prop content: string;

  build() {
    Column() {
      Text(this.title).fontSize(18).bold()
      Text(this.content).fontSize(14).margin({ top: 8 })
    }
    .padding(16)
    .borderRadius(8)
    .backgroundColor(Color.White)
  }
}

// 使用自定义组件
MyCard({ title: "标题", content: "内容" })

2. 生命周期

组件有明确的生命周期函数，用于初始化、更新和销毁时的逻辑：

• •

  aboutToAppear：组件即将显示时调用（获取数据、初始化状态）。

• •

  aboutToDisappear：组件即将隐藏或销毁时调用（释放资源）。

• •

  onPageShow/onPageHide（页面级）：页面显示/隐藏时调用。

3. 数据持久化

通过 @StorageLink或 @StorageProp实现本地存储：

// 全局持久化（类似 localStorage）
@StorageLink('userInfo') userInfo: UserInfo = {};

// 页面卸载时保存，加载时恢复
aboutToDisappear() {
  storage.set('key', this.data);
}
aboutToAppear() {
  this.data = storage.get('key');
}

4. 网络请求

使用 @ohos.net.http模块发起 HTTP 请求：

import http from '@ohos.net.http';

async function fetchData() {
  let httpRequest = http.createHttp();
  try {
    let response = await httpRequest.request("https://api.example.com/data", {
      method: http.RequestMethod.GET
    });
    console.log(response.result);
  } catch (error) {
    console.error("请求失败：", error);
  } finally {
    httpRequest.destroy();
  }
}

5. 多端适配

鸿蒙支持手机、平板、智能手表等多设备，通过 媒体查询​ 和 动态布局​ 实现适配：

// 根据屏幕宽度调整样式
Column() {
  if (screenWidth > 600) {
    // 平板布局
    Row() { ... }
  } else {
    // 手机布局
    Column() { ... }
  }
}

五、学习资源与实践

1. 1.

   官方文档​

   • •

     ArkTS 语言规范

   • •

     声明式 UI 开发指南

   • •

     API 参考

2. 2.

   示例项目​

   DevEco Studio 内置 Sample Code（文件 > 新建 > 示例代码），包含常见功能的实现（如列表、表单、动画）。

3. 3.

   社区与论坛​

   • •

     华为开发者论坛：HarmonyOS 开发者社区

   • •

     GitHub：搜索鸿蒙相关开源项目（如 harmonyos-demo）。

六、学习建议

•  

  从简单页面开始：先练习声明式 UI、状态管理和事件绑定。

•  

  拆解官方示例：通过分析 Sample Code 理解复杂功能的实现逻辑。

•  

  关注官方更新：ArkTS 仍在迭代（如 ArkTS 3.0 支持更灵活的组件组合），及时学习新特性。

通过以上路径，你可以系统掌握 ArkTS 开发鸿蒙应用的核心技能。关键是多实践，逐步从“模仿”到“独立开发”！

赋能资源丰富度建设（第四期）-吴东林
https://developer.huawei.com/consumer/cn/training/classDetail/9fdeeb1a35d64d2fabad3948ae7aab72?type=1?ha_source=hmosclass&ha_sourceId=89000248