微前端 qiankun API

目录

1  基于路由匹配

1.1  registerMicroApps(apps,lifeCycles?)

1.2  start( opts? )

1.3  setDefaultMountApp(appLink)

1.4  runAfterFirstMounted(effect)

2  手动加载应用

2.1  loadMicroApp( app,configuration? )

2.2  prefetchApps( apps , importEntryOpts? )

3  addGlobalUncaughtErrorHandler(handler)

4  removeGlobalUncaughtErrorHandler(handler)

5  initGlobalState(state)

---

1  基于路由匹配

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

1.1  registerMicroApps(apps,lifeCycles?)

参数：

        apps：Array<RegistrableApp> 必填，微应用的注册信息；

        lifeCycles：LifeCycles 可选，全局的微应用声明周期钩子；

类型：

        RegistrableApp：

                1.name：string 必填，微应用的名称，微应用之间必须确保唯一；

                2.entry：string | { scripts?:string[];styles?:string[];html?:string } 必填，微应用的入口；

                3.container：string | HTMLElement 必填，微应用的容器节点的选择器或Element实例;

                4.activeRule：string | (location:Location) => boolean | Array<string | (location:Location) => boolean > 必填，微应用的激活规则。
                5.loader：(loading:boolean) => void；可选，loading状态发生变化时会调用的方法;

                6.props：object，可选，主应用需要传递给微应用的数据；

        LifeCycles：type  Lifecycle = (app:RegistrableApp) => Promise<any>;

                1.beforeLoad - Lifecycle | Array<Lifecycle>  可选；

                2.beforeMount - Lifecycle | Array<Lifecycle>  可选；

                3.afterMount - Lifecycle | Array<Lifecycle>  可选；

                4.beforeUnmount - Lifecycle | Array<Lifecycle>  可选；

                5.afterUnmount - Lifecycle | Array<Lifecycle>  可选；

用法：

        浏览器url发生变化会调用activeRule里的规则，activeRule任意一个返回true时表明该微应用需要被激活。

示例：

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，start()；

        1.prefetch：boolean | 'all' | string[] | ( (apps:RegistrableApp[]) => { criticalAppNames: string[]; minorAppsName:string[] } ) 可选，是否开启预加载，默认为true；

        2.sandbox：boolean | { strictStyleIsolation?:boolean , experimentalStyleIsolation?:boolean } 可选，是否开启沙箱，默认为true；

        experimentalStyleIsolation为true时，会将应用的样式修改为：

// 假设应用名是 react16
.app-main {
  font-size: 14px;
}

div[data-qiankun-react16] .app-main {
  font-size: 14px;
}

        注意：@keyframes、@font-face、@import、@page将不会被支持；

        3.singular：boolean | ( app:RegistrableApp<any>) => Promise<boolean> );可选，是否为单实例场景，单实例指的是同一时间只会渲染一个微应用，默认为true；

        4.fetch：Funtion 可选，自定义fetch方法;

        5.getPublicPath：( enrty:Entry ) => string，可选，微应用的entry值;

        6.getTemplate：(tpl:string) => string，可选；

        7.excludeAssetFilter：(assetUrl:string) => boolean，可选，指定部分特殊的动态加载的微应用资源(css/js)不被qiankun劫持处理。

1.3  setDefaultMountApp(appLink)

        appLink：string，必填；

        设置主应用启动后默认进入的微应用；

import { setDefaultMountApp } from 'qiankun';
setDefaultMountApp('/homeApp');

1.4  runAfterFirstMounted(effect)

        effect：()=>void，必填；

        第一个微应用mount后需要调用的方法，比如开启一些监控或埋点脚本；

import { runAfterFirstMounted } from 'qiankun';

runAfterFirstMounted(() => startMonitor());

2  手动加载应用

手动加载微应用的场景：不带路由的可独立运行的业务组件。微应用不宜拆分过细，建议按业务域来做拆分。业务关联紧密的功能单元应该做成一个微应用。一个判断业务关联是否紧密的标准：看这个微应用与其它微应用是否有频繁的通信需求。

2.1  loadMicroApp( app,configuration? )

       参数：

        1.app - LoadableApp 必选，微应用的基础信息，name、entry、container、props；

        2.configuration - Configuration 可选，微应用的配置信息，sandbox、singular、fetch、getPublicPath、getTemplate、excludeAssetFilter；

        返回值 - MicroApp 微应用实例：

        1.mount() : Promise<null>;

        2.unmount() : Promise<null>;

        3.update( customProps:object ):Promise<any>;

        4.getStatus() : | "NOT_LOADED" | "LOADING_SOURCE_CODE" | "NOT_BOOTSTRAPPED" | "BOOTSTEAPPING" | "NOT_MOUNTED" | "MOUNTING" | "MOUNTED" | "UPDATING" | "UNLOADING" | "SKIP_BECAUSE_BROKEN" | "LOAD_ERROR";

        5.loadPromise:Promise<null>;

        6.bootstrapPromise:Promise<null>;

        7.mountPromisre:Promise<null>;

        8.unmountPromise:Promise<null>;

用法：

        如果需要能支持主应用手动update微应用，需要微应用entry再多导出一个update钩子:

export async function mount(props) {
  renderApp(props);
}

// 增加 update 钩子以便主应用手动更新微应用
export async function update(props) {
  renderPatch(props);
}

2.2  prefetchApps( apps , importEntryOpts? )

参数：

        1.apps - AppMetadata[] - 必填，预加载的应用列表；

        2.importEntryOpts - 可选，加载配置；

类型：
        AppMetadata：name - string 必填，应用名；

                                 entry - 必填，微应用的entry地址；

用法：

        手动预加载指定的微应用静态资源。仅手动加载微应用场景需要，基于路由自动激活场景直接配置prefetch属性即可。

3  addGlobalUncaughtErrorHandler(handler)

参数：handler - (...args: any[]) => void 必填；

用法：添加全局的未捕获异常处理器；

4  removeGlobalUncaughtErrorHandler(handler)

参数：handler - (...args: any[]) => void 必填；

用法：移除全局的未捕获异常处理器；

5  initGlobalState(state)

参数：state - Record<string,any> 必填；

用法：定义全局状态，并返回通信方法，建议在主应用使用，微应用通过props获取通信方法；

返回：

        MicroAppStateActions：onGlobalStateChange：在当前应用监听全局状态，有变更触发callback,fireImmediately = true立即触发callback;

                                                setGlobalState:按一级属性设置全局状态，微应用只能修改已存在的一级属性；

                                                offGlobalStateChange：移除当前应用的状态监听，微应用umount时会默认调用；