鸿蒙操作系统中文（鸿蒙操作系统应用笔记211111A）

使用eTS语言开发简单的页面跳转示例

☀️说明：请使用开物室V3.0.0.601 Beta1及更高版本。使用模拟器运行时请选择API7及以上的设备。

一，创建ets工程。

☀️1，打开开物室，创建一个新工程，选择模板Empty Ability。

☀️2，进入配置工程界面，工程类型 选择Application，语言选择eTS，其他参数根据实际需要设置即可。

二，编写第一个页面。

☀️1，工程创建完成后，在工程窗口，点击“entry > src > main > ets > default > pages”，打开“index.ets”文件。

☀️2，第一个页面由Flex容器组件、Text组件和Button组件构成。在“index.ets”中编写并设置页面组件的属性和样式，示例代码如下所示：

@Entry

@Component

struct Index {

build() {

//Flex容器组件

Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

//Text组件

Text('Hello World')

.fontSize(60)

.fontWeight(500)

//Button组件

Button('Next')

.fontSize(40)

.fontWeight(500)

.width(280)

.height(60)

}

//容器整体宽高

.width('100%')

.height('100%')

}

}

三，创建跳转详情页面。

☀️1，在工程窗口，打开“entry > src > main > ets > default”，右键点击“pages”文件夹，选择“New > eTS Page”，命名为“details”，单击回车键。创建完成后，可以看到“pages”文件夹下的文件目录结构。

☀️2，详情页面由Flex容器组件、Text组件构成。在“details.ets”中编写并设置页面组件的属性和样式，示例代码如下所示：

@Entry

@Component

struct Details {

build() {

//Flex容器组件

Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

//Text组件

Text('Hi there')

.fontSize(60)

.fontWeight(500)

}

//容器整体宽高

.width('100%')

.height('100%')

}

}

四，实现页面跳转。

☀️1，打开第一个页面的“index.ets”文件，导入router模块，页面路由router根据页面的网址源来找到目标页面，从而实现跳转。示例代码如下：

//导入router模块

import router from '@system.router';

@Entry

@Component

struct Index {

build() {

//Flex容器组件

Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

//Text组件

Text('Hello World')

.fontSize(60)

.fontWeight(500)

//Button组件

Button('Next')

.fontSize(40)

.fontWeight(500)

.width(280)

.height(60)

//点击Button实现页面跳转

.onClick(() => {

router.push({ uri: 'pages/details' })

})

}

//容器整体宽高

.width('100%')

.height('100%')

}

}

五，使用预览器或模拟器运行项目，查看运行结果。恭喜你，至此成功完成了使用eTS语言开发简单的页面跳转示例。

,