前端微应用

快速入门

前端

1. 作为主应用使用

1.1. 启用微前端框架

# .env文件
# 是否接入微前端框架 0：不接入，1：接入
VITE_TG_USE_WUJIE = '1'

1.2. 配置加载的子应用

（注意.env 文件内的值不支持换行，数组对象需JSON格式）

# .env文件
# 接入微前端后配置需要加载的子应用
# [{
#  "sysName":"系统1名称",
#  "appName":"appName1",
#  "isHash":true,
#  "appUrl": {
#       "development":"http://localhost:8080",
#       "testing":"http://localhost:8081",
#       "production":"http://localhost:8082"
#  }}]
VITE_TG_WUJIE_CONFIG = [{"sysName":"子应用1名称","appName":"appName1","isHash":true,"appUrl"{"development":"http://localhost:8080","testing":"http://localhost:8081","production":"http://localhost:8082"}},{"sysName":"子应用2名称","appName":"appName2","isHash":true,"appUrl"{"development":"http://localhost:9080","testing":"http://localhost:9081","production":"http://localhost:9082"}}]

字段	描述	类型	是否必填	默认值	备注
sysName	子应用系统名称	string	是	--	--
appName	子应用名称	string	是	--	需保持唯一
isAlive	是否保活模式	boolean	否	true	设置成不保活后，会增加子应用白屏时间
isHash	子应用是否 hash 路由	boolean	否	true	如果子应用为 histroy 路由，请设置成 false
appUrl	子应用的 url	object	否	--	根据环境配置不同 url

1.3. 添加子应用菜单

• 在权限平台或 H4A 平台配置菜单信息，路径名称等都和子应用原本的菜单配置一致，"选项配置"需要配置子应用名称
  选项配置的值需为"JSON"格式的字符串: {"appName": "nameOfApp"}
  示例：

2. 作为子应用使用

2.1. 配置子应用

# .env文件
# 此系统作为子应用时的名称，名称唯一，不能和需要接入的主应用的其它子应用名称重复
VITE_TG_SUB_APP_NAME = "appName1"

2.2. 打包生产环境服务配置

子应用的资源和接口的请求都在主域名发起，所以会有跨域问题，子应用必须对服务器资源代理配置 如果是nginx项目,可以如下改造:

server {
    location / {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    }
}

后端

如下设置需要设置为相同值

常见问题

主应用

1. 和子应用通信

1.1 . 触发子应用事件

import { emitMain } from '@/tiangong_core/utils/wujie/wujieMain/busMain';

// 如业务需要修改子应用的标题，可以触发'titleChange'事件
const onClick = (title) => {
    emitMain('titleChange',title);
}

1.2. 监听子应用触发的事件

import { onMain } from '@/tiangong_core/utils/wujie/wujieMain/busMain';

// 如需要监听子应用触发的修改系统名称事件
const sysName = ref('系统名');
// 业务使用
onMain('sysNameChange',(sysName) => {
    sysName.value = sysName
    // do something
});

2. 路由跳转

2.1. 纯主应用菜单跳转

正常跳转即可

2.2. 主应用跳转主/子应用菜单

// `useWujieRouter` hook 返回`customRouterPush`方法  该方法接收需要跳转的菜单对象
import useWujieRouter from '@core/utils/wujie/useWujieRouter';
const { customRouterPush } = useWujieRouter();

const onClick = menu => {
    customRouterPush(menu);
};

customRouterPush接收的menu参数对象字段：

字段	描述	类型	是否必填	默认值	备注
options	跳转的路由选项配置	string	否	--	如果有 options 且配置了 appName,则表示跳转到子应用路由
path	跳转的路由路径	string	是	--	--
menuPath	跳转的路由路径	string	是	--	path 和 menuPath 使用其中一个即可，有两个是为了兼容使用 menuPath 的地方
query	跳转的路由参数	object	否	--	--

使用customRouterPush方法跳转子应用菜单时，需要确保menu参数有选项配置字段，如果没有选项配置(options),则需要添加

// 如业务组件中 工作台 的 常用功能
const getList = (query) => {
    wlCommonMenuSlect(query).then((res) => {
        // 后台返回的快捷菜单入口
        _WorkTableValueArr.forEach(item => {
            // _menuInfoall 为扁平化系统菜单
            _menuInfoall.forEach(e => {
                if (e.name == item.menuName) {
+                    item.options = e.options;
                }
            })
        })
    })
}

子应用

1. 和主应用通信

1.1. 触发主应用事件

import { emitSub } from '@/tiangong_core/utils/wujie/wujieSub/busSub';

// 如业务需要修改父应用的系统名称，可以触发'titleChange'事件
const onClick = (sysName) => {
    emitSub('sysNameChange',sysName);
}

1.2. 监听主应用触发的事件

import { onSub } from '@/tiangong_core/utils/wujie/wujieSub/busSub';

// 如需要监听父应用触发的修改标题事件
const title = ref('title');
// 业务使用
onSub('titleChange',(title) => {
    title.value = title;
    // do something
});

2. 子应用路由跳转

子应用内部业务自定义路由跳转（父应用地址栏，标签页等状态需要同步更新）

// 该方法接收需要跳转的菜单对象，使用方法，参数对象同父应用
import useWujieRouter from '@core/utils/wujie/useWujieRouter';
const onClick = menu => {
    customRouterPush(menu);
};

3. 子应用项目添加自定义路由

项目作为子应用时，子应用只加载系统菜单选项配置字段配置了appName，且appName和子应用appName的值一样的菜单

// 如子应用的**工作台**，可能会将所有菜单都加载到**常用功能**，点击常用功能跳转到子应用的其它页面：
- menuInfo.forEach((item, i) => {
-     item.children.forEach((o, j) => {
-         // 所有菜单(包括主应用的)加入常用功能列表
-         WorkTableValueArr.push(o)
-     })
- })

+ import { APP_NAME,__POWERED_BY_WUJIE__ } from '@core/utils/wujie/wujieSub';
+ // 判断是否子应用环境
+ if(__POWERED_BY_WUJIE__){
+     menuInfo.forEach((item, i) => {
+       item.children.forEach((o, j) => {
+         const options = JSON.parse(o.options || '{}');
+         // 判断appName
+         if(options.appName === APP_NAME){
+             // 只将子应用的菜单加入工作台
+             WorkTableValueArr.push(o)
+         }
+         if(o.children){
+             // 多层菜单处理，如果有更多层可以递归处理
+             o.children.forEach((child, j) => {
+                 const options = JSON.parse(child.options || '{}');
+                 if(options.appName === APP_NAME){
+                     WorkTableValueArr.push(child)
+                 }
+             })
+         }
+       })
+     })
+ }else {
+     // 非子应用环境 使用原逻辑
+     menuInfo.forEach((item, i) => {
+         item.children.forEach((o, j) => {
+             WorkTableValueArr.push(o)
+         })
+     })
+ }