Harmony鸿蒙开发0基础入门到精通Day13--ArkScript篇

经过十二天的学习，通过JS---->TS------>ArkTs

终于，今天我们进入到了鸿蒙开发的学习当中，接下来就是正式开始鸿蒙课程的学习。

相信各位小伙伴学习JS，TS都觉得过于简单，因为鸿蒙是在这个两个基础上进一步升级。

有了前面的基础，学习起来会轻松的多。

那么，我们话不多说，直接开始！

ArkTS

ArkTS (方舟编程语言) 是华为为 HarmonyOS/OpenHarmony 系统开发的官方高级编程语言，基于 TypeScript 扩展而来，是 TypeScript 的超集，专为声明式 UI 开发和系统级应用设计。

基本定位与关系

ArkTS 在 TypeScript 基础上进行了扩展，保持了 TS 的基本语法风格，同时强化了静态类型检查和分析，提升了程序执行稳定性和性能。

JavaScript → TypeScript → ArkTS (动态类型) (静态类型) (强静态类型+系统扩展)

核心特性

1. 类型系统增强

严格静态类型 ：禁止模糊类型 (如any)，强制明确定义接口 / 类
类型信息保留：编译后保留类型信息，大幅减少运行时类型检查，提升性能至接近 Java/C# 水平
空值安全：通过类型系统减少空指针异常

2. 声明式 UI 开发

提供简洁直观的 UI 描述语法，开发者只需描述 "UI 应该是什么样" 而非 "如何构建 UI"
支持自定义组件、动态 UI 元素扩展和渲染控制
与 HarmonyOS 的 ArkUI 框架深度集成，简化跨设备 UI 开发

3. 并发编程增强

提供 TaskPool 和 Worker 两种并发 API，优化 CPU 密集型和 IO 密集型任务处理
支持标准的 Promise 和 async/await 异步编程，同时扩展了多线程能力
针对移动设备优化的轻量级并发模型，降低资源消耗

4. 系统级能力

禁止运行时修改对象布局，优化内存管理和执行效率
限制部分运算符语义，鼓励编写清晰高效的代码
支持与底层系统的高效交互，适合开发高性能应用和设备驱动

与 TypeScript 的关键差异

特性	TypeScript	ArkTS
类型系统	弱类型校验，编译后类型丢失，允许`any`类型	强静态类型，禁止`any`，编译后保留类型信息
运行环境	任何 JavaScript 引擎 (V8、JavaScriptCore 等)	专用于 HarmonyOS 的 ArkRuntime，性能更高
UI 开发	需借助第三方库 (React、Vue 等)	内置声明式 UI 系统 (ArkUI)，原生支持
并发模型	有限的异步支持 (Promise/async)	完整的多线程并发支持 (TaskPool/Worker)
系统集成	通用型，与系统底层交互有限	深度集成 HarmonyOS 系统能力，优化设备交互

开发环境与工具链

ArkTS 开发主要使用华为官方 IDE：DevEco Studio，这是基于 IntelliJ IDEA 定制的一站式开发环境，集成了：

编译器：将 ArkTS 代码编译为方舟字节码 (.abc)，再由设备端的 ArkRuntime 执行
调试工具：支持断点调试、性能分析和内存监控
模拟器：多设备模拟器 (手机、平板、智慧屏、穿戴设备等)
SDK：包含 HarmonyOS 系统 API、组件库和开发文档

应用场景

ArkTS 适用于 HarmonyOS 生态的各类应用开发：

1. 移动应用开发

官方主推的 UI 开发语言，适合开发高性能跨平台应用
支持一次开发，多端部署 (手机、平板、PC 等)

2. 智能设备与物联网

智能家居控制：灯光、空调、门锁等设备的统一管理和智能联动
智能穿戴：为手表、手环开发丰富交互应用
嵌入式系统：优化的底层交互能力，适合硬件控制和边缘计算

3. 多媒体与游戏

游戏开发 (尤其是轻度休闲游戏)：提供高效的图形渲染和交互响应
AR/VR 应用：支持 3D 渲染和传感器融合，提供沉浸式体验
媒体播放器：音视频编解码和播放控制的优化支持

4. 企业级应用

移动办公解决方案：支持跨设备数据同步和无缝协作
金融安全应用：强化的类型系统和安全机制，适合开发高可靠性应用
医疗健康应用：设备管理和远程医疗界面开发

具体的我也就不多说，大多数详细内容，可以去华为官方文档进行补充。

安装步骤以及快速入门，在我主页已经有了文章，大家可以先行去查看，当然，要是懒得看，也灭有关系，这里只是省略了安装软件的步骤，直接开始学习而已。

新建一个项目

装饰器

在 ArkTS 中，装饰器（Decorator）是核心语法特性之一，用于为类、属性、方法、参数等元素 "标记元信息" 或 "注入额外逻辑"，是实现声明式 UI、状态管理、生命周期回调等核心能力的基础。

使用方式：@+英文单词

装饰器的核心作用

装饰器本质是 "代码增强工具"，无需修改原有逻辑，即可为目标元素添加以下能力：

标记元素类型（如 @Component 标记类是 UI 组件）；
管理状态与数据联动（如 @State 标记响应式状态）；
绑定生命周期回调（如 @OnAppear 标记组件显示时的逻辑）；
注入依赖或配置（如 @RouterParam 标记路由参数）。

ArkTS 装饰器的语法与 TypeScript 一致，通过 @装饰器名 语法使用，可附加参数（如 @Preview(deviceType = DeviceType.PHONE)）。

ArkTS 核心内置装饰器（按场景分类）

ArkTS 提供了大量内置装饰器（框架预定义），覆盖 UI 组件、状态管理、生命周期、路由等核心场景，是开发中最常用的部分。

1. 组件与页面相关装饰器（声明式 UI 基础）

用于标记 UI 组件、页面入口、预览配置等，是构建界面的核心。

装饰器	作用	适用目标	示例代码
`@Entry`	标记当前组件为页面入口（整个应用的根组件）	类（组件结构体）	`typescript @Entry @Component struct HomePage { build() { Text("首页") } }`
`@Component`	标记类为可复用 UI 组件（必须与 `build()` 方法配合）	类（结构体）	同上（与 `@Entry` 搭配使用，或单独定义子组件）
`@Preview`	标记组件可在 IDE 中实时预览（开发阶段用）	类（组件）	`typescript @Preview @Component struct TestComponent { build() { Text("预览组件") } }`
`@Builder`	定义可复用的 UI 片段（抽离重复布局）	方法	`typescript @Component struct MyComponent { @Builder renderItem(text: string) { Text(text).fontSize(16) } build() { this.renderItem("复用布局") } }`
`@BuilderParam`	传递 UI 片段（类似 "插槽"，用于组件通信）	属性	`typescript @Component struct Parent { @BuilderParam child: () => void build() { this.child() } } // 使用时传递 UI 片段 <Parent child={() => Text("子组件内容")} />`

2. 状态管理装饰器（数据与 UI 联动核心）

用于标记 "响应式状态"，当状态变化时，UI 会自动刷新。这是 ArkTS 声明式开发的核心优势。

装饰器	作用	数据作用域	示例代码
`@State`	组件内部私有状态（仅当前组件可用）	单组件内	typescript @Entry @Component struct Counter { @State count: number = 0 build() { Button(`点击${count}次`).onClick(() => this.count++) } }
`@Link`	父子组件双向绑定状态（子组件修改同步父组件）	父子组件间	typescript // 父组件 @Component struct Parent { @State num: number = 0 build() { Child(num: $num) } } // 子组件 @Component struct Child { @Link num: number build() { Button(`子组件修改${num}`).onClick(() => this.num++) } }
`@Prop`	父子组件单向传递状态（子组件不可修改父组件数据）	父子组件间（只读）	typescript // 子组件 @Component struct Child { @Prop num: number build() { Text(`单向接收：${num}`) } }
`@Provide`/`@Consume`	跨层级组件状态共享（祖父 - 孙子组件直接通信，无需逐层传递）	跨多层组件	typescript // 顶层组件 @Component struct Grandparent { @Provide theme: string = "light" build() { Parent() } } // 底层组件 @Component struct Child { @Consume theme: string build() { Text(`当前主题：${theme}`) } }
`@Watch`	监听状态变化（状态修改时触发回调）	任何状态属性	typescript @State @Watch("onCountChange") count: number = 0 // 监听回调 onCountChange(oldVal: number, newVal: number) { console.log(`count从${oldVal}变到${newVal}`) }
`@StorageLink`	绑定全局存储（如本地缓存，跨页面共享）	全应用	`typescript @StorageLink("userName") userName: string = "默认名称" // 修改后全局存储同步 updateName() { this.userName = "新名称" }`

3. 生命周期装饰器（组件 / 页面生命周期回调）

用于绑定组件或页面的生命周期事件（如 "组件显示时""页面销毁时"），无需手动注册监听。

装饰器	作用	适用目标	示例代码
`@OnAppear`	组件首次显示在屏幕上时触发	组件内方法	`typescript @Component struct MyComponent { @OnAppear() onShow() { console.log("组件显示了") } build() { Text("测试") } }`
`@OnDisappear`	组件从屏幕上消失时触发	组件内方法	`typescript @OnDisappear() onHide() { console.log("组件隐藏了") }`
`@OnPageShow`	页面每次显示时触发（仅 `@Entry` 组件可用）	页面组件内方法	`typescript @Entry @Component struct HomePage { @OnPageShow() onPageShow() { console.log("页面显示了") } }`
`@OnPageHide`	页面每次隐藏时触发（仅 `@Entry` 组件可用）	页面组件内方法	`typescript @OnPageHide() onPageHide() { console.log("页面隐藏了") }`
`@OnBackPress`	监听返回键点击事件（仅 `@Entry` 组件可用）	页面组件内方法	`typescript @OnBackPress() onBack() { console.log("点击了返回键") return true; // 返回true表示拦截默认返回行为 }`

4. 路由与参数装饰器（页面跳转与参数传递）

用于页面路由配置、参数接收，配合 HarmonyOS 的 router 模块使用。

装饰器	作用	适用目标	示例代码
`@RouterPage`	标记当前页面为路由页面（指定路由路径）	页面组件（`@Entry`）	`typescript @Entry @RouterPage({ routeName: "detail" }) // 路由名称 struct DetailPage { build() { Text("详情页") } }`
`@RouterParam`	接收路由跳转参数（自动解析参数类型）	页面组件属性	typescript @Entry @RouterPage({ routeName: "detail" }) struct DetailPage { @RouterParam() id: number = 0 // 接收路由参数 @RouterParam("userName") name: string = "" // 自定义参数名 build() { Text(`ID: ${id}, 名称: ${name}`) } } // 跳转时传递参数： router.pushUrl({ url: "pages/detail", params: { id: 100, userName: "Alice" } })

三、装饰器的使用规则与注意事项

适用范围限制：
- 装饰器必须放在目标元素（类、属性、方法）的上方，且无空行（如 @State count: number = 0 正确，中间换行错误）；
- 部分装饰器有专属适用目标（如 @Entry 仅用于类，@State 仅用于组件内属性，@OnAppear 仅用于组件内方法）。
执行顺序：
- 多个装饰器叠加时，从上到下声明，从下到上执行（同 TypeScript 规则）；
- 组件装饰器（@Entry/@Component）优先于状态装饰器（@State/@Link）执行。
状态装饰器的关键约束：
- @State 初始化必须是字面量或常量 （不能是动态计算值，如 @State count: number = getNum() 错误）；
- @Link 必须绑定父组件的 @State/@Link 状态（不能直接赋值字面量，如 <Child num={10}> 错误，需用 $num 传递）；
- 状态属性修改后，仅依赖该状态的 UI 片段会刷新（局部刷新，性能优化）。
自定义装饰器支持：
- ArkTS 目前主要支持框架内置装饰器，开发者自定义装饰器仅在特定场景（如框架扩展）支持，且语法限制较多（不支持类装饰器的属性修改、方法拦截等复杂逻辑）；
- 若需自定义装饰器，需遵循 HarmonyOS 装饰器规范（参考华为开发者文档）。

构建第一个页面

TypeScript 复制代码

// Index.ets
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

添加按钮。

在默认页面基础上，我们添加一个Button组件，作为按钮响应用户onClick事件，从而实现跳转到另一个页面。Index.ets文件的示例如下：

TypeScript 复制代码

// Index.ets
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加按钮，以响应用户onClick事件
        Button() {
          Text('Next')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
      }
      .width('100%')
    }
    .height('100%')
  }
}