HarmonyOS鸿蒙开发实战（5.0）自定义路由栈管理

news2024/10/2 22:29:00

鸿蒙HarmonyOS NEXT开发实战往期文章必看（持续更新......）

HarmonyOS NEXT应用开发性能实践总结

HarmonyOS NEXT应用开发案例实践总结合集

最新版！“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线！（从零基础入门到精通）

非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线！

介绍

本案例将介绍如何使用路由跳转返回时获取到来源页的模块名以及路径名，在实际场景中同一页面通常会根据不同来源页展示不同的UI。

使用说明

无特殊使用说明，其他使用说明参考动态路由的相关说明

实现思路

路由来源页的实现

新增来源页字段

export class DynamicsRouter {
  ...
  // 通过数组实现自定义栈的管理
  static routerStack: Array<RouterModel> = new Array();
  static referrer: string[] = [];
  ...
}

注册路由

public static createRouter(router: NavPathStack): void {
  DynamicsRouter.navPathStack = router;
  // 初始化时来源页为未定义
  let homeRouterModule = new RouterModel();
  homeRouterModule.routerName = RouterInfo.HOME_PAGE[0];
  homeRouterModule.path = RouterInfo.HOME_PAGE[1];
  DynamicsRouter.routerStack.push(homeRouterModule)
  logger.info(`DynamicsRouter create routerStack Home is: ${homeRouterModule.routerName} + ${homeRouterModule.path}`);
}

获取路由来源页面栈

public static getRouterReferrer(): string[] {
  return DynamicsRouter.referrer;
}

通过页面栈跳转到指定页面

public static async push(router: RouterModel): Promise<void> {
  const path: string = router.path;
  const routerName: string = router.routerName;
  let param: string = router.param;
  console.info('push', path, routerName);
  // TODO：知识点：通过动态import的方式引入模块，在需要进入页面时才加载模块，可以减少主页面的初始化时间及占用的内存
  await import(routerName).then(
    (ns: ESObject) => {
      console.info('harInit');
      ns.harInit(path) 
  },
    (ret: ESObject) => {
      console.info('import reason', ret);
    }
  );
  // push前记录当前页面的名字
  DynamicsRouter.getRouter().pushPath({ name: routerName, param: param });
  // 自定义栈也加入指定页面
  DynamicsRouter.routerStack.push(router);
  let referrerModel: RouterModel = DynamicsRouter.routerStack[DynamicsRouter.routerStack.length - 2];
  DynamicsRouter.referrer[0] = referrerModel.routerName;
  DynamicsRouter.referrer[1] = referrerModel.path;
  logger.info(`From DynamicsRouter.routerStack push preview module name is + ${DynamicsRouter.referrer[0]}, path is ${DynamicsRouter.referrer[1]}`);
}

// 通过获取页面栈并pop
public static pop(): void {
  // pop前记录的来源页为当前栈顶
  let referrerModel: RouterModel = DynamicsRouter.routerStack[DynamicsRouter.routerStack.length - 1];
  DynamicsRouter.referrer[0] = referrerModel.routerName;
  DynamicsRouter.referrer[1] = referrerModel.path;
  logger.info(`From DynamicsRouter.routerStack pop preview module name is + ${DynamicsRouter.referrer[0]}, path is ${DynamicsRouter.referrer[1]}`);
  if (DynamicsRouter.routerStack.length > 1) {
    DynamicsRouter.routerStack.pop();
  } else {
    logger.info("DynamicsRouter.routerStack is only Home.");
  }
  // 查找到对应的路由栈进行pop
  DynamicsRouter.getRouter().pop();
}

路由来源页的使用

在任意模块中使用DynamicsRouter.createRouter()创建路由，在路由创建时会将主页HomePage推入自定义路由栈，并给代表来源页的referrer 字段赋值。
获取路由来源页面栈，执行DynamicsRouter.getRouterStack()获得自定义路由栈，该方法和Navigation的路由栈原理一致，会在push和pop页面跳转之前记录来源页并赋值给referrer。

高性能知识点

不涉及

工程结构&模块类型

routermodule                                  // har类型
|---constants
|   |---RouterConstants.ets                     // 常量类，用于配置动态路由跳转页面的名称和模块路径
|---model
|   |---RouterModel.ets                         // 路由信息类，用于存储路由的相关信息
|---router
|   |---DynamicsRouter.ets                      // 动态路由实现类 + 来源页面

模块依赖

不涉及

参考资料

不涉及

最后

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为体系杂乱无章，教授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）路线、视频、文档用来跟着学习是非常有必要的。

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员

鸿蒙 NEXT 全栈开发学习笔记 希望这一份鸿蒙学习文档能够给大家带来帮助~

这份鸿蒙（HarmonyOS NEXT）包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、（南向驱动、嵌入式等）鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

鸿蒙（HarmonyOS NEXT）最新学习路线