Harmony学习（四）ArkTs1基本语法

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展。

• 基本语法：ArkTS定义了声明式UI描述、自定义组件和动态扩展UI元素的能力，再配合ArkUI开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了UI开发的主体。
• 状态管理：ArkTS提供了多维度的状态管理机制。在UI开发框架中，与UI相关联的数据可以在组件内使用，也可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，还可以在应用全局范围内传递或跨设备传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。
• 渲染控制：ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态，渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。

基本语法

ArkTS的基本组成

装饰器

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

@Entry  //该装饰器表示为入口，可作为一个页面使用
@Component//该组件表示为自定义组件，作为组件需要添加build方法，在build中进行UI的构建
struct FirstPage{
  @State msg:string='Hello' //状态变量，在该变量数据发生改变时对应ui也会发生相应改变
    build(){
     ...
}
}

UI描述

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

a.创建组件
无参构建:组件接口定义时没有必传参数时，则（）内无需传入参数，如下：

 Column(){
      Text()
      Divider()
}

有参构造：组件接口定义时有参数，则需在组件（）内传入参数，如下：

//图片控件参数为必填
Image('https://xxx.xxx.png')
//文本控件参数为非必填
Text('msg')

b.配置属性
单个属性配置

Text('msg')
.FontSize(12)

多属性配置

check:boolean=false
width:number=100
Text('msg')
.fontSize(12)//可配置常量
.width(this.width)//可配置变量
.fontColor(Color.Red)//可使用系统提供的枚举类型
.backgroundColor(check?"#FFFFFF":"#000000")//可使用表达式

c.配置事件

事件方法以“.”链式调用的方式配置系统组件支持的事件。

• 使用lambda表达式配置组件的事件方法。

    Button('Click me')
       .onClick(() => {
       this.myText = 'ArkUI';
     })

• 使用匿名函数表达式配置组件的事件方法，要求使用bind，以确保函数体中的this指向当前组件。

   Button('add counter')
     .onClick(function(){
     this.counter += 2;
   }.bind(this))

• 使用组件的成员函数配置组件的事件方法。

     myClickHandler(): void {
       this.counter += 2;
       }
       ...
       Button('add counter')
       .onClick(this.myClickHandler.bind(this))

d.自定义组件
可复用的UI单元，可组合其他组件，如ArkTS的基本组成图中被@Component装饰的struct Hello。
e.系统组件
ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用，比如ArkTS的基本组成图中示例的Column、Text、Divider、Button。