HarmonyOS学习（二） ArkTS 基础知识

一、ArkTS介绍

ArkTS是HarmonyOS应用的开发语言，在TypeScript的基础上拓展了声明式UI、状态管理等相应的能力，让开发者以更简洁自然的方式开发高性能应用。TypeScript是JavaScript的拓展，ArkTS是TypeScript的拓展。

二、声明式UI规范

下图为 ArkTS 声明式开发规范的主要内容

 1、装饰器

用来装饰类、结构、方法以及变量，赋予其特殊的含义。如上图中的 @Entry、@Component、@State 都是装饰器。多个装饰器可以叠加到目标元素上，定义在同一行或多行分开。

@Entry ：表示当前是个入口组件

@Component：表示这个是个自定义组件

@State：表示组件中的状态变量，次状态变化会引起UI的变化

 2、自定义组件

可复用的UI组件，可组合其他的组件。也可以被其他组件调用。

自定义组件可以基于struct实现，不能有继承关系，对于struct的实例化，可以省略new。如上图的 struck Hello 就是一个自定义组件。

自定义组件的生命周期：

aboutToAppear

aboutToAppear 函数在创建自定义组件的新实例后，在执行其build()函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build()函数中生效。

aboutToDisappear

aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。

onPageShow

页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效。

onPageHide

页面每次隐藏时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry装饰的自定义组件生效。

onBackPress

当用户点击返回按钮时触发，仅@Entry装饰的自定义组件生效。

2、UI描述

声明式的方式来描述UI的结构，如上图中的 build() 方法内的代码块。自定义组件必须定义 Build() 函数，并且禁止自定义构造函数。

4、内置组件

框架中默认内置的基础和布局组件，可直接被开发者调用，如上图示例中的 Column、Text、Divider、Button，另外还有Row、Image等内置组件。内置组件又可以区分为基础组件和容器组件

无参数构造配置

如果组件的接口定义中不包含必选构造参数，组件后的“()”中不需要配置任何内容。如 Divider组件

Column() {
    Text('item 1')
    Divider()
    Text('item 2')
    Image('xxx.jpg')

}

必选参数构造配置

如果组件的接口定义中包含必选构造参数，则在组件后面的“()”中必须配置响应的参数，参数可以使用常量进行赋值。如上面代码中的 Text、Image。

5、事件配置

用于添加组件对事件的响应逻辑，统一通过事件方法进行设置，如跟随在Button后面的onClick()，通过"."运算符连接。

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

Button("add")
    .onClick(() => {
       this.counter ++ 
    })

使用匿名函数表达式配置组件的事件方法，要求使用bind，以确保匿名函数体重的this引用包含的组件

Button("add")
    .onClick(function() {
       this.counter ++ 
    }.bind(this))

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

addClick(): void {
    this.counter ++
}

Button("add")
    .onClick(this.addClick)

6、属性配置

用于组件属性的配置，统一通过属性方法进行设置，如fontSize()、width()、height() 等，可通过链式调用的方式设置多项属性。

配置 Text 组件的字体大小：

Text('test')
    .fontSize(12)

除了使用常量参数外，还可以传递变量或表达式：

Image("paly.jpg")
    .width(this.count % 2 === 0 ? 100 : 200)
    .height(this.offset + 10)

同时框架还内置了一些枚举类型供开发人员使用，如颜色和字体粗细。

Text('test')
    .fontSize(12)
    .fontWeight(FontWeight.Bold)
    .fontColor(Color.Blue)

7、子组件配置

对于支持子组件配置的组件，例如容器组件，在“{...}”里为组件添加组件的UI描述。Column、Row、Stack、Grid、List等都是容器组件。

以最简单的Column为例

Column() {
  Text("Hello")
    .fontSize(20)
  Divider()
  Text(this.ame)
    .fontSize(24)
    fontColor(Color.Red)
}

容器组件之间也可以相互嵌套

Column() {
  Row() {
    Text("MyName")
      .fontSize(20)
    Divider()
    Text(this.ame)
      .fontSize(24)
      fontColor(Color.Red)
  }
  Diveder()
  Row() {
    Text("Age")
      .fontSize(20)
    Divider()
    Text(this.age)
      .fontSize(24)
      fontColor(Color.Blue)
  }  
}

三、组件状态管理装饰器和@Buiklder装饰器

组件状态管理装饰器用来管理组件中的状态，他们分别是：@State、@Prop、@Link

@State装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用做在组建的build方法进行UI刷新。

@Prop与@State有着相同的语义，但初始化方式不同。@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化，允许组件内部修改@Prop变量，但更改不会通知给父组件，即@Prop属于单向数据绑定。

@Link装饰的变量可以和父组件的@State变量建立双向数据绑定，需要注意的是：@Link变量不能在组件内部进行初始化。

@State、@Prop和@Link 三者关系图

@Builder 装饰的函数称为自定义构建函数，装饰的方法用于定义组件的声明式UI描述，在一个自定义组件内快速生成多个布局内容。