二、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技术”,关注我,带你看不一样的人间烟火！