微前端 - 无界

1. 介绍

基于Web Components 容器 + iframe 沙箱, iframe沙箱运行js， Shadow DOM实现子应用的 DOM 隔离

官网

2. 主应用 - 安装

2.1. vue3 项目示例

npm i wujie-vue3 -S

2.2. 优化插件

npm i wujie-polyfill -S

参数介绍

• LocationSyncPlugin (地址同步插件)
• LocationReloadPlugin （页面刷新插件）
• EventTargetPlugin （事件目标插件）
• WindowGetterPlugin （window获取插件）
• WindowMessagePlugin （window通信插件）
• DocFullscreenPlugin （全屏插件）
• InstanceofPlugin （原型链判定插件）
• DocElementRectPlugin（代理documentElement主应用尺寸插件）

3. 主应用 - 配置

• src/main.js 配置

// src/main.js
import WujieVue from 'wujie-vue3'
app.use(WujieVue)

• 使用

<script setup>
import { onMounted, onUnmounted, reactive, } from 'vue';
import { LocationReloadPlugin } from "wujie-polyfill";

const state = reactive({
  url: 'https://ant.design/components/drawer-cn/',
  props: {
    title: 'Drawer 抽屉',
  }
})
</script>

<template>
  <WujieVue
  width="100%"
  height="100%"
  name="sub-box"
  :url="state.url"
  :sync="true"
  :fetch="fetch"
  :props="props"
  :beforeLoad="beforeLoad"
  :beforeMount="beforeMount"
  :afterMount="afterMount"
  :beforeUnmount="beforeUnmount"
  :afterUnmount="afterUnmount"
  :plugins="[LocationReloadPlugin()]"
></WujieVue>
</template>

参数解释

• name: 子应用唯一标识符。
• url: 子应用地址。
• sync: 子应用是否同步主应用的路由变化。
• width: 子应用的宽度。
• height: 子应用的高度。
• alive: 子应用是否常驻内存。
• props: 子应用传递给子应用的属性。
• fetch: 子应用的请求拦截器。
• beforeLoad: 子应用加载前的钩子函数。
• beforeMount: 子应用挂载前的钩子函数。
• afterMount: 子应用挂载后的钩子函数。
• beforeUnmount: 子应用卸载前的钩子函数。
• afterUnmount: 子应用卸载后的钩子函数。
• plugins: 子应用的插件。

4. 子应用 - 配置

在满足跨域条件下子应用可以不用改造。不满足跨域条件下需要做以下配置

• spa 项目 在满足跨域条件下子应用可以不用改造

• node 项目

app.use((req, res, next) => {
  // 路径判断等等
  res.set({
    "Access-Control-Allow-Credentials": true,
    "Access-Control-Allow-Origin": req.headers.origin || "*",
    "Access-Control-Allow-Headers": "X-Requested-With,Content-Type",
    "Access-Control-Allow-Methods": "PUT,POST,GET,DELETE,OPTIONS",
    "Content-Type": "application/json; charset=utf-8",
  });
  // 其他操作
});

• 无界对子应用注入了$wujie对象，可以通过wujie`获取, $wujie类型

{
  bus: EventBus;
  shadowRoot?: ShadowRoot;
  props?: { [key: string]: any }; // 主应用注入的数据
  location?: Object; // 由于子应用的location.host拿到的是主应用的host，所以需要通过$wujie.location拿到子应用的location
}

5. 数据传递

5.1. prop (主 -> 子)

<!-- 主应用组件 -->
<WujieVue 
  :name="subApp" 
  :url="subAppUrl"
  :props="{ userInfo: { name: '张三' }, theme: 'dark' }"  // ‌:ml-citation{ref="3,4" data="citationList"}
></WujieVue>

// <!-- 子应用通过window.$wujie获取 -->
const { props } = window.$wujie  // 获取父级传递的props对象
console.log(props.userInfo.name)  // 输出"张三" ‌:ml-citation{ref="4" data="citationList"}

5.2. 事件总线通信 (主 <-> 子)

// 主应用发送数据
window.$wujie?.bus.$emit('global-data', { userId: 123 })  // ‌:ml-citation{ref="1,2" data="citationList"}

// 子应用接收数据
window.$wujie?.bus.$on('global-data', (payload) => {
  console.log('接收主应用数据:', payload.userId)
})

// 子应用发送响应
window.$wujie?.bus.$emit('response-data', { status: 'success' })  // ‌:ml-citation{ref="2" data="citationList"}

5.3. URL参数传递 (主 -> 子)

// 主应用动态构建URL
const subAppUrl = ref(`https://sub.domain.com?token=${getToken()}`)  // ‌:ml-citation{ref="2,6" data="citationList"}

// 子应用解析参数
const urlParams = new URLSearchParams(window.location.search)
console.log('获取URL参数:', urlParams.get('token'))  // ‌:ml-citation{ref="6" data="citationList"}

5.4. 全局状态管理 (主 -> 子)

主应用和子应用都可以通过挂载在window上定义全局变量的方式相互使用。

// 主应用
window.globalMainValue = `主应用变量` // 主应用定义全局变量

// 子应用
window.parent.globalMainValue // 子应用获取变量