免费个人网站建站申请一下wape
ArkTS基本语法
ArkTS语言简介
ArkTS是鸿蒙生态的应用开发语言。基本语法风格与TypeScript（简称TS）相似，在TS的生态基础上进一步扩展，继承了TS的所有特性，是TS的超集。
基本语法概述
扩展能力
基础语法：声明式语法，组件化机制，数据-UI自动关联
@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).onClick(()=>{this.message = "你好，世界"})}.width('100%')}.height('100%')}
}
状态管理：ArkTS提供了多维度的状态管理机制。比如数据传递可以在父子组件之间，爷孙组件之间，还可以应用全局范围传递或者跨设备传递。同时，数据的传递可以只单向传递和可变更的双向传递。
渲染控制：条件渲染可根据应用的不同状态，渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。
装饰器：装饰类、结构、方法以及变量。比如：
@Component自定义组件，
@Entry自定义组件为入口组件，
@State组件的状态变量，会触发UI刷新。
UI描述：声明式方式描述UI
系统组件：ArkUI提供的组件
容器组件：用来完成页面布局，例如Row、Column
基础组件：自带样式和功能的页面元素，例如Text
属性方法：设置组建的UI样式
事件方法：设置组件的事件回调
声明式UI描述
无参数和有参数组件：通过代码可以看得出来，组件后面“()”有没有配置内容，有就是有参，无则是无参。
Column() {//无参数Text('item 1')//有参数Divider()//无参数Text('item 2')
}
在有参数的组件配置参数格式如下：
image组件的必须参数src
Image('https://xyz/test.jpg')
应用资源采用$r形式引用
// string类型的参数
Text('test')
// $r形式引入应用资源，可应用于多语言场景
Text($r('app.string.title_value'))
// 无参数形式
Text()
变量或者表达式也可以参数赋值，字符串变量嵌套采取${}
Image(this.imagePath)
Image('https://' + this.imageUrl)
Text(`count: ${this.count}`)
配置属性
属性方法以“.”链式调用，比如fontSize(30)、width(this.width)、。具体有什么属性根据组件类型来判断，属性方法和其他语言的属性大同小异。
Text('hello').fontSize(20).fontColor(Color.Red).fontWeight(FontWeight.Bold)
配置事件
事件方法以“.”链式调用的方式配置系统组件支持的事件。
//箭头函数
Button('Click me').onClick(() => {this.myText = 'ArkUI';})//匿名函数表达式
Button('add counter').onClick(function(){this.counter += 2;}.bind(this))//使用bind，以确保函数体中的this指向当前组件//调用函数
myClickHandler(): void {this.counter += 2;
}
...
Button('add counter').onClick(this.myClickHandler.bind(this))
自定义组件
自定义组件的基本结构
@Entry
@Component
struct MyComponent {
}
struct + 自定义组件名 + {...}的组合构成自定义组件，不能有继承关系
@Component仅装饰struct关键字声明的数据结构,一个struct只能被一个@Component装饰。
build()函数用于定义自定义组件的声明式UI描述。
@Entry装饰该自定义组件为UI页面的入口，@Entry和UI页面的关系是一对一
tips：自定义组件固定格式必有struct、@Component、build()
成员函数/变量
成员变量：
1.不支持静态成员变量
2.成员变量都是有私有的
3.成员变量的初始化可选可必选
@Component
struct MyComponent {private countDownFrom: number = 0;private color: Color = Color.Blue;build() {}
}@Entry
@Component
struct ParentComponent {private someColor: Color = Color.Pink;build() {Column() {// 创建MyComponent实例，并将创建MyComponent成员变量countDownFrom初始化为10，将成员变量color初始化为this.someColorMyComponent({ countDownFrom: 10, color: this.someColor })}}
}
页面和组件的生命周期和参数传递
生命周期
页面生命周期（@Entry装饰的组件生命周期）
onPageShow：页面每次显示时触发。
onPageHide：页面每次隐藏时触发一次。
onBackPress:当用户点击返回按钮时触发。
组件生命周期（@Component装饰的自定义组件的生命周期）
aboutToApper：组件即将出现时回调该接口;引用组件实例后，执行其build函数之前。
aboutToDisapper：在自定义组件即将销毁时执行
参数传递
参数传递原则
参数类型和参数声明类型一致，不能为null、undefined、undefined或者null的表达式
在函数内部，参数值不可修改，如要修改，可以采取同步回调
参数传递分为按引用传递参数和按值传递
特别注意：传递的参数为状态变量时，按值传递不能引起UI刷新，引用传递可以UI刷新
引用传递函数
CiteData($$: {name: string,age: number}) {}//创建函数{$$.name} //使用参数this.CiteData({ name:this.title,age: 10 }) //使用函数按值传递函数
ValueData(name: string, age: number){}//创建函数name //使用参数this.ValueData("xxx",10)//使用函数@Component
struct child {@State title: string = "无名氏"build() {Row() {Column() {this.ValueData(this.title,10)//按值传递 调用方式this.CiteData({ name:this.title,age: 10 })// 引用传递 调用方式Button("点击改变值").onClick(()=>{this.title = '张三'//结果：引用传递的name的UI刷新了，按值传递的name的UI没变化})}.width('100%')}.height('100%')}@Builder CiteData($$: {name: string,age: number}) { //引用传递Text(`引用传递：${$$.name}的年龄是${$$.age}`) //使用方式}@Builder ValueData(name: string, age: number) { //按值传递Text(`按值传递：${name}的年龄是${age}`) //使用方式}