一、新建页面
1、页面目录 pages
在新建好的项目目录结构中，有一个pages 目录，用来保存当前模块中的所有页面文件，其中 Index.ets 是新建项目时自动创建的第一个页面。
后续我们需要创建新的页面，也会在该目录中进行新建。
2、创建新页面
右键点击“pages”目录，选择“New > Page > Empty Page”，输入页面名称后，点击“Finish”完成创建：
3、预览新页面
在“Previewer”预览器中，想要预览哪一个页面，就先打开该页面的文件，然后再点击“Previewer”打开预览器：
说明：新建页面的默认代码和初始页面的默认代码一样，所以预览出来的页面效果都是“Hello World”。
4、刷新页面
如果我们修改了页面中的代码，按下“ctrl + s”保存代码后，预览器会自动更新UI界面。如果预览器没有自动更新，我们也可以点击右上角的刷新按钮，来手动刷新。
二、页面路由
我们在应用新建的每一个页面，都会自动在 main_pages.json 文件中生成对应的页面路由配置（不需要手动添加）：
说明：如果在 pages 中删除了页面文件，那么也应该将 main_pages.json 中的页面路由配置一并删除（通常会自动删除）。
三、页面代码解析
ArkTS 是 HarmonyOS 应用开发的官方高级语言。
我们每次在 DevEco Studio 中新建页面，都会生成一个后缀为 .ets 文件，同时该文件中会有一段默认的初始 ArkTS 代码，如下：
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
RelativeContainer() {
Text(this.message)
.id('HelloWorld')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
}
.height('100%')
.width('100%')
}
}
这段代码主要由装饰器、自定义组件、系统UI组件以及属性方法等四部分组成。
1、装饰器
@Entry 、@Component 以及 @State 都是装饰器。
- @Component：表示当前装饰的 struct 结构，是一个自定义组件；
- @Entry：表示当前装饰的自定义组件，是一个页面类的组件（@Entry 通常都是搭配 @Component 一起使用，不会单独使用）；
- @State：用来定义组件内部状态（后续的学习中我们会做详细的讲解）
2、自定义组件
ArkTS 中通过 struct 搭配 @Component 来声明自定义组件：
@Component
struct Index {
build() {
}
}
其中：
@Component装饰器，表示当前代码结构是一个自定义组件；Index是组件名，可以根据需要自定义组件名，但是不能和系统内置组件名相同；build函数，用于定义组件的 UI 结构，自定义组件内必须定义build()函数；
3、系统UI组件
系统UI组件，就是 ArkUI 框架内置的一些页面 UI 组件，例如页面代码中的 RelativeContainer() 是相对布局 UI 组件，Text() 是文本 UI 组件：
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
RelativeContainer() {
Text(this.message)
}
}
}
4、属性方法
属性方法， 其实就是设置 UI 组件的样式，ArkTS 中是通过属性方法的形式来设置组件样式，例如 width() 和 height() 用来设置组件宽高，fontSize() 用来设置文字大小，fontWeight() 用来设置字体加粗效果：
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
RelativeContainer() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.height('100%')
.width('100%')
}
}
