当前位置： 首页 > news >正文

腾讯无界微前端框架介绍

news 2026/2/8 12:27:25

一、无界微前端框架概述

无界微前端框架是由腾讯团队推出的，旨在解决现有微前端方案中存在的问题，如适配成本高、样式隔离困难、运行性能不佳、页面白屏、子应用通信复杂、子应用保活机制缺乏等。
在这里插入图片描述

技术实现

无界微前端的核心技术是基于Web Components容器 + iframe沙箱。通过这种方式，它可以实现以下目标：

  • 成本低：无论是主应用还是子应用，使用成本都相对较低。
  • 速度快：子应用首屏打开速度较快，且运行速度快。
  • 原生隔离：通过Web Components实现了严格的样式隔离，而JavaScript则运行在iframe中，保证了代码的隔离。
  • 功能强大：支持子应用保活、子应用嵌套、多应用激活、应用共享等功能。

二、代码实例

下面是一个简单的代码示例，展示如何使用无界框架加载一个微应用：

主应用配置

假设您的主应用使用的是React或Vue，您可以这样配置无界：

// main.js
import Wujie from '@wujiejs/wujie';const wujie = new Wujie({container: '#app', // 主容器的选择器apps: [{name: 'app1', // 微应用名称entry: '//localhost:8080', // 微应用入口URLactiveRule: '/app1' // 激活规则}]
});wujie.start();

子应用配置

子应用需要做一些简单的配置以便被无界识别：

<!-- app1/index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>App1</title><script src="@wujiejs/wujie/client.js"></script>
</head>
<body><div id="root"></div><script>// 注册子应用window.__WUJIE__.registerApp('app1');</script>
</body>
</html>

三、子应用通信

无界微前端框架通过多种机制来简化子应用之间的通信，确保通信既简单又高效。

通信机制

无界提供了以下几种通信机制：

  • Window.postMessage: 利用浏览器原生的 postMessage API 来实现跨iframe通信。
  • EventBus: 通过事件总线机制，子应用可以注册事件监听器，并且发送事件到其他子应用或主应用。
  • Props传递: 主应用可以通过props向子应用传递数据。

通信示例

使用 postMessage 发送消息

假设有一个子应用 app1 和一个主应用，app1 向主应用发送消息：

// 在子应用 app1 中发送消息
window.parent.postMessage({ type: 'CUSTOM_EVENT', payload: 'Hello from app1!' }, '*');// 在主应用中监听消息
window.addEventListener('message', function(event) {if (event.origin === 'http://localhost:8080') { // 确保来源正确if (event.data.type === 'CUSTOM_EVENT') {console.log('Received message:', event.data.payload);}}
});
使用 EventBus 发送事件

假设有一个事件总线，子应用可以通过它发送和接收事件：

// 在子应用 app1 中注册事件监听器
window.__WUJIE__.on('CUSTOM_EVENT', function(data) {console.log('Received event:', data);
});// 在主应用或其他子应用中发送事件
window.__WUJIE__.emit('CUSTOM_EVENT', { message: 'Hello from main app!' });
使用 Props 传递数据

主应用可以向子应用传递数据：

// 主应用配置
const wujie = new Wujie({container: '#app',apps: [{name: 'app1',entry: '//localhost:8080',activeRule: '/app1',props: {message: 'Hello from the main app!'}}]
});// 子应用 app1 接收数据
console.log(window.__WUJIE__.getProps().message); // 输出 "Hello from the main app!"

四、与qiankun的对比

与另一款流行的微前端框架 qiankun 相比，无界在子应用通信方面有以下优势：

  • 更灵活的通信方式：无界提供了多种通信方式，包括 postMessage、EventBus 和 Props 传递，而 qiankun 主要依赖于 postMessage 和一些扩展API。
  • 更高的安全性：无界通过 iframe 沙箱提供更强的安全隔离，这有助于保护子应用不受恶意代码的影响。
  • 更精细的控制：无界提供了更细粒度的控制选项，例如可以控制子应用何时加载和卸载，这对于优化性能和资源管理非常重要。

总结

无界微前端框架通过提供多样化的通信机制，简化了子应用之间的通信流程，使得开发人员可以轻松地构建出高度可扩展且维护性良好的微前端应用。与 qiankun 相比，无界在通信灵活性和安全性方面具有显著优势。

相关文章：

腾讯无界微前端框架介绍

一、无界微前端框架概述 无界微前端框架是由腾讯团队推出的&#xff0c;旨在解决现有微前端方案中存在的问题&#xff0c;如适配成本高、样式隔离困难、运行性能不佳、页面白屏、子应用通信复杂、子应用保活机制缺乏等。 技术实现 无界微前端的核心技术是基于Web Component…...

编程日记 2024/8/23 6:59:16

Linux——网络（2）

一、通信 --- 不同主机上进程间的通信 1、IP和端口号 IP&#xff1a;标识网络中的一台主机 本质上 32位的整型数据 端口号: 标识某个进程 本质上 16位的整型数据 2、udp和tcp udp的特点: 1.无连接 2.不可靠 tcp的特点&#xff1a; 1.面…...

编程日记 2024/8/23 6:57:15

结合量子技术解决数据传输安全

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 接前篇&#xff1a;数采网关面…...

编程日记 2024/8/23 6:55:13

【Rust光年纪】提高开发效率：深入了解Rust语言中的数据库客户端和文件处理库

深入探索&#xff1a;Rust语言中多款数据库客户端与文件处理库详解 前言 在现代软件开发中&#xff0c;使用各种数据库和文件处理操作是非常常见的。Rust语言作为一种快速、安全、并发的系统编程语言&#xff0c;也拥有丰富的生态系统和库。本文将介绍几个用于Rust语言的数据…...

编程日记 2024/8/23 6:53:11

【自动驾驶】控制算法（一）绪论与前期准备

写在前面&#xff1a; &#x1f31f; 欢迎光临 清流君 的博客小天地&#xff0c;这里是我分享技术与心得的温馨角落。&#x1f4dd; 个人主页&#xff1a;清流君_CSDN博客&#xff0c;期待与您一同探索 移动机器人 领域的无限可能。 &#x1f50d; 本文系 清流君 原创之作&…...

编程日记 2024/8/23 6:50:09

CSDN创作一周年总结

一周年总结 文章目录 一周年总结我的第一篇文章这一年我收获到了什么&#xff1f;1.培养了逻辑能力2.形成了自己的知识库&#xff0c;知识网络3.功利性的收获 我的第一篇文章 不知不觉之间&#xff0c;也已经过去一年了。还记得第一次决定在csdn上写博客&#xff0c;是因为进入…...

编程日记 2024/8/23 6:49:08

World of Warcraft [CLASSIC] the Eye of Eternity [EOE] P1-P2

World of Warcraft [CLASSIC] the Eye of Eternity [EOE] 永恒之眼&#xff08;蓝龙&#xff09; 第一阶段 第二阶段 第三阶段 载具1-6技能介绍 World of Warcraft [CLASSIC] the Eye of Eternity [EOE]_永恒之眼 eoe-CSDN博客 永恒之眼怎么出副本呢&#xff0c;战斗结束&am…...

编程日记 2024/8/23 6:47:06

一键翻译全球：多语言支持下的英文翻译工具

随着科技的飞速发展&#xff0c;一系列英文翻译工具应运而生&#xff0c;它们以人工智能为驱动&#xff0c;极大地简化了跨语言交流的过程。本文将带您一窥英文翻译工具探索那些能够帮助我们跨越语言鸿沟的神奇工具。 1.福昕在线翻译 链接直达>>https://fanyi.pdf365.c…...

编程日记 2024/8/23 6:46:05

水战再起波澜，“怡宝”要下好怎样一盘棋？

不少投资者常把那些刚需性强、永远也不可能淘汰的产业称为“日不落产业”&#xff0c;从细分板块来看&#xff0c;水无疑具有一定代表性。农夫山泉掌门人钟晱晱曾直言&#xff1a;“我选择了一个日不落的产业&#xff0c;你永远要喝水&#xff0c;不可能不喝水。” 多年下来&a…...

编程日记 2024/8/23 6:45:04

使用maven快速生成打包文件3

这里再介绍一种打包方式&#xff0c;依赖包分开打包&#xff0c;直接将需要部署的文件打包成一个要锁文件&#xff0c;比如kafka-roma-bin.tar.gz&#xff0c;这里需要两个文件&#xff0c;一个pom2.xml&#xff0c;一个package.xml。 pom2.xml <?xml version"1.0&q…...

编程日记 2024/8/23 6:44:02

Excel技巧（一）

快捷键技巧 原文链接 选取某一行的数据直到最后一行&#xff1a;【CTRL SHIFT ↓ 】或者选取一行后按住SHIFT键&#xff0c;双击下边线就可以快速选取区域。 如果表格中有多行空行&#xff0c;可以先按CTRL SHIFT END&#xff0c;再按CTRL SHIFT 上下键调整&#xff0c;…...

编程日记 2024/8/23 6:43:02

C语言：文件复制

文本文件复制&#xff1a; #include<stdio.h>int main() {FILE* pFile1 NULL;FILE* pFile2 NULL;fopen_s(&pFile1,"D:\\11111.txt","r");fopen_s(&pFile2,"D:\\222.txt", "w");char c;while((cfgetc(pFile1))!EOF){f…...

编程日记 2024/8/23 6:40:59

谈谈建筑项目管理：类型、流程和工具

无论是在材料采购还是供应商管理方面&#xff0c;确保建筑项目按计划进行并控制在预算内始终是一项挑战。 如今&#xff0c;建筑项目管理正逐步采用软件驱动的方法来提升其效率。这一转型显著优化了项目规划、调度和资源配置&#xff0c;使建筑管理更加精确和高效。 什么是建…...

编程日记 2024/8/23 6:38:58

【Vue】生命周期函数

系列文章目录 第五章 生命周期函数 文章目录 系列文章目录 生命周期函数代表的是Vue实例&#xff0c;或者是Vue组件&#xff0c;在网页中各个生命阶段所执行的函数。生命周期函数可以分为创建阶段、挂载阶段、更新阶段以及卸载阶段。 创建阶段&#xff1a;setup挂载阶段&…...

编程日记 2024/8/23 6:35:33

C++系列-文件操作

文件操作 文件类型文本文件二进制文件 文件操作的三大类文件的打开方式ios::app(append)和 ios::ate(at end) 写文件写文件文件步骤读文件文件步骤二进制文件读写写一般数据写特殊数据 程序运行时产生的数据都属于临时数据&#xff0c;一旦程序运行完毕&#xff0c;就会释放&am…...

编程日记 2024/8/23 6:34:30

ES6解构赋值详解；全面掌握：JavaScript解构赋值的终极指南

目录 全面掌握&#xff1a;JavaScript解构赋值的终极指南 一、数组解构赋值 1、基本用法 2、跳过元素 3、剩余元素 4、默认值 二、对象解构赋值 1、基本用法 2、变量重命名 3、默认值 4、嵌套解构 三、复杂的嵌套结构解构 四、函数参数解构赋值 1、对象解构作为函…...

编程日记 2024/8/23 6:31:26

2-73 基于matlab的weber能量法求解齿轮时变啮合刚度的程序

基于matlab的weber能量法求解齿轮时变啮合刚度的程序&#xff0c;能够跑出刚度图&#xff0c;通过求解轮齿部分变形、基体变形及局部接触变形这三部分的变形&#xff0c;进而求得综合弹性变形&#xff0c;最终求出时变啮合刚度。程序已调通&#xff0c;可直接运行。 2- 73 齿轮…...

编程日记 2024/8/23 6:30:25

[C++]set和map的介绍及使用

关于set和map的接口函数部分&#xff0c;只重点介绍一些相较于别的容器有特殊地方的接口&#xff0c;set和map的接口可以触类旁通。 一、概念 &#xff08;一&#xff09;、关联式容器 关联式容器存储的元素是一个个的键值对<key,value>。通过键&#xff08;key&#x…...

编程日记 2024/8/23 6:29:24

【MySQL】MySQL学习笔记（持续更新）

1. 安装MySQL&#xff08;windows环境&#xff09; &#xff08;1&#xff09;在http://www.mysql.com下载*.msi的安装文件&#xff0c;并运行安装&#xff1a; 如&#xff1a;mysql-installer-community-8.0.39.0.msi 全部安装包含如下内容&#xff1a; …...

编程日记 2024/8/23 6:28:23

ArcGIS如何将投影坐标系转回为地理坐标系

有时候两个数据&#xff0c;一个为投影坐标系&#xff0c;另一个为地理坐标系时&#xff0c;在GIS软件中位置无法叠加到一起&#xff0c;这需要将两个或多个数据的坐标系统一&#xff0c;可以直接将地理坐标系的数据进行投影&#xff0c;或将投影坐标系转为地理坐标系。下面介绍…...

编程日记 2024/8/23 6:27:22

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2026/2/8 4:32:38

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2026/1/27 9:33:09

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/10/2 17:12:14

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

编程新知 2025/10/4 21:24:40

快速排序算法改进:随机快排-荷兰国旗划分详解

随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...

编程新知 2026/2/4 16:34:53

【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解

一、前言 在HarmonyOS 5的应用开发模型中&#xff0c;featureAbility是旧版FA模型&#xff08;Feature Ability&#xff09;的用法&#xff0c;Stage模型已采用全新的应用架构&#xff0c;推荐使用组件化的上下文获取方式&#xff0c;而非依赖featureAbility。 FA大概是API7之…...

编程新知 2025/10/9 0:45:56

flow_controllers

关键点&#xff1a; 流控制器类型&#xff1a; 同步&#xff08;Sync&#xff09;&#xff1a;发布操作会阻塞&#xff0c;直到数据被确认发送。异步&#xff08;Async&#xff09;&#xff1a;发布操作非阻塞&#xff0c;数据发送由后台线程处理。纯同步&#xff08;PureSync…...

编程新知 2025/11/28 10:50:12

【iOS】 Block再学习

iOS Block再学习 文章目录 iOS Block再学习前言Block的三种类型__ NSGlobalBlock____ NSMallocBlock____ NSStackBlock__小结 Block底层分析Block的结构捕获自由变量捕获全局(静态)变量捕获静态变量__block修饰符forwarding指针 Block的copy时机block作为函数返回值将block赋给…...

编程新知 2026/2/1 20:22:45

Win系统权限提升篇UAC绕过DLL劫持未引号路径可控服务全检项目

应用场景&#xff1a; 1、常规某个机器被钓鱼后门攻击后&#xff0c;我们需要做更高权限操作或权限维持等。 2、内网域中某个机器被钓鱼后门攻击后&#xff0c;我们需要对后续内网域做安全测试。 #Win10&11-BypassUAC自动提权-MSF&UACME 为了远程执行目标的exe或者b…...

编程新知 2026/2/5 4:18:04