HarmonyOS鸿蒙应用开发-ZRouter让系统路由表变得更简单

介绍

ZRouter是基于Navigation系统路由表和Hvigor插件实现的动态路由方案。

系统路由表是API 12起开始支持的，可以帮助我们实现动态路由的功能，其目的是为了解决多个业务模块（HAR/HSP）之间解耦问题，从而实现业务的复用和功能的扩展。

我们先回顾下系统路由表的使用步骤：

  • 首先在目标模块中的module.json5文件中配置路由表文件route_map.json的指引；
  • 然后在resources/base/profile目录下创建route_map.json文件，用于配置每个页面路由的信息；
  • 接着定义每个页面对应的Builder函数，用此作为页面入口，函数名必须与route_map.json文件中buildFunction字段一一对应，否则会跳转异常。
  • 最后通过pushPathByName等路由接口进行页面跳转。

上面的步骤虽然是很简单，但很繁琐；而ZRouter在router-register-plugin插件下支持下，让整个流程更简单化，开发者不用手动去配置，router-register-plugin插件已经将代码模板化，在编译阶段会自动生成配置，帮我们完成整个路由的注册流程。另外ZRouter提供了全局拦截器，可以在页面跳转时进行拦截处理，做重定向或者一些统一操作。

两行代码就可以完成页面的跳转，如下:

在这里插入图片描述

router-register-plugin插件的使用

下载安装

router-register-plugin插件离线包可以在github或gitee上下载。

  • github：https://github.com/751496032/RouterRegisterPlugin/releases
  • gitee：https://gitee.com/common-apps/RouterRegisterPlugin/releases

下载后建议放在项目根目录下的单个文件夹中，如下：

在这里插入图片描述

在hvigor/hvigor-config.json5文件中进行依赖安装，如下：

"dependencies": {"router-register-plugin":"file:../plugins/router-register-plugin-1.0.1.tgz"}

最后记得Sync Now或重新build让插件安装生效。

初始配置

在每个模块中的hvigorfile.ts文件导入router-register-plugin插件模块的routerRegisterPlugin函数和PluginConfig 接口，routerRegisterPlugin 函数是自定义Hvigor插件的入口函数，PluginConfig是一个配置对象，用于定义插件的行为。

import { routerRegisterPlugin, PluginConfig } from 'router-register-plugin'const config: PluginConfig = {scanDir: "src/main/ets/components",logEnabled: false,viewNodeInfo: false,
}
export default {system: harTasks,  plugins:[routerRegisterPlugin(config)] 
}

上面代码初始化PluginConfig配置对象，包括要扫描的目录（scanDir）和两个布尔属性（logEnabled 和 viewNodeInfo），用于控制日志记录和查看节点信息的功能；然后将配置对象作为参数传入到routerRegisterPlugin入口函数中，最后将routerRegisterPlugin()函数添加到plugins数组中。

  • scanDir：建议是页面目录，这样可以更精准扫描目标文件。
  • logEnabled：日志记录开关。
  • viewNodeInfo：查看节点信息的开关，只有logEnabled和viewNodeInfo同时开启才会生效。

PluginConfig配置对象还有其他属性，但不建议使用，使用默认值即可。如下:

export class PluginConfig {/*** 扫描的目录* src/main/ets/*/scanDir: string = ''/*** builder函数注册代码生成的目录* src/main/ets/_generated/*/generatedDir: string = ''/*** Index.ets目录* 模块下目录下*/indexDir: string = ''/*** module.json5文件路径* src/main/ets/module.json5*/moduleJsonPath: string = ''/*** 路由表路径* src/main/ets/resources/base/profile/route_map.json*/routerMapPath: string = ''/*** 是否打印日志*/logEnabled: boolean = true/*** 查看节点信息，只有与logEnable同时为true才会打印输出*/viewNodeInfo: boolean = false}

上面所有路径都是相对模块的src目录而言的，是相对路径。最后记得Sync Now或重新build让配置生效。

ZRouter的基本使用

下载安装

在每个har/hsp模块中，通过ohpm工具下载安装库：

ohpm install @hzw/zrouter

或者安装本地har包：

ohpm install ../libs/RouterApi.har

页面跳转

新建三个模块分别是harA、harB、hspC，三者之间没有依赖关系，entry模块依赖了这三个模块，通过ZRouter可以在四个模块间相互跳转，从而达到模块解耦效果。模块关系图如下图：

在这里插入图片描述

页面跳转描述如下：

  • 在entry模块可以跳转到A、B、C模块页面；
  • 在A模块可以跳转到entry、B、C模块页面；
  • 依次类推

1、在EntryAbility的onCreate()方法中初始化ZRouter

onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {// 如果项目中存在hsp模块则传入trueZRouter.init(true)
}

2、在Index页面使用Navigation作为根视图，通过ZRouter的getNavStack()方法获取NavPathStack实例。

@Entry
@Component
struct Index {build() {// 获取NavPathStack实例对象Navigation(ZRouter.getNavStack()){Column({space:12}){Button('toHarAMainPage').onClick((event: ClickEvent) => {// 跳转页面ZRouter.push("harAMainPage")})Button('toHarBMainPage').onClick((event: ClickEvent) => {ZRouter.push("harBMainPage")})Button('toHspCIndex').onClick((event: ClickEvent) => {ZRouter.push("hspCIndex")})Button('tohspCPage1').onClick((event: ClickEvent) => {ZRouter.push("hspCPage1")})}}.title('Main').height('100%').width('100%')}
}

通过ZRouter的pushXX()方法进行页面跳转，参数是@Route装饰器上的name属性值。或者用ZRouter的getNavStack()方法来执行页面跳转。

3、在子页的结构体上使用自定义@Route装饰器描述当前页面，其中name属性是必填的，页面跳转需要用到name值，建议使用驼峰式命名，还有另外三个可选属性分别是：

  • description：页面描述，没有功能作用；
  • needLogin：如果页面需要登录，可以将值设置为true，然后在拦截器中做页面重定向到登录页；
  • extra：额外的值可以通过该属性设置

自定义@Route装饰器参数只支持字面量值，不支持表达式方式赋值。

代码如下：

@Route({ name: 'hspCPage1', needLogin:true ,extra: 'hsp'})
@Component
export struct Page1 {@State message: string = 'Hello World';build() {NavDestination(){Column({space:12}){Button('toHarAPage1').onClick((event: ClickEvent) => {ZRouter.push("harAPage1")})Button('toHarAPage2').onClick((event: ClickEvent) => {ZRouter.push("harAPage2")})Button('toHarBPage1').onClick((event: ClickEvent) => {ZRouter.push("harBPage1")})Button('toHarBPage2').onClick((event: ClickEvent) => {ZRouter.push("harBPage2")})Button('toHspCPage1').onClick((event: ClickEvent) => {ZRouter.push("hspCPage1")})Button('toHspCPage2').onClick((event: ClickEvent) => {ZRouter.push("harCPage2")})}}.title('hspCPage1').width('100%').height('100%')}
}

NavDestination是子页面的根容器，不需要在main_pages文件中注册页面路径。

拦截器

全局拦截器

ZRouter提供了拦截器，可以拦截页面进行重定向，可实现如下的效果：

  • 在拦截器内可以根据@Route装饰器上的参数来判断是否需要登录，如果需要登录并且没有登录的情况下，可以重定向到登录页面，如果用户完成了登录在返回后，可以设置是否继续执行登录前的页面跳转；
  • 在拦截器内可以判断跳转页面是否存在，如果不存在（未注册），也可以进行拦截重定向到一个404页面；

拦截器代码示例：

@Entry
@Component
struct Index {aboutToAppear(): void {ZRouter.addGlobalInterceptor((info) => {console.log('GlobalInterceptor: ', JSON.stringify(info.data) , info.needLogin)if (info.notRegistered) {// 页面不存在，重定向到404页ZRouter.redirect("PageNotFound")return}let isLogin = AppStorage.get<Boolean>("isLogin")if (info.needLogin && !isLogin) {ZRouter.redirectForResult("LoginPage", null, (data) => {if (data.result) {// 登录成功promptAction.showToast({ message: `登录成功` })return true // 返回true 则继续跳转登录前的页面}return false})}})}}

info.notRegistered()方法判断当前页面是否注册，如果没有注册，将使用ZRouter.redirect() 方法来重定向到404页面；通过ZRouter.redirectForResult() 方法来重定向到登录页面，这个方法接受一个回调函数，该回调函数会在用户登录成功或失败后被调用，在回调函数内部，使用 data.result判断是否登录 ，如果登录成功了给回调函数 return true 来指示继续执行登录前的页面跳转。如果登录失败，或者用户取消登录，回调函数将返回 false，表示不跳转。

登录页面代码示例：

@Route({ name: 'LoginPage'})
@Component
export struct LoginPage{build() {NavDestination(){Column({space:15}){Button('登录成功').onClick((event: ClickEvent) => {// 模拟登录AppStorage.setOrCreate('isLogin', true)ZRouter.popWithResult("login success")})}.width('100%').height('100%')}.width('100%').height('100%').title('LoginPage')}
}

在登录成功后通过ZRouter.popWithResult()方法携带数据关闭页面，此时会将状态传递给redirectForResult()方法的回调函数。

上面是全局拦截器，每个跳转都会触发。

添加与移除拦截器
aboutToAppear(): void {// 添加拦截器ZRouter.addInterceptor('key',(info)=>{})
}aboutToDisappear(): void {// 移除拦截器ZRouter.removeInterceptor('key')
}

原理

路由注册流程的代码自动化生成，其原理是不难的，就是通过自定义Hvigor插件扫描指定目录的ets文件，递归解析ets文件的语法树节点，查找出自定义装饰器@Route对应的文件，然后解析出装饰器和页面上的信息，最后将这些信息通过模板引擎在编译阶段生成Builder注册函数，路由表配置通过文件读写来写入数据。

这与Java 注解处理器APT原理是类似的

ZRouter库是基于NavPathStack的push，pop以及拦截器等接口上进行封装的，NavPathStack简化方法的使用，在拦截器回调中会读取@Route装饰器上的参数并封装回调给外部拦截器使用，因此外部可以根据此信息来做重定向等其他一系列操作。

插件实现流程图：

在这里插入图片描述

源码

  • router-register-plugin插件
    • github：https://github.com/751496032/RouterRegisterPlugin
    • gitee：https://gitee.com/common-apps/RouterRegisterPlugin
  • ZRouter
    • github：https://github.com/751496032/ZRouter
    • gitee：https://gitee.com/common-apps/ZRouter

参考

  • https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/routermodule

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

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

相关文章

Redis高可用技术之持久化

Redis高可用技术之持久化

一、Redis高可用 在web服务器中&#xff0c;高可用是指服务器可以正常访问的时间&#xff0c;衡量的标准是一年有多少秒可以提供正常服务&#xff08;99.9%、99.99%、99.999%等&#xff09;。但是在Redis语境中&#xff0c;高可用的含义似乎要宽泛一些&#xff0c;除了保证提供…
阅读更多...
MySQL InnoDB事务隔离和并发控制面试题详解

MySQL InnoDB事务隔离和并发控制面试题详解

1. 为什么 MySQL 使用 B+ 树作为索引而不是 B 树？ MySQL 选择使用 B+ 树作为索引主要有以下几个原因： 减少 IO 次数，提高效率：B+ 树的所有数据都存储在叶子节点，非叶子节点只存储索引，树的高度较低，因此查找路径较短，减少了磁盘 IO 次数。查询效率更加稳定：由于数据仅…
阅读更多...
Hyper-V 安装 CentOS 8.5

Hyper-V 安装 CentOS 8.5

前言 Hyper-V安装文档：在 Windows 10 上安装 Hyper-VCentOS 系统下载：CentOS 国内镜像源 8.5.2111作者：易墨发布时间：2023.10.01原文地址：https://www.cnblogs.com/morang/p/devops-hyperv-centos-install.html使用命令安装 以管理员身份运行 PowerShell 命令： Enable-…
阅读更多...
c＋＋初阶知识——string类详解

c＋＋初阶知识——string类详解

目录 前言&#xff1a; 1.标准库中的string类 1.1 auto和范围for auto 范围for 1.2 string类常用接口说明 1.string类对象的常见构造 1.3 string类对象的访问及遍历操作 1.4. string类对象的修改操作 1.5 string类非成员函数 2.string类的模拟实现 2.1 经典的string…
阅读更多...
GAMES104：05游戏引擎中的渲染系统2：渲染中的光照、材质和shader-学习笔记

GAMES104：05游戏引擎中的渲染系统2：渲染中的光照、材质和shader-学习笔记

文章目录 一、渲染方程及其挑战二、基础光照解决方案-简化版简化光源简化材质简化阴影 三、基于预计算的全局光照3.1挑战和计算思路傅里叶变换球谐函数&#xff08;Spherical Harmonics&#xff09; 3.2 SH Lightmap&#xff1a;预计算 GI3.3 探针 Probe&#xff1a;Light Prob…
阅读更多...
无涯·问知财报解读，辅助更加明智的决策

无涯·问知财报解读，辅助更加明智的决策

财报解读就像是给公司做一次全面的体检&#xff0c;是理解公司内部运作机制和市场表现的一把钥匙&#xff0c;能够有效帮助投资者、分析师、管理层以及所有市场参与者判断一家公司的健康程度和发展潜力。 星环科技无涯问知的财经库内置了企业年报及财经类信息&#xff0c;并对…
阅读更多...
Linux：传输层(1) -- UDP协议

Linux：传输层(1) -- UDP协议

1. 端口号 同一台主机的不同端口号(Port)标记了主机上不同的进程&#xff0c;如下图所示&#xff1a; 在 TCP/IP 协议中 , 用 " 源IP", "源端口号", "目的IP", "目的端口号", "协议号" 这样一个五元组来标识一个通信 ( 可…
阅读更多...
制作excel模板，用于管理后台批量导入船舶数据

制作excel模板，用于管理后台批量导入船舶数据

文章目录 引言I 数据有效性：基于WPS在Excel中设置下拉框选择序列内容II 数据处理：基于easyexcel工具实现导入数据的持久化2.1 自定义枚举转换器2.2 ExcelDataConvertExceptionIII 序列格式化： 基于Sublime Text 文本编辑器进行批量字符操作引言 需求： excel数据导入模板制…
阅读更多...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）

基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）

构建大数据可视化平台模板&#xff1a;基于 HTML 和 ECharts 的实现 大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示&#xff0c;团队可以快速理解复杂的数据模式&#xff0c;发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一…
阅读更多...
js逆向——origin/refer请求头反爬

js逆向——origin/refer请求头反爬

今日受害网站&#xff1a; https://www.regulations.gov/docket/FDA-2016-D-1399/document 最终目标&#xff1a;爬取该网站中的新闻摘要 首先打开网页&#xff0c;刷新一下&#xff0c;观察都返回了哪些数据 然后我们ctrlf进行关键字搜索 进一步&#xff0c;只过滤含有docu…
阅读更多...
Linux_实现TCP网络通信

Linux_实现TCP网络通信

目录 1、实现服务器的逻辑 1.1 socket 1.2 bind 1.3 listen 1.4 accept 1.5 read 1.6 write 1.7 服务器代码 2、实现客户端的逻辑 2.1 connect 2.3 客户端代码 3、实现服务器与客户端的通信 结语 前言&#xff1a; 在Linux下&#xff0c;实现传输层协议为TCP…
阅读更多...
MySQL数据库-备份恢复

MySQL数据库-备份恢复

一、MySQL日志管理 1.为什么需要日志 用于排错用来做数据分析了解程序的运行情况&#xff0c;了解MySQL的性能 2.日志作用 在数据库保存数据时&#xff0c;有时候不可避免会出现数据丢失或者被破坏&#xff0c;这样情况下&#xff0c;就必须保证数据的安全性和完整性&#…
阅读更多...
鸿蒙SDK开发能力

鸿蒙SDK开发能力

什么是鸿蒙SDK&#xff1a;HarmonyOS(Software Development Kit)是面向应用和服务开发的开放能力合集,本质就是工具集&#xff0c;与JDK、AndroidSDK在逻辑上有相似之处 18N&#xff1a;1指的是手机&#xff0c;8指的是车机、音箱、耳机、手表/手环、平板、大屏、PC、AR/VR&am…
阅读更多...
PCL-基于超体聚类的LCCP点云分割

PCL-基于超体聚类的LCCP点云分割

目录 一、LCCP方法二、代码实现三、实验结果四、总结五、相关链接 一、LCCP方法 LCCP指的是Local Convexity-Constrained Patch&#xff0c;即局部凸约束补丁的意思。LCCP方法的基本思想是在图像中找到局部区域内的凸结构&#xff0c;并将这些结构用于分割图像或提取特征。这种…
阅读更多...
DolphinScheduler学习

DolphinScheduler学习

1.查看文档 点击访问&#xff1a;https://dolphinscheduler.apache.org/zh-cn/docs 我们可以看到相关的文档简介里有 介绍 DolphinScheduler是Apache DolphinScheduler 是一个分布式易扩展的可视化DAG工作流任务调度开源系统。适用于企业级场景&#xff0c;提供了一个可视化…
阅读更多...
太原高校大学智能制造实验室数字孪生可视化系统平台建设项目验收

太原高校大学智能制造实验室数字孪生可视化系统平台建设项目验收

随着科技的不断进步&#xff0c;智能制造已经成为推动制造业转型升级的重要力量。太原高校大学智能制造实验室紧跟时代步伐&#xff0c;积极推进数字孪生可视化系统平台的建设&#xff0c;并于近日圆满完成了项目的验收工作。这一里程碑式的成果&#xff0c;不仅标志着实验室在…
阅读更多...
uniapp安卓plus原生选择系统文件

uniapp安卓plus原生选择系统文件

uniapp安卓plus原生选择系统文件 效果&#xff1a; 组件代码&#xff1a; <template xlang"wxml" minapp"mpvue"><view></view> </template> <script>export default {name: file-manager,props: {},data() {return {is…
阅读更多...
靶场实战 _ ATTCK 实战 Vulnstack 红队

靶场实战 _ ATTCK 实战 Vulnstack 红队

环境配置 网络拓扑图 (仅供参考) 攻击机&#xff1a;kali ip:192.168.111.5靶机&#xff1a;web-centos 外网ip:192.168.111.10 内网ip:192.168.93.100web1-ubuntu ip: 192.168.93.120PC ip: 192.168.93.30win 2008 ip:192.168.93.20win 2012 ip:192.168.93.10 信息搜集 端口…
阅读更多...
【C++】string类（下）

【C++】string类（下）

个人主页~ string类&#xff08;上&#xff09; string类 二、模拟实现string类1、头文件string.h2、常见构造3、容量函数4、访问及遍历5、类对象修改6、流插入流提取重载 二、模拟实现string类 今天我们来实现一下上篇文章中详细介绍过的接口 1、头文件string.h #pragma onc…
阅读更多...
Redis的应用场景及类型

Redis的应用场景及类型

目录 一、Redis的应用场景 1、限流 2、分布式锁 3、点赞 4、消息队列 二、Redis类型的命令及用法 1、String类型 2、Hash类型 3、List类型 4、Set类型 5、Zset类型 6、Redis工具类 Redis使用缓存的目的就是提升读写性能 实际业务场景下&#xff0c;我们就可以把 Mys…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023