作為國(guó)內(nèi)知名的互聯(lián)網(wǎng)公司，騰訊在前端領(lǐng)域做出了很多開源貢獻(xiàn)。本文就來盤點(diǎn)騰訊最熱門的 10 款前端開源項(xiàng)目！

wujie

無界微前端是一款基于 Web Components + iframe 微前端框架，具備成本低、速度快、原生隔離、功能強(qiáng)等一系列優(yōu)點(diǎn)。其能夠完善的解決適配成本、樣式隔離、運(yùn)行性能、頁(yè)面白屏、子應(yīng)用通信、子應(yīng)用?；睢⒍鄳?yīng)用激活、vite 框架支持、應(yīng)用共享等。

Github（star：2.3k）：https://github.com/Tencent/wujie

TDesign

TDesign 是一套完整的企業(yè)級(jí)設(shè)計(jì)體系，擁有基于 Vue / React / 小程序 等技術(shù)棧的組件庫(kù)解決方案。用于構(gòu)建 設(shè)計(jì)統(tǒng)一/跨端多技術(shù)棧的前端應(yīng)用時(shí)，TDesign 更有優(yōu)勢(shì)。TDesign 是一個(gè)?multi-repo， 其包含了多個(gè)代碼倉(cāng)庫(kù)：

Github（star：2.5k）：https://github.com/Tencent/tdesign

WeUI

WeUI 是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫(kù)，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信 Web 開發(fā)量身設(shè)計(jì)，可以令用戶的使用感知更加統(tǒng)一。包含 button、cell、dialog、 progress、 toast、article、actionsheet、icon 等各式元素。

Github（star：26.7k）：https://github.com/Tencent/weui

WePY

WePY 是一款讓小程序支持組件化開發(fā)的框架，通過預(yù)編譯的手段讓開發(fā)者可以選擇自己喜歡的開發(fā)風(fēng)格去開發(fā)小程序?？蚣艿募?xì)節(jié)優(yōu)化，Promise，Async Functions 的引入都是為了能讓開發(fā)小程序項(xiàng)目變得更加簡(jiǎn)單，高效。

Github（star：22.1k）：https://github.com/Tencent/wepy

vConsole

一個(gè)輕量、可拓展、針對(duì)手機(jī)網(wǎng)頁(yè)的前端開發(fā)者調(diào)試面板。vConsole 是框架無關(guān)的，可以在 Vue、React 或其他任何框架中使用。現(xiàn)在 vConsole 是微信小程序的官方調(diào)試工具。

Github（star：15.5k）：https://github.com/Tencent/vConsole

TMagic

tmagic-editor 可視化開源項(xiàng)目是從魔方平臺(tái)演化而來的開源項(xiàng)目，意在提供一個(gè)供開發(fā)者快速搭建可視化搭建平臺(tái)的解決方案。

Github（star：3.3k）：https://github.com/Tencent/tmagic-editor

Omi

Omi 框架是微信支付線研發(fā)部研發(fā)的下一代前端框架， 基于 Web Components 規(guī)范設(shè)計(jì)的組件化框架，可以使用 JSX/TSX 來寫 HTML 結(jié)構(gòu)。可以開發(fā) PC Web、移動(dòng)端 H5，也可以直接使用 Omi 開發(fā)小程序。

Github（star：12.5k）：https://github.com/Tencent/omi

kbone

kbone 是一個(gè)致力于微信小程序和 Web 端同構(gòu)的解決方案。kbone 實(shí)現(xiàn)了一個(gè)適配器，在適配層里模擬出了瀏覽器環(huán)境，讓 Web 端的代碼可以不做什么改動(dòng)便可運(yùn)行在小程序里。因?yàn)?kbone 是通過提供適配器的方式來實(shí)現(xiàn)同構(gòu)，所以它的優(yōu)勢(shì)很明顯：

• 大部分流行的前端框架都能夠在 kbone 上運(yùn)行，比如 Vue、React、Preact 等。

• 支持更為完整的前端框架特性，因?yàn)?kbone 不會(huì)對(duì)框架底層進(jìn)行刪改（比如 Vue 中的 v-html 指令、Vue-router 插件）。

• 提供了常用的 dom/bom 接口，讓用戶代碼無需做太大改動(dòng)便可從 Web 端遷移到小程序端。

• 在小程序端運(yùn)行時(shí)，仍然可以使用小程序本身的特性（比如像 live-player 內(nèi)置組件、分包功能）。

• 提供了一些 Dom 擴(kuò)展接口，讓一些無法完美兼容到小程序端的接口也有替代使用方案（比如 getComputedStyle 接口）。

Github（star：747）：https://github.com/Tencent/kbone

Face2FaceTranslator

面對(duì)面翻譯小程序是微信團(tuán)隊(duì)針對(duì)中英文面對(duì)面溝通的場(chǎng)景開發(fā)的流式語(yǔ)音翻譯小程序，基于微信同聲傳譯插件封裝實(shí)現(xiàn)，提供了中英文語(yǔ)音識(shí)別，文本翻譯等功能。

Github（star：747）：https://github.com/Tencent/Face2FaceTranslator

secguide

面向開發(fā)人員梳理的代碼安全指南，旨在梳理API層面的風(fēng)險(xiǎn)點(diǎn)并提供詳實(shí)可行的安全編碼方案。代碼安全指引可用于以下場(chǎng)景：開發(fā)人員日常參考、編寫安全系統(tǒng)掃描策略、安全組件開發(fā)、漏洞修復(fù)指引。該指南包含了 C/C++、JavaScript、Node.js、Go、Java、Python的安全指南。

Github（star：11.9k）：https://github.com/Tencent/secguide

學(xué)習(xí)編程語(yǔ)言最不能忽視的就是項(xiàng)目練習(xí)了，而且對(duì)很多同學(xué)來說也是最難搞定的，所以一定要加強(qiáng)這方面的學(xué)習(xí)。

網(wǎng)易9大前端項(xiàng)目就業(yè)實(shí)訓(xùn)營(yíng)

網(wǎng)易名師+獨(dú)家案例，3個(gè)月助你成為前端工程師

0基礎(chǔ)入門前端開發(fā)，實(shí)戰(zhàn)9個(gè)企業(yè)級(jí)項(xiàng)目，打通你的任督二脈

• 實(shí)現(xiàn)Web前端技能升華，搭建前端開發(fā)工程師所具備的完善知識(shí)體系，鞏固所學(xué)知識(shí)并能熟練應(yīng)用

• 鞏固Web前端基礎(chǔ)，熟練使用前端開發(fā)的核心語(yǔ)言和頁(yè)面測(cè)試，進(jìn)一步提升前端開發(fā)能力，夯實(shí)移動(dòng)端的開發(fā)能力

• .理解移動(dòng)端的項(xiàng)目的開發(fā)流程與部署方式，學(xué)會(huì)使用專業(yè)的框架開發(fā)工具真正實(shí)戰(zhàn)企業(yè)級(jí)項(xiàng)目的開發(fā)，并感受大型項(xiàng)目的落地流程，深入理解項(xiàng)目及源碼

• .學(xué)會(huì)使用一款Ul框架，自主高效完成項(xiàng)目制作

這些開源項(xiàng)目，你用過幾個(gè)？歡迎在評(píng)論區(qū)留言~