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 装饰器规范（参考 华为开发者文档）。
构建第一个页面
// 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文件的示例如下：
// 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%')}
}