# umiQiankun

**Repository Path**: yueliangliaoliao/umi-qiankun

## Basic Information

- **Project Name**: umiQiankun
- **Description**: umijs/plugin-qiankun 微应用前端实践
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-09-01
- **Last Updated**: 2022-09-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 准备两个应用
## 初始化主应用

### 使用 pro 来快速的初始化主应用。

``` node
npm i @ant-design/pro-cli -g
pro create app

```
> 选择版本

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ef658caf6684b3d99a9dc97a100a6ca~tplv-k3u1fbpfcp-watermark.image?)

### 安装依赖：

```
$ cd app && yarn 
$ yarn add @umijs/plugin-qiankun -D
```
* PS 如果安装报错：error An unexpected error occurred ，请检查 npm 设置

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3f011ea7056a476493c8f84291402e5f~tplv-k3u1fbpfcp-watermark.image?)

* 设置为官方源

```
npm config set registry http://registry.npmjs.org

```
## 配置主应用
### 配置子应用路由 config/routes.ts 

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d733c9288c474574b2ad58028c55ded2~tplv-k3u1fbpfcp-watermark.image?)
```js
{
    name: 'subapp',
    path: '/subapp',
    microApp: 'subapp',
    access: 'normalRouteFilter'
  },
```
### 开启 Umi UI（可选）：

```
// 打开开发模式下页面右下角的小气泡，方便添加区块和模版等pro资产
$ tyarn add @umijs/preset-ui -D
// 或
$ npm install --save-dev @umijs/preset-ui
```
## 初始化子应用

```
mkdir subapp && cd subapp
yarn create @umijs/umi-app 
```
### package.json 设置名称
```
{
  "name":"subapp",
}
```

## 配置子应用
### 安装依赖
```js
yarn add @umijs/plugin-qiankun -D
```
### 配置子应用.umirc.ts
```
qiankun: {
    slave: {},
},
```

### 设置端口号.env
> 设置固定的端口号，可以固定路径，方便后面的配置使用
```
PORT=8002

```

## 连接父子应用

### 在主应用 app 的 config/config.ts 添加配置
```
qiankun: {
    master: {
      apps: [
        {
          name: 'subapp',
          entry: 'http://localhost:8002'
        }
        ]
    }
}
```

- 启动项目后，页面一直loading 需调整页面结构

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5760ce9abd541959b3e2ee69bbe5c31~tplv-k3u1fbpfcp-watermark.image?)
- 由于添加了qiankun ,dom结构发生了变化，需要将替换root 为 root-master

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/58c67e506be745e3a699647b23019ba7~tplv-k3u1fbpfcp-watermark.image?)
### 测试子应用路由的使用
- 补充子应用路由 .umirc.ts
```js
  routes: [
    {
      path: '/', component: '@/pages/index',
      routes: [
        {
          path: '/child1',
          component: '@/pages/Child1',
        },
        {
          path: '/child2',
          component: '@/pages/Child2',
        },
      ],
    },
  ],
```
- 调整页面结构 `src/pages/index.tsx`

```
import { Link } from 'umi';
import styles from './index.less';

export default function IndexPage(props) {
  return (
    <div>
      <div style={{ background: '#fff', padding: 10 }}>
        子应用公共布局
        <Link to='/child1'>child1</Link>
      </div>
      {props.children}
    </div>
  );
}

```

- 添加嵌套页面 `src/pages/Child1.tsx`
```js
import { Link } from 'umi'

function Child1() {
  return (
    <div>
      Child1
      <br />
      <div>
        <Link to='/child2'>前往Child2</Link>
      </div>
      <br />
      <div>
        <Link to='/'>返回子应用主页subapp</Link>
      </div>
    </div>
  )
}

export default Child1


```
- 添加嵌套页面 `src/pages/Child2.tsx`

```js

import React from 'react'

function Child2() {
  return (
    <div>我是Child2</div>
  )
}

export default Child2


```
### 路由效果展示

![Sep-01-2022 16-08-37.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/82aa6991e3bc4324953ba7e9a078e3b5~tplv-k3u1fbpfcp-watermark.image?)

## 父子级通信

> 需确保已安装 `@umijs/plugin-model` 或 `@umijs/preset-react`
### 父应用安装
```
yarn add @umijs/plugin-model @umijs/preset-react
```

### 父级：`src/app.tsx`
```js
// 添加子应用初始参数
export function useQiankunStateForSlave() {
  const [masterState, setMasterState] = useState<{ name: string }>();
  useEffect(() => {
    setMasterState({ name: '我是app的数据来给subapp比个✌️' });
  }, []);
  return {
    masterState,
    setMasterState
  }
}
```

### 子集调用 `src/pages/index.tsx`

```js
import { Link, useModel, } from 'umi';
import { Button, Space } from 'antd'
export default function IndexPage(props) {
  const masterProps = useModel('@@qiankunStateFromMaster');
  return (
    <div>
      <div style={{ background: '#fff', padding: 10 }}>
        <Space>
          子应用公共布局
          <Link to='/child1'>child1</Link>
          <Button onClick={() => {
            masterProps?.setMasterState({ name: 'subapp修改了数据' })
          }}>修改主应用数据</Button>
        </Space>
      </div>
      <div>{masterProps?.masterState?.name}</div>
      {props.children}
    </div>
  );
}
```
### 父子通信展示
![Sep-01-2022 16-53-31.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9f11c6bca429404dab8ae6d8b9dd13a6~tplv-k3u1fbpfcp-watermark.image?)

# 部署时的跨域问题
本地访问的时候，使用localhost是可以正常访问，部署到测试环境出现CORS跨域问题，解决方案是通过配置子应用的Nginx 来解决。

```js
server {  // ....此处省略

        location / {
           add_header 'Access-Control-Allow-Origin' '*';
           add_header 'Access-Control-Allow-Credentials' 'true';
           add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
           add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
           index index.html index.htm;
        }
    }
```
# 路由权限[access]

子项目应如何设置路由权限，即如果没有权限访问子应用的页面，应在路由上直接拦截，返回到403页面。

-   首先，父应用应针对子应用设置权限，以subapp项目为例：

```js
const routes = [
  //....
  {
    name: 'subapp',
    path: '/subapp',
    microApp: 'subapp',
    access: 'normalRouteFilter' // 设置权限校验
  },
  ]
```

-   其次，在子应用中配置access.ts 文件。

<!---->

-   子应用添加 layout 配置

```
layout: {
    name: 'Matrix 矩阵',
    locale: false,
    siderWidth: 0,
    // 不展示顶栏
    headerRender: false,
    // 不展示页脚
    footerRender: false,
    // 不展示菜单
    menuRender: false,
    // 不展示菜单顶栏
    menuHeaderRender: false,
    disableContentMargin: false,
    flatMenu: true,
  }
```
# 参考
- [@umijs/plugin-qiankun](https://v3.umijs.org/plugins/plugin-qiankun)
- [Ant Design Pro](https://pro.ant.design/zh-CN/docs/getting-started)
- [完整代码](https://gitee.com/yueliangliaoliao/umi-qiankun)