ArkTS是OpenHarmony优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript(简称TS)生态基础上做了进一步扩展,继承了TS的所有特性,是TS的超集。因此,在学习ArkTS语言之前,建议开发者具备TS语言开发能力。
ArkTS语言入门
在学习ArkTS语言之前,我们首先需要一个能够编译并运行该语言的工具DevEco Studio,该工具具体的安装及配置流程可按照https://ost.51cto.com/posts/24547这位博主所指导的进行操作,这里就不再赘述。
▍体验ArkTS
首先,我们来看这张图:
这张图将一个简单页面的组成部分详细的指了出来,包括装饰器以及各种各样的组件等,它的最终展示效果如下:
对“Click me”进行点击,将会呈现如下效果:
▍学习ArkTS
接下来,我们将开始正式学习ArkTS语言。
1:应用页面构成
上图即为一个基本页面的布局,我将以上图为例,逐一讲解其中的内容:首先,我先讲解上图中每一个节点所代表的含义:
1.“APP”----这个即是软件本身,所有的操作都将在它的基础上完成。
2.“Column”----column是一个主轴为纵向的容器,在它上面的内容将以纵向排列。
3.“Row”----与column相反,Row是一个主轴为横向的容器,在它上面的内容将以横向排列。
4.“Text”----Text是文本容器,可以在其中输入文字并将其展示在页面上。
5.“Image”----Image是图片容器,可以向其中传入图片并将其展示在页面上。
6.“Slider”----Slider是一个滑动条组件,用于控制一些可调节的页面内容。
7.“Button”----Button则是一个按钮,用于实现页面与用户的交互功能。接下来,我将由这个树状图,展示如何实现页面的布局:
1.此时为未布局的状态
2.将第一层的column容器填充到页面当中
3.接着,将第二层的Test,Column按顺序纵向排列在第一层Column容器中
4.再将第三层的Row,Slider按顺序纵向排列在第二层的column容器中
5.再将第四层的Image和Test按顺序横向排列在第三层的Row容器中
6.最后类似上面的步骤,将最后的Row以及其中的两个Button按钮排列在第二层的Column容器中
以上便是一个基本页面组成的例子。
2:代码示例
上图便是前文中的页面构成的代码示例,接下来,我将逐一分析各段代码的作用:
1.如上图所示,这类以“@”开头的叫做装饰器,装饰器的作用是赋予被装饰内容某一种能力,例如“@Entry”,这个装饰器的作用是将被它装饰的组件作为页面的入口,在页面被加载时该组件将会被渲染展示。而“@Component”则是用于装饰结构体struct,表示该结构体是一个UI组件。
2.接着,如图所示为build方法,页面内所有内容将在build方法内写入,每个组件都必须实现build方法,用于定义组件的声明式UI描述。
3.接下来便是页面的组成部分了,由图示,第一个Column容器在“{}”中包含了第二层的Test,Column,Row容器,而第二层的容器则又在“{}”中包含了第三层的内容,以此类推......,如果需要更改,增加或删减内容,可以直接在对应的层级中进行操作。
▍常见基础组件
当我们了解了一个页面的布局以及代码的写法后,我们就可以接触更多的组件,让我们的页面变得更加美观并拥有更丰富的功能。下图便是一部分组件。
接下来,我将介绍其中几个较为常用的组件及其用法:
-
“Test”----Testy用于文本的展示,当我们在Test中写入内容,如:
Test('test')
.fontsize(50)
此时,将会呈现出如下页面:
这里的fontsize为Test组件的属性,用于设置文本内容的大小。在Test组件中,还可以直接引用存放在resouces目录下的资源文件,例如我们在resouces目录下创建string文件
在其中写入:
“string”:[{
"name":"EntryAbility_lable",
"value":"lable"
}]
其中string代表数据类型,name代表该文件其中内容的名称,value则代表指定内容中值。接着,可以通过" $r('') "在Test组件中引用该数据,例如:
Test($r('app.string.EntryAbility_lable'))
.fontsize(50)
.fontColor('#ff2233')
效果如图:
在其中又加入了fontColor属性,用于改变文本颜色,当然,也可以通过相同方法,引用存放在resouces目录下Color文件,完成对文本颜色的改变,形如:
Test($r('app.string.EntryAbility_lable'))
.fontsize(50)
.fontColor($r('app.Color.lable_color'))
2.“Button”----Button是一个按钮组件,用于页面与用户的交互。在上面的基础上,我们加入Button组件
Test($r('app.string.EntryAbility_lable'))
.fontsize(50)
.fontColor($r('app.Color.lable_color'))
Button('button')
.width(100)
效果如图:
在Button后的括号中可以写入显示在按钮上的文本,并通过width属性设置其大小,接着,我们可以通过形如
Button('button',{type:ButtonType.Normal})
.width(100)
来设置按钮的形状,编译器会自动提示如下类型以供选择:
包括圆形,矩形,圆角矩形等。
3.“image”----image组件是用于图片展示,使得我们的页面不单单由文本组成,美化页面的同时可以展示出更多的内容,该组件支持本地图片和网络图片的渲染展示。在上面的基础上,我们加入Image组件
Test($r('app.string.EntryAbility_lable'))
.fontsize(50)
.fontColor($r('app.Color.lable_color'))
Button('button')
.width(100)
Image($r('app.media.loading'))
.width(100)
.height(100)
效果如图:
Image组件有且只有一个参数,就是图片的数据源,代码示例是引用resouces目录下已下载的文件进行展示,接着通过width以及height属性对图片大小进行调整,使得页面变得协调。
最后
如果你想快速提升鸿蒙技术,那么可以直接领取这份包含了:【OpenHarmony多媒体技术、Stage模型、ArkUI多端部署、分布式应用开发、音频、视频、WebGL、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。
鸿蒙Next全套VIP学习资料←点击领取!(安全链接,放心点击)
1.鸿蒙核心技术学习路线
2.大厂面试必问面试题
3.鸿蒙南向开发技术
4.鸿蒙APP开发必备
5.HarmonyOS Next 最新全套视频教程
6.鸿蒙生态应用开发白皮书V2.0PDF