HarmonyOS 鸿蒙Next 组件化页面跳转设计

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 组件化页面跳转设计

entry跳转feature页面，按照之前说的需要通过命名路由的方式跳转的，参考文档:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/arkts-routing-V13  

我们项目中目前这样设计，全页面跳转逻辑全放在一个router的hsp包里面，entry页面按钮点击->调用router通用跳转方法->跳转对应的feature功能页面。  这里有个问题，按照文档要求，需要在跳转的地方，引入对应的页面名称，因为跳转页面是根据接口配置动态跳转，因而我们router的hsp包里面包含所有页面跳转配置，不可能反向导入一大堆feature功能包吧？  这个要如何解决？


更多关于HarmonyOS 鸿蒙Next 组件化页面跳转设计的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复
建议使用navigaton动态加载下

Navigation的动态加载

基于标准的export和import动态导入语法，实现UIBuilder的动态加载。

当子组件较多、较复杂时，由于Navigation组件一次性加载所有模块，使用常规加载会导致主页加载缓慢。为了减少主页渲染时间，可以使用动态加载，在实际页面跳转时再按需的动态引入子组件，优化用户的首次加载速度体验。

深色代码主题
复制
@Entry
@Component
struct DynamicHome {
  @Provide('pathInfos') pageInfos: NavPathStack = new NavPathStack()
  @State active: boolean = false
  @BuilderParam PageOneLoader: () => void
  @Builder
  PageMap(name: string) {
    if (name === 'pageOne') {
      this.PageOneLoader();
    }
  }
  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button('PageOne', { stateEffect: true, type: ButtonType.Capsule })
          .onClick(() => {
            this.onEntryClick('pageOne')
          })
        ...
      }
    }.title('主页').navDestination(this.PageMap)
  }
  async loadPageOne(key: string){
    if (key === "pageOne") {
      let { PageOneLoader} = await import("../pages/PageOneLoader")
      this.PageOneLoader = PageOneLoader;
    }
  }
  // 点击事件，触发动态加载
  private onEntryClick(): void {
    try {
      this.loadPageOne('pageOne');
      this.pageInfos.clear();
      this.pageInfos.pushPathByName('pageOne', '');
      logger.info('DynamicImport Success');
    } catch (error) {
      logger.info('DynamicImport Fail');
    }
  }
}

被动态加载的组件pageOne组件用PageOneLoader函数封装，当PageOneLoader被调用时，会渲染pageOne页面。

深色代码主题
复制
import { pageOne } from './pageOne';
@Builder
export function PageOneLoader() {
  pageOne();
}

作为API的局限性，Router配合[@Entry](/user/Entry)的路由方式很难实现以下场景的功能，需要使用Navigation实现

页面间传递不可序列化的页面参数

router由C++存储数据，类型受限；而Navigation可以使用统一的前端路由表配置对象，由基于状态管理能力通过驱动数据驱动页面切换，参数配置完全由自己定义

复杂动效互动场景的实现，如页面之间元素进行共享互动

页面与页面之间相互独立，无法产生关联，尤其在复杂动效互动场景下（页面之间元素进行共享互动）很难实现

模态互动场景

在模态交互场景，比如半模态弹窗等，需要在模态界面进行页面切换，而模态界面本身属于页面内的控件，无法通过页面路由实现模态界面中的切换效果，需要提供组件级的路由能力，嵌套在模态弹窗内。

灵活的让灵活管控页面的加载和销毁

[@Entry](/user/Entry)方式通过工具链生成自执行代码，一旦当前模块加载就会自动执行代码生成页面，无法让管控加载和销毁逻辑

一多分栏能力

自动适配窗口显示大小，在窗口较大的场景下自动切换分栏展示效果

演进计划

考虑上述Navigation的优势，以及为保证体验一致性，推荐使用Navigation，router暂不演进。

更多关于HarmonyOS 鸿蒙Next 组件化页面跳转设计的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，组件化页面跳转设计主要依赖于ArkUI框架，特别是使用JS或eTS（Enhanced TypeScript）语言进行开发时。页面跳转可以通过导航组件（如Navigator）或页面路由管理来实现。

  1. 定义路由：在应用的入口文件或路由配置文件中，预先定义好各个页面（组件）的路由路径。

  2. 触发跳转：在需要跳转的组件中，通过调用Navigator组件的push方法或自定义的路由管理函数，并传入目标页面的路由路径和所需参数。

  3. 接收参数：在目标页面组件中，通过页面生命周期函数或路由管理提供的API接收传递过来的参数。

  4. 返回数据：如果需要从目标页面返回数据，可以使用Navigator组件的pop方法，并在调用时携带返回数据。在源页面组件中，通过相应的回调或监听器接收返回的数据。

  5. 页面栈管理：HarmonyOS提供了页面栈管理机制，可以方便地管理页面的入栈和出栈，实现页面的前进和后退功能。

请注意，具体的实现细节可能因项目结构和开发习惯而有所不同。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部