前端子应用间通信规范

应用间通信方式： #

props 通信

基座应用可以通过props注入数据和方法：

1<WujieVue name="xxx" url="xxx" :props="{ data: xxx, methods: xxx }"</WujieVue>

子应用可以通过$wujie来获取：

1const props = window.$wujie?.props; // {data: xxx, methods: xxx}

window 通信

由于子应用运行的iframe的src和主应用是同域的，所以相互可以直接通信

主应用调用子应用的全局数据

1window.document.querySelector("iframe[name=子应用id]").contentWindow.xxx;

子应用调用主应用的全局数据

1window.parent.xxx;

eventBus 通信 #

无界提供一套去中心化的通信方案，主应用和子应用、子应用和子应用都可以通过这种方式方便的进行通信，详见 api

主应用使用方式:

1import WujieVue from "wujie-vue3";
2const { bus } = WujieVue;
3// 主应用监听事件
4bus.$on("事件名字", function (arg1, arg2, ...) {});
5// 主应用发送事件
6bus.$emit("事件名字", arg1, arg2, ...);
7// 主应用取消事件监听
8bus.$off("事件名字", function (arg1, arg2, ...) {});

子应用使用方式:

1// 子应用监听事件
2window.$wujie?.bus.$on("事件名字", function (arg1, arg2, ...) {});
3// 子应用发送事件
4window.$wujie?.bus.$emit("事件名字", arg1, arg2, ...);
5// 子应用取消事件监听
6window.$wujie?.bus.$off("事件名字", function (arg1, arg2, ...) {});

应用间通信场景： #

基座应用与子应用通信子应用间通信

基座应用 => 子应用 #

登录后颁发token、用户个人信息、当前应用ID、菜单权限

基座应用已经将token、个人信息等基础数据封装下发到子应用

子应用内通过window.$wujie.props获取

 1export function useSwift() {
 2  const { bus } = WujieVue;
 3  const router = useRouter();
 4  const { push, access_token, menus, currentApply } = window.$wujie.props;
 5
 6  const closeOpenPage = (obj) => {
 7    router.replace("/"); // 子应用通知父应用关闭打开的页面时，先跳转到对应页面
 8    window.$wujie.props.closeOpenPage(obj);
 9  };
10  return {
11    access_token,
12    menus,
13    currentApply,
14    bus,
15    push,
16    closeOpenPage,
17  };
18}

主应用通知子应用跳转路由

子应用已完成监听，不需要修改

1// 接收主应用通知，跳转对应页面
2  swift.bus.$on("ztwms-router-change", (path) => {
3    router.replace(path);
4  });

主应用退出登录，通知子应用清空路由权限

子应用已完成监听，不需要修改

1// 监听主应用退出事件，清空本地路由
2  swift.bus.$on("logout", () => {
3    userStore.logOut();
4    resetRouter();
5  });

其他参数

根据实际情况而定，可通过微前端框架发布订阅方法实现

子应用 => 基座应用 #

token过期，通知主应用退出登录，清理token，跳转登录页

 1if (code === 401) {
 2  if (!isRelogin.show) {
 3    isRelogin.show = true;
 4    ElMessageBox.confirm("登录状态已过期，您可以继续留在该页面，或者重新登录", "系统提示", {
 5      confirmButtonText: "重新登录",
 6      cancelButtonText: "取消",
 7      type: "warning",
 8    })
 9      .then(() => {
10        isRelogin.show = false;
11        // 通知主应用退出登录
12        userStore.logOut();
13        bus.$emit("logout");
14      })
15      .catch(() => {
16        isRelogin.show = false;
17      });
18  }
19}

子应用 => 子应用 #

暂无固定通信场景，如需通信，可通过发布订阅可互相调

路由跳转 #

由于平台架构原因，子应用内部除关闭标签场景外，禁止直接使用vue-router进行路由跳转，如需进行页面跳转

使用基座应用下发的路由跳转方法window.$wujie.props.push，使用方法如下

1let totalPage = {path: `${目标子应用名称}${目标路径}`}
2window.$wujie.props.push(totalPage)

关闭tab标签 #

tab标签管理逻辑位于基座应用，各子应用不维护标签数据，所以需要关闭标签是，调用基座应用下发的closeOpenPage方法关闭当前标签，关闭前需使用vue-router的replace方法跳出当前页面

closeOpenPage有一个参数，与push方法参数一样，意为关闭标签后要跳转的路由页面

可直接按照如下示例调用

 1// hooks定义
 2export function useSwift() {
 3  const closeOpenPage = (obj) => {
 4    router.replace("/"); // 子应用通知父应用关闭打开的页面时，先跳转到对应页面
 5    window.$wujie.props.closeOpenPage(obj);
 6  };
 7  return {
 8    closeOpenPage,
 9  };
10}
11
12
13// 使用hooks
14import { useSwift } from "@/hooks/useSwift"
15
16const swift = useSwift()
17
18let totalPage = {path: `${目标子应用名称}${目标路径}`}
19swift.closeOpenPage(totalPage)
20

last updated: 2025-09-25