腾讯网页游戏推荐 精选最佳腾讯网页游戏

大家好，我是Echa。

今天小编介绍的主角是腾讯，腾讯于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

官网：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 脚本运行

如下图：

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 命令行自定义插件

如下图：

Omi

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

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

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

如下图：

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

如下图：

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。

如下图：