kicc-ui/src/qiankun/index.ts

/**
 * @program: kicc-ui
 * @description: 微应用乾坤配置
 * @author: wangxiang4
 * @create: 2023/7/20
 */

import { registerMicroApps, start, runAfterFirstMounted, addGlobalUncaughtErrorHandler } from 'qiankun';
import { apps } from './apps';
import { getSubDefineProps, initGlState } from './state';

/** 匹配激活微服务路由规则 */
function listenerRouteActiveRule(routerPath) {
  console.info(location.pathname,routerPath,location.pathname.startsWith(routerPath));
  return (location) => location.pathname.endsWith(routerPath);
}

/** 微应用注册 */
function registerApps() {
  const microApps = apps.map((item) => {
    // 主应用传递给微应用的数据
    item.props = getSubDefineProps();
    // 微应用触发的路由规则
    item.activeRule = listenerRouteActiveRule('/' + item.activeRule);
    return item;
  });
  registerMicroApps(microApps, {
    beforeLoad: [
      (loadApp) => Promise.resolve(()=>{
          console.info('before load', loadApp);
      }),
    ],
    beforeMount: [
      (mountApp) => Promise.resolve(()=>{
        console.info('before mount', mountApp);
      }),
    ],
    afterMount: [
      (mountApp) => Promise.resolve(()=>{
        console.info('before mount', mountApp);
      }),
    ],
    afterUnmount: [
      (unloadApp) => Promise.resolve(()=>{
        console.info('after unload', unloadApp);
      }),
    ],
  });
  // 首个微应用加载之后的回调函数用于开启一些监控或者埋点脚本进行数据分析
  runAfterFirstMounted(() => console.log('开启监控'));
  // 全局的未捕获异常处理器
  addGlobalUncaughtErrorHandler((event) => console.log(event));
  // 初始化全局通信
  initGlState();
  // 启动qiankun
  start({
    sandbox: { experimentalStyleIsolation: true }
  });
}

export default registerApps;