umi3配置qiankun文档

1、添加依赖

yarn add @umijs/plugin-qiankun -D || npm i -D @umijs/plugin-qiankun

2、修改父应相关文件（config）

2.1、父应用的配置

export default {
  qiankun: {
    master: {
      // 注册子应用信息
      apps: [
        {
          name: 'app1', // 唯一 id
          entry: '//localhost:7001', // html entry入口服务器
          sandbox：false,//是否启用沙箱样式隔离
          prefetch：false,//是否启用 prefetch 特性
        },
        {
          name: 'app2', // 唯一 id
          entry: '//localhost:7002', // html entry
        },
      ],
    },
  },
};

注意：

sandbox属性：是否开启沙箱

默认情况下沙箱可以确保单实例场景子应用之间的样式隔离，但是无法确保主应用跟子应用、或者多实例场景的子应用样式隔离。当配置为 { strictStyleIsolation: true } 时表示开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点，从而确保微应用的样式不会对全局造成影响。

2.2、父应用的路由

microApp为子应用的唯一标识

export default {
	routes: [
    {
      path: '/',
      component: '../layouts/index.js',
      routes: [
        {
          path: '/app1',
          component: './app1/index.js',
          routes: [
            {
              path: '/app1/user',
              component: './app1/user/index.js',
            },
+            // 配置微应用 app1 关联的路由
+            {
+              path: '/app1/project',
+              microApp: 'app1',
+            },
          ],
        },
+       // 配置 app2 关联的路由
+       {
+         path: '/app2',
+         microApp: 'app2'
+       },
      ],
    },
  ],
}

2.3、动态配置子应用的

在src/app.ts添加

如果config在后端，可以发请求fetch('/config')

export const qiankun = fetch('/config').then(({ apps }) => {
  return {
    apps,
    routes: [
      {
        path: '/app1',
        microApp: 'app1',
      },
    ],
  };
});

如果前端自己写
export const qiankun = {
  // 注册子应用信息
  apps: [
    {
      name: 'app1', // 唯一 id
      entry: '//localhost:20000', // html entry
      props: {
        onClick: (event) => console.log(event),
        name: 'xx',
        age: 1,
        userInfo: getUserInfo()
      },
    },
  ],
  routes: [
        {
          path: '/app1',
          microApp: 'app1',
        },
      ],
  prefetch:false,
  sandbox:false,
  lifeCycles: {
    afterMount: (props) => {
      console.log("afterMount",props);
    },
  },
}  

2.4、将子应用挂载到某个位置

import { MicroApp } from 'umi';

export function MyPage() {
  return (
    <div>
      <div>
        <MicroApp name="app1" autoSetLoading />
      </div>
    </div>
  );
}

3、子应用文件修改

3.1、子应用也必须添加qiankun依赖

yarn add @umijs/plugin-qiankun -D || npm i -D @umijs/plugin-qiankun

3.2、修改配置文件注册插件

export default {
  qiankun: {
    slave: {},
  },
};

3.3、配置运行时生命周期钩子（可选）

插件会自动为你创建好 qiankun 子应用需要的生命周期钩子，但是如果你想在生命周期期间加一些自定义逻辑，可以在子应用的 src/app.ts 里导出 qiankun 对象，并实现每一个生命周期钩子，其中钩子函数的入参 props 由主应用自动注入。

export const qiankun = {
  // 应用加载之前
  async bootstrap(props) {
    console.log('app1 bootstrap', props);
  },
  // 应用 render 之前触发
  async mount(props) {
    console.log('app1 mount', props);
  },
  // 应用卸载之后触发
  async unmount(props) {
    console.log('app1 unmount', props);
  },
};

3.4、在本地跑子应用需要换一个端口

1、在webapp文件下，添加文件.env , 里面添加代码

PORT=8081

2、在package.json文件修改如下代码

4、父子应用简单通信

4.1、主应用给子应用传数据

1、如果你用的 MicroApp 组件模式消费微应用，那么数据传递的方式就跟普通的 react 组件通信是一样的，直接通过 props 传递即可：在子应用的挂载组件页面

function MyPage() {
  const [name, setName] = useState(null);
  return (
    <MicroApp name={name} onNameChange={(newName) => setName(newName)} />
  );
}

2、如果你用的 路由绑定式 消费微应用，那么你需要在 src/app.ts 里导出一个 useQiankunStateForSlave 函数，函数的返回值将作为 props 传递给微应用，如：

// src/app.ts
export function useQiankunStateForSlave() {
  const [masterState, setMasterState] = useState({});

  return {
    masterState,
    setMasterState,
  };
}

4.2、子应用取数据

1、微应用中会自动生成一个全局 model，可以在任意组件中获取主应用透传的 props 的值。

import { useModel } from 'umi';

function MyPage() {
  const masterProps = useModel('@@qiankunStateFromMaster');
  return <div>{JSON.stringify(masterProps)}</div>;
}

2、可以通过高阶组件 connectMaster 来获取主应用透传的 props

import { connectMaster } from 'umi';

function MyPage(props) {
  return <div>{JSON.stringify(props)}</div>;
}

export default connectMaster(MyPage);

4.3基于 props 传递

1、主应用中配置 apps 时以 props 将数据传递下去

// src/app.js

export const qiankun = fetch('/config').then((config) => {
  return {
    apps: [
      {
        name: 'app1',
        entry: '//localhost:2222',
        props: {
          onClick: (event) => console.log(event),
          name: 'xx',
          age: 1,
        },
      },
    ],
  };
});

2、子应用在生命周期钩子中获取 props 消费数据