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

news2024/11/24 14:25:49

介绍

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模块则传入true
    ZRouter.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.coloradmin.cn/o/1942042.html

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

相关文章

NoSQL之Redis非关系型数据库

NoSQL之Redis非关系型数据库

目录 一、数据库类型 1&#xff09;关系型数据库 2&#xff09;非关系型数据库 二、Redis远程字典服务器 1&#xff09;redis介绍 2&#xff09;redis的优点 3&#xff09;Redis 为什么那么快&#xff1f; 4&#xff09;Redis使用场景 三、Redis安装部署 1&#xff0…
阅读更多...
社交圈子小程序搭建-源码部署-服务公司

社交圈子小程序搭建-源码部署-服务公司

消息通知:当有新的消息、评论或回复时&#xff0c;用户需要收到系统的推送通知&#xff0c;以便及时查看和回复 活动发布与参加:用户可以在社交圈子中发布各种类型的活动&#xff0c;如聚餐、旅游、运动等。其他用户可以参加这些活动&#xff0c;并与组织者进行交流和沟通 社交…
阅读更多...
ML.Net 学习之使用经过训练的模型进行预测

ML.Net 学习之使用经过训练的模型进行预测

什么是ML.Net&#xff1a;&#xff08;学习文档上摘的一段&#xff1a;ML.NET 文档 - 教程和 API 参考 | Microsoft Learn 【学习入口】&#xff09; 它使你能够在联机或脱机场景中将机器学习添加到 .NET 应用程序中。 借助此功能&#xff0c;可以使用应用程序的可用数据进行自…
阅读更多...
运行 npm install 报错-4048

运行 npm install 报错-4048

我在已经开发中的项目&#xff0c;执行 npm install 命令时&#xff0c;出现报错&#xff1a; 并且之前在帖子中提到的报错类型还不一样&#xff08;帖子内容如下&#xff09;&#xff1a; 运行 npm run dev 总报错_运行npm run dev报错-CSDN博客 该报错内容主要为权限导致的&…
阅读更多...
使用集成线性 LED 驱动器替代分立 LED 电路设计

使用集成线性 LED 驱动器替代分立 LED 电路设计

在转向灯、刹车灯和尾灯等汽车照明中&#xff0c;LED 电路设计通常采用分立元件&#xff0c;如双极结晶体管 (BJT)。分立元件之所以突出有几个常见原因&#xff1a;它们简单、可靠且便宜。然而&#xff0c;随着 LED 数量和项目要求的增加&#xff0c;重新考虑离散设计可能是值得…
阅读更多...
双边性：构建神经网络的新方法

双边性：构建神经网络的新方法

正如承诺的那样&#xff0c;这是最近我遇到的最有趣的想法之一的第二部分。如果你错过了&#xff0c;请务必观看本系列的第一部分 - 神经科学家对改进神经网络的看法 - 我们讨论了双边性的生物学基础以及我们大脑的不对称性质如何带来更高的性能。 在这篇文章中&#xff0c;我…
阅读更多...
＜数据集＞AffectNet表情识别数据集＜目标检测＞

＜数据集＞AffectNet表情识别数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;29752张 标注数量(xml文件个数)&#xff1a;29752 标注数量(txt文件个数)&#xff1a;29752 标注类别数&#xff1a;7 标注类别名称&#xff1a;[anger,contempt,disgust,fear,happy,neutral,sad,surprise] 序号类…
阅读更多...
如何使用大语言模型绘制专业图表

如何使用大语言模型绘制专业图表

过去的一年里&#xff0c;我相信大部分人都已经看到了大语言模型(后文简称LLM)所具备的自然语言理解和文本生成的能力&#xff0c;还有很多人将其应用于日常工作中&#xff0c;比如文案写作、资料查询、代码生成……今天我要向大家介绍LLM的一种新使用方式——绘图。这里说的绘…
阅读更多...
HydraRPC: RPC in the CXL Era——论文阅读

HydraRPC: RPC in the CXL Era——论文阅读

ATC 2024 Paper CXL论文阅读笔记整理 问题 远程过程调用&#xff08;RPC&#xff09;是分布式系统中的一项基本技术&#xff0c;它允许函数在远程服务器上通过本地调用执行来促进网络通信&#xff0c;隐藏底层通信过程的复杂性简化了客户端/服务器交互[15]。RPC已成为数据中心…
阅读更多...
Transformer-Bert---散装知识点---mlm，nsp

Transformer-Bert---散装知识点---mlm，nsp

本文记录的是笔者在了解了transformer结构后嗑bert中记录的一些散装知识点&#xff0c;有时间就会整理收录&#xff0c;希望最后能把transformer一个系列都完整的更新进去。 1.自监督学习 bert与原始的transformer不同&#xff0c;bert是使用大量无标签的数据进行预训…
阅读更多...
Spring 整合MongoDB xml解析

Spring 整合MongoDB xml解析

beans引用 xmlns:mongo"http://www.springframework.org/schema/data/mongo"xsi:schemaLocation"http://www.springframework.org/schema/data/mongo http://www.springframework.org/schema/data/mongo/spring-mongo.xsd " 具体…
阅读更多...
学习使用Sklearn【LDA】线性判别分析，对iris数据分类！

学习使用Sklearn【LDA】线性判别分析，对iris数据分类！

数据集、代码均来自kaggle。地址&#xff1a;https://www.kaggle.com/datasets/himanshunakrani/iris-dataset?resourcedownload &#x1f680; 揭示线性分类器的力量:线性判别分析的探索 欢迎来到线性分类器的世界和线性判别分析(LDA)的迷人领域!&#x1f31f;在本笔记本中…
阅读更多...
在服务器调用api操作rabbitmq

在服务器调用api操作rabbitmq

不同的rabbitmq版本可能api不同&#xff0c;仅做参考&#xff0c;RabbitMQ 3.7.18。同时&#xff0c;我基本没看官方api文档&#xff0c;根据rabbitmq客户端控制台调用接口参数来决定需要什么参数。例如&#xff1a; 1、添加用户 curl -u 用户名:密码 -H “Content-Type: a…
阅读更多...
[亲测可用]俄罗斯方块H5-网页小游戏源码-HTML源码

[亲测可用]俄罗斯方块H5-网页小游戏源码-HTML源码

本站的HTML模板资源&#xff1a;所见文章图片即所得&#xff0c;搭建和修改教程请看这篇文章&#xff1a;https://yizhi2024.top/8017.html
阅读更多...
Maven 的模块化开发示例

Maven 的模块化开发示例

Maven 的模块化开发是一种非常有效的软件开发方式&#xff0c;它允许你将一个大型的项目分割成多个更小、更易于管理的模块&#xff08;modules&#xff09;。每个模块都可以独立地构建、测试和运行&#xff0c;这不仅提高了开发效率&#xff0c;也便于团队协作和项目的维护。以…
阅读更多...
华为云.云日志服务LTS及其基本使用

华为云.云日志服务LTS及其基本使用

云计算 云日志服务LTS及其基本使用 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28550…
阅读更多...
如何给7Z分卷文件设置密码？简单几步给文件加上安全锁

如何给7Z分卷文件设置密码？简单几步给文件加上安全锁

在压缩7Z文件的时候&#xff0c;如果文件比较大&#xff0c;很多小伙伴都会把文件压缩成7Z分卷文件&#xff0c;那想要保护7Z分卷文件&#xff0c;要如何设置密码呢&#xff1f;不清楚的小伙伴&#xff0c;一起来看看吧&#xff01; 我们可以使用7-Zip解压缩文件&#xff0c;在…
阅读更多...
安全的备忘录工具有哪些 安全好用的备忘录

安全的备忘录工具有哪些 安全好用的备忘录

在这个数字化的时代&#xff0c;我们的生活中充斥着各种各样的信息&#xff0c;从工作计划到个人琐事&#xff0c;从账号密码到重要日期&#xff0c;这些信息都需要我们牢记。然而&#xff0c;人的记忆毕竟有限&#xff0c;于是&#xff0c;备忘录工具成为了我们日常生活中不可…
阅读更多...
easyExcel和poi的版本对应

easyExcel和poi的版本对应

easypoi3.0.5对应的poi版本_easypoi和poi版本对应-CSDN博客 https://github.com/alibaba/easyexcel/blob/v3.2.0/pom.xml 解决 java.lang.NoClassDefFoundError: org/apache/poi/POIXMLTypeLoader 报错-CSDN博客 参考这个文档解决的- 引入最佳版本是3.15版本 java.lang.NoClas…
阅读更多...
将Excel或CSV文件导入MySQL

将Excel或CSV文件导入MySQL

数据库信息 版本：mysql-5.7.22 字符集如下 一、将 Excel 文件导入 MySQL，此时 MySQL 中不存在该表。 在数据库中，右键-导入向导
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023