HarmonyOS鸿蒙Next中动态导入另一module组件并能在当前组件build中加载显示

HarmonyOS鸿蒙Next中动态导入另一module组件并能在当前组件build中加载显示 在组件A中动态导入另一个module的组件B，并且在组件A中能够直接在build中显示，不是在组件的点击事件中显示，请问如何实现，同时通过这中动态引入的方式是否可以实现减少包体积大小，希望有蒙友帮忙解答下，感激

4 回复

可以参考官网HSP动态加载技术方案，可以通过鸿蒙提供的HSP实现按需加载，参考按需加载模块。

【背景知识】

HSP（Harmony Shared Package）是动态共享包，可以包含代码、C++库、资源和配置文件，通过HSP可以实现代码和资源的共享。HSP不支持独立发布，而是跟随其宿主应用的APP包一起发布，与宿主应用同进程，具有相同的包名和生命周期。

参考文档：HSP。

【解决方案】

  • 想要构建HSP模块，需要：

  1. 创建HSP模块：创建一个新的Module，并且在模板类型中选择Shared Library，然后设置模块信息

  2. 编译HSP模块：通过DevEco Studio菜单栏的Build > Make Module ${libraryName}进行编译构建，生成HSP： 打包HSP时，会同时默认打包出HAR，在模块下build目录下可以看到*.har和*.hsp

    参考文档：构建HSP。

  • 想要在应用内引用HSP，需要将HSP共享包上传至私仓（参考将三方库发布到 ohpm-repo），先按以下操作编译生成*.tgz包。

  1. 点击工具栏图标将编译模式切换成release模式

  2. 选中HSP模块的根目录，点击Build > Make Module ${libraryName}启动构建。构建完成后，build目录下生成HSP包产物，其中.tgz用来上传至私仓。

  3. 之后在项目的package.json中添加HSP包依赖来引用HSP包：

    参考文档：引用共享包。

将HSP发布到私仓引用，可以减少包体积。

更多关于HarmonyOS鸿蒙Next中动态导入另一module组件并能在当前组件build中加载显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在组件A中使用async/await进行动态导入，结合状态变量控制渲染时机。这种模式通过生命周期钩子触发加载，利用状态变量驱动UI更新

@State componentB: any = null

aboutToAppear() {
  import('moduleB').then((module) => {
    this.componentB = module.ComponentB
  })
}

build() {
  Column() {
    if (this.componentB) {
      this.componentB() // 渲染动态加载的组件
    } else {
      Text('加载中...')
    }
  }
}

在HarmonyOS鸿蒙Next中，使用动态导入加载其他module的组件需通过import()语法实现异步加载。在ArkTS中，结合@Builder或条件渲染控制组件显示。示例代码：

import { Builder } from '@ohos.arkui.advanced';

@Builder
function loadDynamicModule() {
  import('../../OtherModule').then(module => {
    // 使用module中的组件
  });
}

需确保目标module已正确配置依赖与导出，动态导入的组件需在build函数中通过状态变量触发渲染。

在HarmonyOS Next中，可以通过import()动态导入其他模块的组件，结合@Builder或@BuilderParam实现组件A的build方法中加载并显示组件B。具体步骤如下：

  1. 使用异步import()导入目标模块，例如：

    import { import } from '[@ohos](/user/ohos).module';
let moduleB = await import('[@bundle](/user/bundle):moduleB/entry');

  2. 在组件A中通过@Builder或状态变量存储导入的组件，例如：

    [@State](/user/State) componentBBuilder: () => void = null;

async loadComponentB() {
  const moduleB = await import('[@bundle](/user/bundle):moduleB/entry');
  this.componentBBuilder = moduleB.getComponentBBuilder(); // 假设模块暴露Builder方法
}

  3. 在aboutToAppear生命周期中调用加载方法，确保build时组件已准备：

    aboutToAppear() {
  this.loadComponentB();
}

  4. 在build方法中通过条件渲染或@Builder调用显示组件B：

    build() {
  Column() {
    if (this.componentBBuilder) {
      this.componentBBuilder()
    }
  }
}

这种方式可以实现包体积优化，因为组件B仅在需要时加载，不会增加初始包大小。但需注意异步加载可能带来轻微渲染延迟。

回到顶部