Qiankun实践——加载微应用

2024-02-12 15:39:45

千钧实践——加载微应用

本篇接续上两篇，继续深入 Qiankun 的使用实践。本文将带你掌握如何使用 Qiankun 加载微应用，进而实现「乾坤大挪移」，将微服务轻松封装为微应用，无缝集成到主应用中。

前情回顾

在之前的文章中，我们深入探讨了 Qiankun 的沙箱机制。我们了解了 JS 沙箱和 CSS 沙箱是如何隔离微应用与主应用的，以及如何使用它们来实现微应用的安全、可靠运行。

然而，沙箱只是 Qiankun 众多功能中的一小部分。在本文中，我们将重点关注 Qiankun 的核心功能之一——加载微应用。通过学习如何使用 Qiankun 加载微应用，我们将揭开微应用开发的神秘面纱，并为构建模块化、可扩展的现代化应用奠定基础。

加载微应用的步骤

使用 Qiankun 加载微应用大致分为以下几个步骤：

定义微应用配置： 首先，需要定义微应用的配置信息，包括微应用的名称、入口文件、加载模式等。
注册微应用： 将定义好的微应用配置信息注册到 Qiankun 中，以便 Qiankun 能够识别和管理这些微应用。
渲染微应用： 在主应用中指定一个容器，并使用 Qiankun API 将微应用渲染到该容器中。

下面，我们将详细介绍每个步骤。

定义微应用配置

微应用配置是微应用基本信息的对象，通常包括以下属性：

name： 微应用的名称，用于唯一标识微应用。
entry： 微应用的入口文件，通常是微应用的 main.js 文件。
container： 微应用在主应用中渲染的容器选择器。
activeRule： 微应用的激活规则，用于判断何时加载微应用。

此外，还可以配置其他属性，如沙箱模式、通信方式等，以满足不同的需求。

注册微应用

定义好微应用配置后，需要将这些配置信息注册到 Qiankun 中。可以通过调用 registerMicroApps 方法来完成注册。该方法接收一个微应用配置数组作为参数，并负责将这些配置信息添加到 Qiankun 的内部状态中。

import { registerMicroApps } from 'qiankun';

const microApps = [
  {
    name: 'app1',
    entry: '//localhost:3001/main.js',
    container: '#app1-container',
    activeRule: '/app1'
  },
  {
    name: 'app2',
    entry: '//localhost:3002/main.js',
    container: '#app2-container',
    activeRule: '/app2'
  }
];

registerMicroApps(microApps);

渲染微应用

注册好微应用后，就可以在主应用中渲染微应用了。可以通过调用 start 方法来完成渲染。该方法接收一个微应用名称作为参数，并负责将指定的微应用渲染到对应的容器中。

import { start } from 'qiankun';

start('app1');

小结

通过以上步骤，我们就可以轻松地使用 Qiankun 加载微应用了。Qiankun 提供了强大的 API 和灵活的配置选项，让我们能够轻松地将微服务封装成微应用，并无缝集成到主应用中。在后续的文章中，我们将继续深入探索 Qiankun 的其他功能，如通信、路由、状态管理等，帮助你全面掌握微应用开发的奥秘。