当前位置: 首页 > news >正文

【鸿蒙应用ArkTS开发系列】- 页面跳转及传参

先看下效果图

大致实现的功能点:

  1. 从Indext页面跳转到Second页面,传递两个参数,一个字符串,一个数量;
  2. Second获取Index页面传递的数据;
  3. Second页面点击返回弹窗;
  4. Second页面返回携带参数数据;
  5. Index获取Second页面回传数据。

下面我们一个一个讲解:

1、从Indext页面跳转到Second页面,并传递参数

 

import router from '@ohos.router';@Entry
@Component
struct Index {@State message: string = 'Index Page'@State fromSecondMessage: string  = ''build() {Column() {Column() {Text(`${this.message}`).width("300vp").height("60vp").textAlign(TextAlign.Center).fontSize("50fp").fontWeight(FontWeight.Normal)Button("Next").borderRadius("5vp").width("80%").height("50vp").margin({ top: "10vp" }).onClick(this.clickNext.bind(this))Text(this.fromSecondMessage).fontSize('20vp').textAlign(TextAlign.Center).margin({top:'10vp'})}.width("100%").height("100%").justifyContent(FlexAlign.Center)}.width("100%").height("100%")}clickNext() {router.pushUrl({url: "pages/Second",params: {name: '我是来自页面Index的数据',count: 100}}, router.RouterMode.Single)}
}

使用router 进行页面跳转,这里使用pushUrl进行页面跳转,除了pushUrl外,还可以使用replaceUrl进行页面替换,其中参数是RouterOptions对象,主要是url跟params,url是页面路径,params是传递数据,类型为object。

最后面参数是RouterMode.Single,

RouterMode9+

路由跳转模式。

系统能力: SystemCapability.ArkUI.ArkUI.Full。

名称

说明

Standard

标准模式。

目标页面会被添加到页面路由栈顶,无论栈中是否存在相同url的页面。

Single

单实例模式。

如果目标页面的url在页面栈中已经存在同url页面,离栈顶最近的页面会被移动到栈顶,移动后的页面为新建页。

如目标页面的url在页面栈中不存在同url页面,按标准模式跳转。

2、Second获取Index页面传递的数据

import router from '@ohos.router';@Entry
@Component
struct Second {@State message: string = 'Second Page'@State paramsFromIndex: object = router.getParams()build() {Row() {Column() {Text(this.message).margin({ top: "10vp" }).fontSize(50).fontWeight(FontWeight.Normal)Text(this.paramsFromIndex?.['name'] + ",count:" + this.paramsFromIndex?.['count']).margin({ top: "10vp" }).fontSize(20).fontWeight(FontWeight.Normal).margin({top:"10vp"})Button("Back").width("80%").height("50vp").margin({top:"10vp"})}.width('100%')}.height('100%')}}

使用router.getParams()获取Index页面传递的数据。

3、Second页面点击返回弹窗

router.enableBackPageAlert({message: "确认关闭当前页面吗?"})router.back()

调用enableBackPageAlert,触发返回询问弹窗,点击取消,不会触发back方法,点击确定,触发返回。

4、Second页面返回携带参数数据

router.back({url:'pages/Index',params: {src: "这是来自Second Page的数据"}})

5、Index获取Second页面回传数据

回到Index页面后怎么获取Second页面的回传数据呢,也是使用 router.getParams() 进行数据获取,那在什么时候函数里进行获取呢,可以跟Second页面中一样,使用

@State params: object = router.getParams()

这样定义获取吗,其实是不行的,重新回到Index页面后,上述代码并不会执行,这个时候我们应该在页面生命周期函数里进行获取。

  onPageShow() {this.fromSecondMessage = router.getParams()?.['src']}

本文到此结束。

相关文章:

【鸿蒙应用ArkTS开发系列】- 页面跳转及传参

先看下效果图 大致实现的功能点: 从Indext页面跳转到Second页面,传递两个参数,一个字符串,一个数量;Second获取Index页面传递的数据;Second页面点击返回弹窗;Second页面返回携带参数数据&#…...

StringBuilder 类

Java StringBuilder类是一个可变字符串缓冲区,它提供了丰富的方法可以方便地进行字符串操作。与Java StringBuffer类类似,Java StringBuilder类的主要作用是优化字符串的拼接操作,提高代码的效率。在本篇文章中,我们将详细介绍Jav…...

kubectl-k8s用户切换

kubernetes默认使用$HOME/.kube/config配置文件。可以在配置文件中定义多个USER和Cluster的上下文。所以就有两种方式切换用户同一个config中,切换不同用户上下文切换不同的config配置文件同config切换不同用户上下文查看config文件kubeconfig config view查看当前上…...

【面试题】三道面试题让你掌握JavaScript中的执行上下文与作用域以及闭包

前言大厂面试题分享 面试题库前后端面试题库 (面试必备) 推荐:★★★★★地址:前端面试题库大家好,笔者呢最近再回顾JavaScript知识时,又看到了JavaScript的一些较为常见的内容,仔细看了之后发现…...

计算机网络-- 应用层(day08)

计算机网络两种方式 网络应用程序运行再处于网络边缘的不同端系统上,通过彼此间的通信来共同完成某项任务。 开发一种新的网络应用首先要考虑的问题就是网络应用程序在各种端系统上的组织方式和它们之间的关系。 目前流行的主要有以下两种: 客户/服务器…...

English Learning - L2-5 英音地道语音语调 弹力双元音 [ɪə] [ʊə] [eə] 2023.03.6 周一

English Learning - L2-5 英音地道语音语调 弹力双元音 [ɪə] [ʊə] [eə] 2023.03.6 周一朗读节奏元音的长度元音发音在清辅音和浊辅音前的区别元音发音跟后面浊辅音节数的区别元音在重读音节中复习大小元音发音对比/ʌ/ 舌中音/ɒ/ 舌后音/ʊ/ 舌后音/ɪ/ 舌前音[ɑ:] VS […...

SpringBoot——统一功能处理

处理登陆拦截 上一片博客中讲到SpringAOP可以对页面进行拦截,我们可以用SpringAOP实现对登陆的拦截 但是由于拦截需要HttpSession对象,并且之后还需要页面重定向,因此在实际应用中,并不用SpringAOP进行登陆拦截,而是…...

ORACLE SQL格式化小数点

ORACLE SQL格式化小数点 select CONCAT(TO_CHAR(0.00100,‘990.999’),‘%’) as a0 , CONCAT(TO_CHAR(1100,‘990.999’),‘%’) as a1 , CONCAT(TO_CHAR(0.236100,‘990.999’),‘%’) as a2 , CONCAT(TO_CHAR(0.0200100,‘990.999’),‘%’) as a3 , CONCAT(TO_CHAR(1.0310…...

【信息学奥数】—— 第一部分 C++语言 知识总结

【信息学奥数】—— 第一部分 C语言 知识总结C语言一、C语言入门二、顺序结构程序设计运算符和表达式常量和变量标准数据类型数据输入输出三、控制结构程序设计if语句switch语句四、循环结构程序设计for语句while语句do-while语句五、数组一维数组二维数组字符数组六、函数七、…...

video层级过高,以及界面使用多个video时,在安卓APP上同时播放的问题(uniapp)

1、video层级过高的问题 问题一: 我的界面由于是自定义导航栏,所以使用video时,上滑界面video会直在最上层,盖着 头部导航栏 解决方法:使用cover-view,自定义头部使用cover-view替换view 问题二:自定义…...

C++基础了解-14-C++ 字符串

C 字符串 一、C 风格字符串 C 风格的字符串起源于 C 语言,并在 C 中继续得到支持。字符串实际上是使用 null 字符 \0 终止的一维字符数组。因此,一个以 null 结尾的字符串,包含了组成字符串的字符。 下面的声明和初始化创建了一个 RUNOOB …...

浅谈几种网络攻击及攻防原理

HTTP Flood攻击 https://zhuanlan.zhihu.com/p/337399808 HTTP Flood攻击是针对Web服务在第七层协议发起的攻击。第七层主要是应用层,是一些终端的应用,比如(各种文件下载)、浏览器、QQ等,可以将其理解为在电脑屏幕上可…...

Kafka消息中间件(Kafka与MQTT区别)

文章目录KafkaKafka重要原理Topic 主题Partition 分区Producer 生产者Consumer 消费者Broker 中间件Offset 偏移量Kafka与mqtt区别Kafka Kafka是一个分布式流处理平台,它可以快速地处理大量的数据流。Kafka的核心原理是基于发布/订阅模式的消息队列。Kafka允许多个…...

Go垃圾回收原理

术语介绍 赋值器:说白了就是你写的程序代码,在程序的执行过程中,可能会改变对象的引用关系,或者创建新的引用。 回收器:垃圾回收器的责任就是去干掉那些程序中不再被引用得对象。 STW:全称是stop the word,GC期间某个阶段会停止…...

Coredump-N: stack 空间被临时变量吃满,导致内存访问出现问题

文章目录 代码寄存器汇编代码 int main() {fun(0); #define S 0x0019fd08UL 、、 乘5 等0x81F128 char buff4[S]; char buff3[S]; char buff2[S]; char buff1[S]; char buff[S]; memset(buff, 0, sizeof(buff)); memset(buff4, 0, sizeof(buff)); memset(buff3, 0, sizeof(buf…...

GO中使用viper读取配置文件

文章目录 viper的使用例子一:例子二:viper的使用 ​ viper的源码地址https://github.com/spf13/viper,它是一个可以用来读取配置文件的工具。在项目中可以通过下面指令安装: go get github.com/spf13/viper​ 下面我们通过两个例子,来介绍一下viper在项目中应该如何使用…...

webpack dll 提升构建速度

DLL,动态链接库(Dynamic Link Library 或者 Dynamic-link Library),由微软公司提出。目的是为了节约应用程序所需的磁盘和内存空间。 在一个传统的非共享库中,如果两个程序调用同一个子程序,就会出现两份那…...

C++面向对象编程之三:初始化列表、类对象作为类成员、静态成员

初始化列表C提供了初始化列表语法,可以用于成员属性初始化。语法规则:无参构造函数():属性1(值1), 属性2(值2), ... { }有参构造函数(形参1, 形参2, ...):属性1(形参1), 属性2(形参2), ... { }example:写一个怪物类,有怪物id和血量…...

跨域问题解决方案

目录 1.同源策略 2.解决方案(后端) (1)在后端方法添加CrossOrigin (2)添加CORS过滤器 (3)实现WebMvcConfigure接口,重写addCorsMappings方法 3.解决方案(前端) (1)前端配置代理 1.同源策略 同源策略(Same origin policy)是一种约定&am…...

Vue3电商项目实战-购物车模块7【20-登录后-批量删除、21-登录后-选中状态修改数量、22-登录后-全选反选、23-登录后-修改规格、24-下单结算】

文章目录20-登录后-批量删除21-登录后-选中状态&修改数量22-登录后-全选反选23-登录后-修改规格24-下单结算20-登录后-批量删除 目标:完成批量删除选中商品,完成清空失效的商品 大概步骤: 完成cart.js模块中的批量删除actions的登录状态…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage)&#xff1a…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

Java 加密常用的各种算法及其选择

在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...