HarmonyOS页面跳转实验：ArkTS登录跳转实操
一、实验目标
本实验作为HarmonyOS应用开发入门实验，将借助HarmonyOS工程创建后的初始代码为基础，在此进行简单代码修改，从而实现HarmonyOS页面跳转的实操练习。通过这个实验，我们可以熟悉开发工具的具体操作，为后续实验开展奠定基础。
二、实验场景
开发者尝试在一个新的HarmonyOS应用中，通过ArkTS语言构建并点击一个页面A（假设为登录页面），然后模拟跳转成功过程，进入下一个页面B（假设为登陆成功页面）。具体需要完成以下步骤：
· 成功创建HarmonyOS应用工程；
· 使用ArkTS语言构建两个应用界面方式；
· 实现登录页面跳转功能。
具体页面样式如下图所示：
三、实验步骤
1. 创建HarmonyOS项目工程
1. 打开DevEco Studio软件（请使用DevEco Studio 5.0.5.200及以上版本工具），点击"文件 > 新建 > 新建项目"，如下图所示：
2. 选择工程模板，根据工程创建向导，选择创建Application应用。选择"Empty Ability"模板，然后单击Next。
3. 配置项目工程信息，进入配置工程界面，Project name表示工程名称，此处可以设置为"Demo1_PageJump"；Compatible SDK表示兼容的最低API Version，此处以选择"6.0.1(21)"为例。建议参考图中参数设置：
4. 工程创建完成后，DevEco Studio会自动进行工程的同步操作，等待同步完成后便进入工程详情，进行应用开发。此时电脑必须联网，才可顺利完成工程的同步操作。结果如下图所示：
5. 工程创建完成会自动生成"Hello World"示例代码和相关资源。可以点击工具右侧预览器按钮，即可拉起预览器工具，展示示例代码页面。结果如下图所示：
2. 修改默认页面布局
1. 首先修改Index.ets中的文字显示内容，Text组件使用message变量用来存放组件所显示文本内容。因此，我们只需要修改message变量的值，即可改变Text文本的组件内容：
@State message: string = '登录页面'
2. 然后，清空build()函数内页面UI样式代码，添加下方具体代码：
// 自定义组件的UI构建入口方法 用于描述组件的UI结构
build() {
// 创建横向布局容器 子组件将按水平排列
Row() {
// 创建纵向布局容器 子组件将按垂直方向排列
Column() {
// 文本组件 绑定状态变量message，显示其内容
Text(this.message)
// 字体大小像素
.fontSize(40)
// 字体加粗
.fontWeight(FontWeight.Bold)
}
// 纵向布局容器100%宽度
.width('100%')
}
// 设置横向容器布局100%高度
.height('100%')
}
3. 在此基础上，添加一个Button组件，作为按钮响应用户点击，从而实现跳转到另一个页面。
// 添加按钮，以响应用户点击
Button('跳转')
.fontSize(30)//字体大小
.type(ButtonType.Normal)//按钮类型:Capsule胶囊(默认) Circle圆形 Normal普通
.margin({ top: 20 })//顶部外边距为20vp
.backgroundColor('#0D9FFB')//按钮背景色
.width('50%')//按钮宽度
.height(50)//按钮高度
3. 创建新的ArkTS Page页面
1. 在Pages文件夹下新建一个ArkTS File页面，选中Pages文件夹，右击新建->Page，选择"Empty Page"。
2. 输入Name为Second。系统自动生成Second.ets文件，并且自动配置成功第二个页面文件的路由。
3. 在"项目"窗口，打开"entry > src > main > resources > base > profile"，在main_pages.json文件中的"src"下可以查看第二个页面的路由"pages/Second"。
4. 完成第二个页面
1. 参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。"Second.ets"文件的代码如下
@Entry //此装饰器标记应用入口组件
@Component//此装饰器标记定义自定义组件
// 声明组件结构体
struct Second {
// 响应式状态变量：存储页面标题
@State message: string = '登录成功页面'
// UI构建入口方法
build() {
// 横向布局容器
Row() {
// 纵向布局容器
Column() {
// 页面标题文本
Text(this.message)
// 文本字号
.fontSize(40)
// 文本加粗
.fontWeight(FontWeight.Bold)
// 返回按钮
Button('返回')
// 按钮文字字号
.fontSize(30)
// 按钮为胶囊样式
.type(ButtonType.Capsule)
// 按钮顶部外边距
.margin({ top: 20 })
// 按钮背景色
.backgroundColor('#0D9FFB')
// 按钮宽度为父容器50%
.width('50%')
// 按钮高度
.height(50)
}//column{}
// 纵向容器宽度占满父容器
.width('100%')
}//row{}
// 横向容器高度占满父容器
.height('100%')
}//build{}
}//Struct{}5. 实现页面跳转
1. ArkTS页面间的跳转，可以通过页面路由router来实现，需要导入router模块。
2. 在Index.ets页面中，跳转按钮绑定onClick事件，点击按钮时跳转到Second.ets页面。
3. 打开Index.ets页面，定位Button按钮，如下添加onClick事件：
// 导入页面路由模块
import { router } from '@kit.ArkUI';
......
// 跳转按钮绑定onClick事件，点击时跳转到第二页
.onClick(() => {
// 跳转到第二页
router.pushUrl({ url: 'pages/Second' })
})
4. 打开Second.ets页面，定位Button按钮，如下添加onClick事件：
// 导入页面路由模块
import { router } from '@kit.ArkUI';
......
// 跳转按钮绑定onClick事件，点击时跳转到第二页
.onClick(() => {
router.back()//导入router包 点击返回按钮回到第一页
})
6. 跳转升级
观察router包下的方法都画了删除线，说明router跳转的方法已不再维护。现在我们使用推荐的方法再完成一次页面跳转。
具体API请参考Class (Router)-@ohos.arkui.UIContext (UIContext)-UI界面-ArkTS API-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者
1. 打开Index.ets页面，定位Button按钮的onClick事件，如下修改：
.onClick(()=>{
//router.pushUrl({url:'pages/Second'})
//替换harmony推荐路由方式(Router类)
this.getUIContext().getRouter()
.pushUrl({url:'pages/Second'})
})
2. 打开Second.ets页面，定位Button按钮的onClick事件，如下修改：
.onClick(()=>{
//导入router包 点击返回按钮回到第一页
//router.back()
//不导入router包 替换harmony推荐路由方式(Router类)
//注意：使用getUIContext属性方法在API12及以后版本才能使用
this.getUIContext().getRouter().back()
})
3. API12及以后Harmony推荐使用Router类替代router包
四、实验结果
点击Index.ets页面的跳转按钮，跳转到Second.ets页面，点击返回按钮，再次跳转回首页。
