大家好，我是Echa。
今天小编介绍的主角是腾讯js上传图片到项目服务器上，腾讯于1998年11月成立，作为国内知名的互联网公司，开源项目渗透到各行各业，随便拿几款开源项目，用户量都是以亿为单位。比如早期的社交软件QQ、微信、腾讯视频、腾讯新闻、腾讯云、腾讯会议、腾讯游戏等等。通过技术丰富互联网用户的生活,助力企业数字化升级。腾讯的使命是“用户为本 科技向善”。是个非常了不起的公司，也是小编非常崇拜的企业之一。
今天小编来盘点腾讯15个最受欢迎的前端开源项目，希望大家开发学习有所帮助。同时问一下粉丝们你们用了几个，欢迎在评论下方讨论。
全文大纲wujie-无界微前端框架TDesign-一套完整的企业级设计体系框架WeUI-一套同微信原生视觉体验一致的基础样式库WePY-是一款让小程序支持组件化开发的框架vConsole-一个轻量、可拓展、针对手机网页的前端开发者调试面板TMagic-可视化开源项目Omi-是微信支付线研发部研发的下一代前端框架kbone-是一个致力于微信小程序和 Web 端同构的解决方案Face2FaceTranslator-面对面翻译小程序secguide-面向开发人员梳理的代码安全指南 feflow-微信团队前端开发工具QMUI Web-是一个专注 Web UI 开发框架urvejs-一款魔幻线条框架 AlloyLever- 是腾讯 AlloyTeam 团队开源的一款 Web 开发调试工具TEditor-是腾讯的 HTML5 富编辑器wujie
官网：
Github：
无界微前端是一款基于 Web Components + iframe 微前端框架，具备成本低、速度快、原生隔离、功能强等一系列优点。其能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等。
能力
收益
single-spa 方案
single-spa是一个目前主流的微前端技术方案，其主要实现思路：
乾坤微前端架构则进一步对single-spa方案进行完善，主要的完善点：
总结一下方案的优缺点：
优点
缺点
如下图：
TDesign
官网：
Github：
TDesign 是一套完整的企业级设计体系，拥有基于 Vue / React / 小程序 等技术栈的组件库解决方案。用于构建 设计统一/跨端多技术栈的前端应用时，TDesign 更有优势。TDesign 是一个 multi-repo， 其包含了多个代码仓库：
如下图：
WeUI
官网：
Github：
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含 button、cell、dialog、 progress、 toast、article、actionsheet、icon 等各式元素。
如下图：
WePY
官网：
Github：
WePY 是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化，Promise，Async Functions 的引入都是为了能让开发小程序项目变得更加简单，高效。
如下图：
vConsole
Github：
一个轻量、可拓展、针对手机网页的前端开发者调试面板。vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。现在 vConsole 是微信小程序的官方调试工具。
功能特性
如下图：
TMagic
Github：
tmagic-editor 可视化开源项目是从魔方平台演化而来的开源项目，意在提供一个供开发者快速搭建可视化搭建平台的解决方案。
项目介绍
在本项目中，我们核心内容，是包含在 packages/editor 中的编辑器，以及 runtime 和 packages/ui 提供的各个前端框架相关的 runtime 和 ui。
编辑器
通过安装和使用 @tmagic/editor，可以快速搭建起一个魔方编辑器。
页面渲染
runtime 是魔方提供的页面渲染环境。通过加载在编辑器中产出的 DSL，即可得到魔方编辑器希望拥有的最终产物，一个活动页面。我们提供了 vue2/vue3/react 几个版本的 runtime。
通过魔方编辑器和 runtime 渲染，以及通过自定义的复杂组件开发，可以在魔方项目上，搭建出复杂而精美的页面。
如下图：
Omi
官网：
Github：
Omi 框架是微信支付线研发部研发的下一代前端框架， 基于 Web Components 规范设计的组件化框架，可以使用 JSX/TSX 来写 HTML 结构。可以开发 PC Web、移动端 H5，也可以直接使用 Omi 开发小程序。
如下图：
kbone
Github：
kbone 是一个致力于微信小程序和 Web 端同构的解决方案。kbone 实现了一个适配器，在适配层里模拟出了浏览器环境，让 Web 端的代码可以不做什么改动便可运行在小程序里。因为 kbone 是通过提供适配器的方式来实现同构，所以它的优势很明显：
如下图：
Face2FaceTranslator
Github：
面对面翻译小程序是微信团队针对中英文面对面沟通的场景开发的流式语音翻译小程序，基于微信同声传译插件封装实现，提供了中英文语音识别，文本翻译等功能。
如下图：
secguide
Github：
面向开发人员梳理的代码安全指南，旨在梳理API层面的风险点并提供详实可行的安全编码方案。代码安全指引可用于以下场景：开发人员日常参考、编写安全系统扫描策略、安全组件开发、漏洞修复指引。该指南包含了 C/C++、JavaScript、Node.js、Go、Java、Python的安全指南。
如下图：
feflow
Github：
Feflow (读音 /ˈfefləʊ/)是腾讯开源的用于提升工程效率的前端工作流和规范工具。托管在Github上：feflow。目前已经在NOW直播、花样直播、花样交友、手Q附近、群视频、群送礼、回音、应用宝、企鹅号等业务广泛使用。有80+ WEB/IOS/Andriod 稳定用户，累计投入生产项目达到240+。
Feflow 借鉴了 Pipline 的思想，将日常的研发工作划分为：初始化、本地开发、打包构建、检查、发布上线五个步骤。分别对应 init、dev、build、test和deploy五个基本命令。
除了服务好基本的开发工作流和规范，Feflow 提供了易于扩展的插件机制，用于打造团队统一的工具链生态。
如下图：
QMUI Web
Github：
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：
是腾讯AlloyTeam打造的一款魔幻线条框架，让线条成为一名优秀的舞者，让线条们成为优秀的舞团，HTML5 Canvas就是舞台。其原理就是使用 Perlin-Noise + Particle System + Bézier Curve + Color Transition 制作而成。使用curvejs实现类似变幻线功能只需要不到10行代码。
如下图：
AlloyLever
Github：
AlloyLever 是腾讯 AlloyTeam 团队开源的一款 Web 开发调试工具。
AlloyLever的功能：
如下图：
TEditor
Github：
腾讯tmagic-editor是一个所见即所得的页面可视化编辑器，基于tmagic-editor可以快速搭建可视化页面生产平台，让非技术人员可以通过拖拽和配置，自助生成H5页面、PC页面、TV页面，大大降低页面生产成本，实现零代码/低代码生成页面。
以下是腾讯视频会员业务基于tmagic-editor搭建的可视化页面搭建平台示意图。tmagic-editor已经用于腾讯视频会员、爱玩游戏、云视听极光、腾讯会议等十几个腾讯业务，每月生产和发布数百个页面。
使用tmagic-editor的业务需要做什么
开发业务组件
tmagic-editor并不提供业务组件，业务需要根据自己的业务场景，开发相应的业务组件。比如抽奖组件、视频播放组件等。tmagic-editor的通用性设计，使得业务方可以使用不同的前端框架去开发组件。tmagic-editor官方已经提供了vue2/vue3、react的runtime，意味着业务可以直接使用这些框架开发组件，如果业务想用其它框架开发组件，则需要开发相应的runtime。
开发业务插件（可选）
插件的功能是作为页面逻辑行为的一种补充方式。一般不显式的在模拟器中被渲染出具体内容（除非插件中会生成组件并插入页面），通常我们会用插件实现类似登录，页面环境判断js上传图片到项目服务器上，请求拦截器等功能。跟组件一样，可以用不同前端框架实现。
部署可视化搭建服务
tmagic-editor提供的是开源代码，并不是一个saas服务，因此业务需要自己部署可视化搭建平台的服务。
构建和发布页面
业务需要管理自己的组件库，在发布环节基于拿到的页面js Schema描述文件，基于runtime进行打包构建，并把打包构建的产物部署到自己的服务器/CDN。
其它定制需求
如果对编辑器有一些扩展需求，编辑器已经预留了相应的扩展能力，业务可以开发相应扩展功能。tmagic-editor提供了vue2/vue3、react的runtime，业务可以修改runtime，或者开发其它前端框架的runtime。
如下图：
本文到此结束，希望对大家有所帮助！
