鸿蒙前端开发3-ArkTS语言基本语法
1.基本语法
- 装饰器
用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器，@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。
- UI描述
以声明式的方式来描述UI的结构，例如build()方法中的代码块
- 自定义组件
可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello
a.自定义组件特点
1.可组合
2.可重用
3.数据驱动UI更新
b.基本用法，如果在另外的文件中引用该自定义组件，需要使用export关键字导出，并在使用的页面import该自定义组件。
@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.基本结构
@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禁止作为根节点
@Component装饰的自定义组件，其build()函数下的根节点唯一且必要，可以为非容器组件，其中ForEach禁止作为根节点
不允许声明本地变量
不允许在UI描述里直接使用console.info，但允许在方法或者函数里使用
不允许创建本地的作用域
不允许调用没有用@Builder装饰的方法，允许系统组件的参数是TS方法的返回值
不允许switch语法，如果需要使用条件判断，请使用if
不允许使用表达式
- 系统组件
ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用，比如示例中的Column、Text、Divider、Button
- 属性方法
组件可以通过链式调用配置多项属性，如fontSize()、width()、height()、backgroundColor()等
使用匿名函数表达式配置组件的事件方法，要求使用bind，以确保函数体中的this指向当前组件，使用声明的箭头函数，可以直接调用，不需要bind this
Button('add counter')
.onClick(function(){
this.counter += 2;
}.bind(this))
- 成员函数/变量
- 自定义组件的成员函数/变量为私有的，且不建议成静态函数/静态变量
- 自定义的成员变量本地初始化有些是可选的，有些是必选的，具体是否需要本地初始化，是否需要从父组件通过参数传递初始化子组件的成员变量
- 扩展语法
- @Builder/@BuilderParam：特殊的封装UI描述的方法，细粒度的封装和复用UI描述
- @Extend/@Styles：扩展内置组件和封装属性样式，更灵活地组合内置组件
- stateStyles：多态样式，可以依据组件的内部状态的不同，设置不同样式
- 自定义组件通用样式
@Component
struct MyComponent2 {
build() {
Button(`Hello World`)
}
}
@Entry
@Component
struct MyComponent {
build() {
Row() {
MyComponent2()
.width(200)
.height(300)
.backgroundColor(Color.Red)
}
}
}
2.$r 形式引入应用资源，可应用于多语言场景
