qiankun 两种集成微应用的方法（基于路由配置微应用、手动加载微应用）

RegistrableApp

name - 必选，微应用的名称，微应用之间必须确保唯一
entry - 必选，微应用的入口
container - 必选，微应用挂载的容器节点。如container: '#root'
activeRule - 必选，微应用的激活规则
props - object - 可选，主应用需要传递给微应用的数据

LifeCycles

beforeLoad - 可选
beforeMount - 可选
afterMount - 可选
beforeUnmount - 可选
afterUnmount - 可选

用法

注册微应用的基础配置信息

当浏览器 url 发生变化时，会自动检查每一个微应用注册的 activeRule 规则

符合规则的应用，将会被自动激活

import { registerMicroApps } from 'qiankun';

registerMicroApps(
  [
    {
      name: 'app1',
      entry: '//localhost:8080',
      container: '#container',
      activeRule: '/react',
      props: {
        name: 'kuitos',
      },
    },
  ],
  {
    beforeLoad: (app) => console.log('before load', app.name),
    beforeMount: [(app) => console.log('before mount', app.name)],
  },
);

1.2 start(opts?) 启动 qiankun

API 说明 - qiankunhttps://qiankun.umijs.org/zh/api#startopts

参数

opts - Options 可选

类型

Options

prefetch - 可选，是否开启预加载，默认为 true
sandbox - 可选，是否开启沙箱，默认为 true

用法

启动 qiankun

import { start } from 'qiankun';

start();

3.手动加载微应用

适用于手动加载 / 手动卸载一个微应用的场景

API 说明 - qiankunhttps://qiankun.umijs.org/zh/api#%E6%89%8B%E5%8A%A8%E5%8A%A0%E8%BD%BD%E5%BE%AE%E5%BA%94%E7%94%A8

3.1 loadMicroApp(app, configuration?) 手动加载微应用

参数

app - 必选，微应用的基础信息

name - 必选，微应用的名称，微应用之间必须确保唯一
entry - 必选，微应用的入口
container - 必选，微应用挂载的容器节点。如container: '#root'
props - object - 可选，主应用需要传递给微应用的数据

configuration - 可选，微应用的配置信息

sandbox - 可选，是否开启沙箱，默认为 true

返回一个微应用实例

mount(): Promise<null>;
unmount(): Promise<null>;
update(customProps: object): Promise<any>;
getStatus(): | "NOT_LOADED" | "LOADING_SOURCE_CODE" | "NOT_BOOTSTRAPPED" | "BOOTSTRAPPING" | "NOT_MOUNTED" | "MOUNTING" | "MOUNTED" | "UPDATING" | "UNMOUNTING" | "UNLOADING" | "SKIP_BECAUSE_BROKEN" | "LOAD_ERROR";
loadPromise: Promise<null>;
bootstrapPromise: Promise<null>;
mountPromise: Promise<null>;
unmountPromise: Promise<null>;

用法

手动加载一个微应用

<template>
  <div class="home">
    <button @click="loadApp">手动加载微应用 vue</button>
    <button @click="unloadApp">手动卸载微应用 vue</button>
    
    <!-- 存放微应用的容器 -->
    <div id="hand-micro-app"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { loadMicroApp } from 'qiankun';

export default defineComponent({
  name: 'Home',
  setup() {
    // 微应用实例
    let microApp:any = null; // 微应用实例
    
    /**
     * 加载app
     */
    const loadApp = () => {
      microApp = loadMicroApp({
        name: 'qiankun-vue2',
        entry: '//localhost:8082',
        container: '#hand-micro-app'
      });
    };

    /**
     * 卸载app
     */
    const unloadApp = () => {
      if (microApp) {
        microApp.unmount(); // 卸载微应用
      }
    };

    return {
      loadApp,
      unloadApp,
    };
  }
})
</script>

3.2 prefetchApps(apps, importEntryOpts?) 手动预加载指定的微应用静态资源

参数

apps - AppMetadata[] - 必选 - 预加载的应用列表
importEntryOpts - 可选 - 加载配置

类型

AppMetadata

name - string - 必选 - 应用名
entry - string | { scripts?: string[]; styles?: string[]; html?: string } - 必选，微应用的 entry 地址

用法

手动预加载指定的微应用静态资源

仅手动加载微应用需要，基于路由配置微应用不需要此方法

如果是基于路由配置微应用，直接配置 prefetch 属性即可

import { prefetchApps } from 'qiankun';

prefetchApps([
  { name: 'app1', entry: '//locahost:7001' },
  { name: 'app2', entry: '//locahost:7002' },
]);

开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

OpenLoong项目通过技术监督委员会（TOC）评审