Qiankun 主应用和子应用通信方式详解

引言

在微前端架构中，主应用与子应用之间的通信是非常重要的环节。Qiankun 是一个轻量级的微前端解决方案，它提供了多种方式来实现主应用和子应用之间的通信。本文将详细介绍这些通信方式及其应用场景。

1. Qiankun 简介

Qiankun 是一个基于 JavaScript 的 Proxy 特性和 Web Components 技术实现的微前端解决方案。它通过主应用（Main Application）和子应用（Micro Application）的概念，实现了应用间的解耦和重用，提高了开发效率和灵活性。

2. 通信方式

2.1 全局变量

最简单的一种通信方式是通过定义全局变量来进行数据共享。这种方式适用于简单的场景，但在复杂的应用中可能会导致命名冲突和数据泄露等问题。

示例

在主应用中定义一个全局变量：

javascript

深色版本

1window.sharedData = {
2  message: 'Hello from Main Application!'
3};

在子应用中读取这个全局变量：

javascript

深色版本

1console.log(window.sharedData.message); // 输出 "Hello from Main Application!"

2.2 事件发布/订阅

Qiankun 提供了一个全局的事件总线，可以通过事件发布/订阅机制来进行通信。这种方式比较灵活，适用于需要解耦的应用场景。

示例

在主应用中发布事件：

javascript

深色版本

1import { registerMicroApps, start } from '@qiankun/preview';
2
3registerMicroApps([
4  {
5    name: 'app1',
6    entry: '//localhost:8081',
7    activeRule: '/app1',
8    lifecycle: {
9      bootstrap: [
10        (props) => {
11          console.log('bootstrap', props);
12          return Promise.resolve();
13        },
14      ],
15      mount: [
16        (props) => {
17          console.log('mount', props);
18          window.dispatchEvent(new CustomEvent('appMounted', { detail: props }));
19          return Promise.resolve();
20        },
21      ],
22    },
23  },
24]);
25
26start();

在子应用中订阅事件：

javascript

深色版本

1document.addEventListener('appMounted', (event) => {
2  console.log('Received event:', event.detail);
3});

2.3 通过 Context API

Qiankun 支持通过 Context API 进行通信。Context API 允许主应用和子应用之间传递数据，而不需要直接暴露全局变量。

示例

在主应用中定义 Context API：

javascript

深色版本

1import { registerMicroApps, start, createContainer } from '@qiankun/preview';
2
3const container = createContainer();
4
5registerMicroApps([
6  {
7    name: 'app1',
8    entry: '//localhost:8081',
9    activeRule: '/app1',
10    container,
11  },
12]);
13
14start();

在子应用中使用 Context API：

javascript

深色版本

1const data = container.getGlobalState();
2console.log(data); // 输出主应用传递的数据

2.4 使用 Store

对于更复杂的状态管理需求，可以使用 Qiankun 提供的 Store API。这种方式可以实现更为精细的状态管理，并且支持订阅状态变化。

示例

在主应用中初始化 Store：

javascript

深色版本

1import { registerMicroApps, start, createStore } from '@qiankun/preview';
2
3const store = createStore({
4  count: 0,
5});
6
7store.subscribe((state) => {
8  console.log('Store state changed:', state);
9});
10
11registerMicroApps([
12  {
13    name: 'app1',
14    entry: '//localhost:8081',
15    activeRule: '/app1',
16    lifecycle: {
17      bootstrap: [
18        (props) => {
19          console.log('bootstrap', props);
20          return Promise.resolve();
21        },
22      ],
23      mount: [
24        (props) => {
25          console.log('mount', props);
26          store.dispatch({ type: 'INCREMENT' });
27          return Promise.resolve();
28        },
29      ],
30    },
31  },
32]);
33
34start({ store });

在子应用中更新 Store：

javascript

深色版本

1store.dispatch({ type: 'INCREMENT' });

2.5 使用自定义通信机制

除了 Qiankun 内置的通信机制外，还可以使用自定义的通信机制，比如 WebSocket、PostMessage 等。

示例

使用 PostMessage 进行通信：

在主应用中发送消息：

javascript

深色版本

1import { registerMicroApps, start } from '@qiankun/preview';
2
3registerMicroApps([
4  {
5    name: 'app1',
6    entry: '//localhost:8081',
7    activeRule: '/app1',
8    lifecycle: {
9      mount: [
10        (props) => {
11          const iframe = document.querySelector('#app1');
12          iframe.contentWindow.postMessage('message from main app', '*');
13          return Promise.resolve();
14        },
15      ],
16    },
17  },
18]);
19
20start();

在子应用中接收消息：

javascript

深色版本

1window.addEventListener('message', (event) => {
2  console.log('Received message:', event.data);
3});

3. 最佳实践

3.1 使用 Context API 传递基本数据

对于简单的数据传递，建议使用 Context API，因为它简单且不会产生额外的性能开销。

3.2 使用 Store 管理复杂状态

当需要管理复杂的状态时，使用 Store 可以提供更好的状态管理和变更通知机制。

3.3 避免使用全局变量

尽管使用全局变量是最简单的方式，但它容易导致命名冲突和数据泄露。尽可能避免使用全局变量，除非是在非常简单的场景中。

3.4 选择合适的通信方式

根据具体的需求选择最合适的通信方式。例如，如果只需要简单的数据传递，使用 Context API 即可；如果需要更复杂的通信模式，可以选择事件发布/订阅或 Store。

4. 总结

通过本文的学习，你应该已经了解了 Qiankun 中主应用和子应用之间的几种通信方式及其应用场景。合理选择和使用这些通信方式可以帮助你构建更加健壮和灵活的微前端应用。如果你有任何疑问或需要进一步的帮助，请随时提问！