1.qiankun 两种集成微应用的方法

2.基于路由配置微应用

1.1 registerMicroApps(apps, lifeCycles?) 注册微应用配置信息

参数

类型

用法

1.2 start(opts?) 启动 qiankun

参数

类型

用法

3.手动加载微应用

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

参数

用法

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

参数

类型

用法

1.qiankun 两种集成微应用的方法

qiankun 有两种集成微应用的方法，分别是：基于路由配置微应用、手动加载微应用

“基于路由配置微应用” 只能加载一个微应用
同时加载多个微应用时，需要配合 “手动加载微应用” 一起使用

如果既有基于路由配置的微应用，又有手动加载的微应用，那么手动加载的微应用中，不能使用路由

常见问题 - qiankunhttps://qiankun.umijs.org/zh/faq#

2.基于路由配置微应用

通过将微应用关联到一些 url 规则的方式，实现当浏览器 url 发生变化时，自动加载相应的微应用

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

1.1 registerMicroApps(apps, lifeCycles?) 注册微应用配置信息

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

参数

apps - Array<RegistrableApp> - 必选，微应用的一些注册信息

lifeCycles - LifeCycles - 可选，全局的微应用生命周期钩子

类型

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' },
]);

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

两种常见的内存管理方法：堆和内存池
在程序运行过程中,可能产生一些数据,例如,串口接收的数据,ADC采集的数据.若需将数据存储在内存中,以便进一步运算.处理,则应为其分配合适的内存空间,数据处理完毕后,再释放相应的内存空间.为了便于内存 ...
小程序如何做成html的滚动字幕,小程序两种滚动公告栏的实现方法
先上效果图: 横向滚动栏实现: 网上的几种方案或多或少都有一些问题: 1.setData定时器更新text view的margin-left方法,由于setData的毫秒延时,动画播放起来一卡一卡: ...
android内存池,两种常见的内存管理方法：堆和内存池
描述本文导读在程序运行过程中,可能产生一些数据,例如,串口接收的数据,ADC采集的数据.若需将数据存储在内存中,以便进一步运算.处理,则应为其分配合适的内存空间,数据处理完毕后,再释放相应的内存空 ...
两种 js下载文件的方法(转)
2019独角兽企业重金招聘Python工程师标准>>> 两种 js下载文件的方法(转) functionDownURL(strRemoteURL, strLocalURL){try{ ...
win8计算机安全模式,Win8.1怎么进入安全模式两种进入Win8.1安全模式方法介绍
在以前的Windows操作系统中,用户可以通过F8来进入电脑的安全模式,但是自从win8问世后按下F8来进入Windows的安全模式便不起作用了.由于win8及win8.1采用了混合启动的方式,所以在 ...
GIT将本地项目上传到Github（两种简单、方便的方法）
GIT将本地项目上传到Github(两种简单.方便的方法) 一.第一种方法: 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安 ...
采用8种相位，每种相位各有两种幅度的QAM调制方法，在1200Baud的信号传输速率下能达到的网数据传输速率为（）
采用8种相位,每种相位各有两种幅度的QAM调制方法,在1200Baud的信号传输速率下能达到的网数据传输速率为( D ) A. 2400b/s B. 3600b/s C. 9600b/s D. 480 ...
php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
EasyJoyStick使用以及两种操作杆 EasyJoyStick的使用方法，简单的不能再简单 Hedgehog Team-》Easy Touch -》Add Easy Touch For C#
EasyJoyStick使用以及两种操作杆 EasyJoyStick的使用方法,简单的不能再简单 Hedgehog Team->Easy Touch ->Add Easy Touch Fo ...

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

1.qiankun 两种集成微应用的方法

2.基于路由配置微应用

1.1 registerMicroApps(apps, lifeCycles?) 注册微应用配置信息

参数

类型

用法

1.2 start(opts?) 启动 qiankun

参数

类型

用法

3.手动加载微应用

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

参数

返回

用法

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

参数

类型

用法

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

最新文章

热门文章