微前端（4）wujie

这篇记录 wujie 相关实验。

wujie

wujie 基于 webcomponent 容器 + iframe 沙箱，能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户的核心诉求。

实验步骤

1. 主应用是 vue 框架，可直接使用 wujie-vue（官方提供基于 vue 封装）
2. 子应用的资源和接口的请求都在主域名发起，所以会有跨域问题，子应用必须做 cors 设置

代码实例

main-app/src/main.ts 主应用中使用 wujie-vue3，这是基于 vue3 已经封装好的语法糖。

import WujieVue from 'wujie-vue3'
const { bus, setupApp, preloadApp, destroyApp } = WujieVue

app.use(WujieVue).mount('#app')

main-app/src/views/layout/components/app-main.vue 中使用，可通过 props 传参。

<WujieVue name="vue3" url=" http://127.0.0.1:8081/" :props="{ name: 'ginny' }"></WujieVue>
<!-- 完整参数如下： -->
<WujieVue
  width="100%"
  height="100%"
  name="xxx"
  url="xxx"
  :sync="true"
  :fiber="true"
  :degrade="false"
  :fetch="fetch"
  :props="props"
  :plugins="plugins"
  :beforeLoad="beforeLoad"
  :beforeMount="beforeMount"
  :afterMount="afterMount"
  :beforeUnmount="beforeUnmount"
  :afterUnmount="afterUnmount"
></WujieVue>

child-app/src/XXX.vue 子系统获取传值如下：

console.log('子应用中通过 props 获取的值', window.$wujie.props.name)

通过 bus 通信

wujie 通信方式有通过 window.parent 直接通信，通过 Props 数据注入（见上文）和去中心化 EventBus 通信方式。
main-app/src/main.ts

const { bus } = WujieVue

// 主应用监听事件
bus.$on("事件名字", function (arg1, arg2, ...) {});
// 主应用发送事件
bus.$emit("事件名字", arg1, arg2, ...);
// 主应用取消事件监听
bus.$off("事件名字", function (arg1, arg2, ...) {});

child-app/src/main.ts

declare global {
  interface Window {
    $wujie: {
      props: Record<string, any>
      bus: {
        $emit: any
      }
    }
  }
}

child-app/src/XXX.vue

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

生命周期

beforeLoad：子应用开始加载静态资源前触发
beforeMount：子应用渲染前触发（生命周期改造专用）
afterMount：子应用渲染后触发（生命周期改造专用）
beforeUnmount：子应用卸载前触发（生命周期改造专用）
afterUnmount：子应用卸载后触发（生命周期改造专用）
activated：子应用进入后触发（保活模式专用）
deactivated：子应用离开后触发（保活模式专用）

Q & A

1. 挂载到哪里最合适？
2. 应用切换时 URL 不会发生改变，如果使用动态路由，怎么获取对应的后缀？通过 props 传值？
3. “无界微前端不仅能够做到静态资源的预加载，还可以做到子应用的预执行”，怎么操作？

使用感受

1. 改造成本不高，主要是主应用需要改造，子应用的适配只需要开启跨域支持即可（不涉及通信的情况下）

默认运行的方式是重建模式。当子应用设置为保活模式，切换子应用后仍然可以保持子应用的状态和路由不会丢失。

附录
无界（基于iframe）
微前端实际应用案例剖析（wujie）