二、ArkTS 快速入门
ArkTS 在继承了Typescript语法的基础上，主要扩展了声明式UI开发相关的能力。
ArkTS 语言：https://developer.huawei.com/consumer/cn/arkts/
ArkTS是鸿蒙生态的应用开发语言。ArkTS提供了声明式UI范式、状态管理支持等相应的能力，让开发者可以以更简洁、更自然的方式开发应用。同时，它在保持TypeScript（简称TS）基本语法风格的基础上，进一步通过规范强化静态检查和分析，使得在程序运行之前的开发期能检测更多错误，提升代码健壮性，并实现更好的运行性能。
针对JavaScript（简称JS）/TS并发能力支持有限的问题，ArkTS对并发编程API和能力进行了增强。
ArkTS支持与JS/TS高效互操作，兼容JS/TS生态。
未来，ArkTS会结合应用开发/运行的需求持续演进，逐步提供并行和并发能力增强、系统类型增强、分布式开发范式等更多特性
声明式UI
声明式UI是一种编写用户界面的范式。如下图所示，当开发者点击按钮时，文本内容从“Hello World”变为“Hello ArkUI”。
@Entry
@Component
struct HelloPage {
@State myText: string = 'World';
build() {
RelativeContainer() {
Column() {
Text(`Hello ${this.myText}`)
.fontSize(50)
Divider()
Button('Click me').onClick(() => {
this.myText = 'ArkUI'
})
.height(50)
.width(100)
.margin({ top: 20 })
}
}
.height('100%')
.width('100%')
}
}
完整代码见:
src/main/ets/pages/HelloPage.ets
ArkTS的基本组成
说明
自定义变量不能与基础通用属性/事件名重复。
- 装饰器： 用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器，@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。
- UI描述：以声明式的方式来描述UI的结构，例如build()方法中的代码块。
- 自定义组件：可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。
- 系统组件：ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用，比如示例中的Column、Text、Divider、Button。
- 属性方法：组件可以通过链式调用配置多项属性，如fontSize()、width()、height()、backgroundColor()等。
- 事件方法：组件可以通过链式调用设置多个事件的响应逻辑，如跟随在Button后面的onClick()。
- 系统组件、属性方法、事件方法具体使用可参考基于ArkTS的声明式开发范式。
除此之外，ArkTS扩展了多种语法范式来使开发更加便捷：
- @Builder/@BuilderParam：特殊的封装UI描述的方法，细粒度的封装和复用UI描述。
- @Extend/@Styles：扩展内置组件和封装属性样式，更灵活地组合内置组件。
- stateStyles：多态样式，可以依据组件的内部状态的不同，设置不同样式。
@State
- 声明式描述
开发者只需描述在界面在不同状态下要呈现的最终效果，而无需关注界面变化的具体过程。
- 状态数据驱动界面更新
开发者只需修改状态变量的值，界面就会自动更新。
声明组件
- 组件参数
如果组件的定义包含参数，可在组件名称后面的()中配置相应参数。各组件支持的参数，可查看 API 文档，查看方式如下
- 首先将鼠标在相应组件悬停
- 点击
Show in API Reference，就会弹出 API 文档
- 子组件
如果组件支持子组件配置，可在()后的{}中添加子组件，若不支持子组件，则不需要写{}。
- 属性方法
属性方法用于配置组件的样式和其他属性，可以在组件声明的末尾进行链式调用。各组件支持的属性可查看 API 文档，除去每个组件的专有属性，还有各组件都能配置的通用属性，通用属性也可通过 API 文档查看。
- 事件方法
事件方法用于为组件绑定交互事件，可以在组件声明的末尾进行链式调用。各组件的支持的事件可查看 API 文档，除去每个组件的专有事件，还有各组件都支持的通用事件，通用事件也可通过 API 文档查看。
自定义组件
除去系统预置的组件外，ArkTS 还支持自定义组件。使用自定义组件，可使代码的结构更加清晰，并且能提高代码的复用性。
语法说明
自定义组件的语法如下图所示
各部分语法说明如下：
**struct**关键字
struct是ArkTS新增的用于自定义组件或者自定义弹窗的关键字。其声明的数据结构和TS中的类十分相似，可包含属性和方法。
**build**方法
build()方法用于声明自定义组件的UI结构。
- 组件属性
组件属性可用作自定义组件的参数，使得自定义组件更为通用。
**@Compnent**装饰器
@Component装饰器用于装饰struct关键字声明的数据结构。struct被@Component装饰后才具备组件化的能力。
注： 装饰器是Typescript中的一种特殊语法，常用于装饰类、方法、属性，用于修改或扩展其原有的行为。
在学完自定义组件的语法之后，我们会发现前文案例中的每个页面实际上都是一个自定义组件。但是和自定义组件的语法相比，前边的每个案例还会多出一个@Entry装饰器，那@Entry的作用又是啥呢？
在鸿蒙应用中，每个页面都是由一些列组件组合而成的，并且这些组件都是逐层嵌套的，因此这些组件最终形成了一个组件树的结构。
每个页面就相当于是组件树的根节点，而@Entry装饰器的作用就是标识该组件为组件树的根节点，也就是一个页面的入口组件。@Entry装饰的自定义组件将作为UI页面的入口。在单个UI页面中，最多可以使用@Entry装饰一个自定义组件。
公众号搜“Harry技术”,关注我,带你看不一样的人间烟火！
