portal-vue

microApp & iframe 信息传递

父 MicroApp 子 iframe

当前迭代下，通过使用 iframe 兼容事件通信。只需要这样简单地引入组件：

<iframe
  ref="app1"
  style="border: 0"
  width="100%"
  height="500px"
  src="http://localhost:3007"
></iframe>

之后通过 postMessage 的方式来想 iframe 传递通信

const app1 = ref<HTMLIFrameElement>();
const sendMessage = () => {
  app1.value &&
    app1.value.contentWindow?.postMessage(
      { type: 'app1' },
      'http://localhost:3007'
    );
};

随后监听 iframe 传递出来的事件

// 监听跨域请求的返回
window.addEventListener(
  'message',
  function (event) {
    if (event.origin === 'http://localhost:3007') {
      console.log('接收子应用返回的数据', event.data);
    }
  },
  false
);
// 请注意 unMount 解绑事件
// removeAddEventListener

对应 vite 子应用来说

1. 判断是否为嵌入环境

/**
 * 是否在微前端环境中
 * 如果为 true，则在微前端环境中，需要隐藏自己的 header 组件
 */
export const isMicroApp = () => {
  // 兼容 iframe 环境
  const isInnerWindow = window.parent !== window;
  return (window as any).__MICRO_APP_ENVIRONMENT__ || isInnerWindow;
};

2. 接收、发送信息 在 main.ts 中

if (window.__MICRO_APP_ENVIRONMENT__ || isInnerWindow) {
  console.log('进入微前端环境了 vite');
  //   隐藏自身 header 组件
  //   开始监听事件，通过来源进行判断
  window.addEventListener('message', receiveMessage, false);
  function receiveMessage(event) {
    if (event.origin === 'http://localhost:3000') {
      // 自行处理
      console.log('收到父应用', event.data);
      // 合适时机触发给父应用
      event.source.postMessage('收到父应用的消息，我是子应用', event.origin);
    }
  }
}

如何引入微前端？

参考 https://digit-force.coding.net/p/frontend/d/micro-app-demo/git/tree/master/base-app/vite.config.ts

1. 确认接入方是否满足当前要求 a. 如果是 vite 项目，兼容使用 iframe 具体参考介绍文章
2. 其他情况走 micro-app 方案，要求使用 hash 路由，保证接入方便
3. 安装 @micro-zoe/micro-app 依赖
4. 父项目 main.ts 执行 microApp.start()

<micro-app
  name="app1"
  url="http://localhost:4200/#"
  @datachange="handleDataChange"
></micro-app>

在逻辑中

function handleDataChange(e: any) {
  console.log('来自子应用的数据：', e.detail.data);
}
// 主动发送信息
microApp.setData('app1', { name: '' });