全网 最保姆级的微前端 无界教程

狗头保命，我是标题党

微前端

概念

本质上就是将每个将产品中的各个功能模块作为一个个独立的应用系统，然后将这些模块再整合起来组装成完整的产品。而像无界或者乾坤这些框架提供的功能就是：本质上都是为了将复杂庞大的前端应用拆解成一个个可以独立开发的部署的功能模块，并通过暴露相关的接口和功能来将各个功能模块进行连接。

相关API

preloadApp

预执行指的是在应用空闲的时候将子应用提前渲染出来，可以进一步提升子应用打开时间

只需要在preloadApp中将 exec 设置为true即可

如何理解无界的生命周期这一块，对比vue生命周期，类似，就是你希望在什么周期去触发什么行为

定义相关子应用

const appList = [
{
    name: 应用名，// 比如你的子应用名为mrcor-vue2,那么这个name有什么用处，下面会说到
    url：子应用url，// 当你匹配到url的时候，就会去加载这个子应用，比如你的子应用的url单独跑的时候，https://localhost:3001
    props:  默认接受window数据的方式,
    alive: true, // 子应用是否激活
    beforeLoad: function(){}, // 生命周期，
    beforeMount: function(){} // 具体看无界文档关于生命周期这一块
}
]

注册子应用

setupApp，这个方法呢，好比vue.use()去注册相关方法

// 我们刚刚上面注册了appList，那么要怎么去注册相关子应用呢？聪明的你，一定想到了方法
appList.forEach(item=>{
    setupApp(item) // 这样就实现了子应用的注册
    // 但是如果你想着说你这个是要提前加载，然后当我们去打开子应用的时候，就可以加快加载出来，那么这个api方法就方法发挥着优势
    preloadApp({
      name: xxx, // 必传
      url: xxx, // 必创，
      exex: true
    })
    
})

注册路由

注册路由，其他的正常写
const routes = [
    path: '/vue2' , // 这个path就是你子应用注册的路由
    appName: vue2 // 这个对应的就是应用名
]

通信

1：props

2:发布订阅

这两种是最常见的通信方式

props方式
定义一个容器，然后props传递

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

子应用接收
const props = window.$wujie?.props; // {data: xxx, methods: xxx}

订阅与发布

// 如果使用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, ...) {});

路由跳转

路由跳转，本质上还是要用vue-router 提供的方法 但是如果你是A应用跳转到B应用，你可以选择基座提供的Props的跳转方法，或者你用eventbus这种通信方式，本质上就是利用 通信方式 + vue的路由跳转方法 props方式

<template>
  <!-- 子应用 A -->
  <wujie-vue name="A" url="//hostA.com" :props="{jump}" ></WujieVue>
</template>

<script>
export default {
  methods: {
    jump(location) {
      this.$router.push(location);
    }
}
</script>
// 子应用 A 点击跳转处理函数
function handleJump() {
  window.$wujie?.props.jump({ path: "/pathB" });
}

event-bus方式

// 子应用 A 点击跳转处理函数
function handleJump() {
  window.$wujie?.bus.$emit("routeChange", "/test");
}
// 子应用 B 监听并跳转
window.$wujie?.bus.$on("routeChange", (path) => this.$router.push({ path }));