接入鸿蒙 TheRouter

简介: `TheRouter` 是货拉拉的开源路由框架,支持 Android、iOS 和 Harmony 三端高一致性使用。它集成了组件化、跨模块调用和动态化功能,具备动态路由下发、编译时安全检查及路由 Path 一对多等高度动态能力。

TheRouter 是货拉拉基于HMRouter深度定制的开源路由框架,提供了 Android、iOS、Harmony 三端高一致性使用,在支持平台化应用实现组件化、跨模块调用、动态化等功能的集成等功能基础上,支持动态路由下发、编译时安全检查、路由Path一对多等高度动态能力。

Github: https://github.com/HuolalaTech/hll-wp-therouter-harmony/
官网:http://therouter.cn/


开始之前

如果你的是新项目,请先记住一点:plugin、router 两个依赖的版本号必须保持一致,请继续往下看接入步骤。


查看最新版本

TheRouter 的版本分为两种,稳定版和 rc版,一般不追求新功能我们就用稳定版就行,可以在官网看到最新的版本号和各种版本的说明:https://therouter.cn/docs/2022/09/06/01


接入

在工程根目录命令行引入依赖库和插件库(必须全部依赖,不能只使用其中一个)。

// 引入代码库依赖
ohpm i @hll/therouter   

// 引入插件依赖
npm i therouter-plugin



第一步:接入编译插件

  1. 打开项目根目录的 hvigor/hvigor-config.json5,检查 dependencies 中是否已经加入了依赖,一般为 "therouter-plugin": "x.x.x"
  2. 打开工程 所有 模块(hsp、hap、har)的 hvigorfile.ts 文件。
  3. plugins 中加入如下对应的依赖
// 如果是 hap,则类似如下依赖
import {
    hapPlugin } from "therouter-plugin";
export default {
   
  plugins: [hapPlugin()]
}

// 如果是 har,则类似如下依赖
import {
    harPlugin } from "therouter-plugin";
export default {
   
  plugins: [harPlugin()]
}

// 如果是 hap,则类似如下依赖
import {
    hapPlugin } from "therouter-plugin";
export default {
   
  plugins: [hapPlugin()]
}



第二步:检查依赖是否引入

  1. 打开 工程根目录oh-package.json5 文件。
  2. 检查 dependencies 中,是否已经加入了依赖,一般为:"@hll/therouter": "x.x.x"



使用

1. 初始化

在项目入口的 UIAbilityonCreate() 中加入如下代码:

onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
   
    TheRouter.init(this.context);
}


2. 定义页面容器

TheRouter 按照华为推荐方案,基于系统 Navigation 实现,所以必须在页面中定义一个容器项 TheRouterPage,建议创建一个完全新的类作为入口并在 /resources/base/profile/main_pages.json 中配置这个类,复制如下代码:

import {
    TheRouterPage } from '@hll/therouter';

@Entry
@Component
struct Index {
   
  build() {
   
    RelativeContainer() {
   
      TheRouterPage({
   
        stackId: 'XXXX',  //【必传】可以自定义当前stack的名字,每个stack必须唯一
        root: 'path'  // 【必传】当前应用的首页 path,推荐按照一定格式定义页面path
        // 还有很多可选参数,详情请见文档
      });
    }
    .height('100%')
    .width('100%')
  }
}


3. 声明路由

给需要跳转的页面加上路由表声明

@Route({
   path : "http://therouter.com/home"})
export struct HomePage {
   
    xxx
}


4. 发起跳转

在需要跳转页面的位置调用如下代码:

TheRouter
    .build("http://therouter.com/home")  
    .withString('k', 'v') // 向落地页传参数(如果没参数,可不调用)
    .with({
    hello: 'world' }) // 另一种方式传参
    .navigation()


5. 获取页面传参

接收有两种形式:

  • 通过注解自动接收,默认支持 String 和8种基本数据类型,也支持自定义对象的解析
  • 通过代码从路由中获取

使用注解接收对象时,必须调用 TheRouter.inject(this) 。

// 第一种:使用注解自动填充
  // 允许解析成8种基本数据类型或对应封装类
  @Autowired()
  key1 : string = ''

  // 允许自定义传参key,如果不传默认是变量名作为key
  @Autowired('hello')
  key1 : string = ''

  // 使用注解接收对象时,必须调用,建议放在 aboutToApper() 中调用。
  TheRouter.inject(this)



// 第二种:通过代码从路由中获取
  // 可以在任何方法中调用,getCurrentParam() 返回值是个ESObject
  const v = TheRouter.getCurrentParam()['k'];



目录
相关文章
|
8月前
|
人工智能 自然语言处理 测试技术
AI时代,Apipost和Apifox如何利用AI技术赋能API研发测试管理所需?
在数字化转型加速背景下,API成为企业互联互通的关键。Apipost与Apifox作为主流工具,在AI赋能方面差异显著。Apipost通过智能参数命名、接口设计自动化、测试用例生成、断言自动化等功能大幅提升研发效率和质量,尤其适合中大型企业及复杂业务场景。相比之下,Apifox功能依赖手动操作较多,适用性更偏向初创或小型项目。随着AI技术发展,Apipost展现出更强的智能化与前瞻性优势,为企业提供高效、稳定的API管理解决方案,助力其在竞争激烈的市场中实现创新突破。
211 0
|
JavaScript
vue2.0 + element-ui 实战项目-点击按钮弹出form表单(五)
vue2.0 + element-ui 实战项目-点击按钮弹出form表单(五)
821 0
|
IDE Oracle Java
获取IDE的API文档
获取IDE的API文档
463 5
|
BI 数据库
如何选择会议签到软件?快来看这份深度测评
百格活动功能齐全但价格高,适合预算充足的大型会议;快会务则更适合对私有化部署要求高的场景。草料免费可用、能快速落地,推荐预算有限的中小型会议选择。
如何选择会议签到软件?快来看这份深度测评
|
IDE JavaScript Java
Processing介绍及几个python模式下的案例
该文章介绍了Processing这一开源编程语言和环境,主要用于视觉艺术和设计领域,并提供了Python模式下的编程案例。
884 5
|
存储 关系型数据库 MySQL
"深入探索MySQL临时表:性能优化利器,数据处理的灵活之选"
【8月更文挑战第9天】MySQL临时表专为存储临时数据设计,自动创建与删除,仅在当前会话中存在,有助于性能优化。它分为本地临时表和全局临时表(通过特定逻辑模拟)。创建语法类似于普通表,但加TEMPORARY或TEMP关键字。适用于性能优化、数据预处理和复杂查询,需注意内存占用和事务支持问题。合理使用可大幅提升查询效率。
880 2
Python 实现语句中提取人名(附代码) | Python工具
Python 实现语句中提取人名(附代码) | Python工具
Python 实现语句中提取人名(附代码) | Python工具
|
缓存 监控 网络协议
使用 Scapy 库编写 ARP 缓存中毒脚本
使用 Scapy 库编写 ARP 缓存中毒脚本
|
缓存 JSON ARouter
Android开源系列-组件化框架Arouter-(一)使用方式详解
最近组里需要进行**组件化框架**的改造,用到了`Arouter`这个开源框架,为了更好的对项目进行改造,笔者花了一些时间去了解了下`Arouter
|
人工智能 自然语言处理 算法
AIGC的技术难点
AIGC的技术难点
1278 1

热门文章

最新文章