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

腾讯无界微前端框架介绍

news 2025/9/23 13:20:58

一、无界微前端框架概述

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

技术实现

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

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/7/16 16:51:12

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/9/19 5:15:11

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/8/10 21:01:28

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/9/19 12:49:14

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/8/28 23:03:34

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/9/18 2:15:00

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/7/11 5:22:11

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2025/9/7 11:36:19

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2025/9/13 23:29:05

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2025/9/23 0:14:10