鸿蒙前端开发3-ArkTS语言基本语法

官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-basic-syntax-0000001504650057-V2

1.基本语法

　　　　

•  装饰器 

　　 　　用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器，@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。

• UI描述

　　　　以声明式的方式来描述UI的结构，例如build()方法中的代码块

• 自定义组件

　　　　可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello

　　　　a.自定义组件特点

　　　　　　1.可组合

　　　　　　2.可重用

　　　　　　3.数据驱动UI更新

　　　　b.基本用法，如果在另外的文件中引用该自定义组件，需要使用export关键字导出，并在使用的页面import该自定义组件。　　

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

@Component struct HelloComponent {   @State message: string = 'Hello, World!';     build() {     // HelloComponent自定义组件组合系统组件Row和Text     Row() {       Text(this.message)         .onClick(() => {           // 状态变量message的改变驱动UI刷新，UI从'Hello, World!'刷新为'Hello, ArkUI!'           this.message = 'Hello, ArkUI!';         })     }   } }

　　　c.基本结构　　

1 2 3 4 5 6

@Entry @Component struct MyComponent {   build() {   } }

　　　　1.@Entry装饰的自定义组件将作为UI页面的入口，在单个UI页面中，最多可以使用@Entry装饰一个自定义组件。@Entry可以接受一个可选的LocalStorage的参数

　　　　2.struct：自定义组件基于struct实现，struct + 自定义组件名 + {...}的组合构成自定义组件，不能有继承关系。对于struct的实例化，可以省略new

　　　　3.@Component：@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力，需要实现build方法描述UI，一个struct只能被一个@Component装饰

　　　　4.build()函数：build()函数用于定义自定义组件的声明式UI描述，自定义组件必须定义build()函数

　　　　　　@Entry装饰的自定义组件，其build()函数下的根节点唯一且必要，且必须为容器组件，其中ForEach禁止作为根节点