HarmonyOS ArkUI实战开发-页面跳转(Router、Ability)

页面跳转可以分为页面内跳转和页面间跳转,页面内跳转是指所跳转的页面在同一个 Ability 内部,它们之间的跳转可以使用 Router 或者 Navigator 的方式;页面间跳转是指所跳转的页面属与不同的 Ability ,这种跳转需要借助 featureAbility 实现,跳转示意图如下所示:

本节将简单介绍这两种方式的页面跳转。

页面内跳转

页面内跳转的实现比较简单,直接使用ArkUI开发框架提供的 Router 或者 Navigator 就可以了, Navigator 本质上是对 Router 的封装,这里就简单介绍一下 Router 的使用,想了解 Navigator 的小伙伴请参考官网文档。

router定义介绍

declare namespace router {function push(options: RouterOptions):void;function replace(options: RouterOptions):void;function back(options?: RouterOptions ):void;function clear():void;function getLength():string;function getState():RouterState;function enableAlertBeforeBackPage(options: EnableAlertOptions):void;function disableAlertBeforeBackPage():void;function getParams(): Object;
}
  • push:打开新的页面,新页面在栈顶位置, RouterOptions 定义了以下参数:
    • url:目标页面的路径,该路径必须在 config.json 的 pages 下配置,否则不起作用。
    • params:可选参数,向目标页面传递参数。
  • replace:新页面替换当前页面并把当前页面销毁。
  • back:返回上一页。
  • clear:清空路由栈里的其它页面。
  • getLength:获取当前路由栈里的页面数量。
  • getState:获取当前页面的状态, RouterState参数说明如下:
    • index:当前页面是第几个打开的。
    • path:当前页面的路径。
    • name:当前页面的名称。
  • enableAlertBeforeBackPage
  • disableAlertBeforeBackPage
  • getParams:获取通过路由传递过来的参数。

router使用介绍

  • 引入router

    使用 router 之前,先要引入 router ,引入方式如下:

    import router from '@ohos.router';
  • 页面跳转

    页面跳转使用 router.push 方法,简单样例如下所示:

    // 第一个页面@Entry @Component struct ComponentTest {build() {Column({space: 10}) {Text('第一个页面').fontSize(30).width('100%').textAlign(TextAlign.Center)Button('打开下一页').onClick(() => {router.push({          // 使用push入栈一个新页面url: "pages/second"  // 通过url指定新打开的页面})})}.size({width: '100%', height: '100%'})}}// 第二个页面@Entry @Component struct Second {build() {Column({space: 10}) {Text('第二个页面').fontSize(30).width('100%').textAlign(TextAlign.Center)Button('返回上一页').onClick(() => {router.back(); // 返回上一页,当前页面会销毁})}.size({width: '100%', height: '100%'})}}
  • 参数传递

    当通过 router 打开新页面需要传递参数时,可以使用 RouterOptions 的 params 参数传递一个对象,然后在接收方以 router.getParams() 的方式拿到传递过来的对象,取值的话以 .key 的形式取值(注意:从 3.1.6.5 版本起,取值方式变更为 ['key'] 的形式),样例如下:

    // 第一个页面@Entry @Component struct ComponentTest {build() {Column({space: 10}) {Text('第一个页面').fontSize(30).width('100%').textAlign(TextAlign.Center)Button('打开下一页').onClick(() => {router.push({url: "pages/second",  // 打开新页面params: {value: 'Hi'} // 给新页面传递一个对象,key为value,取值以.value的形式})})}.size({width: '100%', height: '100%'})}}// 第二个页面@Entry @Component struct Second {// 3.1.5.5版本之前,取值方式为:router.getParams().keyprivate value: string = router.getParams().value;// 从3.1.6.5版本起,取值方式为:router.getParams()['key']private value: string = router.getParams()['value'];build() {Column({space: 10}) {Text('第二个页面:' + this.value) // 使用获取过来的参数.fontSize(30).width('100%').textAlign(TextAlign.Center)Button('返回上一页').onClick(() => {router.back();              // 返回上一页})}.size({width: '100%', height: '100%'})}}

📢:感谢 lx2323658175 (opens new window)指出 3.1.6.5 版本 router 的取值方式做了变更,笔者写该电子书时使用的 SDK 版本为 3.1.5.5,该版本的取值方式为 router.getParams().key 的形式,从 3.1.6.5 版本起,取值方式变更为:router.getParams()[‘key’] 的形式,特此说明。

页面间跳转

页面间跳转需要借助 featureAbility 模块的 startAbility() 方法,该方法和 router 的功能类似,可以支持参数传递以及打开指定页面等。

featureAbility定义介绍

declare namespace featureAbility {/**省略部分方法*/function startAbility(parameter: StartAbilityParameter, callback: AsyncCallback<number>): void;function startAbility(parameter: StartAbilityParameter): Promise<number>;function startAbilityForResult(parameter: StartAbilityParameter, callback: AsyncCallback<AbilityResult>): void;function startAbilityForResult(parameter: StartAbilityParameter): Promise<AbilityResult>;
}
  • startAbility:打开指定 Ability ,在不指定开目标 Ability 里的页面时,则默认打开 Ability 的第一个页面。
    • parameter:设置打开 Ability 的参数,说明如下:
      • want:打开目标 Ability 的配置项。
        • bundleName:目标 Ability 的包名称。
        • abilityName:目标 Ability 的全路径。
        • params:传递给目标 Ability 的参数。可以在该参数里指定需要打开的页面。

打开Ability的默认首页面

  1. 创建第二个 Ability ,依次点击 File -> new -> Ablity -> Empty Page Ability(eTS) ,添加 SettingAbility ,如下图所示:

点击 Finish 后, OpenHarmony 代码结构如下图所示:

  1. 在 default 的 pages 下的 index.ets 添加跳转功能:引入 featureAbility 模块,然后通过 featureAbility 的 startAbility() 方法打开目标 Ability。
    // 引入featureAbilityimport featureAbility from '@ohos.ability.featureAbility';@Entry @Component struct Index {build() {Column() {Button('open about ability').onClick(() => {// 打开目标AbilityfeatureAbility.startAbility({want: {// 目标Ability所在的bundleName,也就是config.json里配置的bundleNamebundleName: "com.example.myapplication",// 目标Ability的全路径abilityName: "com.example.myapplication.SettingAbility"}}).then((data) => {console.info('Operation successful. Data: ' + JSON.stringify(data))}).catch((error) => {console.error('Operation failed. Cause: ' + JSON.stringify(error));})})}.padding(10).width('100%').height('100%')}}
  1. 修改SettingAbility的默认首页面,添加如下文案:
    @Entry @Component struct Index {build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Text('我是SettingAbility的默认首页面').fontSize(50).fontWeight(FontWeight.Bold)}.width('100%').height('100%')}}

打开Ability的指定页面

  1. 在 SettingAbility 的 pages 下添加第二个页面:second.ets,代码如下所示:
    @Entry @Component struct Second {build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Text('你好,我是SettingAbility的第二个页面').fontSize(50).fontWeight(FontWeight.Bold)}.width('100%').height('100%')}}
  1. 修改打开 Ability 的代码,添加 url 参数,代码如下:
    featureAbility.startAbility({want: {bundleName: "com.example.myapplication",abilityName: "com.example.myapplication.SettingAbility",// 添加uri参数,指定打开SettingAbility下的second页面。uri: "pages/second"}}).then((data) => {console.info('Operation successful. Data: ' + JSON.stringify(data))}).catch((error) => {console.error('Operation failed. Cause: ' + JSON.stringify(error));})

小结

本节简单介绍了页面内和页面间的跳转方法以及在跳转过程中的参数传递和取值,另外请读者看一个场景:从不同的页面跳转到B页面,但是B页面需要登录才可以跳转,一般做法是在打开B页面时判断是否登录,如果登录了直接跳转B页面否则跳转登录页面去登录,登录成功后再跳转B页面。

码牛课堂也为了积极培养鸿蒙生态人才,让大家都能学习到鸿蒙开发最新的技术,针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群,整理了一套纯血版鸿蒙(HarmonyOS Next)全栈开发技术的学习路线。大家可以进行参考学习:https://qr21.cn/FV7h05

①全方位,更合理的学习路径
路线图包括ArkTS基础语法、鸿蒙应用APP开发、鸿蒙能力集APP开发、次开发多端部署开发、物联网开发等九大模块,六大实战项目贯穿始终,由浅入深,层层递进,深入理解鸿蒙开发原理!

②多层次,更多的鸿蒙原生应用
路线图将包含完全基于鸿蒙内核开发的应用,比如一次开发多端部署、自由流转、元服务、端云一体化等,多方位的学习内容让学生能够高效掌握鸿蒙开发,少走弯路,真正理解并应用鸿蒙的核心技术和理念。

③实战化,更贴合企业需求的技术点
学习路线图中的每一个技术点都能够紧贴企业需求,经过多次真实实践,每一个知识点、每一个项目,都是码牛课堂鸿蒙研发团队精心打磨和深度解析的成果,注重对学生的细致教学,每一步都确保学生能够真正理解和掌握。

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:https://qr21.cn/FV7h05

如何快速入门:

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题(含参考答案):https://qr21.cn/FV7h05

大厂鸿蒙面试题::https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/1959.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java练习题

打印9*9乘法口诀表 解析&#xff1a;利用for循环解决 代码如图所示&#xff1a; public class Cc {public static void main(String[] args) {for (int i 1; i < 10; i){ //从1遍历到9 for(int j 1; j < i; j){ System.out.print(j "*" i "&…

Docker pull镜像名称 把本地镜像推送到远程详解

Docker pull镜像名称 把本地镜像推送到远程详解&#xff1a; Docker 镜像 仓库 容器介绍 以及镜像仓库详解 下载一个alpine的镜像演示&#xff0c;alpine是一个比较小的的linux镜像。 docker pull alpinedocker tag d4ff818577bc docker.io/itying/alpine:v1.0.1docker tag d4…

【CSS】使用 scroll snap 实现页面的垂直大屏滚动

CSS 属性 scroll-snap-type 设置了在有滚动容器的情形下吸附至吸附点的严格程度。 scroll-snap-type 使用 scroll snap 也可以用于垂直滚动&#xff0c;全屏展示就是一个很好的例子: <main><section class"section section-1"></section><sect…

Android驱动开发之如何编译和更换内核

编译内核可以使用图形化的界面配置,也可以直接使用脚本。在X86_64模拟器环境下,不用交叉编译,而交叉编译工具很容易出现兼容问题,一般也只能使用芯片厂商提供的工具,而不是GNU提供的工具。 android内核开发流程以及架构变化了很多,详情请看 内核官网 内核版本选择 由…

keil把c语言函数转成汇编

汇编可以让开发人员从根源上理解程序的运行逻辑&#xff0c;本文介绍如何在keil环境下如何把一个c文件中的某一个函数&#xff0c;转换为汇编函数&#xff0c;并编译运行。 右击某个c文件&#xff0c;选择Option for File。。。 图1 然后把下图中的Generate Assembler SRC Fi…

DDP、pytorch的分布式 torch.distributed.launch 训练说明

0、DDP的运行原理 执行步骤&#xff1a; 将data分为多个不同的batch&#xff0c;每个gpu得到batch都是不一样的然后将每个batch放在每个gpu上独立的执行最后得到的梯度求平均将平均梯度平分给每个gpu执行下一次迭代 这也就意味着你有多少个gpu&#xff0c;训练的速度也会提升…

数据结构与算法解题-20240422

这里写目录标题 一、2. 两数相加二、67. 二进制求和三、415. 字符串相加四、LCS 01. 下载插件五、71. 简化路径 一、2. 两数相加 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 …

uniapp——授权报错,选择合适的基础库

说明 我的小程序开发版本点击选择头像报错 更换基础库就好了

发布自己的Docker镜像到DockerHub

学会了Dockerfile生成Docker image 之后&#xff0c;如何上传自己的镜像到 DockerHub呢&#xff1f;下面我以自己制作的 bs-cqhttp 镜像为例&#xff0c;演示一下如何将自己的镜像发布到 Docker 仓库。 1 生成自己的 Docker 镜像 1.1 实例镜像用到的文件 图1 实例镜像制作用到…

vue 请求php接口 header 传自定义参数 提示cors 跨域问题

前端地址 http://192.168.0.125:4021 请求后端地址的时候报 from origin http://192.168.0.125:4021 has been blocked by CORS policy: Request header field userid is not allowed by Access-Control-Allow-Headers in preflight response. 大概意思是请求 header里有个…

3Darray 修改array值然后保存图片

from PIL import Image import numpy as np img_path ./000001.jpg # 读取图片 image Image.open(img_path) width, height image.size print("图片的宽度为{},高度为{}".format(width,height)) print("图片的mode为{}".format(image.mode)) print(&quo…

指针专题(4)【qsort函数的概念和使用】

1.前言 上节我们学习了指针的相关内容&#xff0c;本节我们在有指针的基础的条件下学习一下指针的运用&#xff0c;那么废话不多说&#xff0c;我们正式进入今天的学习 2.回调函数 我们既然已经学习了指针的相关基础&#xff0c;那么我们此时就可以用指针来实现回调函数 而回…

Linux学习之HTTP

引言&#xff1a;了解到了协议的定制&#xff0c;我们就知道在进行客户端与服务端通信时&#xff0c;对于报文的封装协议的定制是必不可少的&#xff0c;虽说协议是我们自己定制&#xff0c;但是有大佬们直接为我们写了一套完整的&#xff0c;可靠的协议&#xff0c;例如http协…

Python | Leetcode Python题解之第32题最长有效括号

题目&#xff1a; 题解&#xff1a; class Solution:def longestValidParentheses(self, s: str) -> int:stack[]maxL0nlen(s)tmp[0]*n #标记数组cur0for i in range(n):if s[i](:stack.append(i)else:if stack:jstack.pop()if s[j](:tmp[i],tmp[j]1,1 #匹配成…

cookie-editor 管理您的 cookie

Cookie-Editor - 适用于 Chrome、Firefox、Safari、Edge 和 Opera 的安全 cookie 编辑器https://cookie-editor.com/ Cookie-Editor 是一个专注于生产力的浏览器扩展&#xff0c;可帮助您以尽可能少的点击次数管理您的 cookie。 您最多只需点击三次&#xff0c;即可访问当前页…

龙迅LT8618SXB TTL /BT656/BT601/BT1120桥接到HDMI 1.4,低功耗HDMI1.4发射机

龙迅LT8618SXB描述&#xff1a; LT8618SX是Lontium基于ClearEdgeTM技术的低功耗版本HDMI发射机。它支持24位颜色深度HDMI1.4&#xff08;高清多媒体接口&#xff09;规范。它们完全向后兼容Lontium的第一代HDMI发射机LT8618EX。LT8618SX是一款高性能、低功耗的部件&#xff0c…

2W 隔离宽范围输入,单输出 DC/DC 电源模块——TP2L-2W 系列

TP2L-2W系列是一款高性能、超小型的电源模块&#xff0c;宽范围2&#xff1a;1输入&#xff0c;输出有稳压和连续短路保护功能&#xff0c;隔离电压为1.5KVDC、3KVDC&#xff0c;工作温度范围为–40℃到85℃。特别适合对输出电压的精度有严格要求的地方&#xff0c;外部遥控功能…

【STM32】嵌入式实验二 GPIO 实验:数码管

实验内容&#xff1a; 编写程序&#xff0c;在数码管上显示自己的学号。 数码管相关电路&#xff1a; PA7对应的应该是段码&#xff0c;上面的图写错了。 注意&#xff1a;选中数码管是低电平选中&#xff1b;并且用74HC595模块驱动输出的段码&#xff0c; 这个模块的学习可以…

JAVA基础之垃圾收集器

一 JVM垃圾收集 分代收集思想 当前虚拟机的垃圾收集一般采用分代收集算法&#xff0c;这种算法本身没有创新性&#xff0c;只是根据对象存活周期的不同将内存分为几块。一般将java堆内存分为新生代和老年代&#xff0c;这样我们就可以根据不同年龄到的特点选择不同的垃圾收集…

学之思考试系统环境启动QA

学之思考试系统环境启动Q&A 目录 学之思考试系统环境启动Q&A后台代码启动失败:前台代码启动失败常见解决方式参考资料后台代码启动失败: 后端代码启动不成功,不能够自动导入maven,配置依赖; 使用idea打开到:\xzs-master\xzs-mysql-master\source\xzs这个路径下;…