纯血鸿蒙APP实战开发——自定义路由栈管理

发布于：2024-04-29 ⋅ 阅读:(40) ⋅ 点赞:(0)

介绍

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

使用说明

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

实现思路

路由来源页的实现

  1. 新增来源页字段
export class DynamicsRouter {
  ...
  // 通过数组实现自定义栈的管理
  static routerStack: Array<RouterModel> = new Array();
  static referrer: string[] = [];
  ...
}
  1. 注册路由
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}`);
}
  1. 获取路由来源页面栈
public static getRouterReferrer(): string[] {
  return DynamicsRouter.referrer;
}
  1. 通过页面栈跳转到指定页面
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]}`);
}
  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();
}

路由来源页的使用

  1. 在任意模块中使用DynamicsRouter.createRouter()创建路由，在路由创建时会将主页HomePage推入自定义路由栈，并给代表来源页的referrer
    字段赋值。

  2. 获取路由来源页面栈，执行DynamicsRouter.getRouterStack()获得自定义路由栈，该方法和Navigation的路由栈原理一致，会在push和pop页面跳转
    之前记录来源页并赋值给referrer。

高性能知识点

不涉及

工程结构&模块类型

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

鸿蒙全栈开发全新学习指南

也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技术，针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线【包含了大APP实战项目开发】。

本路线共分为四个阶段：

第一阶段：鸿蒙初中级开发必备技能

第二阶段：鸿蒙南北双向高工技能基础：gitee.com/MNxiaona/733GH

第三阶段：应用开发中高级就业技术

第四阶段：全网首发-工业级南向设备开发就业技术：https://gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》（共计892页）

如何快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:gitee.com/MNxiaona/733GH

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙开发面试真题（含参考答案）:gitee.com/MNxiaona/733GH

鸿蒙入门教学视频：

美团APP实战开发教学：gitee.com/MNxiaona/733GH

写在最后

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
  • 想要获取更多完整鸿蒙最新学习资源，请移步前往小编：gitee.com/MNxiaona/733GH

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布