本文主要是介绍【HarmonyOS NEXT星河版开发实战】页面跳转,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
个人主页→VON
收录专栏→鸿蒙综合案例开发
代码及其图片资源会发布于gitee上面(已发布)
gitee地址https://gitee.com/wang-xin-jie234
目录
前言
界面功能介绍
界面构建过程
知识点概述
页面跳转
页面传参
全套源代码
Index页面
SecondPage页面
前言
单一页面所实现的具体功能十分的局限,所以页面之间的跳转就显得及其重要,本案例就以简单的页面之间的跳转为例来进行这一基础知识的讲解。
界面功能介绍
这里就以两个页面为例,第一页有一个next按钮,通过单击next按钮会跳转到第二页。第二页中的“首页向您问好”是首页的文字,通过传参传到了第二页。通过单击第二页中的back按钮又会跳转到首页。
界面构建过程
就是一个简单的页面构建,只有文字和一个按钮组成,可以根据实际情况来进行页面的精彩构建。
第二个页面也十分的简洁,相较于第一个页面就多了个传入的参数。
知识点概述
页面跳转
在鸿蒙操作系统中,页面跳转是通过Router模块来实现的。鸿蒙操作系统(HarmonyOS)作为华为推出的全新分布式操作系统,旨在通过统一的语言和框架,实现应用在不同设备间的无缝连接与协同工作。页面跳转作为应用开发中的常见需求,对于提升用户体验和应用流畅度具有重要意义。
鸿蒙系统中的页面跳转主要依赖于Router模块,该模块提供了丰富的API支持各种页面跳转场景。Router模块提供两种主要跳转模式:pushUrl()和replaceUrl()。这两种模式主要决定了目标页面是否会替换当前页面。pushUrl()模式允许目标页面压入页面栈,保留当前页状态,可通过返回键或调用router.back()方法回到当前页。而replaceUrl()模式则会替换并销毁当前页面,释放其资源,用户无法返回到被替换的页面。
页面传参
在鸿蒙操作系统中,页面传参主要通过路由(Route)和意图(Intent)两种方式实现。鸿蒙操作系统(HarmonyOS)是华为推出的一款面向全场景的分布式操作系统,它允许开发者在不同设备间实现无缝连接和协同工作。页面传参是应用开发中的常见需求,对于提升用户体验和应用流畅度具有重要意义。
首先,介绍路由方式传参。路由方式主要适用于页面间的跳转和参数传递。具体步骤如下:首先需要引入路由模块,然后使用router.push()
方法进行页面跳转和参数传递。这种方法允许将参数以对象的形式传递给目标页面。例如,可以这样写:router.push({url: "pages/[页面命名]", params: {value: 'test'}})
。目标页面接收参数也非常简单,只需使用router.getParams()
方法获取传递过来的参数对象,并可以通过相应的键值访问具体参数。
其次,介绍意图方式传参。意图方式传参在鸿蒙系统中也是一种重要的页面传参手段。鸿蒙提供了startAbility
和startAbilityForResult
两种方法来启动一个页面,并传递参数。具体步骤如下:第一步是创建一个IntentParams
对象,并通过setParam
方法设置需要传递的参数。第二步是调用startAbility
或startAbilityForResult
方法,将IntentParams
对象作为参数传递。在目标页面中,可以通过重载的onStart
方法获取传递过来的意图对象,并通过getStringParam
等方法获取具体参数。
全套源代码
Index页面
import router from '@ohos.router'@Entry
@Component
struct Index {build() {Column(){Text('First Page').height('50%').fontSize(30).fontWeight(700)Button('Next').width(200).fontSize(20).fontWeight(700).onClick(()=>{router.pushUrl({url:'pages/SecondPage',params:{src:'首页向您问好'}})})}.width('100%').height('100%')}
}
SecondPage页面
import router from '@ohos.router'@Entry
@Component
struct SecondPage {@State src:string=(router.getParams() as Record<string,string>)['src']build() {Column(){Text('Second Page').height('50%').fontSize(30).fontWeight(700)Text(this.src).fontSize(20).fontWeight(500).margin({bottom:20})Button('Back').width(200).fontSize(20).fontWeight(700).onClick(()=>{router.pushUrl({url:'pages/Index'})})}.width('100%').height('100%')}
}
这篇关于【HarmonyOS NEXT星河版开发实战】页面跳转的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!