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 消费数据