ArkTs
1.简介
ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript(简称TS)生态基础上做了进一步扩展,继承了TS的所有特性,是TS的超集。
2.与TS/JS区别
1>相关约束
前端开发过程中所有的js/ts语法大部分支持的,但是为了增加语言的规范性,避免产生一些不必要的运行开销。在ts/js上做了一些约束
1.不支持Symbol()API
2.不支持索引访问字段
3.不支持delete运算符
4.仅允许在表达式中使用typeof运算符
5.不支持in运算符
6.限制使用标准库
7.
8.
2>拓展
ArtTS绝不是TS
● TS在前端中虽然有类型约束,但是他会编译成js去运行
● ArtTS编译后直接映射字节码-编译过程带类型
拓展能力
○ 定义声明式UI、自定义组件、动态扩展UI元素;
○ 提供ArkUI系统组件,提供组件事件、方法、属性;
○ 共同构成 UI 开发主体
1 . 基本语法
○ 定义声明式UI、自定义组件、动态扩展UI元素;
○ 提供ArkUI系统组件,提供组件事件、方法、属性;
○ 共同构成 UI 开发主体
2. 状态管理
○ 组件状态、组件数据共享、应用数据共享、设备共享;
3. 渲染控制
○ 条件渲染、循环渲染、数据懒加载
3>总结
● AktTS提供原有前端范畴内的一切TypeScript和JavaScript的类型及方法支持
● 不是所有都支持- 比如解构不支持(Next版本)
● ArkTS采用声明式UI的方法来绘制页面,设置属性,绑定事件
二.组件基础
1.组件结构
ArkTS通过装饰器 @Component 和 @Entry 装饰 struct 关键字声明的数据结构,构成一个自定义组件。
自定义组件中提供了一个 build 函数,开发者需在该函数内以链式调用的方式进行基本的 UI 描述,UI 描述的方法请参考 UI 描述规范
2.struct自定义组件
struct用来描述UI,包含UI的所有信息,注意不能有继承关系或重名
语法:
@Component
struct Index{
}
@CustomDialog
struct Index2{
}
struct必须被@Component或者@CustDialog翻译
3.Component修饰符
Component装饰器只能修饰struct关键字,被修饰后struct具有组件描述渲染能力
4.build函数
用于定义组件描述,一个struct必须实现build函数
@Component
struct MT{
build(){
}
}
build函数是组件Component提供以及实现的一个函数,build函数可以没有内容,但是如果有,必须放一个也只能放一个容器组件
常见的容器组件:Flex-Column-Row-List-Grid-Panel
Link组件和Prop组件
当在eTS中使用装饰器时,可以使用@Prop
和@Link
来修饰组件的属性和方法。下面是对它们的详细介绍:
@Prop
装饰器:
@Prop
装饰器用于将一个类的属性设置为组件的属性,使其可以从外部传入并在组件中使用。这样可以实现组件和父组件之间的数据传递。
示例代码:
import { Component, Prop } from 'eos-topview';
@Component
class MyComponent {
@Prop
private message: string = '';
// ...
}
在上面的代码中,通过使用@Prop
装饰器,将message
属性设置为组件的属性。这意味着MyComponent
组件可以接收一个名为message
的属性,并在组件中使用。
父组件中使用该组件,并传递message
属性的值:
<MyComponent message="Hello, World!" />
在父组件中,通过传递message
属性的值"Hello, World!"给MyComponent
组件,MyComponent
组件就可以使用这个属性值了。
@Link
装饰器:
@Link
装饰器用于将一个类的属性与某个函数进行关联。这样,在组件内部可以触发这个关联的函数,从而执行某些操作。
示例代码:
import { Component, Link } from 'eos-topview';
@Component
class MyComponent {
@Link
private goToHomePage: Function;
handleClick() {
// 执行一些逻辑...
this.goToHomePage();
}
// ...
}
在上面的代码中,通过使用@Link
装饰器,将goToHomePage
属性与某个函数进行关联。这样,在组件的事件处理函数中,可以通过调用this.goToHomePage()
来执行关联的函数。
父组件中使用该组件,并传递goToHomePage
函数:
<MyComponent goToHomePage={() => console.log('Go to home page!')} />
在父组件中,通过传递一个名为goToHomePage
的函数给MyComponent
组件,MyComponent
组件就可以触发这个函数来执行相应的操作了。
通过使用@Prop
和@Link
装饰器,可以实现组件的属性传递和与外部函数的关联,从而提高组件的灵活性和可复用性。
希望这样的详细介绍能够帮助你理解@Prop
和@Link
装饰器的作用和用法。如有进一步的问题,请随时提问。
entry修饰符
在ets文件中,entry只能修饰一个struct自定义组件,也只能有一个entry,entry是UI页面的入口
entry修饰的组件,最终会被注册在main/resources/base/profile/main_pages.json
自动注册
在新建组件时,采用新建Page的方式
手动注册
新建ets文件时,自己在main_pages.json中手动添加路径
5.总结
● 一个UI描述必须使用struct来声明,不能继承
● struct必须被Component或者CustomDialog修饰
● struct必须实现build方法,build方法可以没有元素,但是有的话有且只有一个可容纳子组件的容器组件(entry修饰的组件)
● entry修饰符表示该组件是页面级组件,一个文件中只允许修饰一个struct组件
● 采用分拆组件的形式可以有效解解耦我们的业务
三.系统组件
1.常用系统组件
Text文本组件(Span子组件)
里面只能放Span
Column{
Text("hello world")
Text(){
Span("hellow")
.fansize(12)
Span("world")
}
.fansize(20)
}
Column列组件,纵向排布(任意子组件)
Row行组件(任意子组件)
Row({space:15}){//space是设置间距的
Column()
.width(100)
.height(200)
.backgroundColor(Color.Pink)
Column()
.width(100)
.height(200)
.backgroundColor(Color.Red)
Column()
.width(100)
.height(200)
.backgroundColor(Color.Blue)
}
.width('%100')
.justifyContent(FlexAlign.Start)//三个组件分布方式,这个是靠左对齐
.justifyContent(FlexAlign.Center)//这个是居中,第二个会覆盖第一个
// .justifyContent(FlexAlign.End)
// .justifyContent(FlexAlign.SpaceBetween)
// .justifyContent(FlexAlign.SpaceAround)
// .justifyContent(FlexAlign.SpaceEvenly)
}.margin({
top:20
})//与上一个组件的间距
Flex以弹性布局的子组件的容器组件。(性能不如Row和Column)(任意子组件)
Button按钮组件(单子组件)
TextInput输入框组件(无子组件)
Image(无子组件)
Scroll滚动条组件
如果界面超过屏幕长度,不会自动出现滚动条,
需要放在Scroll(){}里面
width(100)
.height(200)
.backgroundColor(Color.Red)
Column()
.width(100)
.height(200)
.backgroundColor(Color.Blue)
}
.width('100%')
// .justifyContent(FlexAlign.Start)
.justifyContent(FlexAlign.Center)
// .justifyContent(FlexAlign.End)
// .justifyContent(FlexAlign.SpaceBetween)
// .justifyContent(FlexAlign.SpaceAround)
// .justifyContent(FlexAlign.SpaceEvenly)
Column({ space: 20 }) {
Column()
.width(200)
.height(100)
.backgroundColor(Color.Pink)
Column()
.width(200)
.height(100)
.backgroundColor(Color.Red)
Column()
.width(200)
.height(100)
.backgroundColor(Color.Blue)
}.margin({
top: 20
})
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
Column()
.width(100)
.height(200)
.backgroundColor(Color.Pink)
Column()
.width(100)
.height(200)
.backgroundColor(Color.Red)
Column()
.width(100)
.height(200)
.backgroundColor(Color.Blue)
}
.margin({
top: 200
})
}
.width('100%')
}
}
}
}
List(限制ListItem子组件)
Scroll(限制单个子组件)
2.组件的使用
● 使用组件采用 组件名() 的语法
● 有构造参数采用 组件名(参数)的语法
● 组件里放置子组件采用 组件名() { 子组件的语法 } 的链式语法
● 组件设置属性采用 组件名().width().height() 的语法
● 组件又有属性又有子组件采用 组件名(){ … 子组件 }.width().height() 的语法
四.组件事件
@Entry
@Component
struct Event{
build(){
Row(){
Column({space:15}){
TextInput({placeholder:"请输入用户明"})
.backgroundColor('#f4f5f6')
.width('100%')
.onChange((value)=>{
AlertDialog.show({
message:value
})
})
}
}
}
五.零碎知识
1.vp像素
vp是华为的比例大小的单位,通过与物理像素匹配,来与不同屏幕大小适配,达到相同舒适的视觉
2.设置语素宽高比
.aspectRatio(number)