打算进军微前端？前先熟悉iframe，WebView吧

前言

在移动应用开发中，原生iOS Android当然是最棒的，但是资源消耗页数巨大的，除此之外常常选择的便是 React Native与 Fluter。但使用这些框架开发的代价仍然很大，有什么好办法解决便是内嵌H5页面，在移动应用中去内嵌H5，这个怎么做到那，在React Native与 Fluter中便是使用webView来进行交互。

这与微前端有什么关系呢？

微前端是一种架构模式，旨在将大型前端应用拆分为多个小的、独立的可部署部分（微应用），每个部分可以由不同的团队独立开发、测试和部署。这种模式使得不同的技术栈、框架和版本可以共存，从而提高了开发的灵活性和可维护性。在移动应用中使用 WebView 来加载 H5 页面，可以看作是微前端的一种实现方式。通过 WebView，你可以将不同的 H5 应用作为独立的微应用嵌入到移动应用中。这种方式允许开发团队使用不同的技术栈来构建这些微应用，同时保持主应用的稳定性。

跨页面通信

每一个内嵌项目都逃不过夸页面通信，而iframe，webView便很好的解决了这个问题。这里将以iframe为例（主要webview的话要创建套多项目演示了，环境调试很麻烦🥲）

分别启动一个Vue项目与一个React项目

这里我们就将在 Vue项目内嵌入React项目并让他们进行页面级别的通信。

书写之前我们先来看看iframe身上重要的属性

父页面可以通过iframe.contentWindow直接访问内部对象，而子页面也可以通过window.parent来获取父窗口的应用

vue

xml 复制代码

<template>
  <div style="background-color: skyblue;">
    <!-- iframe 用于嵌入 React H5 应用 -->
    <iframe
      id="reactFrame"
      src="http://localhost:5173/"
      frameborder="0"
      style="border: none; width: 100vw; height: 80vh;"
      @load="onIframeLoad"
    ></iframe>
    <button @click="sendMessageTo">react发送信息</button>
  </div>
</template>

<script>
export default {
  name: 'IframeComponent',
  methods: {
    onIframeLoad() {
      // 向 iframe 发送消息
      const reactFrame = document.getElementById('reactFrame');
      reactFrame.contentWindow.postMessage('Hello from parent to React', 'http://localhost:5173');
    },
    handleMessage(event) {
      // 检查消息来源是否可信
      if (event.origin !== 'http://localhost:5173') return;
      console.log('Received message from React:', event);
      // 在这里处理接收到的消息，比如调用 JSBridge 或者更新 DOM
    },
    sendMessageTo() {
      // 向 iframe 发送消息
      const reactFrame = document.getElementById('reactFrame');
      reactFrame.contentWindow.postMessage('Hello from Vue to React', 'http://localhost:5173');
    }
  },
  mounted() {
    // 监听来自 iframe 的消息
    window.addEventListener('message', this.handleMessage);
  },
  beforeUnmount() {
    // 清理事件监听器
    window.removeEventListener('message', this.handleMessage);
  }
};
</script>

react

javascript 复制代码

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const receiveMessage = (event) => {
      // 检查消息来源是否可信
      if (event.origin !== 'http://127.0.0.1:5173') return;

      console.log('Received message from parent:', event.data);

      // 回复消息给父页面
      event.source.postMessage('Hello from React', event.origin);
    };

    window.addEventListener('message', receiveMessage);

    // 清理事件监听器
    return () => {
      window.removeEventListener('message', receiveMessage);
    };
  }, []);

  const sendMessageToParent = () => {
    window.parent.postMessage('Message from React button click', '*'); // 使用'*'表示接受任何来源的消息，实际使用时应指定确切的来源URL以提高安全性
  };

  return (
    <div>
      <h1>React H5</h1>
      <button onClick={sendMessageToParent}>向容器发送信息</button>
    </div>
  );
}

export default App;

测试

打开你的浏览器，访问 Vue 应用（http://localhost:5173）。
你应该能够看到 Vue 应用以及嵌入的 React 应用。
当 Vue 应用加载完成时，它会向 React 应用发送一条消息。

React 应用会接收到这条消息并在控制台中打印出来，同时它也会向 Vue 应用发送一条消息作为响应。
点击按钮，vue页面或react页面将再接收到一条信息