首页 > 其他分享 >【最新鸿蒙应用开发】——Navigation路由管理

【最新鸿蒙应用开发】——Navigation路由管理

时间:2024-07-10 11:55:57浏览次数:17  
标签:登录 鸿蒙 param 跳转 拦截 Navigation 路由 页面

Navigation路由

1.引言

一多开发的项目适合使用Navigation进行统一的页面路由管理。Navigation还提供统一的标题栏、工具栏、菜单栏,并且自带导航返回功能。另外,Navigation还支持一些Router不支持的功能,比如:自带的路由拦截功能,自带的沉浸式功能等等。

效果图预览

img

代码链接:Navigation实现多设备适配demo

2.Navigation & Router能力对比

  1. 参考官网Navigation-基础组件-基于ArkTS的声明式开发范式-ArkTS组件-ArkUI(方舟UI框架)-应用框架 | 华为开发者联盟 (huawei.com)

  2. 参考博客:基于Navigation的路由管理 -华为开发者论坛 | 华为开发者联盟 (huawei.com)

  3. 总结(Navigation & Router能力对比)

业务场景Navigation能力Router能力
设置页面标题栏和菜单栏、工具栏支持不支持
导航自动返回支持不支持
获取指定页面参数支持不支持
返回指定路由popToName&popToIndex不支持
清理指定路由removeByIndexes & removeByName不支持
共享元素动画支持不支持
获取页面栈对象支持不支持
路由拦截setInterception不支持
路由栈操作moveToTop & moveIndexToTop不支持
沉浸式页面支持不支持,需通过window配置
设置页面属性(背景,模糊等)支持,backgroundBlurStyle不支持

3. 使用场景

3.1. Navigation路由拦截案例

本示例介绍在Navigation中如何完成路由拦截:首次登录时记录登录状态,再次登录时可以直接访问主页无需重复登录,当退出登录时,下次需重新登录。

代码链接:Navigation路由拦截demo

3.1.1. 效果图预览

img

使用说明

  1. 点击Navigation路由拦截案例。

  2. 在弹出的半模态页面中勾选"阅读并同意协议",点击按钮"手机号码一键登录"。

  3. 进入主页,点击返回上级页面按钮,重新点击Navigation路由拦截案例,即可直接进入主页,不需要重复登录。

  4. 点击主页的"退出登录"按钮,退出案例,此时点击Navigation路由拦截案例需重新登录。

3.1.2. 实现思路

1、在路由模块增加路由拦截器interceptor.ets,定义拦截容器、注册方法和公共拦截逻辑,interceptor.ets

/**
 * 定义拦截实现接口
 *
 * @param routerInfo 需要拦截的路由名
 * @param param 路由参数
 */
export interface InterceptorExecute {
executeFunction(router: RouterInfo, param?: string): boolean;
}
​
/**
 * 定义拦截器方法
 */
export class Interceptor {
  // 定义拦截器容器
  private static list: Array<InterceptorExecute> = [];
​
  /**
   * 注册拦截页面
   *
   * @param interceptorFnc 子模块传过来的自定义拦截函数
   */
  public static registerInterceptorPage(interceptorFnc: InterceptorExecute): void {
    Interceptor.list.push(interceptorFnc);
  }
​
  /**
   * 公共拦截器逻辑
   *
   * @param routerInfo 接收传过来的路由名
   * @param param 路由参数
   */
  public static interceptor(routerInfo: RouterInfo, param?: string): boolean {
    // 循环拦截器容器中所有的子模块自定义的拦截函数
    for (let i = 0; i < Interceptor.list.length; i++) {
      if (Interceptor.list[i].executeFunction(routerInfo, param))
        return true; // 如果子模块拦截函数返回true,即需要拦截
    }
    // 否则就放行
    return false;
  }
}

2、当点击本案例时,触发在路由模块的动态路由.pushUri()中的interceptor的公共拦截方法(此处需动态路由完成加载后执行否则首次路由拦截失败),DynamcicsRouter.ets

// 通过获取页面栈跳转到指定页面
public static pushUri(name: string, param?: ESObject) {
  // 如果是第一次跳转,则需要动态引入模块
  if (!DynamicsRouter.builderMap.has(name)) {
    // 动态引用模块,如“@ohos/addressexchange”,和entry/oh-package.json中配置的模块名相同
    import(`${DynamicsRouter.config.libPrefix}/${routerInfo.pageModule}`)
      .then((module: ESObject) => {
        // 通过路由注册方法注册路由
        module[routerInfo.registerFunction!](routerInfo);
        // TODO:知识点:在路由模块的动态路由.pushUri()中调用拦截方法,此处必须等待动态路由加载完成后再进行拦截,否则页面加载不成功,导致无法注册拦截的函数,出现首次拦截失效。
        if (Interceptor.interceptor(name, param)) {
          return;
        }
      })
  } else {
    // TODO:知识点:除首次跳转后,之后的每次跳转都需进行路由拦截。
    if (Interceptor.interceptor(name, param)) {
      return;
    }
  }
}

3、子模块中定义业务具体拦截逻辑,做具体的拦截实现:通过routerInfo判断目的地为"我的页面"时判断登录状态是"未登录",此时执行跳转到登录页并返回true给拦截容器list(告知需拦截),已登录返回false,放行。并且注册到拦截器容器list中,interceptorPage.ets

// 子模块实现拦截接口,做具体的拦截实现
export class MyPageInterceptorExecute implements InterceptorExecute {
  executeFunction(routerInfo: RouterInfo, param?: string): boolean {
    // 通过routerInfo判断目的地为"我的页面"时判断登录状态是"未登录",此时执行跳转到登录页并返回true给拦截容器list(告知需拦截),已登录返回false,放行。
    if (routerInfo !== undefined && routerInfo.pageName === RouterInfo.NAVIGATION_INTERCEPTOR.pageName) {
      // 如果未登录
      if (!AppStorage.get("login")) {
        // 跳转登录页
        DynamicsRouter.push(RouterInfo.MULTI_MODAL_TRANSITION, param);
        return true; // true:路由拦截
      } else {
        return false; // false:否则放行
      }
    }
    // 通过routerInfo判断目的地为"登录页面"时放行。
    if (routerInfo !== undefined && routerInfo.pageName === RouterInfo.MULTI_MODAL_TRANSITION.pageName) {
      return false;
    }
    return false; // false,路由放行
  }
}
​
// 拦截器注册拦截函数
Interceptor.registerInterceptorPage(new MyPageInterceptorExecute());

4、拦截器获取拦截容器list中所有注册过的子模块的拦截函数,如果子模块拦截函数返回true,即需要拦截,否则放行。

/**
 * 公共拦截器逻辑
 *
 * @param routerInfo 接收传过来的路由名
 * @param param 路由参数
 */
public static interceptor(routerInfo: RouterInfo, param?: string): boolean {
  // 循环拦截器容器中所有的子模块自定义的拦截函数
  for (let i = 0; i < Interceptor.list.length; i++) {
    if (Interceptor.list[i].executeFunction(routerInfo, param))
      return true; // 如果子模块拦截函数返回true,即需要拦截
  }
  // 否则就放行
  return false;
}

5、通过循环拦截容器list得到返回true时通知动态路由不再继续跳转, 否则返回false,通知动态路由继续执行跳转,跳转到我的页面,DynamcicsRouter.ets

// 通过获取页面栈跳转到指定页面
public static async push(routerInfo: RouterInfo, param?: string): Promise<void> {
  if (isImportSucceed) {
    // 当返回true时执行拦截,通知动态路由不再继续跳转
    if (Interceptor.interceptor(routerInfo, param)) {
      return;
    }
    ... // 当返回false,通知动态路由继续执行跳转,跳转到我的页面
  }

6、在登录页点击:本机号码一键登录后,登陆成功,登陆状态置为true,且跳转到主页,HalfModalWindow

Button($r('app.string.multimodaltransion_phone_start_login'))
  .onClick(() => {
    if (this.isConfirmed) {
      AppStorage.set("login", true); // 登录状态置为已登录
      DynamicsRouter.pop();
      DynamicsRouter.push(RouterInfo.NAVIGATION_INTERCEPTOR); // 路由跳转
    })

7、详情页中点击:注销登录,登录状态置为false,退出登录,interceptorPage.ets

@StorageLink('login') hasLogin: boolean = true;
        
Button($r('app.string.naviagtion_interceptor_loginout'))
  .onClick(() => {
    this.hasLogin = false; // 注销登录
    DynamicsRouter.pop(); // 退出登录
  })
  .width("100%")

3.2.Navigation页面跳转对象传递案例

本示例主要介绍在使用Navigation实现页面跳转时,如何在跳转页面得到转入页面传的类对象的方法。实现过程中使用了第三方插件class-transformer,传递对象经过该插件的plainToClass方法转换后可以直接调用对象的方法。

代码链接:Navigation页面跳转对象传递案例

3.2.1. 效果图预览

img

使用说明

  1. 从首页进入本页面时,会传递一个类对象UserBookingInfo。点击“换个座位”按钮会调用该类对象的generateRandSeatNo()方法,该方法随机生成一个座位号。

3.2.2. 实现思路
  1. 在oh-package.json5中添加第三方插件class-transformer的依赖

    "dependencies": {
        "class-transformer": "^0.5.1"
    }
  2. 在使用第三方插件class-transformer的页面导入class-transformer库。

    import { plainToClass } from "class-transformer";
  3. 定义要传递的类

    // 定义一个用户类
    export class UserBookingInfo {
      userName: string = '张山'; // 姓名
      userID: string = '332045199008120045'; // 证件号
      date: string = '1月1日' // 日期
      seatNo: number = 0; // 座位号
      price: number = 200; // 价格
      constructor(name: string, id: string, date: string) {
        this.userName = name;
        this.userID = id;
        this.date = date;
      }
    
      // 获取随机座位号
      generateRandSeatNo(): number {
        this.seatNo = Math.floor(Math.random() * (200 - 1) + 1);  // 获取200以内随机号
        return this.seatNo;
      }
    }
  4. 将传递过来的参数通过class-transformer的plainToClass方法转化为类对象。

    let bookingString:string = this.pageStack.getParamByName('NavigationParameterTransfer')[0] as string;
    // 转化成普通对象
    let userBookingTmp: UserBookingInfo = JSON.parse(bookingString);
    // TODO:知识点:通过调用第三方插件class-transformer的plainToClass方法转换成类对象, 不进行转换直接使用userBookingTmp调用getUserInfo方法会造成crash
    this.userBooking = plainToClass(UserBookingInfo, userBookingTmp);

标签:登录,鸿蒙,param,跳转,拦截,Navigation,路由,页面
From: https://blog.csdn.net/m0_68038853/article/details/140284664

相关文章

  • 【最新鸿蒙应用开发】——实现鸿蒙的动画效果
    鸿蒙动画效果UI(用户界面)中包含开发者与设备进行交互时所看到的各种组件(如时间、壁纸等)。属性作为接口,用于控制组件的行为。例如,开发者可通过位置属性调整组件在屏幕上的位置。属性值的变化,通常会引起UI的变化。动画可在UI发生改变时,添加流畅的过渡效果。如果不加入动画,属性将......
  • 鸿蒙开发的语言应该怎么选?
    省流推荐ArkTS(支持HarmonyOSNext),放弃类JS开发方式,也不推荐仓颉鸿蒙开发的语言应该怎么选?在2024/06之前,官方文档【3.0/4.1】中尚有大篇幅的Web开发文档,并且在2019-2023年,每年的鸿蒙开发者大会上,多次提到过Web开发模式然而在2024年开发者大会上,官方不在提及这......
  • 前端学习-flutter学习-005-路由管理
    《Flutter实战·第二版》简单示例-跳转页面import'package:flutter/material.dart';import'dart:ui';//import'package:flutter/cupertino.dart';//voidmain(){//runApp(constMyApp());//}voidmain()=>runApp(constMyApp());//v......
  • 鸿蒙开发小案例(名片管理))
    鸿蒙开发小案例(名片管理)1、页面效果1.1初始页面1.2点击名片展开1.3点击收藏1.4点击编辑按钮2、实现代码2.1DataModel.ets2.2RandomUtil.ets2.3ContactList.ets1、页面效果1.1初始页面1.2点击名片展开1.3点击收藏1.4点击编辑按钮2、实现代码2......
  • HarmonyOS NEXT开发实战:Navigation页面跳转对象传递案例
    介绍本示例主要介绍在使用Navigation实现页面跳转时,如何在跳转页面得到转入页面传的类对象的方法。实现过程中使用了第三方插件class-transformer,传递对象经过该插件的plainToClass方法转换后可以直接调用对象的方法,效果图预览使用说明从首页进入本页面时,会传递一个类对......
  • 华为鸿蒙操作系统:创新与突破
    引言华为鸿蒙(HarmonyOS)作为华为自主研发的操作系统,自发布以来引起了广泛关注。它不仅是华为在美国制裁下的应对措施,更是科技企业在操作系统领域的一次重大突破。本文将探讨鸿蒙操作系统的背景、技术特点、应用场景以及其对未来的影响。背景市场需求随着物联网(IoT)时代的到来......
  • 硅纪元视角 | 国内首款鸿蒙人形机器人“夸父”开启应用新篇章
    在数字化浪潮的推动下,人工智能(AI)正成为塑造未来的关键力量。硅纪元视角栏目紧跟AI科技的最新发展,捕捉行业动态;提供深入的新闻解读,助您洞悉技术背后的逻辑;汇聚行业专家的见解,分享独到的视角和思考;精选对您有价值的信息,帮助您在AI时代中把握机遇。1分钟速览新闻  AI......
  • 将Linux做成路由器
    将Linux做成一个路由器主机名IPoe01192.168.200.170(外网)192.168.100.164(内网)oe02192.168.100.162(内网)通过这个规划表,oe02这个主机是只有一个内网网卡的,无法上网,我们需要将oe01这个Linux做成一个路由器,也就是从内网网卡收到的流量转发到外网网卡,然后出去路......
  • 5、flask-路由参数
     这里延续上一节的内容#路由+视图函数fromflaskimportBlueprint#frommodelsimport*#蓝图#创建蓝图对象#第一个参数:蓝图的名字#第二个参数:蓝图的包名blue=Blueprint('user',__name__,)@blue.route('/')#路由defindex():return'user......
  • 如今HarmonyOS系统大火,那么我们该如何开发一个HarmonyOS应用程序呢?该文章将带你深入了
    引言鸿蒙操作系统(HarmonyOS)是华为推出的一款新型操作系统旨在实现万物互联其广泛应用于智能手机平板物联网设备等领域使用鸿蒙开发应用能够充分发挥其强大的跨平台能力本文将为你提供一个开发鸿蒙应用的学习路线并结合一些代码示例帮助你快速入门和掌握这项技能......