简单

任意 js 框架均可使用。微应用接入像使用接入一个 iframe 系统一样简单，但实际不是 iframe。

完备

几乎包含所有构建微前端系统时所需要的基本能力，如 样式隔离、js 沙箱、预加载等。

生产可用

已在蚂蚁内外经受过足够大量的线上系统的考验及打磨，健壮性值得信赖。

安装

$ yarn add qiankun  # or npm i qiankun -S

使用

import { loadMicroApp } from 'qiankun';

// 加载微应用
loadMicroApp({
  name: 'reactApp',
  entry: '//localhost:7100',
  container: '#container',
  props: {
    slogan: 'Hello Qiankun',
  },
});

基于路由配置

1.registerMicroApps(apps, lifeCycles?)

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

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

示例

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

2.start(opts?)

• • opts - Options 可选

示例

import { start } from 'qiankun';

start(); //启动 qiankun。

3.setDefaultMountApp(appLink)

• • appLink - string - 必选

示例

import { setDefaultMountApp } from 'qiankun';

//设置主应用启动后默认进入的微应用。  
setDefaultMountApp('/homeApp'); 

4.runAfterFirstMounted(effect)

• • effect - () => void - 必选

示例

import { runAfterFirstMounted } from 'qiankun';
  
//第一个微应用 mount 后需要调用的方法，比如开启一些监控或者埋点脚本。
runAfterFirstMounted(() => startMonitor());

手动加载微应用

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

通常这种场景下微应用是一个不带路由的可独立运行的业务组件。微应用不宜拆分过细，建议按照业务域来做拆分。业务关联紧密的功能单元应该做成一个微应用，反之关联不紧密的可以考虑拆分成多个微应用。一个判断业务关联是否紧密的标准：看这个微应用与其他微应用是否有频繁的通信需求。如果有可能说明这两个微应用本身就是服务于同一个业务场景，合并成一个微应用可能会更合适。

1.loadMicroApp(app, configuration?)

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

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

示例

import { loadMicroApp } from 'qiankun';
import React from 'react';

class App extends React.Component {
  containerRef = React.createRef();
  microApp = null;

  componentDidMount() {
    this.microApp = loadMicroApp({
      name: 'app1',
      entry: '//localhost:1234',
      container: this.containerRef.current,
      props: { brand: 'qiankun' },
    });
  }

  componentWillUnmount() {
    this.microApp.unmount();
  }

  componentDidUpdate() {
    this.microApp.update({ name: 'kuitos' });
  }

  render() {
    return <div ref={this.containerRef}></div>;
  }
}

2.prefetchApps(apps, importEntryOpts?)

• • apps - AppMetadata[] - 必选 - 预加载的应用列表

• • importEntryOpts - 可选 - 加载配置

  示例

import { prefetchApps } from 'qiankun';

 //手动预加载指定的微应用静态资源。仅手动加载微应用场景需要，基于路由自动激活场景直接配置 prefetch 属性即可。
prefetchApps([
  { name: 'app1', entry: '//localhost:7001' },
  { name: 'app2', entry: '//localhost:7002' },
]);

全局

1. addGlobalUncaughtErrorHandler(handler)

• • handler - (...args: any[]) => void - 必选

示例

import { addGlobalUncaughtErrorHandler } from 'qiankun';

//添加全局的未捕获异常处理器。
addGlobalUncaughtErrorHandler((event) => console.log(event));

2. removeGlobalUncaughtErrorHandler(handler)

• • handler - (...args: any[]) => void - 必选

示例

import { removeGlobalUncaughtErrorHandler } from 'qiankun';

//移除全局的未捕获异常处理器。
removeGlobalUncaughtErrorHandler(handler);

3. initGlobalState(state)

• • state - Record<string, any> - 必选

用法

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

返回

MicroAppStateActions

onGlobalStateChange: (callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) => void
在当前应用监听全局状态，有变更触发 callback，fireImmediately = true 立即触发 callback

setGlobalState: (state: Record<string, any>) => boolean
按一级属性设置全局状态，微应用中只能修改已存在的一级属性

offGlobalStateChange: () => boolean
移除当前应用的状态监听，微应用 umount 时会默认调用

示例

主应用：

import { initGlobalState, MicroAppStateActions } from 'qiankun';

// 初始化 state
const actions: MicroAppStateActions = initGlobalState(state);

actions.onGlobalStateChange((state, prev) => {
// state: 变更后的状态; prev 变更前的状态
console.log(state, prev);
});
actions.setGlobalState(state);
actions.offGlobalStateChange();

微应用：

// 从生命周期 mount 中获取通信方法，使用方式和 master 一致
export function mount(props) {
props.onGlobalStateChange((state, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log(state, prev);
});

props.setGlobalState(state);
}