探索HarmonyOS：一键掌握Router与NavPathStatck的传参和页面回调技巧 ...

三尺非寒  金牌会员 | 2024-12-21 02:49:05 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 845|帖子 845|积分 2535

路由的选择

    HarmonyOS提供两种路由实现的方式，分别是 Router 和 NavPatchStack。两者使用场景和殊效各有优劣。
    组件适用场景特点备注Router模块间与模块内页面切换通过每个页面的url实现模块间解耦NavPathStack模块内页面切换通过组件级路由统一起由管理   

  • 什么时间使用 NavPatchStack ?
    如果是单包应用开发，不使用动态包(hsp)举行拆包，只是使用静态包(har)简单的举行模块拆分，那么我保举使用 navPatchStack。
   

  • 什么时间使用 Router ?
    如果像开发 鸿蒙元服务，对单包体积有 2M 的限制，那么我们不得不使用动态包的方式。将相对独立的功能，二级页面等拆分出去，封装成动态包，可避开 dependencies 直接依赖得引用情势。
    此时使用 router 跳转 url 的方式才可跳转到动态包内非直接引用的页面
    NavPatchStatck 如何跳转(传参)及页面回调

    NavPathStack 是配合 Navigation 一起使用的，
Navigation导航组件做统一的页面跳转管理，它提供了一系列属性方法来设置页面的标题栏、工具栏以及菜单栏的各种展示样式。
    如何跳转(传参)及实现页面回调？
                      登录后复制                  
  1. //第一步：定义一个用于传参和实现页面回调的模型
  2. export interface RouterModel {
  3.   params?: Object, // 要传递给跳转页面的参数
  4.   popCallback?: (value: Object | undefined) => void // 用于页面回调
  5. }
复制代码
     

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
                               登录后复制                  
  1. //第二步，需要在应用的根页面自行维护 navStack 实例，并传递给根节点 Navigation
  2. @Provide('navPathStack') navPathStack: NavPathStack = new NavPathStack()
  4. Navigation(this.pageInfos) {
  5.   Column() {}
  6. }
  7. .title('NavIndex')
  8. .navDestination(this.PageMap)
  11. // 统一管理维护路由跳转
  12. @Builder
  13.   PageMap(name: string, params: RouterModel) {
  14.     if (name === 'pageOne') {
  15.       TestNavPathPage({ // TestNavPathPage 就是要跳转的目标页面
  16.         routerParams: params
  17.       })
  18.     } else {
  19.       // 默认空页面
  20.     }
  21. }
复制代码
     

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
                               登录后复制                  
  1. /// 任意一个页面获取 navPathStack 调用跳转并传参
  2. @Component
  3. export struct RouterCallbackExample {
  4.   @Consume('navPathStack') navPathStack: NavPathStack;
  7.   // NavPatchStack 方式跳转并获取回调
  8.   navPathStackJump() {
  9.     const routerParams: RouterModel = {
  10.       params: '我是入参 123', //传递到跳转页面的入参
  11.       popCallback: (callbackValue) => {
  12.         // 这里拿到回调结果，注意要判断 callbackValue !== undefine
  13.         // 这里拿到下面目标页面回传的结果 ‘我是回调的结果 345’
  14.       }
  15.     }
  16.    this.navPathStack.pushPathByName('pageOne', routerParams) // 'pageOne' 对应上面 'PageMap' 方法内定义的路径名称常量
  17.   }
  19.   build() {
  20.     Button('跳转').onClick(() => {
  21.         this.navPathStackJump()
  22.     })
  23.   }
  24. }
复制代码
     

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
                               登录后复制                  
  1. /// 目标页面接收入参、并返回页面回调
  2. @Component
  3. export struct TestNavPathPage {
  4.   @Consume('navPathStack') navPathStack: NavPathStack;
  5.   routerParams?: RouterModel
  6.   @State receiveParams: string = ''
  8.   aboutToAppear(): void {
  9.     // 接收入参，这里拿到上面传入的 ‘我是入参 123’
  10.     let receiveParams = this.routerParams!.params
  11.   }
  13.   build() {
  14.     NavDestination() {
  15.       Button('关闭页面并回调结果').onClick(() => {
  16.         if (this.routerParams?.popCallback !== undefined) {
  17.           this.routerParams.popCallback('我是回调的结果 345 ')
  18.         }
  19.         this.navPathStack.pop()
  20.       })
  21.     }.title('跳转目标页')
  22.   }
  23. }
复制代码
     

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
             Router 如何跳转(传参)及页面回调

    Router 跳转可支持跳转本包内页面以及动态包大概拆包内的页面，
   

  • url 的定义举比方下：
                      登录后复制                  
  1. 1. 本地包内，或者直接依赖的静态包内页面，url 定义为 ： pages/Page1
  2. 2. 分包内的页面，url 定义为 ：@bundle:com.rex.harmony.atomic.service/featureName/ets/pages/Page2
  4. // com.rex.harmony.atomic.service 是我的应用包名
  5. // featureName 是跳转页面所在的模块名称，对应 module.json5 里面额 name
  6. // ets/pages/Page2 为目标页面在模块内的页面路径，对应 main_pages.json 内的页面路径
复制代码
     

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
            

  • url 跳转
                      登录后复制                  
  1. router.pushUrl({ url: '', params: Object })
复制代码
     

  • 1.
            

  • 留意： 使用 router + url 举行跳转的目的页面必须使用 @Entry 修饰，且在main_pages.json 文件内填写对应路径
   

         重点：截止 API11 版本，router 支持传递的 params 传参，不是引用传递，以是在动态包内实际获取到的不是同一个对象，为了实现页面回调，router 我们需要做如下封装：
        

  • 如何跳转(传参)及实现页面回调？抛砖引玉 —
   

  • 在公共的har包内定义 Router 管理类 FastRouter
    (在下文扩展中解释单例为什么这么实现)
                      登录后复制                  
  1. import { RouterModel } from './model/RouterModel'
  2. import { router } from '@kit.ArkUI'
  4. /// 基于 router 库封装，为了实现页面回调
  5. export class FastRouter {
  6.   public readonly routerStack: RouterModel[] = []
  8.   /// 跨 hsp 使用这种方式实现单例
  9.   public static instance(): FastRouter {
  10.     const storageKey = 'REX_FAST_ROUTER'
  11.     if (!AppStorage.has(storageKey)) {
  12.       AppStorage.setOrCreate(storageKey, new FastRouter())
  13.     }
  14.     return AppStorage.get<FastRouter>(storageKey)!
  15.   }
  17.   /// 获取路由传递的入参
  18.   public static get getRouterCurrentParams(): RouterModel | undefined {
  19.     const stack = FastRouter.instance().routerStack
  20.     if (stack.length === 0) {
  21.       return undefined
  22.     }
  23.     return stack[stack.length - 1]
  24.   }
  26.   /// push 页面
  27.   public static async push(route: RouterModel): Promise<void> {
  28.     try {
  29.       await router.pushUrl({ url: route.url, params: route.params })
  30.       FastRouter.instance().routerStack.push(route)
  31.     } catch (_) {
  32.       console.log('>>>>')
  33.     }
  34.   }
  36.   /// replace 页面
  37.   public static async replace(route: RouterModel): Promise<void> {
  38.     try {
  39.       await router.replaceUrl({ url: route.url, params: route.params })
  40.       const instance = FastRouter.instance()
  41.       const list = instance.routerStack
  42.       if (list.length > 0) {
  43.         instance.routerStack.splice(instance.routerStack.length - 1, 1, route)
  44.       }
  45.     } catch (_) {
  46.       // 暂无处理
  47.     }
  48.   }
  50.   /// 退出栈顶页面
  51.   public static async pop(animated?: boolean): Promise<void> {
  52.     router.back()
  53.     const routerStack = FastRouter.instance().routerStack
  54.     routerStack.pop()
  55.   }
  56. }
复制代码
     

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
            

  • 任一页面使用 FastRouter 举行 url 跳转
                      登录后复制                  
  1. // 跳转到 hsp 包(feature_hsp_page)内的 TestHspHomePage 页面
  2. const routerParams: RouterModel = {
  3.   url: '@bundle:com.rex.harmony.atomic.service/feature_hsp_page/ets/pages/TestHspHomePage',
  4.   params: '我是入参 1488',
  5.   popCallback: (callbackValue) => {
  6.     if (callbackValue !== undefined) {
  7.       //这里获取跳转页的回调数据
  8.       //接收到下文中目标页面的回调结果：‘我是回调的结果 6100 ’
  9.     }
  10.   }
  11. }
  12. FastRouter.push(routerParams)
复制代码
     

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
            

  • 在目的页面内汲取入参并回调结果
                      登录后复制                  
  1. @Entry
  2. @Component
  3. struct Index {
  4.   routerParams?: RouterModel
  6.   aboutToAppear(): void {
  7.     this.routerParams = FastRouter.getRouterCurrentParams as RouterModel
  8.     let receiveParams = this.routerParams.params //这里接收入参，也就是上面传递的 ‘我是入参 1488’
  9.   }
  11.   build() {
  12.     Button('关闭页面并回调结果').onClick(() => {
  13.       if (this.routerParams?.popCallback !== undefined) {
  14.         this.routerParams.popCallback('我是回调的结果 6100 ')
  15.       }
  16.       FastRouter.pop()
  17.     })
  18.   }
  19. }
复制代码
     

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
             总结

    NavPatchStack 和 Router 两种路由方式各有优劣，NavPatchStack 方便统一管理，Router 方便解耦，两者没有任何关联，可以一起使用，也可以单独使用。
    扩展：动态包、静态包的使用差别

    说到动态包(HAR)和静态包(HSP)，这里扩展一下两者的区别。
   

    静态包的 module.json5 文件，type 标识为 har
                      登录后复制                  
  1. {
  2.   "module": {
  3.     "name": "静态包模块名称",
  4.     "type": "har",
  5.     "deviceTypes": [
  6.       "default",
  7.       "tablet"
  8.     ]
  9.   }
  10. }
复制代码
     

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
             静态包的 module.json5 文件，type 标识为 shared
                      登录后复制                  
  1. {
  2.   "module": {
  3.     "name": "动态包模块名称",
  4.     "type": "shared",
  5.     "description": "$string:shared_desc",
  6.     "deviceTypes": [
  7.       "phone",
  8.       "tablet"
  9.     ],
  10.     "deliveryWithInstall": true,
  11.     "installationFree": true,
  12.     "pages": "$profile:main_pages"
  13.   }
  14. }
复制代码
     

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
             动态包和静态包都可以被直接引用，在 oh-package.json5 内
                      登录后复制                  
  1. {
  2. ...省略
  3.   "dependencies": {
  4.     "@rex/任意名称": "file:../../base/静态包模块名称",
  5.     "@rex/任意名称": "file:../../base/动态包模块名称"
  6.   }
  7. }
复制代码
     

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
             重点：
   

  • 动态包可以不直接依赖( 比方：使用 preload )，跳转动态包内的页面可以通过 router 拼接 url 举行跳转
  • har 中的代码和资源跟随使用方编译，如果有多个使用方，存在多个 hap，也包罗使用了 hsp 的场景。该 har 的编译产物中会存在多份雷同拷贝。
         存在两种情况，如果harA和harB都依赖harC，单个hap依赖harA、harB，那么只会存在一份harA、harB、harC；如果harA和harB都依赖harC，有两个hap，hapA依赖harA，hapB依赖harB，那么终极会存在一份harA、harB，两份harC；
        

  • hsp 中的代码和资源可以独立编译，运行时在一个进程中代码也只会存在一份
    举个例子：
   

  • 如果应用内没有使用动态包，大概把单例的封装放在动态包里被其他包(静态包或动态包)直接依赖，我们的单例可以这么写：
                      登录后复制                  
  1. class SimgleProvider {
  2.       private static _instance?: SimgleProvider
  4.       public static instance(): SimgleProvider {
  5.         if (!SimgleProvider._instance) {
  6.           SimgleProvider._instance = new SimgleProvider()
  7.         }
  8.         return SimgleProvider._instance
  9.       }
  10.     }
复制代码
     

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
            

  • 在应用的任意一处获取这个单例都是同一个对象
  • 但如果单例封装放在 har 包内，该 har 包被其他包(静态包和动态包)依赖引用。仍然使用上述代码实现单例，我们在 entry 大概 被 entry 直接依赖的 har 中获取到的 SimgleProvider 单例 和在 hsp 包内获取到的 SimgleProvider 单例 不是指向同一份内存，它会被拷贝两份。
         可以简单的总结为：一个应用内，同一个 har 包，如果同时被 har (大概entry)和 hsp 依赖引用，会被拷贝两份。
        

  • 如果需要整个应用内，包罗 entry、har、hsp 都指向的是同一个单例对象，要么把这个单例封装放在 hsp 内，如果单例封装放在 har 内，需要把上面的单例实现代码改成如下：
                      登录后复制                  
  1. class SimgleProvider {
  2.   private static _instance?: SimgleProvider
  4.   public static instance(): FastRouter {
  5.     const storageKey = 'SimgleProvider'
  6.     if (!AppStorage.has(storageKey)) {
  7.       AppStorage.setOrCreate(storageKey, new SimgleProvider())
  8.     }
  9.     return AppStorage.get<SimgleProvider>(storageKey)!
  10.   }
  11. }
复制代码
     

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
            

  • 借助AppStorage，实现全应用单例
    上述示例demo已上传，请参考下方链接
   

    附注(Example)

    Demo 示例已上传：
    GitHub： https://github.com/liyufengrex/HarmonyAtomicService
    GitCode： https://gitcode.com/liyufengrex/HarmonyAtomicService
    (基于API11开发，支持NEXT及以上版本运行)已上传可供参考，包罗如下内容：
   

  • 静态库+动态包+多模块设计
  • 状态管理
  • 统一起由管理(router+navPathStack)
  • 网络请求、Loading、Toast、数据长期化 等工具库封装
  • 自定义组件、自定义弹窗(解耦)
  • EventBus 事件通知
  • 扩展修饰器，实现 节省、防抖、权限申请
  • 动态路由 (navPathStack + 动态import + WrappedBuilder)
  • UI动态节点操作 (BuilderNode + NodeController)
  • 折叠屏适配示例
  • 组件工厂示例
  • 组件动态属性设置示例
                      登录后复制                  
  1. // 工程目录
  2. ├──entry                                        // ets代码区
  3. │  └──src/main/ets
  4. │       ├──entryability  
  5. │       │  ├──FoldStatusObserver.ets             // 折叠屏幕变化监听
  6. │       │  └──EntryAbility.ets         
  7. │       ├──pages  
  8. │       │  └──MainPage.ets                       // 首页
  9. ├──business                                      // 放置静态包的文件夹(业务模块)
  10. │  ├──feature_home                               // 放置首页Tab里的一些示例页面                 
  11. │  │   └──/src/main/ets/pages      
  12. │  │      ├──HomePage.ets                         //首页的第一个Tab                     
  13. │  │      ├──BuilderNodeExample.ets               //动态节点操作示例         
  14. │  │      ├──CustomDialogExample.ets              //自定义弹窗解耦
  15. │  │      ├──EventBusExample.ets                  //消息通知
  16. │  │      ├──HttpRequestExample.ets               //网络请求示例
  17. │  │      ├──PermissionExample.ets                //使用注解请求权限
  18. │  │      ├──RouterCallbackExample.ets            //使用 NavPathStack 与 Route 两种方式实现页面跳转及回调(HSP、HAR)
  19. │  │      ├──FixFoldUiExample.ets                 //折叠屏适配示例
  20. │  │      ├──ComponentFactoryExample.ets          //组件工厂示例
  21. │  │      ├──AttributeModifierExample.ets         //组件动态属性设置示例
  22. │  │      └──ThrottleExample.ets                  //使用注解防抖
  23. │  ├──feature_setting   
  24. │  │   └──/src/main/ets/pages  
  25. │  │      ├──SettingPages.ets                     //首页的第二个Tab
  26. │  │      └──TestDynamicNavPage.ets               //测试动态路由示例
  27. ├──features                                       //放置动态包的文件夹
  28. │  ├──feature_has_page  
  29. │  │   └──/src/main/ets/pages  
  30. │  │      ├──TestHspNavPathPage.ets               //测试 NavPath 跳转 HSP 内页面
  31. │  │      └──TestHspRouterPage.ets                //测试 Route 跳转 HSP 内页面
  32. ├──base  
  33. │  ├──fast_ui                                     //封装公共UI
  34. │  │   ├──/src/main/ets/compnents  
  35. │  │   │   ├──FoldStatusContainer.ets             // 折叠屏变化响应组件封装
  36. │  │   │   ├──FastLoading.ets                     // loading工具
  37. │  │   │   └──FastToast.ets                       // toast工具
  38. │  │   └──/src/main/ets/styles                    // 公共样式
  39. │  ├──fast_util                                   // 通用工具
  40. │  │   ├──/src/main/ets
  41. │  │      ├──EventBus.ets                         // 消息通知+监听                     
  42. │  │      ├──FastLog.ets                          // 日志打印
  43. │  │      ├──FastNavRouter.ets                    // 用于动态路由
  44. │  │      ├──FastPermission.ets                   // 请求权限注解器
  45. │  │      ├──FastRouter.ets                       // 基于 router 库封装，为了实现页面回调
  46. │  │      ├──FastTool.ets               
  47. │  │      ├──PreferencesUtil.ets                  // 数据持久化工具
  48. │  │      └──ThrottleTool.ets                     // 防抖注解器
  49. │  ├──global_constant  
  50. │  │
  51. ├──entry/src/main/resources                   // 应用资源目录
  52. └──module.json5                               // 添加卡片拓展能力                        
复制代码
     

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
             补充

    从 API version 12 开始，Navigation支持使用系统路由表的方式举行动态路由。各业务模块(HSP/HAR)中需要独立配置router_map.json文件(可参考上述demo内TestHspNavPathPage.ets文件)。
    具体可参考文档： Navigation系统路由

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

三尺非寒

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表