大家好，我是Echa。

今天小编介绍的主角是腾讯，腾讯于1998年11月成立，作为国内知名的互联网公司，开源项目渗透到各行各业，随便拿几款开源项目，用户量都是以亿为单位。比如早期的社交软件QQ、微信、腾讯视频、腾讯新闻、腾讯云、腾讯会议、腾讯游戏等等。通过技术丰富互联网用户的生活,助力企业数字化升级。腾讯的使命是“用户为本 科技向善”。是个非常了不起的公司，也是小编非常崇拜的企业之一。

今天小编来盘点腾讯15个最受欢迎的前端开源项目，希望大家开发学习有所帮助。同时问一下粉丝们你们用了几个，欢迎在评论下方讨论。

全文大纲

1. wujie-无界微前端框架
2. TDesign-一套完整的企业级设计体系框架
3. WeUI-一套同微信原生视觉体验一致的基础样式库
4. WePY-是一款让小程序支持组件化开发的框架
5. vConsole-一个轻量、可拓展、针对手机网页的前端开发者调试面板
6. TMagic-可视化开源项目
7. Omi-是微信支付线研发部研发的下一代前端框架
8. kbone-是一个致力于微信小程序和 Web 端同构的解决方案
9. Face2FaceTranslator-面对面翻译小程序
10. secguide-面向开发人员梳理的代码安全指南
11. feflow-微信团队前端开发工具
12. QMUI Web-是一个专注 Web UI 开发框架
13. urvejs-一款魔幻线条框架
14. AlloyLever- 是腾讯 AlloyTeam 团队开源的一款 Web 开发调试工具
15. TEditor-是腾讯的 HTML5 富编辑器

wujie

官网：https://wujie-micro.github.io/doc/

Github：https://github.com/Tencent/wujie

无界微前端是一款基于 Web Components + iframe 微前端框架，具备成本低、速度快、原生隔离、功能强等一系列优点。其能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等。

能力

• 子应用的加载和卸载能力
• 页面需要从一个子应用切换到另一个子应用，框架必须具备加载、渲染、切换的能力
• 子应用独立运行的能力
• 子应用运行会污染全局的 window 对象，样式会污染其他应用，必须有效的隔离起来
• 子应用路由状态保持能力
• 激活子应用后，浏览器刷新、前进、后退子应用的路由都应该可以正常工作
• 应用间通信的能力
• 应用间可以方便、快捷的通信

收益

• 技术栈无关
• 主框架不限制接入应用的技术栈，微应用具备完全自主权
• 独立开发、独立部署
• 微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
• 增量升级
• 在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
• 独立运行时
• 每个微应用之间状态隔离，运行时状态不共享

single-spa 方案

single-spa是一个目前主流的微前端技术方案，其主要实现思路：

• 预先注册子应用(激活路由、子应用资源、生命周期函数)
• 监听路由的变化，匹配到了激活的路由则加载子应用资源，顺序调用生命周期函数并最终渲染到容器

乾坤微前端架构则进一步对single-spa方案进行完善，主要的完善点：

• 子应用资源由 js 列表修改进为一个url，大大减轻注册子应用的复杂度
• 实现应用隔离，完成js隔离方案 （window工厂） 和css隔离方案 （类vue的scoped）
• 增加资源预加载能力，预先子应用html、js、css资源缓存下来，加快子应用的打开速度

总结一下方案的优缺点：

优点

• 监听路由自动的加载、卸载当前路由对应的子应用
• 完备的沙箱方案，js沙箱做了SnapshotSandbox、LegacySandbox、ProxySandbox三套渐进增强方案，css沙箱做了两套strictStyleIsolation、experimentalStyleIsolation两套适用不同场景的方案
• 路由保持，浏览器刷新、前进、后退，都可以作用到子应用
• 应用间通信简单，全局注入

缺点

• 基于路由匹配，无法同时激活多个子应用，也不支持子应用保活
• 改造成本较大，从 webpack、代码、路由等等都要做一系列的适配
• css 沙箱无法绝对的隔离，js 沙箱在某些场景下执行性能下降严重
• 无法支持 vite 等 ESM 脚本运行

如下图：

TDesign

官网：https://tdesign.tencent.com/

Github：https://github.com/Tencent/wujie

TDesign 是一套完整的企业级设计体系，拥有基于 Vue / React / 小程序 等技术栈的组件库解决方案。用于构建 设计统一/跨端多技术栈的前端应用时，TDesign 更有优势。TDesign 是一个 multi-repo， 其包含了多个代码仓库：

如下图：

WeUI

官网： https://weui.io/

Github： https://github.com/Tencent/weui

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含 button、cell、dialog、 progress、 toast、article、actionsheet、icon 等各式元素。

如下图：

WePY

官网： https://wepyjs.gitee.io/wepy-docs/

Github： https://github.com/Tencent/wepy

WePY 是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化，Promise，Async Functions 的引入都是为了能让开发小程序项目变得更加简单，高效。

如下图：

vConsole

Github： https://github.com/Tencent/vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。现在 vConsole 是微信小程序的官方调试工具。

功能特性

• 日志(Logs)： console.log|info|error|...
• 网络(Network)： XMLHttpRequest, Fetch, sendBeacon
• 节点(Element)： HTML 节点树
• 存储(Storage)： Cookies, LocalStorage, SessionStorage
• 手动执行 JS 命令行
• 自定义插件

如下图：

TMagic

Github： https://github.com/Tencent/tmagic-editor

tmagic-editor 可视化开源项目是从魔方平台演化而来的开源项目，意在提供一个供开发者快速搭建可视化搭建平台的解决方案。

项目介绍

在本项目中，我们核心内容，是包含在 packages/editor 中的编辑器，以及 runtime 和 packages/ui 提供的各个前端框架相关的 runtime 和 ui。

• packages 目录中提供的内容，我们都以 npm 包形式输出，开发者可以通过安装对应的包来使用。
• runtime 是我们提供的编辑器活动页和编辑器模拟器运行的页面项目示例。可以直接使用，也可以参考并自行实现。
• playground 是一个简单的编辑器项目示例。即使用了 packages 和 runtime 内容的集成项目。开发者可以参考 playground，使用魔方提供的能力实现一个满足业务方需求的编辑器。

编辑器

通过安装和使用 @tmagic/editor，可以快速搭建起一个魔方编辑器。

页面渲染

runtime 是魔方提供的页面渲染环境。通过加载在编辑器中产出的 DSL，即可得到魔方编辑器希望拥有的最终产物，一个活动页面。我们提供了 vue2/vue3/react 几个版本的 runtime。

通过魔方编辑器和 runtime 渲染，以及通过自定义的复杂组件开发，可以在魔方项目上，搭建出复杂而精美的页面。

如下图：

Omi

官网：https://tencent.github.io/omi/

Github： https://github.com/Tencent/omi

Omi 框架是微信支付线研发部研发的下一代前端框架， 基于 Web Components 规范设计的组件化框架，可以使用 JSX/TSX 来写 HTML 结构。可以开发 PC Web、移动端 H5，也可以直接使用 Omi 开发小程序。

如下图：

kbone

Github： https://github.com/Tencent/kbone

kbone 是一个致力于微信小程序和 Web 端同构的解决方案。kbone 实现了一个适配器，在适配层里模拟出了浏览器环境，让 Web 端的代码可以不做什么改动便可运行在小程序里。因为 kbone 是通过提供适配器的方式来实现同构，所以它的优势很明显：

• 大部分流行的前端框架都能够在 kbone 上运行，比如 Vue、React、Preact 等。
• 支持更为完整的前端框架特性，因为 kbone 不会对框架底层进行删改（比如 Vue 中的 v-html 指令、Vue-router 插件）。
• 提供了常用的 dom/bom 接口，让用户代码无需做太大改动便可从 Web 端迁移到小程序端。
• 在小程序端运行时，仍然可以使用小程序本身的特性（比如像 live-player 内置组件、分包功能）。
• 提供了一些 Dom 扩展接口，让一些无法完美兼容到小程序端的接口也有替代使用方案（比如 getComputedStyle 接口）。

如下图：

Face2FaceTranslator

Github： https://github.com/Tencent/Face2FaceTranslator

面对面翻译小程序是微信团队针对中英文面对面沟通的场景开发的流式语音翻译小程序，基于微信同声传译插件封装实现，提供了中英文语音识别，文本翻译等功能。

如下图：

secguide

Github： https://github.com/Tencent/secguide

面向开发人员梳理的代码安全指南，旨在梳理API层面的风险点并提供详实可行的安全编码方案。代码安全指引可用于以下场景：开发人员日常参考、编写安全系统扫描策略、安全组件开发、漏洞修复指引。该指南包含了 C/C++、JavaScript、Node.js、Go、Java、Python的安全指南。

如下图：

feflow

Github： https://github.com/Tencent/feflow

Feflow (读音 /?fefl??/)是腾讯开源的用于提升工程效率的前端工作流和规范工具。托管在Github上：feflow。目前已经在NOW直播、花样直播、花样交友、手Q附近、群视频、群送礼、回音、应用宝、企鹅号等业务广泛使用。有80+ WEB/IOS/Andriod 稳定用户，累计投入生产项目达到240+。

Feflow 借鉴了 Pipline 的思想，将日常的研发工作划分为：初始化、本地开发、打包构建、检查、发布上线五个步骤。分别对应 init、dev、build、test和deploy五个基本命令。

除了服务好基本的开发工作流和规范，Feflow 提供了易于扩展的插件机制，用于打造团队统一的工具链生态。

如下图：

QMUI Web

Github： https://github.com/Tencent/QMUI_Web

QMUI Web 是一个专注 Web UI 开发，帮助开发者快速实现特定的一整套设计的框架。
框架主要由一个强大的 Sass 方法合集与内置的工作流构成。通过 QMUI Web，开发者可以很轻松地提高 Web UI 开发的效率，同时保持了项目的高可维护性与稳健。
如果你需要方便地控制项目的整体样式，或者需要应对频繁的界面变动，
那么 QMUI Web 框架将会是你最好的解决方案。

功能特性

基础配置与组件

通过内置的公共组件和对应的 SASS 配置表，你只需修改简单的配置即可快速实现所需样式的组件。（QMUI SASS 配置表和公共组件如何帮忙开发者快速搭建项目基础 UI？）

SASS 增强支持

QMUI Web 包含70个 SASS mixin/function/extend，涉及布局、外观、动画、设备适配、数值计算以及 SASS 原生能力增强等多个方面，可以大幅提升开发效率。

完善的内置工作流

QMUI Web 内置的工作流拥有从初始化项目到变更文件的各种自动化处理，包含了模板引擎，雪碧图处理，图片集中管理与自动压缩，静态资源合并、压缩与变更以及冗余文件清理等功能。

扩展组件

QMUI Web 除了内置的公共组件外，还通过扩展的方式提供了常用的扩展组件，如等高左右双栏，文件上传按钮，树状选择菜单。

如下图：

urvejs

Github： https://github.com/AlloyTeam/curvejs

是腾讯AlloyTeam打造的一款魔幻线条框架，让线条成为一名优秀的舞者，让线条们成为优秀的舞团，HTML5 Canvas就是舞台。其原理就是使用 Perlin-Noise + Particle System + Bézier Curve + Color Transition 制作而成。使用curvejs实现类似变幻线功能只需要不到10行代码。

如下图：

AlloyLever

Github： https://github.com/AlloyTeam/AlloyLever

AlloyLever 是腾讯 AlloyTeam 团队开源的一款 Web 开发调试工具。

AlloyLever的功能：

• 点击 alloylever 按钮之间切换显示或隐藏工具面板；
• Console会输出所有用户打印的日志如 console.[log/error/info/debug/debug] ；
• Console会输出所有的错误信息(脚本错误和网络请求错误) ；
• XHR 面板会输出所有（XMLHttpRequest）AJAX 请求和服务器端返回的数据；
• Resouces 面板会输出所有的 Cookie 信息和 LocalStorage ；
• TimeLime 面板会输出页面相关的生命周期里的时间段耗时情况

如下图：

TEditor

Github： https://github.com/Tencent/tmagic-editor

腾讯tmagic-editor是一个所见即所得的页面可视化编辑器，基于tmagic-editor可以快速搭建可视化页面生产平台，让非技术人员可以通过拖拽和配置，自助生成H5页面、PC页面、TV页面，大大降低页面生产成本，实现零代码/低代码生成页面。

以下是腾讯视频会员业务基于tmagic-editor搭建的可视化页面搭建平台示意图。tmagic-editor已经用于腾讯视频会员、爱玩游戏、云视听极光、腾讯会议等十几个腾讯业务，每月生产和发布数百个页面。

使用tmagic-editor的业务需要做什么

开发业务组件

tmagic-editor并不提供业务组件，业务需要根据自己的业务场景，开发相应的业务组件。比如抽奖组件、视频播放组件等。tmagic-editor的通用性设计，使得业务方可以使用不同的前端框架去开发组件。tmagic-editor官方已经提供了vue2/vue3、react的runtime，意味着业务可以直接使用这些框架开发组件，如果业务想用其它框架开发组件，则需要开发相应的runtime。

开发业务插件（可选）

插件的功能是作为页面逻辑行为的一种补充方式。一般不显式的在模拟器中被渲染出具体内容（除非插件中会生成组件并插入页面），通常我们会用插件实现类似登录，页面环境判断，请求拦截器等功能。跟组件一样，可以用不同前端框架实现。

部署可视化搭建服务

tmagic-editor提供的是开源代码，并不是一个saas服务，因此业务需要自己部署可视化搭建平台的服务。

构建和发布页面

业务需要管理自己的组件库，在发布环节基于拿到的页面js Schema描述文件，基于runtime进行打包构建，并把打包构建的产物部署到自己的服务器/CDN。

其它定制需求

如果对编辑器有一些扩展需求，编辑器已经预留了相应的扩展能力，业务可以开发相应扩展功能。tmagic-editor提供了vue2/vue3、react的runtime，业务可以修改runtime，或者开发其它前端框架的runtime。

如下图：