浅谈微前端【qiankun】的应用

news2024/10/21 23:19:59

一、为什么要使用微前端

微前端的核心理念是将一个大型的单体前端应用拆分成多个独立的小型应用，以便各个应用能够独立开发、部署和更新。这带来了以下几个好处：

独立开发与部署：各个团队可以独立开发自己的子应用，快速上线新功能，而不需要等待整个应用的部署。
技术栈自由：子应用可以选择适合自身的技术栈，降低技术演进的成本。例如，主应用使用 Vue，但子应用可以使用 React。
渐进式升级：在应用重构或版本迭代时，可以逐步替换掉旧的功能，而不影响整个系统的稳定性。
维护性与扩展性：通过模块化管理，可以更好地维护代码，同时容易扩展新功能。

二、微前端案例场景

假设你有一个主应用 main，以及两个子应用 user 和 order。每个应用的具体职责如下：

main：负责整体框架和导航，控制加载 user 和 order，作为门户页面。
user：一个用于用户管理的模块，提供用户列表、用户详情和用户权限设置等功能。
order：一个用于订单管理的模块，处理订单查询、订单详情和订单更新等功能。

具体实现需求

主应用（main）跳转到 user 或 order：

在主应用的导航栏中有两个按钮，点击分别加载 user 和 order。
例如，点击“用户管理”跳转到 http://main-app-url/user，点击“订单管理”跳转到 http://main-app-url/order。

子应用 user 跳转到 order：

user 中有一个“查看用户订单”的按钮，点击后跳转到 order，并传递用户 ID 信息，方便 order 直接加载该用户的订单。
例如，点击按钮后跳转到 http://main-app-url/order/orders?userId=123。

主应用与子应用的通信：

主应用 main 负责通知子应用加载状态，比如加载进度条。
主应用可以通过 props 传递全局信息（例如：用户身份、权限信息）给 user 和 order。

子应用 user 和 order 之间的通信：

user 和 order 都需要访问一些共享状态（例如当前登录用户信息），或者 user 中的操作需要通知 order 做一些更新。
通过主应用提供的事件总线，或者使用 qiankun 提供的全局状态管理器来实现。

三、代码示例

主应用 main 的配置
主应用 main 注册子应用：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'user',
    entry: '//localhost:8001',
    container: '#sub-container',
    activeRule: '/user',
    props: { sharedState: { user: 'Admin' } }, // 传递全局信息
  },
  {
    name: 'order',
    entry: '//localhost:8002',
    container: '#sub-container',
    activeRule: '/order',
  }
]);

start();

主应用导航与容器：

#app.vue
<template>
  <div>
    <nav>
      <button @click="goToUser">用户管理</button>
      <button @click="goToOrder">订单管理</button>
    </nav>
    <div id="sub-container"></div>
  </div>
</template>

<script>
export default {
  methods: {
    goToUser() {
      this.$router.push('/user');
    },
    goToOrder() {
      this.$router.push('/order');
    }
  }
}
</script>

子应用 user 和 order 的通信
user 内部跳转到 order：

function goToApp2WithUserId(userId) {
  window.location.href = `http://main-app-url/order/orders?userId=${userId}`;
}

user 接收 order 传递的信息：

const queryParams = new URLSearchParams(window.location.search);
const userId = queryParams.get('userId');
// 根据 userId 加载用户的订单

主应用与子应用通信
主应用提供的事件总线：

import { initGlobalState } from 'qiankun';

const actions = initGlobalState({ user: {} });
actions.onGlobalStateChange((state, prev) => {
  // state：变更后的状态; prev：变更前的状态
  console.log(state, prev);
});

子应用 user 与全局状态通信：

props.onGlobalStateChange((state) => {
  console.log('user detected global state change:', state);
});
props.setGlobalState({ user: { name: 'John' } });