单实例：同一个时刻只有一个微应用实例存在，此刻浏览器所有浏览器资源都是这个应用独占的，方案要解决的很大程度是应用切换的时候的清理和现场恢复。比较轻量，实现起来也简单。
多实例：资源不是应用独占，就要解决资源共享的情况，比如路由，样式，全局变量读写，DOM. 可能需要考虑的情况比较多，实现较为复杂。
应用发现。让主应用可以寻找到其它应用。 应用注册。即提供新的微前端应用，向应用注册表注册的功能。 第三方应用注册。即让第三方应用，可以接入到系统中。 访问权限等相关配置。
// index.js
// micro-app-main/src/main.ts
import startQiankun from './micro/';
startQiankun();
// micro/index.js
// micro-app-main/src/micro/index.ts
// 一个进度条插件
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import {
message
} from 'ant-design-vue';
import {
registerMicroApps,
addGlobalUncaughtErrorHandler,
start
} from 'qiankun';
// 微应用注册信息
import apps from './apps';
/**
* 注册微应用
* 第一个参数 - 微应用的注册信息
* 第二个参数 - 全局生命周期钩子
*/
registerMicroApps(apps, {
// qiankun 生命周期钩子 - 微应用加载前
beforeLoad: (app) => {
console.log('beforeMount: ', app);
// 加载微应用前，加载进度条
NProgress.start();
console.log('before load', app.name);
return Promise.resolve();
},
beforeMount: (app) => {
console.log('beforeMount: ', app);
},
// qiankun 生命周期钩子 - 微应用挂载后
afterMount: (app) => {
// 加载微应用前，进度条加载完成
NProgress.done();
console.log('after mount', app.name);
return Promise.resolve();
},
BeforeUnloadEvent: (app) => {
console.log('app: ', app);
}
});
/**
* 添加全局的未捕获异常处理器
*/
addGlobalUncaughtErrorHandler((event) => {
console.error(event);
const {
message: msg
} = event;
// 加载失败时提示
if (msg && msg.includes('died in status LOADING_SOURCE_CODE')) {
message.error('微应用加载失败，请检查应用是否可运行');
}
});
// 导出 qiankun 的启动函数
export default start;
主框架配置子应用的路由为 subApp: { url: '/subApp/**', entry: './subApp.js' }，则当浏览器的地址为 /subApp/abc 时，框架需要先加载 entry 资源，待 entry 资源加载完毕，确保子应用的路由系统注册进主框架之后后，再去由子应用的路由系统接管 url change 事件。同时在子应用路由切出时，主框架需要触发相应的 destroy 事件，子应用在监听到该事件时，调用自己的卸载方法卸载应用，如 React 场景下 destroy = () => ReactDOM.unmountAtNode(container)。
//app.js
// micro-app-main/src/micro/apps.ts
// 此时我们还没有微应用，所以 apps 为空
// 导入主应用工具类库
import { conSjh } from '../utils/index';
const msg = {
utils: conSjh // 从主应用读出的工具类库
};
const apps = [{
name: 'ReactMicroApp',
entry: '//localhost:9528',
container: '#frame',
activeRule: '#/react',
props: msg // 将定义好的数据传递给子应用
}];
export default apps;
// micro-app-main/src/shared/actions.ts
import { initGlobalState } from 'qiankun';
// 初始化 state
const initialState = {};
const actions = initGlobalState(initialState);
export default actions;
