OpenHarmony 北向应用开辟—鸿蒙ArkTS语言入门（构建应用页面）
ArkTS是OpenHarmony优选的主力应用开辟语言。ArkTS围绕应用开辟在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。因此，在学习ArkTS语言之前，发起开辟者具备TS语言开辟能力。ArkTS语言入门
在学习ArkTS语言之前，我们首先需要一个可以大概编译并运行该语言的工具DevEco Studio，该工具具体的安装及配置流程可按照https://ost.51cto.com/posts/24547这位博主所引导的进行操纵，这里就不再赘述。
▍体验ArkTS
首先，我们来看这张图：
https://img-blog.csdnimg.cn/img_convert/8e19e5992b45f2d87fa0ffd4e7ab0c84.png
这张图将一个简单页面的构成部分具体的指了出来，包括装饰器以及各种各样的组件等，它的最终展示结果如下：
https://img-blog.csdnimg.cn/img_convert/a01dc89b4c7b5a193db6e5c3590bacd6.png
对“Click me”进行点击，将会出现如下结果：
https://img-blog.csdnimg.cn/img_convert/30de35f0b5329eef8bc8bbf38f132663.png
▍学习ArkTS
接下来，我们将开始正式学习ArkTS语言。
1：应用页面构成
https://img-blog.csdnimg.cn/img_convert/abb4f16cf93a1cf335b24afeedbe26e4.png
上图即为一个根本页面的结构，我将以上图为例，逐一解说其中的内容：首先，我先解说上图中每一个节点所代表的寄义：
1.“APP”----这个便是软件本身，所有的操纵都将在它的基础上完成。
2.“Column”----column是一个主轴为纵向的容器，在它上面的内容将以纵向排列。
3.“Row”----与column相反，Row是一个主轴为横向的容器，在它上面的内容将以横向排列。
4.“Text”----Text是文本容器，可以在其中输入文字并将其展示在页面上。
5.“Image”----Image是图片容器，可以向其中传入图片并将其展示在页面上。
6.“Slider”----Slider是一个滑动条组件，用于控制一些可调节的页面内容。
7.“Button”----Button则是一个按钮，用于实现页面与用户的交互功能。接下来，我将由这个树状图，展示怎样实现页面的结构：
1.此时为未结构的状态
https://img-blog.csdnimg.cn/img_convert/73943bab394adaf248ed22fb4808f2a7.png
2.将第一层的column容器添补到页面当中
https://img-blog.csdnimg.cn/img_convert/0837d7c0e71df534ab37111d748d2ffc.png
3.接着，将第二层的Test,Column按顺序纵向排列在第一层Column容器中
https://img-blog.csdnimg.cn/img_convert/c38559f535af8f158c93fa757e19464b.png
4.再将第三层的Row,Slider按顺序纵向排列在第二层的column容器中
https://img-blog.csdnimg.cn/img_convert/201c44315baa9c36373a33b1b9bada4e.png
5.再将第四层的Image和Test按顺序横向排列在第三层的Row容器中
https://img-blog.csdnimg.cn/img_convert/aa7422fa008b795761b757c67a63d7b0.png
6.最后类似上面的步骤，将最后的Row以及其中的两个Button按钮排列在第二层的Column容器中
https://img-blog.csdnimg.cn/img_convert/7153f60c16c0998de46686f6948c9054.png
以上便是一个根本页面构成的例子。
2：代码示例
https://img-blog.csdnimg.cn/img_convert/f9cdf416c1dae549441ac24a7bfdcaec.png
上图便是前文中的页面构成的代码示例，接下来，我将逐一分析各段代码的作用：
https://img-blog.csdnimg.cn/img_convert/675017ff4bcecb1af10f72a3e1ed0a7c.png
1.如上图所示，这类以“@”开头的叫做装饰器，装饰器的作用是赋予被装饰内容某一种能力，例如“@Entry”,这个装饰器的作用是将被它装饰的组件作为页面的入口，在页面被加载时该组件将会被渲染展示。而“@Component”则是用于装饰结构体struct，表现该结构体是一个UI组件。
https://img-blog.csdnimg.cn/img_convert/1bf9477ad0e23343d02651cb2a00c5c6.png
2.接着，如图所示为build方法，页面内所有内容将在build方法内写入，每个组件都必须实现build方法，用于界说组件的声明式UI形貌。
https://img-blog.csdnimg.cn/img_convert/1263a09f38c1553c0de6ea536d535368.png
3.接下来便是页面的构成部分了，由图示，第一个Column容器在“{}”中包含了第二层的Test，Column，Row容器，而第二层的容器则又在“{}”中包含了第三层的内容，以此类推......,假如需要更改，增长或删减内容，可以直接在对应的层级中进行操纵。
▍常见基础组件
当我们了解了一个页面的结构以及代码的写法后，我们就可以接触更多的组件，让我们的页面变得更加美观并拥有更丰富的功能。下图便是一部分组件。
https://img-blog.csdnimg.cn/img_convert/0ec8582c34847b335634009790cf5bea.png
接下来，我将先容其中几个较为常用的组件及其用法：
[*] “Test”----Testy用于文本的展示，当我们在Test中写入内容,如：
Test('test')
.fontsize(50) 此时，将会出现出如下页面：
https://img-blog.csdnimg.cn/img_convert/7c6ea3b53d642a9b76ea246a197e7c7e.png
这里的fontsize为Test组件的属性，用于设置文本内容的大小。在Test组件中，还可以直接引用存放在resouces目录下的资源文件，例如我们在resouces目录下创建string文件
https://img-blog.csdnimg.cn/img_convert/4e314b5fd40d57f3074c67fbd257b03a.png
在其中写入：
“string”：[{
"name":"EntryAbility_lable",
"value":"lable"
}] 其中string代表数据范例，name代表该文件其中内容的名称，value则代表指定内容中值。接着，可以通过" $r('') "在Test组件中引用该数据，例如：
Test($r('app.string.EntryAbility_lable'))
.fontsize(50)
.fontColor('#ff2233') 结果如图：
https://img-blog.csdnimg.cn/img_convert/ed90746d42def78368bbd21e0efeffef.png
在其中又参加了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) 结果如图：
https://img-blog.csdnimg.cn/img_convert/a27b5f553fef119ec0145e23613d7fc4.png
在Button后的括号中可以写入表现在按钮上的文本，并通过width属性设置其大小，接着，我们可以通过形如
Button('button'，{type：ButtonType.Normal})
.width(100) 来设置按钮的形状，编译器会主动提示如下范例以供选择：
https://img-blog.csdnimg.cn/img_convert/1d12147b58aa1ead832ca269728985ea.png
包括圆形，矩形，圆角矩形等。
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) 结果如图：
https://img-blog.csdnimg.cn/img_convert/5ad738031da79310fcc88a2140f97e9d.png
Image组件有且只有一个参数，就是图片的数据源，代码示例是引用resouces目录下已下载的文件进行展示，接着通过width以及height属性对图片大小进行调整，使得页面变得协调。
最后
假如你想快速提拔鸿蒙技能，那么可以直接领取这份包含了：【OpenHarmony多媒体技能、Stage模子、ArkUI多端摆设、分布式应用开辟、音频、视频、WebGL、Napi组件、OpenHarmony内核、Harmony南向开辟、鸿蒙项目实战】等技能知识点。
鸿蒙Next全套VIP学习资料←点击领取！（安全链接，放心点击）
1.鸿蒙核心技能学习门路
https://img-blog.csdnimg.cn/direct/13731b7c7a2f4dc0a75b325ee7ceabf4.png
2.大厂口试必问口试题
https://img-blog.csdnimg.cn/direct/6a8d1476de8b4606adef673206366f64.png
3.鸿蒙南向开辟技能
https://img-blog.csdnimg.cn/direct/21bf9d9da77840fc9748768d594d232f.png
4.鸿蒙APP开辟必备
https://img-blog.csdnimg.cn/direct/339886a24c544fe4a2291e51c0250a77.png
5.HarmonyOS Next 最新全套视频教程
https://img-blog.csdnimg.cn/direct/59a9e8585c1e431babd3d87806dcbc24.png
6.鸿蒙生态应用开辟白皮书V2.0PDF
https://img-blog.csdnimg.cn/direct/8939d548a4e14cf79861d11af83ee11b.png
这份全套完备版的学习资料已经全部打包好，朋友们假如需要可以点击 鸿蒙Next全套VIP学习资料→免费领取（安全链接，放心点击）
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]