【HarmonyOS】HMRouter使用详解(一)环境配置

简介: 在项目中使用官方推荐的Navigation时,需要在所有的页面上都添加一层NavDestination,在代码阅读上会增加多个层级,而且还要在主页面设置对应名字的跳转等问题,配置起来比较繁琐。看到大佬开发的HMRouter使用起来方便简洁,因此,写下这篇文章记录HMRouter的使用。

背景


在项目中使用官方推荐的Navigation时,需要在所有的页面上都添加一层NavDestination,在代码阅读上会增加多个层级,而且还要在主页面设置对应名字的跳转等问题,配置起来比较繁琐。看到大佬开发的HMRouter使用起来方便简洁,因此,写下这篇文章记录HMRouter的使用。

插件配置


1.HMRouter安装

在终端中运行下面命令进行第三方库的安装。

ohpm install @hadss/hmrouter

2.添加路由编译插件

修改项目的hvigor/hvigor-config.json文件中的dependencies数组。

"dependencies": {
    "@hadss/hmrouter-plugin": "^1.0.0-rc.6"
  },

3.使用路由编译插件

在项目的entry/hvigorfile.ts文件中添加插件的使用。如果模块是Har则使用harPlugin(),模块是Hsp则使用hspPlugin()

4.工程配置

由于拦截器、生命周期和自定义转场动画会在运行时动态创建实例,因此需要进行如下配置,使得HMRouter路由框架可以动态导入项目中的模块。

在工程目录下的build-profile.json5中,配置useNormalizedOHMUrl属性为true。

HMRouter使用


在UIAbility中初始化路由框架

在OnCreate中初始化路由框架。

import { HMRouterMgr } from '@hadss/hmrouter';
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    HMRouterMgr.init({
      context: this.context
    })
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

在首页中定义路由入口

自定义一个NavModifier类,继承AttributeUpdater

class NavModifier extends AttributeUpdater<NavigationAttribute> {
  initializeModifier(instance: NavigationAttribute): void {
    instance.mode(NavigationMode.Stack);
    instance.navBarWidth('100%');
    instance.hideTitleBar(true);
    instance.hideToolBar(true);
  }
}

然后编写页面代码

import { HMDefaultGlobalAnimator, HMNavigation, HMRouter, HMRouterMgr } from '@hadss/hmrouter';
import { AttributeUpdater } from '@kit.ArkUI';
import {PageModel} from '../../Models/PageModel'
@Entry
@Component
struct HomePage {
  modifier: NavModifier = new NavModifier();
  build() {
    Column() {
      // 使用HMNavigation容器
      HMNavigation({
        navigationId: 'mainNavigation', options: {
          standardAnimator: HMDefaultGlobalAnimator.STANDARD_ANIMATOR,
          dialogAnimator: HMDefaultGlobalAnimator.DIALOG_ANIMATOR,
          modifier: this.modifier
        }
      }) {
        Column({space:20}) {
          Button("TwoPage")
            .width("80%")
            .onClick(() => {
              HMRouterMgr.push({
                navigationId: "mainNavigation",
                pageUrl: "TwoPage"
              })
            })
        }
        .width('100%')
        .height('100%')
      }
    }
    .height('100%')
    .width('100%')
  }
}

HMNavigation 参数解析

  • navigationId :容器ID并且全局统一
  • homePageUrl:指定默认加载的页面
  • navigationOption:全局参数设置。
  • modifier:Navigation动态属性设置
  • standardAnimator:页面全局动画配置
  • dialogAnimator:弹窗全局动画配置
  • title:navigation的Title设置
  • menus:navigation的menus设置
  • toolbar:navigation的toolbar设置
  • systemBarStyle:navigation的systemBarStyle设置

页面设置

新建跳转的页面TwoPage,里面按钮使用HMRouterMgr.pop方法实现返回上个页面的操作。 必须加上@HMRouter装饰器,pageUrl方法来定义页面的名称

import { HMRouter, HMRouterMgr } from '@hadss/hmrouter'
@HMRouter({ pageUrl: "TwoPage" })
@Component
export struct TwoPage {
  build() {
    Column({ space: 20 }) {
      Button("HomePage")
        .width("80%")
        .onClick(() => {
          HMRouterMgr.pop({
            navigationId: "mainNavigation"
          })
        })
    }
    .height("100%")
    .width("100%")
  }
}

总结


这篇帖子主要关注在HMRouter的环境部署和简单的页面跳转。

这里附上HMRouter的Gitee地址

目录
打赏
0
8
8
1
80
分享
相关文章
【HarmonyOS 4.0 应用开发实战】TypeScript 快速入门之环境配置
【HarmonyOS 4.0 应用开发实战】TypeScript 快速入门之环境配置
253 0
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
59 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
2月前
【HarmonyOS】HMRouter使用详解(二)
HMRouter中使用HMRouterMgr的静态方法push()和replace()来实现路由跳转。使用pop()方法来实现页面返回 * push :目标页面不会替换当前页,而是插入页面栈。可以使用pop实现页面的返回操作。 * replace:目标页面会替换当前页,并销毁当前页。这样可以释放当前页的资源,并且无法返回到当前页。 * pop:返回页面栈的上一个页面,skipedLayerNumber 页面返回的层级数量,默认为0,表示返回上一级,1表示跳过一级页面返回
104 8
|
2月前
|
【HarmonyOS】HMRouter使用详解(三)生命周期
使用HMRouter的页面跳转时,想实现和Navigation一样的生命周期时,需要通过新建生命周期类来实现对页面对某一个生命周期的监控。
109 5
【HarmonyOS】HMRouter使用详解(三)生命周期
|
2月前
【HarmonyOS】HMRouter使用详解(四)路由拦截
可以对指定或全局路由跳转时添加拦截器,作用是可以实现在页面切换前做判断是否有进入当前页面的权限。这篇文章将实现登录的全局路由拦截样式。
89 2
HarmonyOS实战开发之HMRouter实现跳转
本文介绍了HarmonyOS页面跳转的两种方式:组件导航(Navigation)和页面路由(@ohos.router),并推荐使用更灵活的组件导航。进一步详细讲解了HMRouter,一个解决HarmonyOS页面跳转问题的框架,其功能包括页面跳转、弹窗提示、转场动效等。通过下载依赖、配置插件、初始化和实现跳转四个步骤,可以轻松集成HMRouter,实现高效页面管理。文章还展示了具体代码示例和效果截图,帮助开发者快速上手。关注Feri,带你掌握鸿蒙开发技巧!
152 0
【鸿蒙征程】一.环境配置✨超多图片很详细✨
文章目录 前言 1.下载安装 2.创建工程 3.运行Hello,world程序
【鸿蒙征程】一.环境配置✨超多图片很详细✨
|
7天前
鸿蒙开发:了解@Builder装饰器
@Builder装饰是鸿蒙UI开发中,非常重要的一个装饰器,在实际的开发中,合理且正确的使用,能够让我们的代码更加的简洁,有两点需要注意,一是,是用私有还是全局,取决于当前的组件的复用机制,如果多个页面都使用了,建议以全局为主;二是传参的动态更新,有更新就使用引用参数传递,没有更新按值传递即可。
57 28
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
29 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
Harmony OS开发-ArkTS语言速成二
本文介绍了ArkTS基础语法,包括三种基本数据类型(string、number、boolean)和变量的使用。重点讲解了let、const和var的区别,涵盖作用域、变量提升、重新赋值及初始化等方面。期待与你共同进步!
115 47
Harmony OS开发-ArkTS语言速成二

热门文章

最新文章