鸿蒙ArkTS语言基础语法详解
鸿蒙ArkTS语言基础语法详解
一、引言
鸿蒙操作系统(HarmonyOS)的ArkTS语言是一种基于TypeScript开发的语言,专为HarmonyOS系统开发而设计。ArkTS结合了JavaScript的灵活性和TypeScript的严谨性,使得开发者能够快速、高效地开发出高质量的HarmonyOS应用程序。本文将详细介绍ArkTS语言的基本语法和特点。
二、ArkTS语言概述
1. ArkTS语言特点
ArkTS语言具有以下特点:
- 静态类型检查:通过类型注解进行类型检查,减少因类型错误导致的bug。
- 异步/同步编程:支持基于Promise和async/await的异步/同步编程方式。
- 内置模块:内置常用模块,如文件系统、网络请求、图形渲染等。
- 兼容性:使用TypeScript语法,与JavaScript代码无缝集成,可编译成JavaScript代码在其他平台运行。
2. TypeScript基础语法
TypeScript是JavaScript的超集语言,支持静态类型,提高代码的可维护性和可读性。TypeScript代码可在编译时转换成JavaScript代码,在浏览器和Node.js环境下运行。
2.1 类型注解
TypeScript通过类型注解实现静态类型检查:
let name: string = "TypeScript";
function add(a: number, b: number): number {
return a + b;
}
2.2 接口
接口描述对象的形状,包括属性和方法的类型:
interface Person {
name: string;
age: number;
sayHello(): void;
}
let tom: Person = {
name: "Tom",
age: 18,
sayHello: function() {
console.log(`Hello, my name is ${this.name}!`);
}
};
2.3 泛型
泛型允许编写参数化类型,提高代码的通用性和可读性:
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("TypeScript");
console.log(output); // 输出 TypeScript
2.4 类的继承
TypeScript支持类的继承,实现代码的重用和扩展:
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
move(distance: number = 0) {
console.log(`${this.name} moved ${distance}m.`);
}
}
class Dog extends Animal {
bark() {
console.log("Woof! Woof!");
}
}
let dog = new Dog("Bobby");
dog.move(10);
dog.bark();
2.5 类的访问修饰符
访问修饰符控制类的属性和方法的访问权限:
class Person {
protected name: string;
constructor(name: string) {
this.name = name;
}
protected sayHello() {
console.log(`Hello, I'm ${this.name}.`);
}
}
class Student extends Person {
constructor(name: string) {
super(name);
}
public sayHelloToTeacher(teacher: Person) {
console.log(`Hello, ${teacher.name}, I'm ${this.name}.`);
}
}
let tom = new Student("Tom");
let bob = new Person("Bob");
tom.sayHelloToTeacher(bob);
bob.sayHello();
三、ArkTS的基本组成
ArkTS的基本组成包括装饰器、UI描述、自定义组件、系统组件、属性方法和事件方法。ArkTS扩展了多种语法范式,如@Builder/@BuilderParam、@Extend/@Style和stateStyles,以使开发更加便捷。
3.1 装饰器
装饰器用于装饰类、结构、方法以及变量,并赋予其特殊的含义。例如,@Entry、@Component和@State都是装饰器。
3.2 UI描述
UI描述以声明式的方式来描述UI的结构,例如build()方法中的代码块。
3.3 自定义组件
自定义组件是可复用的UI单元,可组合其他组件。
3.4 系统组件
ArkUI框架中默认内置的基础和容器组件,可直接被开发者调用。
3.5 属性方法和事件方法
组件可以通过链式调用配置多项属性和设置多个事件的响应逻辑。
四、自定义组件
自定义组件基于struct实现,struct + 自定义组件名 + {…}的组合构成自定义组件。对于struct的实例化,可以省略new。
4.1 build()函数
build()函数用于定义自定义组件的声明式UI描述,自定义组件必须定义build()函数。
@Component
struct HelloComponent {
@State message: string = 'Hello, World!';
build() {
Row() {
Text(this.message)
.onClick(() => {
this.message = 'Hello, ArkUI!';
})
}
}
}
@Entry
@Component
struct ParentComponent {
build() {
Column() {
Text('ArkUI message')
HelloComponent({ message: 'Hello, World!' });
Divider()
HelloComponent({ message: '你好!' });
}
}
}
4.2 生命周期
页面生命周期和组件生命周期提供了多个生命周期接口,如onPageShow、onPageHide、onBackPress、aboutToAppear和aboutToDisappear。
五、装饰函数
5.1 @Builder装饰器
@Builder主要是定义页面UI,可以装饰指向自定义组件内自定义构建函数或全局函数。
5.2 @BuilderParam装饰器
@BuilderParam用来装饰指向@Builder方法的变量,为自定义组件增加特定的功能。
5.3 @Styles装饰器
@Styles装饰器主要是定义公共样式,可以装饰指向全局或组件内。
5.4 @Extend装饰器
@Extend用于扩展原生组件样式,作用和@Styles差不多,但@Extend仅支持定义在全局。
六、多态样式
stateStyles是属性方法,可以根据UI内部状态来设置样式,类似于css伪类,但语法不同。ArkUI提供以下四种状态:focused、normal、pressed和disabled。
6.1 基本使用
@Entry
@Component
struct CompWithInlineStateStyles {
@State focusedColor: Color = Color.Red;
normalColor: Color = Color.Green
build() {
Column() {
Button('clickMe').height(100).width(100)
.stateStyles({
normal: {
.backgroundColor(this.normalColor)
},
focused: {
.backgroundColor(this.focusedColor)
}
})
.onClick(() => {
this.focusedColor = Color.Pink
})
.margin('30%')
}
}
}
6.2 @Styles和stateStyles联合使用
@Entry
@Component
struct MyComponent {
@Styles normalStyle() {
.backgroundColor(Color.Gray)
}
@Styles pressedStyle() {
.backgroundColor(Color.Red)
}
build() {
Column() {
Text('Text1')
.fontSize(50)
.fontColor(Color.White)
.stateStyles({
normal: this.normalStyle,
pressed: this.pressedStyle,
})
}
}
}
6.3 stateStyles里使用常规变量和状态变量
@Entry
@Component
struct CompWithInlineStateStyles {
@State focusedColor: Color = Color.Red;
normalColor: Color = Color.Green
build() {
Button('clickMe').height(100).width(100)
.stateStyles({
normal: {
.backgroundColor(this.normalColor)
},
focused: {
.backgroundColor(this.focusedColor)
}
})
.onClick(() => {
this.focusedColor = Color.Pink
})
.margin('30%')
}
}
七、总结
ArkTS语言作为HarmonyOS优选的主力应用开发语言,继承了TypeScript的所有特性,并在此基础上做了进一步扩展。通过掌握ArkTS的基础语法和特性,开发者可以更高效地开发HarmonyOS应用程序。
版权声明:本博客内容为原创,转载请保留原文链接及作者信息。
参考文章:
原文地址:https://blog.csdn.net/NiNg_1_234/article/details/144340662
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!