鸿蒙开发0基础【组件导航和页面路由概述】ArkUI

组件导航(Navigation)和页面路由(@ohos.router)均支持应用内的页面跳转,但组件导航支持在组件内部进行跳转,使用更灵活。组件导航具备更强的一次开发多端部署能力,可以进行更加灵活的页面栈操作,同时支持更丰富的动效和生命周期。因此,推荐使用组件导航(Navigation)来实现页面跳转以及组件内的跳转,以获得更佳的使用体验。

架构差异

从ArkUI组件树层级上来看,原先由Router管理的page在页面栈管理节点stage的下面。Navigation作为导航容器组件,可以挂载在单个page节点下,也可以叠加、嵌套。Navigation管理了标题栏、内容区和工具栏,内容区用于显示用户自定义页面的内容,并支持页面的路由能力。Navigation的这种设计上有如下优势:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  1. 接口上显式区分标题栏、内容区和工具栏,实现更加灵活的管理和UX动效能力;
  2. 显式提供路由容器概念,由开发者决定路由容器的位置,支持在全模态、半模态、弹窗中显示;
  3. 整合UX设计和一多能力,默认提供统一的标题显示、页面切换和单双栏适配能力;
  4. 基于通用[UIBuilder]能力,由开发者决定页面别名和页面UI对应关系,提供更加灵活的页面配置能力;
  5. 基于组件属性动效和共享元素动效能力,将页面切换动效转换为组件属性动效实现,提供更加丰富和灵活的切换动效;
  6. 开放了页面栈对象,开发者可以继承,能更好的管理页面显示。

能力对比

业务场景NavigationRouter
一多能力支持,Auto模式自适应单栏跟双栏显示不支持
跳转指定页面pushPath & pushDestinationpushUrl & pushNameRoute
跳转HSP中页面支持支持
跳转HAR中页面支持支持
跳转传参支持支持
获取指定页面参数支持不支持
传参类型传参为对象形式传参为对象形式,对象中暂不支持方法变量
跳转结果回调支持支持
跳转单例页面支持支持
页面返回支持支持
页面返回传参支持支持
返回指定路由支持支持
页面返回弹窗支持,通过路由拦截实现showAlertBeforeBackPage
路由替换replacePath & replacePathByNamereplaceUrl & replaceNameRoute
路由栈清理clearclear
清理指定路由removeByIndexes & removeByName不支持
转场动画支持支持
自定义转场动画支持支持,动画类型受限
屏蔽转场动画支持全局和单次支持 设置pageTransition方法duration为0
geometryTransition共享元素动画支持(NavDestination之间共享)不支持
页面生命周期监听UIObserver.on(‘navDestinationUpdate’)UIObserver.on(‘routerPageUpdate’)
获取页面栈对象支持不支持
路由拦截支持通过setInterception做路由拦截不支持
路由栈信息查询支持getState() & getLength()
路由栈move操作moveToTop & moveIndexToTop不支持
沉浸式页面支持不支持,需通过window配置
设置页面标题栏(titlebar)和工具栏(toolbar)支持不支持
模态嵌套路由支持不支持
### 鸿蒙系统旅游应用程序开发教程 #### 3.1 架构设计概述 针对旅游园区类应用APP的设计,该应用旨在提供专题园区的在线预订门票、酒店、停车、餐饮服务,同时支持园区路线导航、商城购物以及获取最新的官方资讯功能。整个应用采用Stage开发模型与声明式UI相结合的方式构建[^1]。 #### 3.2 开发环境准备 为了启动鸿蒙系统的旅游应用程序开发工作,开发者需先安装并配置好相应的IDE工具链,如DevEco Studio,并确保已设置好模拟器或真机调试环境。此外,还需熟悉掌握ArkTS编程语言及其特性,因为这将是实现高效能用户体验的关键因素之一[^2]。 #### 3.3 HAP包结构说明 对于此类专注于移动端的应用来说,通常会规划成单个Entry类型的HAP包形式发布。这意味着所有的业务逻辑都将被打包到同一个文件内分发给用户下载安装。值得注意的是,在此过程中要特别关注于优化整体体积大小的同时保持良好的运行效率[^4]。 #### 3.4 关键技术点解析 ##### 3.4.1 数据绑定机制 通过使用`@Binding`装饰符可以轻松地将视图组件的状态同底层的数据源关联起来,从而简化页面交互逻辑编写过程: ```typescript import { Binding } from '@ohos/arkui'; @Component({ template: `<Text>{{ message }}</Text>` }) export default class HelloWorld { @Binding() private message = 'Hello, HarmonyOS!'; } ``` ##### 3.4.2 路由管理方案 借助内置路由器API能够方便快捷地实现场景切换效果,比如当点击某个景点详情链接时自动跳转至对应的介绍页: ```typescript // 导航至特定目的地 router.push({ name: 'destinationDetail', params: { id: destinationId } }); ``` ##### 3.4.3 API调用封装 考虑到实际应用场景中不可避免涉及到网络请求操作,因此建议提前定义一套通用的服务层接口用于处理外部数据交换事务: ```javascript async function fetchTicketsInfo(destinationCode) { try { const response = await axios.get(`/api/tickets/${destinationCode}`); return response.data; } catch (error) { console.error('Failed to load ticket information:', error); } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值