打算进军微前端?前先熟悉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;

测试

  1. 打开你的浏览器,访问 Vue 应用(http://localhost:5173)。
  2. 你应该能够看到 Vue 应用以及嵌入的 React 应用。
  3. 当 Vue 应用加载完成时,它会向 React 应用发送一条消息。
  1. React 应用会接收到这条消息并在控制台中打印出来,同时它也会向 Vue 应用发送一条消息作为响应。
  2. 点击按钮,vue页面或react页面将再接收到一条信息
相关推荐
掘金安东尼1 分钟前
蔚来 600 亿研发成本,信还是不信。。
面试·程序员·github
yinke小琪7 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿11 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux12 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵14 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆17 分钟前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
豆苗学前端20 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
不见_20 分钟前
不想再写周报了?来看看这个吧!
前端·命令行
yinke小琪22 分钟前
JavaScript 事件冒泡与事件捕获
前端·javascript
pany24 分钟前
写代码的节奏,正在被 AI 改写
前端·人工智能·aigc