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

HarmonyOS NEXT应用开发之动态路由

介绍

本示例将介绍如何使用动态路由跳转到模块中的页面,以及如何使用动态import的方式加载模块

使用说明

  1. 通过动态import的方式,在需要进入页面时加载对应的模块。
  2. 配置动态路由,通过WrapBuilder接口,动态创建页面并跳转。
  3. 动态import变量表达式,需要DevEco Studio NEXT Developer Preview1 (4.1.3.500)版本IDE,配合hvigor 4.0.2版本使用。
  4. 支持自定义路由栈管理,相关内容请参考路由来源页的相关说明

实现思路

动态路由的实现

  1. 注册路由
public static createNavPathStack(router: NavPathStack): void {DynamicsRouter.navPathStack = router;
}
  1. 获取路由
private static getNavPathStack(): NavPathStack {return DynamicsRouter.navPathStack;
}
  1. 通过builderName,注册WrappedBuilder对象,用于动态创建页面
private static registerBuilder(builderName: string, builder: WrappedBuilder<[object]>): void {DynamicsRouter.builderMap.set(builderName, builder);
}
  1. 通过builderName,获取注册的WrappedBuilder对象
public static getBuilder(builderName: string): WrappedBuilder<[object]> {let builder = DynamicsRouter.builderMap.get(builderName);if (!builder) {let msg = "not found builder";console.info(msg + builderName);}return builder as WrappedBuilder<[object]>;
}
  1. 通过页面栈跳转到指定页面
public static async push(routerInfo: RouterInfo, param?: string): Promise<void> {const pageName: string = routerInfo.pageName;const moduleName: string = routerInfo.moduleName;let isImportSucceed: boolean = false;await import(moduleName).then((result: ESObject) => {result.harInit(pageName);isImportSucceed = true;}, (error: ESObject) => {logger.error(LOGGER_TAG, error);});if (isImportSucceed) {const builderName: string = moduleName + "/" + pageName;DynamicsRouter.getNavPathStack().pushPath({ name: builderName, param: param });}
}
  1. 注册动态路由跳转的页面信息
public static registerRouterPage(routerInfo: RouterInfo, wrapBuilder: WrappedBuilder<[object]>) {let builderName: string = routerInfo.moduleName + "/" + routerInfo.pageName;if (!DynamicsRouter.getBuilder(builderName)) {DynamicsRouter.registerBuilder(builderName, wrapBuilder);}
}

动态路由的使用

下面以eventpropagation模块举例说明如何使用动态路由加载子模块页面。

  1. 在工程的根目录的build-profile.json5中添加动态路由模块和需要加载的子模块的依赖,详细代码参考build-profile.json5。
{"app":{...}"modules":{...{"name": "eventpropagation","srcPath": "./feature/eventpropagation"},{"name": "routermodule","srcPath": "./feature/routermodule"}...}
}
  1. 在主模块中添加动态路由和需要加载的子模块的依赖,详细代码请参考oh-package.json。
"dependencies": {"@ohos/dynamicsrouter": "file:../../feature/routermodule",    "@ohos/event-propagation": "file:../../feature/eventpropagation",...
}
  1. 在主模块中添加动态import变量表达式需要的参数,此处在packages中配置的模块名必须和oh-package.json中配置的名称相同,详细代码请参考build-profile.json5。
...
"buildOption": {"arkOptions": {"runtimeOnly": {"packages": ["@ohos/event-propagation",...]}}
}
  1. 在routermodule模块中添加动态路由跳转的moduleName(模块名)和pageName(页面名),RouterInfo中配置的moduleName必须和oh-package.json中配置的名称相同,RouterInfo中添加的pageName是子模块中需要加载的页面,详细代码请参考RouterInfo.ets。
export class RouterInfo {moduleName: string = '';pageName: string = '';constructor(moduleName: string, pageName: string) {this.moduleName = moduleName;this.pageName = pageName;}...static readonly EVENT_TRANSMISSION_SOLUTION: RouterInfo = new RouterInfo('@ohos/event-propagation', 'EventPropagation');...
}
  1. 在主模块中注册路由,并添加页面信息,详细代码请参考EntryView.ets。
...
@Provide('pageStack') pageStack: NavPathStack = new NavPathStack();
@State listData: SceneModuleInfo[] = waterFlowData;
...
aboutToAppear(): void {DynamicsRouter.createNavPathStack(this.pageStack);...
}
...
  1. 在主模块的WaterFlowData.ets中,将子模块要加载的页面,添加到列表中,详细代码请参考WaterFlowData.ets。
export const waterFlowData: SceneModuleInfo[] = [...new SceneModuleInfo($r("app.media.event_propagation"), '阻塞事件冒泡', RouterInfo.EVENT_TRANSMISSION_SOLUTION, '其他', 1),...
}
  1. 在需要加载时将页面放入路由栈,详细代码请参考FunctionalScenes.ets。
@Builder
methodPoints(listData: ListData) {Column() {....onClick(() => {DynamicsRouter.push(listData.routerInfo, listData.param);})
}
  1. 在子模块中添加动态路由的依赖,详细代码可参考oh-package.json。
...
"dependencies": {..."@ohos/dynamicsrouter": "file:../../feature/routermodule"
}
  1. 在子模块中添加动态加载页面组件的接口harInit,其中pageName和RouterInfo中配置的pageName相同,import()接口中传入的参数,是页面的相对路径。详细代码可参考Index.ets。 如果模块中有多个页面需要跳转,则需要配置多个pageName和页面路径,并且pageName和页面路径需要一一对应,否则无法跳转到预期中的页面,可参考barchart模块中的Index.ets文件。
export function harInit(pageName: string) {switch (pageName) {case RouterInfo.EVENT_TRANSMISSION_SOLUTION.pageName:import('./src/main/ets/view/EventPropagation');break;}
}
  1. 在子模块中添加动态创建组件的方法,并注册到动态路由中,详细代码可参考EventPropagation.ets。
...
@Builder
export function getEventPropagation(): void {EventPropagation();
}DynamicsRouter.registerRouterPage(RouterInfo.EVENT_TRANSMISSION_SOLUTION, wrapBuilder(getEventPropagation));
  1. 如果7中设置的router.param是非空的,需要给10中的@Buidler接口添加参数,否则会报错,详细代码请参考NavigationParameterTransferView。
...
@Builder
export function getNavigationParameterTransferView(param: ESObject): void {NavigationParameterTransferView();
}
...
  1. 子模块中的两个页面需要使用动态路由进行跳转时,则不需要执行6,即不需要将页面添加到首页数据中。

高性能知识点

本示例使用动态import的方式加载模块,只有需要进入页面时才加载对应的模块,减少主页面启动时间和初始化效率,减少内存的占用。

工程结构&模块类型

routermodule                                  // har类型
|---constants
|   |---RouterInfo.ets                        // 路由信息类,用于配置动态路由跳转页面的名称和模块名
|---router
|   |---DynamicsRouter.ets                    // 动态路由实现类

模块依赖

不涉及

参考资料

动态路由Sample

为了能让大家更好的学习鸿蒙(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://qr18.cn/F781PH

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

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

腾讯T10级高工技术,安卓全套VIP课程全网免费送:https://qr21.cn/D2k9D5

相关文章:

HarmonyOS NEXT应用开发之动态路由

介绍 本示例将介绍如何使用动态路由跳转到模块中的页面&#xff0c;以及如何使用动态import的方式加载模块 使用说明 通过动态import的方式&#xff0c;在需要进入页面时加载对应的模块。配置动态路由&#xff0c;通过WrapBuilder接口&#xff0c;动态创建页面并跳转。动态i…...

wayland(xdg_wm_base) + egl + opengles 使用 Assimp 加载带光照信息的材质文件Mtl 实现光照贴图的最简实例(十七)

文章目录 前言一、3d 立方体 model 属性相关文件1. cube1.obj2. cube1.Mtl3. 纹理图片 cordeBouee4.jpg二、实现光照贴图的效果1. 依赖库和头文件1.1 assimp1.2 stb_image.h2. egl_wayland_obj_cube1.cpp3. Matrix.h 和 Matrix.cpp4. xdg-shell-client-protocol.h 和 xdg-shell…...

【NLP笔记】Transformer

文章目录 基本架构EmbeddingEncoderself-attentionMulti-Attention残差连接LayerNorm DecoderMask&Cross Attention线性层&softmax损失函数 论文链接&#xff1a; Attention Is All You Need 参考文章&#xff1a; 【NLP】《Attention Is All You Need》的阅读笔记 一…...

【Unity】程序创建Mesh(二)MeshRenderer、光照、Probes探针、UV信息、法线信息

文章目录 接上文MeshRenderer&#xff08;网格渲染器&#xff09;Materials&#xff08;材质&#xff09;Material和Mesh对应Lighting光照Lightmapping材质中的光照 光源类型阴影全局光照Probes&#xff08;探针&#xff09;Ray Tracing&#xff08;光线追踪&#xff09;Additi…...

每日一练:LeeCode-167. 两数之和 II - 输入有序数组【双指针】

给你一个下标从 1 开始的整数数组 numbers &#xff0c;该数组已按 非递减顺序排列 &#xff0c;请你从数组中找出满足相加之和等于目标数 target 的两个数。如果设这两个数分别是 numbers[index1] 和 numbers[index2] &#xff0c;则 1 < index1 < index2 < numbers.…...

性能优化(CPU优化技术)-NEON指令详解

原文来自ARM SIMD 指令集&#xff1a;NEON 简介 &#x1f3ac;个人简介&#xff1a;一个全栈工程师的升级之路&#xff01; &#x1f4cb;个人专栏&#xff1a;高性能&#xff08;HPC&#xff09;开发基础教程 &#x1f380;CSDN主页 发狂的小花 &#x1f304;人生秘诀&#xf…...

服务器硬件基础知识和云服务器的选购技巧

概述 服务器硬件基础知识涵盖了构成服务器的关键硬件组件和技术&#xff0c;这些组件和技术对于服务器的性能、稳定性和可用性起着至关重要的作用。其中包括中央处理器&#xff08;CPU&#xff09;作为服务器的计算引擎&#xff0c;内存&#xff08;RAM&#xff09;用于数据临…...

深度学习PyTorch 之 transformer-中文多分类

transformer的原理部分在前面基本已经介绍完了&#xff0c;接下来就是代码部分&#xff0c;因为transformer可以做的任务有很多&#xff0c;文本的分类、时序预测、NER、文本生成、翻译等&#xff0c;其相关代码也会有些不同&#xff0c;所以会分别进行介绍 但是对于不同的任务…...

STC 51单片机烧录程序遇到一直检测单片机的问题

准备工作 一&#xff0c;需要一个USB-TTL的下载器 &#xff0c;并安装好对应的驱动程序 二、对应的下载软件&#xff0c;stc软件需要官方的软件&#xff08;最好是最新的&#xff0c;个人遇到旧的下载软件出现问题&#xff09; 几种出现一直检测的原因 下载软件图标&#xf…...

后端系统开发之——接口参数校验

今天难得双更&#xff0c;大家点个关注捧个场 原文地址&#xff1a;后端系统开发之——接口参数校验 - Pleasure的博客 下面是正文内容&#xff1a; 前言 在上一篇文章中提到了接口的开发&#xff0c;虽然是完成了&#xff0c;但还是缺少一些细节——传入参数的校验。 即用户…...

IDEA 配置阿里规范检测

IDEA中安装插件 配置代码风格检查规范 使用代码风格检测 在代码类中&#xff0c;右键 然后会给出一些不符合规范的修改建议&#xff1a; 保存代码时自动格式化代码 安装插件&#xff1a; 配置插件&#xff1a;...

数据仓库系列总结

一、数据仓库架构 1、数据仓库的概念 数据仓库&#xff08;Data Warehouse&#xff09;是一个面向主题的、集成的、相对稳定的、反映历史变化的数据集合&#xff0c;用于支持管理决策。 数据仓库通常包含多个来源的数据&#xff0c;这些数据按照主题进行组织和存储&#x…...

gitlab runner没有内网的访问权限应该怎么解决

如果你的GitLab Runner没有内网访问权限&#xff0c;但你需要访问内部资源&#xff08;如私有仓库或其他服务&#xff09;&#xff0c;你可以考虑以下几种方法&#xff1a; VPN 或 SSH 隧道&#xff1a; 在允许的情况下&#xff0c;通过VPN或SSH隧道连接到内部网络。这将允许Gi…...

el-tree 设置默认展开指定层级

el-tree默认关闭所有选项&#xff0c;但是有添加或者编辑删除的情况下&#xff0c;需要刷新接口&#xff0c;此时会又要关闭所有选项&#xff1b; 需求&#xff1a;在编辑时、添加、删除 需要将该内容默认展开 <el-tree :default-expanded-keys"expandedkeys":da…...

python便民超市管理系统flask-django-nodejs-php

随着人们生活节奏的加快&#xff0c;以前传统的购物方式发生了巨大的改变&#xff0c;以前一个超市要想经营好自己的门店&#xff0c;每天都要忙着记账出账&#xff0c;尤其是出库入库统计&#xff0c;如果忙中出乱&#xff0c;可能导致今天所有的营业流水&#xff0c;要重新换…...

HarmonyOS — BusinessError 不能被 JSON.stringify转换

在鸿蒙中BusinessError 继承于Error&#xff0c;而在JavaScript&#xff08;以及TypeScript&#xff0c;因为它是JavaScript的超集&#xff09;中&#xff0c;Error 对象包含一些不能被 JSON.stringify 直接序列化的属性。JSON.stringify 方法会将一个JavaScript对象或者值转换…...

JupyterNotebook 如何切换使用的虚拟环境kernel

在Jupyter Notebook中&#xff0c;如果需要修改使用的虚拟环境Kernel&#xff1a; 首先&#xff0c;需要确保虚拟环境已经安装conda上【conda基本操作】 打开Jupyter Notebook。 在Jupyter Notebook的顶部菜单中&#xff0c;选择 “New” 在弹出的窗口中&#xff0c;列出了…...

预防GPT-3和其他复杂语言模型中的“幻觉”

标题&#xff1a;预防GPT-3和其他复杂语言模型中的“幻觉” 正文&#xff1a; “假新闻”的一个显著特征是它经常在事实正确信息的环境中呈现虚假信息&#xff0c;通过一种文学渗透的方式&#xff0c;使不真实的数据获得感知权威&#xff0c;这是半真半假力量令人担忧的展示。…...

从源码解析AQS

前置概念 要彻底了解AQS的底层实现就必须要了解一下线程相关的知识。 包括voliatevoliate 我们使用翻译软件翻译一下volatile&#xff0c;会发现它有以下几个意思&#xff1a;易变的;无定性的;无常性的;可能急剧波动的;不稳定的;易恶化的;易挥发的;易发散的。这也正式使用vola…...

基于Spring Boot的云上水果超市的设计与实现

摘 要 伴随着我国社会的发展&#xff0c;人民生活质量日益提高。于是对云上水果超市进行规范而严格是十分有必要的&#xff0c;所以许许多多的信息管理系统应运而生。此时单靠人力应对这些事务就显得有些力不从心了。所以本论文将设计一套云上水果超市&#xff0c;帮助商家进行…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

【安全篇】金刚不坏之身:整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...

数据结构:泰勒展开式:霍纳法则(Horner‘s Rule)

目录 &#x1f50d; 若用递归计算每一项&#xff0c;会发生什么&#xff1f; Horners Rule&#xff08;霍纳法则&#xff09; 第一步&#xff1a;我们从最原始的泰勒公式出发 第二步&#xff1a;从形式上重新观察展开式 &#x1f31f; 第三步&#xff1a;引出霍纳法则&…...

uniapp获取当前位置和经纬度信息

1.1. 获取当前位置和经纬度信息&#xff08;需要配置高的SDK&#xff09; 调用uni-app官方API中的uni.chooseLocation()&#xff0c;即打开地图选择位置。 <button click"getAddress">获取定位</button> const getAddress () > {uni.chooseLocatio…...

使用ch340继电器完成随机断电测试

前言 如图所示是市面上常见的OTA压测继电器&#xff0c;通过ch340串口模块完成对继电器的分路控制&#xff0c;这里我编写了一个脚本方便对4路继电器的控制&#xff0c;可以设置开启时间&#xff0c;关闭时间&#xff0c;复位等功能 软件界面 在设备管理器查看串口号后&…...

20250609在荣品的PRO-RK3566开发板的Android13下解决串口可以执行命令但是脚本执行命令异常的问题

20250609在荣品的PRO-RK3566开发板的Android13下解决串口可以执行命令但是脚本执行命令异常的问题 2025/6/9 20:54 缘起&#xff0c;为了跨网段推流&#xff0c;千辛万苦配置好了网络参数。 但是命令iptables -t filter -F tetherctrl_FORWARD可以在调试串口/DEBUG口正确执行。…...