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.rhkb.cn/news/381894.html

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

相关文章

数据结构~~顺序表

数据结构~~顺序表

目录 一、顺序表的概念 二、顺序表的接口实现 1.顺序表初始化 2.顺序表销毁 3.检查空间并扩容 4.顺序表尾插、顺序表头插 5.顺序表尾删、顺序表头删 6.顺序表查找 7.顺序表在pos位置插入x、删除pos位置的值 三、完整代码 四、总结 一、顺序表的概念 顺序表是用一…
阅读更多...
逆向案例二十八——某高考志愿网异步请求头参数加密，以及webpack

逆向案例二十八——某高考志愿网异步请求头参数加密，以及webpack

网址&#xff1a;aHR0cDovL3d3dy54aW5nYW9rYW90Yi5jb20vY29sbGVnZXMvc2VhcmNo 抓包分析&#xff0c;发现请求头有参数u-sign是加密的&#xff0c;载荷没有进行加密&#xff0c;直接跟栈分析。 进入第二个栈&#xff0c;打上断点&#xff0c;分析有没有加密位置。 可以看到参数…
阅读更多...
Python爬虫实战 | 爬取携程网景区评论|美食推荐|景点列表数据

Python爬虫实战 | 爬取携程网景区评论|美食推荐|景点列表数据

本文采用Selenium库爬取携程网的景区评论。 携程接口接入 Selenium介绍 Selenium是一个Web的自动化测试工具&#xff0c;可以按指定的命令自动操作&#xff0c;如让浏览器加载页面、获取数据、页面截屏等。Selenium本身不自带浏览器&#xff0c;需要与第三方浏览器结合才能使…
阅读更多...
面试官问：Django、Flask、FastAPI，你选哪个？为什么？

面试官问：Django、Flask、FastAPI，你选哪个？为什么？

如果你是python Web方向的开发工程师&#xff0c;那么在面试中&#xff0c;会经常遇到面试官问这个问题&#xff1a; “在Python的三个流行Web框架&#xff1a;Django、Flask和FastAPI&#xff0c;说说它们的异同&#xff0c;以及你是怎么选择合适的框架&#xff1f;” 异同对…
阅读更多...
基于SSM的高考志愿选择辅助系统

基于SSM的高考志愿选择辅助系统

基于SSM的高考志愿选择辅助系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringSpringMVCMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 前台 前台首页 院校展示 后台 后台首页 学校管理 摘要 随着高考制度的不断完…
阅读更多...
python-爬虫实例（4）：获取b站的章若楠的视频

python-爬虫实例（4）：获取b站的章若楠的视频

目录 前言 道路千万条&#xff0c;安全第一条 爬虫不谨慎&#xff0c;亲人两行泪 获取b站的章若楠的视频 一、话不多说&#xff0c;先上代码 二、爬虫四步走 1.UA伪装 2.获取url 3.发送请求 4.获取响应数据进行解析并保存 总结 前言 道路千万条&#xff0c;安全第一条 爬…
阅读更多...
成为CMake砖家(4): VSCode中的CMake语法高亮

成为CMake砖家(4): VSCode中的CMake语法高亮

大家好&#xff0c;我是白鱼。 在成为CMake砖家的路上&#xff0c;我的主力 IDE/编辑器是 VSCode。 VSCode 免费、插件丰富、文档完善&#xff0c; 相比于 CLion 的年费几百上千元的license真的很香。 不过&#xff0c; 工欲善其事必先利其器&#xff0c; VSCode 需要安装合适…
阅读更多...
FastDFS分布式存储

FastDFS分布式存储

一&#xff1a;FastDFS原理 FastDFS是一个开源的轻量级分布式文件系统&#xff0c;功能包括&#xff1a;文件存储&#xff0c;文件同步&#xff0c;文件访问&#xff08;文件上传、文件下载&#xff09;等&#xff0c;解决了大容量存储和负载均衡的问题。 1&#xff1a;FastD…
阅读更多...
物联网在电力行业的应用

物联网在电力行业的应用

作者主页: 知孤云出岫 这里写目录标题 作者主页:物联网在电力行业的应用简介主要应用领域代码案例分析1. 智能电表数据采集和分析2. 设备监控和预测性维护3. 能耗管理和优化4. 电力负载预测5. 分布式能源管理6. 电动汽车充电管理7. 电网安全与故障检测 物联网在电力行业的应用…
阅读更多...
CH03_布局

CH03_布局

第3章&#xff1a;布局 本章目标 理解布局的原则理解布局的过程理解布局的容器掌握各类布局容器的运用 理解 WPF 中的布局 WPF 布局原则 ​ WPF 窗口只能包含单个元素。为在WPF 窗口中放置多个元素并创建更贴近实用的用户男面&#xff0c;需要在窗口上放置一个容器&#x…
阅读更多...
海康威视综合安防管理平台 detection 前台RCE漏洞复现

海康威视综合安防管理平台 detection 前台RCE漏洞复现

0x01 产品简介 海康威视综合安防管理平台是一套“集成化”、“智能化”的平台,通过接入视频监控、一卡通、停车场、报警检测等系统的设备。海康威视集成化综合管理软件平台,可以对接入的视频监控点集中管理,实现统一部署、统一配置、统一管理和统一调度。 0x02 漏洞概述 海康…
阅读更多...
【Gin】精准应用：Gin框架中工厂模式的现代软件开发策略与实施技巧(上)

【Gin】精准应用：Gin框架中工厂模式的现代软件开发策略与实施技巧(上)

【Gin】精准应用&#xff1a;Gin框架中工厂模式的现代软件开发策略与实施技巧(上) 大家好 我是寸铁&#x1f44a; 【Gin】精准应用&#xff1a;Gin框架中工厂模式的现代软件开发策略与实施技巧(上)✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 前言 本次文章分为上下两部分&…
阅读更多...
算法题目整合4

算法题目整合4

文章目录 122. 大数减法123. 滑动窗口最大值117. 软件构建124. 小红的数组构造125. 精华帖子126. 连续子数组最大和 122. 大数减法 题目描述 以字符串的形式读入两个数字&#xff0c;编写一个函数计算它们的差&#xff0c;以字符串形式返回。输入描述 输入两个数字&#xff…
阅读更多...
UE TSharedPtr

UE TSharedPtr

文章目录 概述TSharedPtrTSharedPtr包含2部分 构造&#xff0c;析构&#xff0c;拷贝构造&#xff0c;移动构造构造拷贝构造移动构造 小结 概述 之前写过一篇c的智能指针的&#xff0c;这篇写下ue的。本质上来说是差不多的&#xff0c;可以简单看看。 TSharedPtr 如下图&…
阅读更多...
分析性能提升40%，阿里云Hologres流量场景最佳实践

分析性能提升40%，阿里云Hologres流量场景最佳实践

在互联网和移动分析时代&#xff0c;流量数据成为了企业洞察用户行为、优化产品决策和提升运营效率的关键资源。流量数据主要来源于用户在使用APP、小程序或访问网站等媒介平台时产生的各种操作行为&#xff0c;如点击、浏览、注册、下单等。这些行为数据通过数据埋点技术被采集…
阅读更多...
人工智能与机器学习原理精解【3】

人工智能与机器学习原理精解【3】

文章目录 泰勒级数逼近基础一阶导数和二阶导数的几何意义一阶导数的几何意义二阶导数的几何意义应用示例 导数与微分的区别1. 定义与本质2. 几何意义3. 表达式与关系4. 应用场景 可微函数定义几何意义性质例子 导数导数的定义导数的计算导数的几何意义导数函数的图像一、常见导…
阅读更多...
使用Redis的SETNX命令实现分布式锁

使用Redis的SETNX命令实现分布式锁

什么是分布式锁 分布式锁是一种用于在分布式系统中控制多个节点对共享资源进行访问的机制。在分布式系统中&#xff0c;由于多个节点可能同时访问和修改同一个资源&#xff0c;因此需要一种方法来确保在任意时刻只有一个节点能够对资源进行操作&#xff0c;以避免数据不一致或…
阅读更多...
SpringMVC源码深度解析(中)

SpringMVC源码深度解析(中)

接上一遍博客《SpringMVC源码深度解析(上)》继续聊。最后聊到了SpringMVC的九大组建的初始化&#xff0c;以 HandlerMapping为例&#xff0c;SpringMVC提供了三个实现了&#xff0c;分别是&#xff1a;BeanNameUrlHandlerMapping、RequestMappingHandlerMapping、RouterFunctio…
阅读更多...
mysql面试（一）

mysql面试（一）

前言 从今天开始&#xff0c;更新一些mysql的基础知识&#xff0c;面试会遇到的知识点之类的内容。比如四个隔离级别&#xff0c;mvcc机制&#xff0c;三大日志&#xff0c;索引&#xff0c;B树的形成等等&#xff0c;从数据库的底层来剖析索引和树是怎么形成的&#xff0c;以…
阅读更多...
【常见开源库的二次开发】基于openssl的加密与解密——MD5算法源码解析（五）

【常见开源库的二次开发】基于openssl的加密与解密——MD5算法源码解析（五）

一、MD5算法分析 &#xff1a; 1.1 关于MD5 “消息摘要”是指MD5&#xff08;Message Digest Algorithm 5&#xff09;算法。MD5是一种广泛使用的密码散列函数&#xff0c;它可以生成一个128位&#xff08;16字节&#xff09;的散列值。 RFC 1321: MD5由Ronald Rivest在1992…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023