wip

Author: tangtanglove

.umirc.ts

@@ -19,4 +19,9 @@ export default defineConfig({
     { path: '/index', component: '@/pages/Index/index' },
   ],
   fastRefresh: {},
+  // qiankun: {
+  //   master: {
+  //     apps:[]
+  //   }
+  // }
 });

mock/microApp.ts

@@ -0,0 +1,18 @@
+export default {
+    // 微前端
+    'GET /api/microApp/index': {
+        component: "page",
+        style: {
+            height: '100vh',
+        },
+        body: {
+            component: "layout",
+            cache: true,
+            body: {
+                component: "microApp",
+                name: 'app1'
+            }
+        }
+    }
+}
+  

package.json

@@ -34,6 +34,7 @@
   "devDependencies": {
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@umijs/plugin-qiankun": "^2.26.0",
     "@umijs/test": "^3.4.7",
     "husky": "^4.3.0",
     "lint-staged": "^10.0.7",

public/config.json

@@ -1,3 +1,9 @@
 {
-  "initApi": "admin/login"
+  "initApi": "admin/login",
+  "apps": [
+    {
+      "name": "app1",
+      "entry": "//www.baidu.com"
+    }
+  ]
 }

src/app.tsx

@@ -67,3 +67,10 @@ export const request: RequestConfig = {
     }
   ],
 };
+
+// 从接口中获取子应用配置，export 出的 qiankun 变量是一个 promise
+export const qiankun = fetch('./config.json')
+.then(response => response.json())
+.then(response => ({
+  apps: response.apps
+}))

src/components/Layout/RightContent.tsx

@@ -18,7 +18,7 @@ const RightContent: React.FC<any> = (props) => {
     }
 
     if (event.key === 'setting') {
-      history.push({ pathname: '/index', query: { api:'admin/account/setting' } });
+      history.push({ pathname: '/index', query: { api:'admin/account/setting-form' } });
       return;
     }
 

src/components/Render.tsx

@@ -21,6 +21,7 @@ import Paragraph from '@/components/Typography/Paragraph';
 import Title from '@/components/Typography/Title';
 import Text from '@/components/Typography/Text';
 import { Space } from 'antd';
+import { MicroApp } from 'umi';
 import { dataMapping, tplEngine } from '@/utils/template';
 
 const Render: React.FC<any> = (props:any) => {
@@ -123,6 +124,10 @@ const Render: React.FC<any> = (props:any) => {
         key: 'login',
         component: <Login {...body} callback={callback} data={data} />
       },
+      // {
+      //   key: 'microApp',
+      //   component: <MicroApp {...body} callback={callback} data={data} />
+      // },
       {
         key: 'tpl',
         component: <>{ tplEngine(body.body,data) }</>