无界

基于 WebComponent 容器 + iframe 沙箱

使用

主应用封装(Vue3)

// 使用 startApp 函数启动子应用，el 为挂载节点
import { defineComponent, onMounted, ref } from 'vue'
import { startApp, type startOptions as StartOptions } from 'wujie'

export const MicroApp = defineComponent<Props>((_, { attrs: props }) => {
    const tplRef = ref()
    onMounted(() => {
        startApp({
            el: tplRef.value,
            ...(props as unknown as Props),
        })
    })
    return () => <div ref={tplRef}></div>
})

interface Props extends Omit<StartOptions, 'el' | 'name'> {
    /** 唯一性用户必须保证 */
    name: 'app1' | 'app2'
}

主应用使用

import { MicroApp } from '@/utils/setups/microApp/MicroApp'

export default () => (
    <MicroApp
        name="app1"
        url="/proxy_app1"
    ></MicroApp>
)

主应用 vite 配置

# 对应的子应用 vite 配置上面要加上  base: '/proxy_app1', 这样请求资源的时候代理转发才能识别到
     '/proxy_app1': {
      target: 'http://localhost:7401',
      changeOrigin: true,
   },

api

• setupApp

设置子应用默认属性；非必须；startApp、preloadApp 会从这里获取子应用默认属性，如果有相同的属性则会直接覆盖

• preloadApp

预加载；可以极大的提升子应用首次打开速度； 必须传递 name

• startApp

启动子应用，异步返回 destroy函数，可以销毁子应用，一般不建议用户调用，除非清楚的理解其作用

通信

props 通信

// 主应用   通过props注入数据和方法
<WujieVue name="xxx" url="xxx" :props="{ data: xxx, methods: xxx }"></WujieVue>

// 子应用   通过$wujie来获取：
const props = window.$wujie?.props; // {data: xxx, methods: xxx}

window 通信

// 由于子应用运行的iframe的src和主应用是同域的，所以相互可以直接通信
// 主应用调用子应用的全局数据
window.document.querySelector('iframe[name=子应用id]').contentWindow.xxx

// 子应用调用主应用的全局数据
window.parent.xxx

eventBus 通信

// 如果使用wujie
import { bus } from "wujie";

// 如果使用wujie-vue
import WujieVue from "wujie-vue";
const { bus } = WujieVue;

// 如果使用wujie-react
import WujieReact from "wujie-react";
const { bus } = WujieReact;

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

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