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

腾讯无界微前端框架介绍

news 2026/4/12 1:27:44

一、无界微前端框架概述

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

技术实现

无界微前端的核心技术是基于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

平时没感觉突然痛到动不了，颈椎病腰间盘突出早有潜伏信号，成因症状与防护干货速收藏

很多人觉得颈腰椎病是 "慢性病"&#xff0c;会慢慢加重&#xff0c;却不知道它常常以 "突然爆发" 的形式出现。 不少患者前一天还正常工作生活&#xff0c;第二天就突然颈痛难忍、腰痛到无法下床&#xff0c;这其实是因为疾病早已在体内潜伏多年&#xff…...

编程新知 2026/4/12 1:06:11

Intv_AI_MK11成本控制与资源监控：GPU算力优化使用指南

Intv_AI_MK11成本控制与资源监控&#xff1a;GPU算力优化使用指南 1. 为什么需要关注GPU算力成本 如果你长期使用Intv_AI_MK11这类AI模型&#xff0c;一定深有体会&#xff1a;GPU算力成本就像个无底洞。每次看到云服务账单时&#xff0c;那种"钱在燃烧"的感觉特别…...

编程新知 2026/4/12 0:17:37

从理论到实践：基于MATLAB comm.RayTracingChannel的室内多径信道仿真全解析

1. 室内多径信道建模的核心挑战 想象一下你在会议室用手机视频通话时突然画面卡顿——这很可能就是多径效应在作祟。当无线信号在室内遇到墙壁、家具等障碍物时&#xff0c;会产生反射、折射和散射&#xff0c;形成多条传播路径。这些路径信号到达接收端的时间、相位各不相同&a…...

编程新知 2026/4/12 0:13:35

GPUStack 在华为昇腾 I A 服务器上的保姆级部署指南穆

开发个什么Skill呢&#xff1f; 通过 Skill&#xff0c;我们可以将某些能力进行模块化封装&#xff0c;从而实现特定的工作流编排、专家领域知识沉淀以及各类工具的集成。 这里我打算来一次“套娃式”的实践&#xff1a;创建一个用于自动生成 Skill 的 Skill&#xff0c;一是用…...

编程新知 2026/4/12 0:01:33

MATLAB/Simulink搭建全桥LLC仿真：从参数计算到波形调试的保姆级避坑指南

MATLAB/Simulink全桥LLC仿真实战&#xff1a;从理论参数到波形优化的工程化实现 电力电子工程师在设计全桥LLC谐振变换器时&#xff0c;仿真环节往往是理论走向实践的第一道门槛。许多初学者在Simulink中搭建模型时&#xff0c;明明按照教科书计算了Lr、Lm、Cr等参数&#xff0…...

编程新知 2026/4/11 23:26:45

2026最权威的十大AI辅助论文方案解析与推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 一篇篇DeepSeek系列论文&#xff0c;呈现出大型语言模型架构以及训练方法方面的系统性创新&a…...

编程新知 2026/4/11 23:24:34

从Excel到HTML：RAG分块策略在结构化数据召回中的革新实践

1. 为什么Excel数据需要特殊的分块策略&#xff1f; 在企业级应用中&#xff0c;Excel表格是最常见的数据载体之一。财务报告、销售数据、库存清单等结构化信息通常都以.xlsx格式存储和流转。但当我们尝试将这些数据接入RAG&#xff08;检索增强生成&#xff09;系统时&#xf…...

编程新知 2026/4/11 23:20:21

Spring Boot 缓存注解的实现原理

Spring Boot缓存注解的实现原理 在现代Web应用中&#xff0c;缓存是提升系统性能的重要手段之一。Spring Boot通过简洁的注解方式&#xff0c;为开发者提供了便捷的缓存功能&#xff0c;其底层实现原理既高效又灵活。本文将深入探讨Spring Boot缓存注解的核心机制&#xff0c;…...

编程新知 2026/4/11 22:04:41

OpenRouter 之后，中国企业需要怎样的 AI API 平台

随着 AI 应用的井喷&#xff0c;API 服务已成为企业降本增效、快速构建AI产品的“水电煤”。随之爆火的&#xff0c;还有 API 聚合平台——它将全球各大厂商、不同架构的 AI 模型统一集成到一个平台中。开发者和企业无需繁琐地逐一对接&#xff0c;就能轻松实现一站式调用与多模…...

编程新知 2026/4/11 22:00:22

Pixel Language Portal 赋能网站开发：从需求到前端静态页面代码自动生成

Pixel Language Portal 赋能网站开发&#xff1a;从需求到前端静态页面代码自动生成 1. 效果惊艳的开场 想象一下这样的场景&#xff1a;你刚和客户开完需求会议&#xff0c;手上只有一份简单的网站描述文档。传统开发流程下&#xff0c;前端工程师需要至少1-2天才能完成静态…...

编程新知 2026/4/11 21:54:18