微服务qiankun实现主应用以链接形式访问子应用
背景：俩个系统之间的交接，项目分模块打包，同时，主页中嵌入iframe，qiankun可以实现这个需求
qiankun特点：
微前端架构具备以下几个核心价值：
- 技术栈无关
主框架不限制接入应用的技术栈，微应用具备完全自主权 - 独立开发、独立部署
微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新 - 增量升级在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
- 独立运行时
每个微应用之间状态隔离，运行时状态不共享
qiankun官网：https://qiankun.umijs.org/zh/guide/getting-started
条件：子应用是以链接的形式接入主应用
案例：
配置主应用(以react umi3框架为例)
1.需要包管理工具。node 默认包含 npm，但也可以选择其他方案，
安装 pnpm。
curl -fsSL https://get.pnpm.io/install.sh | sh -
$ pnpm -v
8.11.0
2.建空目录。
$ mkdir qiankun_app && cd qiankun_app
通过官方工具创建项目，
3.初始化项目：PNPM
$ pnpm dlx create-umi@latest
国内建议选 pnpm + taobao 源，速度提升明显。这一步会自动安装依赖，同时安装成功后会自动执行 umi setup 做一些文件预处理等工作)
4.启动项目：
$ pnpm dev
5.嵌入qiankun,在umirc.ts中增加qiankun属性，可在routes中增加一个页面，子应用对应的页面
{
name: 'fish 示例',
path: '/scmp/*', // scmp可自主约定，主应用路由，会携带到子应用接口拼接
microApp: 'app1', // 与qiankun中那么属性匹配
},qiankun: {
master: {
apps: [
{
name: 'app1', // 与主应用microApp属性匹配
entry: '//https://www.baidu.com/', // 子应用可访问链接‘//’开头
props: {
auth: false,
}, // props参数，可传递到子应用
},
],
},
},如果有多个子应用，可对应多个对象：
// .umirc.ts
export default {
qiankun: {
master: {
apps: [
{
name: 'app1',
entry: '//localhost:7001',
},
{
name: 'app2',
entry: '//localhost:7002',
},
],
},
},
};注意：如果有接口访问路径不通，记得配置接口转发！！！
配置子应用（以fish项目为例）：
props为主应用携带的参数
在子应用添加qiankun生命周期勾子函数，以便和主应用进行交互，可在生命周期钩子函数中渲染页面：
bootstrap: () => {
console.log('portal bootstrap');
return Promise.resolve();
},
mount: (props) => {
props.onGlobalStateChange((state, prev) => {
// state: 变更后的状态; prev 变更前的状态
console.log(state, prev);
});
console.log('location', window.location);
console.log('portal mount');
return render(props); // 在生命周期钩子函数中渲染页面
},
unmount: () => {
console.log('portal unmount');
return Promise.resolve();
}在应用加载的时候：在props中可接收主应用携带参数
其他细节问题具体可参考：umi max 接入qiankun样例：https://umijs.org/docs/max/micro-frontend
