react umi+qiankun 实现微前端 加载微应用、父子应用通信

1、安装依赖。

"devDependencies": {
   "@umijs/plugin-qiankun": "^2.40.0",
   "@umijs/preset-react": "^2.1.1",
   ...
}

2、微应用加载、注册

a. 父应用-----umirc.ts。还有一种运行时配置子应用方法。没写，试了报错。

import { defineConfig } from 'umi'

export default defineConfig({
  history: {
    type: 'browser',
  },
  /***********注册子应用*****************/
  qiankun: {
    master: {
      // 注册子应用信息
      sandbox: false,
      apps: [
        {
          name: 'app1',
          entry: 'https://XXXXXXXXXXXXXXXX',
          history: 'browser',
          props: {
          	// 可传入一些参数，在子应用生命周期函数的props参数中可以接收到
          }
        }
      ]
    }
  }
  /***********装载子应用，建议使用这种方式来引入自带路由的子应用*****************/
  routes: [
  	{
  		path: '/',
  		component: '@/layout',
  		routes: [
  			name: '子应用1',
  			path: '/app1',
  			microApp: 'app1',
  			// 子应用路由
  			routes: [
  				{
                  name: '详情',
                  path: '/app1/approval'
                },
                {
                  name: '待办',
                  path: '/app1/approval/todo',
                  hideInMenu: true,
                  showBackBtn: true,
                  rootMenuPath: '/app1/approval',
                }
  			]
  		]
	}
  ]
})

b. 子应用-----umirc.ts

import { defineConfig } from 'umi'

export default defineConfig({
  history: {
    type: 'browser',
  },
  //开启qiankun配置
  qiankun: {
    slave: {}
  },
  routes: [...]
})

子应用-----app.js，配置运行时生命周期钩子，可选

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、父子应用通信（需确保已安装 @umijs/plugin-model 或 @umijs/preset-react）

a. 父应用—app.ts，导出一个 useQiankunStateForSlave 函数

import { useState } from 'react'

export function useQiankunStateForSlave() {
  const [campusId, setCampusId] = useState('')
  const [appId, setAppId] = useState('Scholar')
  return { campusId, setCampusId, appId, setAppId}
}

在系统任意需要修改变量值的文件里

import { useModel } from "umi"

const Test = (props) => {
	const { setCampusId, setAppId } = useModel('@@qiankunStateForSlave')

	const changeParams = () => {
		setCampusId('1005')
		setAppId('sean')
	}
}
export default Test

b. 子应用—合适的文件

import { useModel } from 'umi';

const Layout = (props) => {
	const  { dispatch } = props
	
	const initParams = () => {
		const masterProps = useModel('@@qiankunStateFromMaster')
		const { campusId, appId } = masterProps
		// 可以将参数存在 window.sessionStorage 中
		appId && sessionHelper.setAppId(appId)
   		campusId && sessionHelper.setCampusId(campusId)
   		// 父应用传参变化时，子应用需要刷新数据，所以使用到了dispatch
		dispatch({
	      type: 'user/saveParamsInfo',
	      campusId,
	      appId,
	    })
	}
}

export default layout

// 业务界面监听示例
const FormCategory = (props) => {
	const { campusId, appId } = props
	useEffect(() => {
		handleRefresh()
	}, [campusId, appId])
}

export default connect(({ user }) => ({
  campusId: user.paramsInfo.campusId,
  appId: user.paramsInfo.appId
}))(FormCategory);

没有啦