Umi4使用qiankun微前端实录

本篇文章将讲述和记录如何使用Umi4的qiankun微前端应用！这里主要包括父应用以及子应用的创建，一步步实践记录，希望能够对你有帮助！

简述

按照Umi后台管理系统专栏，我们已经创建好了一个Umi的项目。

接下来内容我将记录如何使用Umi应用作为父应用，以及子应用的创建。

这里按照官方文档走不太通！！！官方文档不是很友好！

官方文档写的真的很拉！！！！！！！！！！！至少我没看懂

关于qiankun以及微前端，可以参考本篇文章"什么是微前端"

教程开始

父应用创建与配置

这里我们已经使用umi官方文档创建好了一个Umi应用，可以参考Umi后台管理系统专栏。

1. 在父应用配置子应用信息

按照官方文档我们在父应用配置子应用的信息。

这里文档说的清楚，注册子应用有两种，这里先展示第一种，插件注册子应用。

官网这里使用了.umirc.ts配置，而在我们创建项目的时候我们已经把这个东西拆成了config.ts，我们在config.ts同级目录下创建qiankun配置文件，内容如下

ts 复制代码

const qiankun = {
  master: {
    apps: [
      {
        name: 'app1',
        entry: '//localhost:7001', //默认http，如果需要家https手动配置加上即可
      },
    ],
  },
};
export default qiankun;

然后在config中引入配置

子应用创建和配置

1. 创建子应用

使用npm create umi umi-child-app命令创建一个子应用，这里选择antd desugb pro框架。

2. 配置npm run start 命令，将子应用运行在7001端口

在package.json中配置 "start": "set PORT=7001 && max dev"

3. 启动子应用是这个样子

4.删除菜单以及菜单内容

首先在app.ts加入菜单以下代码，隐藏我们的菜单

ts 复制代码

  headerRender: false,
  footerRender: false,
  menuRender:false,

路由我们也简单删除，做最简单操作

5.在app.ts导出qiankun的生命周期。

老规矩得看qiankun文档。这里官方文档写的不清楚，umi也写得不清楚。可以按我这里来

将qiankun的生命周期代码写入app.ts文件中

js 复制代码

export const qiankun = {
  async bootstrap() {
    console.log('react app bootstraped');
  },

  /**
   * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
   */
  async mount(props: any) {
    console.log('react app mount', props);
  },

  /**
   * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
   */
  async unmount(props: any) {
    console.log('react app unmount', props);
  },
};

5.在配置文件.umirc.ts中配置qiankun。

js 复制代码

 qiankun:{
    slave:{}
  },

这个时候启动不了项目的，会报错，这个时候我们需要在package.json把Name加上！！

这个时候启动不了项目的，会报错，这个时候我们需要在package.json把Name加上！！

这个时候启动不了项目的，会报错，这个时候我们需要在package.json把Name加上！！

这个Name和我们的子应用Name一致，或者说和路由一致

我们最后单独运行这个子应用是这样的，可以看到路由的base路径是app1。

父应用中引入子应用

查看官方文档！！引入子应用，这里文档也说明提供了三种方式，我们先玩明白第一种，路由！

路由绑定引入子应用

首先我们在父应用菜单添加我们子应用的入口，这里在路由添加一个子应用菜单就可以

当我们点击进去的时候，我们就会发现，我们的子应用已经成功嵌入到我们的父应用中了。

完美！！！ 什么逻辑呢？请看下图，我们layout就是我们整个父应用布局，比如菜单之类的，下面嵌套了一个Outlet,这个类似于Vue的router-view一个道理。把我们的子应用当作一个路由在这里展示，所以我们的子应用也就展示在下面了。

父子应用通信

一言不合看文档！！！父子应用通信。这里我们之前用的是路由引入子应用，我们也按这个文档来操作

1. 在父应用暴露这个useQiankunStateForSlave函数

ts 复制代码

export function useQiankunStateForSlave() {
  const [globalState, setGlobalState] = useState<any>({
    slogan: 'Hello MicroFrontend',
  });

  return {
    globalState,
    setGlobalState,
  };
}

2. 在子应用中接收数据，这里文档很贴心，给了几种写法

按照文档，我们在子应用中使用usemodel获取父应用的数据

这样，我们子应用就获取到了父应用的一个数据了。

总结

大部分流程已经走通，干不动了！！！接下来就靠大家自己看文档了！！！！后续会出关于微前端部署到服务器文档，希望大家持续关注！！！！我是小荣，一个菜逼前端程序员！