OpenHarmony开发实战：Ability内页面间的跳转（ArkTS），银行软件测试面试题介绍本篇Codelab基

介绍

本篇Codelab基于Stage模型下的Ability开发，实现Ability内页面间的跳转和数据传递。

最终效果图如下：

环境搭建

软件要求

DevEco Studio版本：DevEco Studio 3.1 Release。
OpenHarmony SDK版本：API version 9。

硬件要求

开发板类型：润和RK3568开发板。
OpenHarmony系统：3.2 Release。

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：

获取OpenHarmony系统版本：标准系统解决方案（二进制）。以3.2 Release版本为例：

2. 搭建烧录环境。

完成DevEco Device Tool的安装
完成RK3568开发板的烧录
搭建开发环境。
开始前请参考工具准备，完成DevEco Studio的安装和开发环境配置。
开发环境配置完成后，请参考使用工程向导创建工程（模板选择“Empty Ability”）。
工程创建完成后，选择使用真机进行调测。

代码结构解读

本篇Codelab只对核心代码进行讲解，完整代码可以直接从gitee获取。

├──entry/src/main/ets // 代码区 │ ├──common │ │ ├──constants │ │ │ └──CommonConstants.ets // 公共常量类 │ │ └──utils │ │ └──Logger.ets // 日志类 │ ├──entryability │ │ └──EntryAbility.ets // 程序入口类 │ └──pages │ ├──IndexPage.ets // 入口页面 │ └──SecondPage.ets // 跳转页 └──entry/src/main/resources // 资源文件目录

页面跳转

在工程pages目录中，选中Index.ets，点击鼠标右键 > Refactor > Rename，改名为IndexPage.ets。改名后，修改工程entryability目录下EntryAbility.ets文件中windowStage.loadContent方法第一个参数为pages/IndexPage。

// EntryAbility.ets onWindowStageCreate(windowStage: Window.WindowStage): void { ... windowStage.loadContent('pages/IndexPage', (err, data) => { ... }); }

在工程pages目录中，点击鼠标右键 > New > Page，新建命名为SecondPage的page页。
从IndexPage页面跳转到SecondPage页面，并进行数据传递，需要如下几个步骤：

给两个页面导入router路由模块。
在IndexPage页面中给Button组件添加点击事件，使用router.pushUrl()方法将SecondPage页面路径添加到url中，params为自定义参数。
SecondPage页面通过router.getParams()方法获取IndexPage页面传递过来的自定义参数。IndexPage页面有一个Text文本和Button按钮，点击按钮跳转到下一个页面，并传递数据。IndexPage.ets代码如下：

// IndexPage.ets import router from '@ohos.router'; import CommonConstants from '../common/constants/CommonConstants';

@Entry @Component struct IndexPage { @State message: string = CommonConstants.INDEX_MESSAGE;

build() { Row() { Column() { Text(this.message) ... Blank() Button($r('app.string.next')) ... .onClick(() => { router.pushUrl({ url: CommonConstants.SECOND_URL, params: { src: CommonConstants.SECOND_SRC_MSG } }).catch((error: Error) => { Logger.info(TAG, 'IndexPage push error' + JSON.stringify(error)); }); }) } ... } ... } }

SecondPage页面有两个Text文本，其中一个文本展示从IndexPage页面传递过来的数据。SecondPage.ets代码如下：

// SecondPage.ets import router from '@ohos.router'; import CommonConstants from '../common/constants/CommonConstants';

@Entry @Component struct Second { @State message: string = CommonConstants.SECOND_MESSAGE; @State src: string = (router.getParams() as Record<string, string>)[CommonConstants.SECOND_SRC_PARAM];

build() { Row() { Column() { Text(this.message) ... Text(this.src) ... } ... } ... } }

页面返回

在SecondPage页面中，Button按钮添加onClick()事件。调用router.back()方法，实现返回上一页面的功能。

// SecondPage.ets Button($r('app.string.back')) ... .onClick(() => { router.back(); })

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

为了能够帮助大家快速掌握**鸿蒙（HarmonyOS NEXT）**应用开发技术知识。在此给大家分享一下我结合鸿蒙最新资料整理出来的鸿蒙南北向开发学习路线以及整理的最新版鸿蒙学习文档资料。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）**技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料****