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

鸿蒙路由 HMrouter 配置及使用一

1、学习链接

HMRouter地址

https://gitee.com/hadss/hmrouter/blob/dev/HMRouterLibrary/README.md

2、工程配置

 下载安装

ohpm install @hadss/hmrouter

添加编译插件配置

在工程目录下的build-profile.json5中,配置useNormalizedOHMUrl属性为true (我这项目创建后默认就是true)

在使用到HMRouter的模块中引入路由编译插件,修改hvigorfile.ts。 如果模块是Har则使用harPlugin(), 模块是Hsp则使用hspPlugin(), 模块是Hap则使用hapPlugin()

3、开始使用 

在UIAbility或者启动框架AppStartup中初始化路由框架

在模块入口配置一个HMNavigationr容器并添加配置信息

import { HMDefaultGlobalAnimator, HMNavigation } from "@hadss/hmrouter";
import { AttributeUpdater } from "@kit.ArkUI";

@Entry
@Component
export struct Index {
  modifier: MyNavModifier = new MyNavModifier();

  build() {
    // @Entry中需要再套一层容器组件,Column或者Stack
    Column(){
      // 使用HMNavigation容器
      HMNavigation({
        navigationId: 'mainNavigation', homePageUrl: 'MainPage',
        options: {
          standardAnimator: HMDefaultGlobalAnimator.STANDARD_ANIMATOR,
          dialogAnimator: HMDefaultGlobalAnimator.DIALOG_ANIMATOR,
          modifier: this.modifier
        }
      })
    }
    .height('100%')
    .width('100%')
  }
}

class MyNavModifier extends AttributeUpdater<NavigationAttribute> {
  initializeModifier(instance: NavigationAttribute): void {
    instance.hideNavBar(true);
  }
}

配置信息说明 

创建默认的加载页面,这里需要注意是创建ArkTS File文件而不是创建Page

import { HMRouter } from "@hadss/hmrouter"


@HMRouter({
  pageUrl: "MainPage"
})
@Component
export struct MainPage {
  build() {
    Column(){
      Text("首页").fontSize(30).fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
    .backgroundColor("#f4f5f9")
    .justifyContent(FlexAlign.Center)
  }
}


 效果图


http://www.kler.cn/a/588536.html

相关文章:

  • Android笔记:Android平台下SVG格式的解析与实践
  • PyTorch使用-张量数值计算
  • 每日Attention学习27——Patch-based Graph Reasoning
  • 【从零开始学习计算机科学】软件工程(六)软件质量
  • Docker基础知识介绍
  • 【Python+HTTP接口】POST请求不同请求头构造
  • 【ASMbits--常用算术运算指令】
  • 深入解析 FID:深度学习生成模型评价指标
  • pyQT学习笔记——Qt常用组件与绘图类的使用指南
  • 【商城实战(36)】UniApp性能飞升秘籍:从渲染到编译的深度优化
  • 使用memmove优化插入排序
  • 软件架构设计习题及复习
  • 计算机网络——NAT
  • 【Linux】Socket 编程 TCP
  • 《Python深度学习》第四讲:计算机视觉中的深度学习
  • 在Simulink中将Excel数据导入可变负载模块的方法介绍
  • 工程化与框架系列(30)--前端日志系统实现
  • cursor全栈网页开发最合适的技术架构和开发语言
  • JVM系统变量的妙用
  • 树莓派 连接 PlutoSDR 教程