应用间通讯

简介

通过 @giteeteam/plugin-sdk 这个包可以实现应用间通信，包括 Iframe、qiankun。

SDK 注册

在主应用中初始化 ProximaSDKServer，在微前端子应用初始化时创建 ProximaSDK，注册到 ProximaSDKServer 后，将 sdk 在参数中传入子应用。

ProximaSDKServer

通讯 服务端 ，目前在 proxima-app 中，初始化了 ProximaSDKServer，子应用可通过通讯方式打开父应用的组件（每次新增调用组件都要父应用修改），目前只支持打开卡片组件。

• new ProximaSDKServer({registerTimeout}) 初始化后，会监听全局的 message

ProximaSDK

通讯 客户端 ，在 proxima-app 中使用@giteeteam/plugin-loader 初始化微前端子应用时，创建 ProximaSDK，注册到 ProximaSDKServer 后，将 sdk 在参数中传入子应用。

• new ProximaSDK(server) 初始化时传入 ProximaSDKServer

register

register({type, module, instance, context, frame}): Promise<void>

注册子应用，用于应用间通讯，等待子应用实例化完 ProximaSDK，Promise 就会返回

• type: iframe | micro
• module: 模块名
• instance: 客户端 ProximaSDK 实例
• micro 是 sdk，iframe 是 frameRef
• context: 上下文, frame: 当前页面信息

• 参考示例:

// 主应用注册子应用，proxima-app中使用@giteeteam/plugin-loader注册微前端
const { ProximaSDKServer, ProximaSDK } = require('@giteeteam/plugin-sdk');
const server = new ProximaSDKServer();
const client = new ProximaSDK({ sdkServer: server });
await server.register({
  type: 'micro',
  module: moduleKey,
  instance: client,
  frame: qiankunProps.frame,
  context: qiankunProps.context || {},
});

// 应用sdk初始化
import { ProximaSDK } from '@giteeteam/plugin-sdk';

if (!window.__POWERED_BY_QIANKUN__) {
  const sdk = new ProximaSDK({ sdkServer: window.parent });
  render({ sdk });
}

应用间通信

sendAction

sendAction(actionType, param) 发送动作信息，目前用于打开卡片组件

• 示例

// 父应用 监听行动事件
sdkServer.onAction = (message, callbacks) => {
  const { action, param } = message.payload;
  switch (action) {
    case 'openIssuePanel':
      setSelectedItemId(param.issue);
      setVisibleViewModal(true);
      callbacks.resolve();
      break;
  }
};

// 子应用打开父应用卡片组件（微前端初始化的时候sdk已传入，iframe）
sdk.sendAction('openIssuePanel', { issue: 11223 }).then(() => {
  console.log('open item success');
});