HarmonyOS NEXT开发进阶(七):页面跳转

文章目录

    • 一、前言
    • 二、页面跳转
    • 三、页面返回
    • 四、页面返回前增加确认对话框
      • 4.1 系统的默认询问框
      • 4.2 自定义询问框
    • 五、拓展阅读

一、前言

APP开发过程中,多页面跳转场景十分常见,例如,登录 -> 首页 -> 个人中心。在鸿蒙开发中,页面间的跳转被称作为“页面路由”。

HarmonyOS提供了Router模块,通过不同的url地址,可以方便地进行页面路由,轻松地访问不同的页面。

二、页面跳转

页面跳转是开发过程中的一个重要组成部分。在使用应用程序时,通常需要在不同的页面之间跳转,有时还需要将数据从一个页面传递到另一个页面。下面是一个页面跳转的简单示例:

在这里插入图片描述

Router模块提供了两种跳转模式,分别是router.pushUrl()router.replaceUrl()。这两种模式决定了目标页是否会替换当前页。

  • router.pushUrl():目标页不会替换当前页,而是压入页面栈。这样可以保留当前页的状态,并且可以通过返回键或者调用router.back()方法返回到当前页。

  • router.replaceUrl():目标页会替换当前页,并销毁当前页。这样可以释放当前页的资源,并且无法返回到当前页。

需要注意的是:页面栈的最大容量为 32 个页面。如果超过这个限制,可以调用router.clear()方法清空历史页面栈,释放内存空间。

另外,Router模块提供了两种实例模式,分别是StandardSingle。这两种模式决定了目标url是否会对应多个实例。

  • Standard:标准实例模式,也是默认情况下的实例模式。每次调用该方法都会新建一个目标页,并压入栈顶。

  • Single:单实例模式。即如果目标页的url在页面栈中已经存在同url页面,则离栈顶最近的同url页面会被移动到栈顶,并重新加载;如果目标页的url在页面栈中不存在同url页面,则按照标准模式跳转。

在使用页面路由Router相关功能之前,需要在代码中先导入Router模块。

import router from '@ohos.router';

示例场景一:有一个主页(Home)和一个详情页(Detail),希望从主页点击一个商品,跳转到详情页。同时,需要保留主页在页面栈中,以便返回时恢复状态。这种场景下,可以使用pushUrl()方法,并且使用Standard实例模式(或者省略)。

// 在Home页面中
function onJumpClick(): void {router.pushUrl({url: 'pages/Detail' // 目标url}, router.RouterMode.Standard, (err) => {if (err) {console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);return;}console.info('Invoke pushUrl succeeded.');});
}

示例场景二:有一个登录页(Login)和一个个人中心页(Profile),希望从登录页成功登录后,跳转到个人中心页。同时,销毁登录页,在返回时直接退出应用。这种场景下,可以使用replaceUrl()方法,并且使用Standard实例模式(或者省略)。

// 在Login页面中
function onJumpClick(): void {router.replaceUrl({url: 'pages/Profile' // 目标url}, router.RouterMode.Standard, (err) => {if (err) {console.error(`Invoke replaceUrl failed, code is ${err.code}, message is ${err.message}`);return;}console.info('Invoke replaceUrl succeeded.');})
}

示例场景三:有一个设置页(Setting)和一个主题切换页(Theme),希望从设置页点击主题选项,跳转到主题切换页。同时,需要保证每次只有一个主题切换页存在于页面栈中,在返回时直接回到设置页。这种场景下,可以使用pushUrl()方法,并且使用Single实例模式。

// 在Setting页面中
function onJumpClick(): void {router.pushUrl({url: 'pages/Theme' // 目标url}, router.RouterMode.Single, (err) => {if (err) {console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);return;}console.info('Invoke pushUrl succeeded.');});
}

示例场景四:有一个搜索结果列表页(SearchResult)和一个搜索结果详情页(SearchDetail),希望从搜索结果列表页点击某一项结果,跳转到搜索结果详情页。同时,如果该结果已经被查看过,则不需要再新建一个详情页,而是直接跳转到已经存在的详情页。这种场景下,可以使用replaceUrl()方法,并且使用Single实例模式。

// 在SearchResult页面中
function onJumpClick(): void {router.replaceUrl({url: 'pages/SearchDetail' // 目标url}, router.RouterMode.Single, (err) => {if (err) {console.error(`Invoke replaceUrl failed, code is ${err.code}, message is ${err.message}`);return;}console.info('Invoke replaceUrl succeeded.');})
}

以上讨论的场景都是直接跳转的场景,页面之间并没有实现数据传递。

如果页面间需要在跳转时传递数据至目标页,则可以在调用Router模块的方法时,添加param属性,并指定一个对象为参数,例如:

class DataModelInfo {age: number;
}
class DataModel {id: number;info: DataModelInfo;
}
function onJumpClick(): void {// 在Home页面中let paramsInfo: DataModel = {id: 123,info: {age: 20}};router.pushUrl({url: 'pages/Detail', // 目标urlparams: paramsInfo // 添加params属性,传递自定义参数}, (err) => {if (err) {console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);return;}console.info('Invoke pushUrl succeeded.');})
}

在目标页中,可以通过调用Router模块的getParams()方法来获取传递过来的参数。例如:

const params = router.getParams(); // 获取传递过来的参数对象
const id = params['id']; // 获取id属性的值
const age = params['info'].age; // 获取age属性的值

三、页面返回

当用户在一个页面完成操作后,通常需要返回到上一个页面或者指定页面,这就需要用到页面返回功能。在返回的过程中,可能需要将数据传递给目标页,这就需要用到数据传递功能。

在这里插入图片描述

与页面跳转类似,在使用页面路由Router相关功能之前,需要在代码中先导入Router模块。

import router from '@ohos.router';

示例场景一:直接返回到上一个页面,那实现代码则可以是:

router.back();

这种方式会返回到上一个页面,即上一个页面在页面栈中的位置。但是,上一个页面必须存在于页面栈中才能够返回,否则该方法将无效。

示例场景二:返回到指定的页面

router.back({url: 'pages/Home'
});

这种方式可以返回到指定页面,需要指定目标页的路径。目标页必须存在于页面栈中才能够返回。

示例场景三:返回到指定页面,并传递自定义参数信息。

router.back({url: 'pages/Home',params: {info: '来自Home页'}
});

这种方式不仅可以返回到指定页面,还可以在返回的同时传递自定义参数信息。这些参数信息可以在目标页中通过调用router.getParams()方法进行获取和解析。

如果返回时传递了自定义参数到返回的页面,那返回的目标怎么获取传递过来的参数呢?

在目标页中,在需要获取参数的位置调用router.getParams()方法即可,例如在onPageShow()生命周期回调中:

onPageShow() {const params = router.getParams(); // 获取传递过来的参数对象const info = params['info']; // 获取info属性的值
}

注意⚠️: 当使用router.back()方法返回到指定页面时,原栈顶页面(包括)到指定页面(不包括)之间的所有页面栈都将从栈中弹出并销毁。

另外,如果使用router.back()方法返回到原来的页面,原页面不会被重复创建,因此使用@State声明的变量不会重复声明,也不会触发页面的aboutToAppear()生命周期回调。如果需要在原页面中使用返回页面传递的自定义参数,可以在需要的位置进行参数解析。例如,在onPageShow()生命周期回调中进行参数解析。

四、页面返回前增加确认对话框

在开发应用时,为了避免用户误操作或者丢失数据,有时候需要在用户从一个页面返回到另一个页面之前,弹出一个询问框,让用户确认是否要执行这个操作。

接下来将从系统默认询问框和自定义询问框两个方面来介绍如何实现页面返回前增加一个询问框的功能。

4.1 系统的默认询问框

为了实现这个功能,可以使用页面路由Router模块提供的两个方法:router.showAlertBeforeBackPage()router.back()来实现这个功能。具体怎么做呢?

import router from '@ohos.router';

实现默认询问框,代码如下:​​​​​​​

// 定义一个返回按钮的点击事件处理函数
function onBackClick(): void {// 调用router.showAlertBeforeBackPage()方法,设置返回询问框的信息try {router.showAlertBeforeBackPage({message: '您还没有完成点赞关注,确定要返回吗?' // 设置询问框的内容});} catch (err) {console.error(`Invoke showAlertBeforeBackPage failed, code is ${err.code}, message is ${err.message}`);}// 调用router.back()方法,返回上一个页面router.back();
}

其中,router.showAlertBeforeBackPage()方法接收一个对象作为参数,该对象包含以下属性:

  • messagestring类型,表示询问框的内容。

如果调用成功,则会在目标界面开启页面返回询问框;如果调用失败,则会抛出异常,并通过err.codeerr.message获取错误码和错误信息。

当用户点击“返回”按钮时,会弹出确认对话框,询问用户是否确认返回。选择“取消”将停留在当前页目标页;选择“确认”将触发router.back()方法,并根据参数决定如何执行跳转。

4.2 自定义询问框

自定义询问框的方式,可以使用弹窗或者自定义弹窗实现。这样可以让应用界面与系统默认询问框有所区别,提高应用的用户体验度。本文以弹窗为例,介绍如何实现自定义询问框。

在事件回调中,调用弹窗的promptAction.showDialog()方法:​​​​​​​

import router from '@ohos.router';
import promptAction from '@ohos.promptAction';
@Entry
@Component
struct SecondPage {@State message: string = 'Hello World'onBackPress() {// 弹出自定义的询问框promptAction.showDialog({message: '您还没有完成点赞关注,确定要返回吗?',buttons: [{text: '取消',color: '#FF0000'},{text: '确认',color: '#0099FF'}]}).then((result) => {if (result.index === 0) {// 用户点击了“取消”按钮console.info('User canceled the operation.');} else if (result.index === 1) {// 用户点击了“确认”按钮console.info('User confirmed the operation.');// 调用router.back()方法,返回上一个页面router.back();}}).catch((err) => {console.error(`Invoke showDialog failed, code is ${err.code}, message is ${err.message}`);})return true;}build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

当用户点击“返回”按钮时,会弹出自定义的询问框,询问用户是否确认返回。选择“取消”将停留在当前页目标页;选择“确认”将触发router.back()方法,并根据参数决定如何执行跳转。

示意效果如下:

在这里插入图片描述
注⚠️:路由跳转中的url维护在profile/main_pages.json中。

在这里插入图片描述

五、拓展阅读

  • 《鸿蒙官网》
  • 《API参考》

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

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

相关文章

【Python】第一弹---解锁编程新世界:深入理解计算机基础与Python入门指南

✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】【MySQL】【Python】 目录 1、计算机基础概念 1.1、什么是计算机 1.2、什么是编程 1.3、编程语言有哪些 2、Python 背景知识 2.…

LeetCode:131. 分割回文串

跟着carl学算法,本系列博客仅做个人记录,建议大家都去看carl本人的博客,写的真的很好的! 代码随想录 LeetCode:131. 分割回文串 给你一个字符串 s,请你将 s 分割成一些子串,使每个子串都是回文串。返回 s 所…

优化神马关键词排名原理(优化神马搜索引擎关键词排名规则)

优化神马(即百度)关键词排名的原理主要基于搜索引擎的算法和用户体验的考量。以下是一些关键的优化原理: 一、搜索引擎算法 网页重要性评估: 搜索引擎通过复杂的算法评估网页的重要性和权威性,如基于PageRank的评估方…

学习threejs,使用FlyControls相机控制器

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.FlyControls 相机控制…

Vue 3前端与Python(Django)后端接口简单示例

项目 后端(Django)前端(Vue 3) 后端(Django) 创建Django项目和应用: 确保你已经安装了Django。如果没有安装,可以使用以下命令安装: pip install django创建一个新的Dja…

MCP Server开发的入门教程(python和pip)

使用python技术栈开发的简单mcp server 需要安装 MCP server的需要使用python-sdk,python需要 3.10,安装如下 pip install mcpPS: MCP官方使用的是uv包管理工具,我平时使用pip比较多,所以文中以pip为主。因为mcp的一些依赖包版本并不是最新的,所以最好弄一个干净的环境…

Spark vs Flink分布式数据处理框架的全面对比与应用场景解析

1. 引言 1.1 什么是分布式数据处理框架 随着数据量的快速增长,传统的单机处理方式已经无法满足现代数据处理需求。分布式数据处理框架应运而生,它通过将数据分片分布到多台服务器上并行处理,提高了任务的处理速度和效率。 分布式数据处理框…

隐私计算,构建安全的未来数据空间

大数据产业创新服务媒体 ——聚焦数据 改变商业 在医疗领域,不同医院之间需要共享患者数据,以提供更全面准确的诊断和治疗方案。 传统的数据处理方式通常是数据经过转换隐藏重要数据后再进行分析,虽然可以保护数据隐私,但在数据源…

PID控制器 (Proportional-Integral-Derivative Controller) 算法详解及案例分析

PID控制器 (Proportional-Integral-Derivative Controller) 算法详解及案例分析 目录 PID控制器 (Proportional-Integral-Derivative Controller) 算法详解及案例分析1. 引言2. PID控制器的基本概念2.1 PID控制器的定义2.2 PID控制器的核心思想2.3 PID控制器的应用领域3. PID控…

rtthread学习笔记系列(3) -- FINSH模块

文章目录 3. FINSH模块3.1MSH3.1.1初始化3.1.1.1FSymtab段3.1.1.2 宏 3.1.2遍历FINSH命令3.1.3TAB补全实现3.1.3.1 msh_auto_complete3.1.3.2 msh_opt_auto_complete 3.1.4 TAB 子选项自动补全 3.2 SHELL3.2.1 finsh_system_init分配finsh结构体使用内存3.2.2 finsh_thread_ent…

Redis 知识速览

文章目录 1. Redis 简介2. Redis 优缺点3. Redis 高性能4. Redis VM 机制5. Redis 数据类型6. 应用场景7. 持久化8. 过期策略9. 内存相关10. 线程模型11. 事务12. 集群 1. Redis 简介 定义:Redis 是一个用 C 语言编写的高性能非关系型(NoSQL&#xff09…

nginx-lua缓存机制

一. 简述: 缓存是一个大型系统中非常重要的一个组成部分。在硬件层面,大部分的计算机硬件都会用缓存来提高速度,比如CPU会有多级缓存、RAID卡也有读写缓存。在软件层面,我们用的数据库就是一个缓存设计非常好的例子,在…

Java 面试中的高频算法题详解

💖 欢迎来到我的博客! 非常高兴能在这里与您相遇。在这里,您不仅能获得有趣的技术分享,还能感受到轻松愉快的氛围。无论您是编程新手,还是资深开发者,都能在这里找到属于您的知识宝藏,学习和成长…

【Python项目】手写数字识别系统

【Python项目】手写数字识别系统 技术简介:采用Python技术、Django框架、MYSQL数据库等实现。 系统简介:手写数字识别系统主要的功能有手写字识别、手写字管理、修改密码、个人信息和用户管理。 背景: 在当今这个飞速发展的时代,…

Springboot + vue 小区物业管理系统

🥂(❁◡❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞 💖📕🎉🔥 支持我:点赞👍收藏⭐️留言📝欢迎留言讨论 🔥🔥&…

空指针:HttpSession异常,SpringBoot集成WebSocket

异常可能性: 404 : 请检查拦截器是否将请求拦截WebSocket握手期间HttpSession为空 HttpSession为空 方法一 : 网上参考大量的文档,有说跟前端请求域名有关系的。 反正对我来说,没啥用无法连接。 需使用 localhost&a…

什么是视频孪生智慧能源?视频孪生智慧能源的应用案例

‌视频孪生智慧能源是集三维地理信息系统、视频虚实融合、数字孪生、人工智能等多技术于一体的综合应用,旨在实现对能源系统的实时、动态、全方位监控和管理‌。 具体来说,视频孪生智慧能源通过以下方式实现其功能: ‌技术融合‌:…

【update 更新数据语法合集】.NET开源ORM框架 SqlSugar 系列

系列文章目录 🎀🎀🎀 .NET开源 ORM 框架 SqlSugar 系列 🎀🎀🎀 文章目录 系列文章目录前言 🍃一、实体对象更新1.1 单条与批量1.2 不更新某列1.3 只更新某列1.4 NULL列不更新1.5 无主键/指定列…

006-excel数据输出insert语句

一、在空白列插入,选择需要的列 "INSERT INTO tab_name1 (code, name) VALUES ("&A1&", "&B1&");"二、 拖动填充块,或者双击填充块(可以快速填充整列) 三、直接把生成的 insert 语…