強烈推薦:小程序常用的6款框架總結

隨著前(qian)(qian)端的(de)(de)知(zhi)識(shi)不(bu)斷(duan)更(geng)新，小程(cheng)序(xu)(xu)(xu)(xu)也(ye)(ye)成(cheng)為了我們開(kai)發中(zhong)的(de)(de)日常。微信(xin)小程(cheng)序(xu)(xu)(xu)(xu)、百度小程(cheng)序(xu)(xu)(xu)(xu)、抖音小程(cheng)序(xu)(xu)(xu)(xu)、支付寶小程(cheng)序(xu)(xu)(xu)(xu)、頭條小程(cheng)序(xu)(xu)(xu)(xu)等等不(bu)斷(duan)涌(yong)入我們的(de)(de)生(sheng)活，隨著小程(cheng)序(xu)(xu)(xu)(xu)的(de)(de)火爆，各(ge)種小程(cheng)序(xu)(xu)(xu)(xu)框架不(bu)斷(duan)出現，也(ye)(ye)在不(bu)斷(duan)更(geng)新。把小程(cheng)序(xu)(xu)(xu)(xu)給制(zhi)作出來，只是使用了不(bu)同的(de)(de)框架。那么目(mu)前(qian)(qian)有哪些框架/組件庫比較優秀呢？我在這里簡單的羅列以下幾款：

1. uni-app

官方地址：uni-app官(guan)網

個人微信小程序開發案例(li)：“皮皮虎去(qu)水印”

短視頻(pin)圖(tu)集永(yong)久免費去水(shui)印，一鍵去抖音、快手、火山、小紅(hong)書(shu)等(deng)短視頻(pin)圖(tu)集水(shui)印，無(wu)廣告，不限量！！！

uni-app是一個使(shi)用 Vue.js 開(kai)(kai)發(fa)(fa)所有前(qian)端(duan)應(ying)(ying)用的(de)框架(jia)，開(kai)(kai)發(fa)(fa)者編寫一套代碼，可(ke)發(fa)(fa)布到iOS、Android、Web（響應(ying)(ying)式）、以(yi)及各種(zhong)小程序（微信(xin)/支(zhi)付寶/百度/頭條/QQ/快(kuai)(kuai)手/釘(ding)釘(ding)/淘(tao)寶）、快(kuai)(kuai)應(ying)(ying)用等多個平(ping)臺。uni-app在手，做啥都(dou)不愁。即(ji)使(shi)不跨端(duan)，uni-app也是更(geng)好(hao)的(de)小程序開(kai)(kai)發(fa)(fa)框架(jia)（詳(xiang)見）、更(geng)好(hao)的(de)App跨平(ping)臺框架(jia)、更(geng)方便的(de)H5開(kai)(kai)發(fa)(fa)框架(jia)。不管(guan)領導安排什么樣的(de)項目(mu)，你都(dou)可(ke)以(yi)快(kuai)(kuai)速交付，不需(xu)要轉換開(kai)(kai)發(fa)(fa)思維、不需(xu)要更(geng)改開(kai)(kai)發(fa)(fa)習慣。

我之前也是了解過(guo)很多框架，特別(bie)是目前比較流行跨(kua)多個平臺的框架，其中uni-app框架最終主要是為了小程序而打造的，后面慢慢演變成支持現在小程序、app、pc端h5、快應用等。我個人目前用的框架也是uni-app。該框架可以說滿足我現在的全部需求，公司的app我用nvue重構，非常nice，小程序用uniapp打造，性能也很完美。由于對uniapp的熱愛和支持，我也會在插件市場開源我的小插件，同時有了HBuilder X的加持，真的很方便，所以這款框架也是我強烈推薦的。

2. Taro

官方(fang)地址：Taro 介紹 | Taro 文檔

Taro 一(yi)套 遵循React 語法(fa)規范的多端開發解決方(fang)案。使用 Taro，只書寫一(yi)套代(dai)碼，再通過 Taro 的編譯工具，將(jiang)源代(dai)碼分別編譯出可以(yi)在(zai)不(bu)同端（微信小程(cheng)序、H5、App 端等）運(yun)行的代(dai)碼。同時 Taro 還(huan)提供了開箱即用的語法(fa)檢測和自動補全(quan)等功能。

Taro這款框架在當(dang)初我們公司在選框架做(zuo)APP的時(shi)候，我做(zuo)了(le)(le)(le)(le)一些了(le)(le)(le)(le)解，它的核(he)心其實就(jiu)是(shi)react，由于react-native的火爆，所以特意了(le)(le)(le)(le)解了(le)(le)(le)(le)下相關的內容(rong)。當(dang)時(shi)vue3剛發(fa)布沒多久，Trao就(jiu)支持了(le)(le)(le)(le)VUE3，這說明官方的更新速度還是(shi)挺快的。特別是(shi)對react熱愛的開發(fa)者可以多去了(le)(le)(le)(le)解下，所以這款框架也是(shi)值得大家去學習(xi)利(li)用的，畢(bi)竟京東內部打造(zao)，不容(rong)小(xiao)覷。

3. mpvue

官方(fang)地址：mpvue.com

mpvue 是美團點評開(kai)(kai)源的(de)一個使(shi)用 Vue.js 開(kai)(kai)發小(xiao)程序的(de)前端(duan)框架。框架基于(yu) Vue.js 核心，mpvue 修改了 Vue.js 的(de) runtime 和 compiler 實現，使(shi)其可以運(yun)行在小(xiao)程序環境中，從而為(wei)小(xiao)程序開(kai)(kai)發引入(ru)了整(zheng)套 Vue.js 開(kai)(kai)發體驗(yan)。

使(shi)用 mpvue 開發小程序，你將在小程序技術體系的基礎上獲取到這樣一些能力：

徹底的組件化開(kai)發能力：提高代碼(ma)復用性

完整的 Vue.js 開發體驗

方便的 Vuex 數據管理方案：方便構建復雜應用

快(kuai)捷的 webpack 構建機制：自定義構建策略、開發階段 hotReload

支(zhi)持使用 npm 外部依賴

使用 Vue.js 命令行工具 vue-cli 快速初始化項目

H5 代(dai)碼轉換編譯(yi)成小程序目標代(dai)碼的能(neng)力

在我(wo)剛(gang)接(jie)小程序的時候(hou)，聽說的第二個(ge)框架就是mpvue，第一個是微信小程序官網提供的框架。但是沒有緣分，我一直沒機會用上這款框架，沒關系，世界萬千，有些東西終究是要錯過。說了這么多優點，所所以它也是值得學習使用的。

4. 微信小程序官方框架

官方地(di)址(zhi)：微信開放文檔(dang)

小程序開(kai)發(fa)框架(jia)的目標(biao)是(shi)通過盡可(ke)能(neng)簡單、高效(xiao)的方式讓(rang)開(kai)發(fa)者可(ke)以在微信中開(kai)發(fa)具有原(yuan)生(sheng) APP 體驗的服務。整個小程序框架系統分為兩部分：邏輯層（App Service）和 視圖層（View）。小程序提供了自己的視圖層描述語言 WXML 和 WXSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數據傳輸和事件系統，讓開發者能夠專注于數據與邏輯。

在剛接觸微(wei)信小程序的時候，就是官方提供的這個框架，其實該(gai)框架的思想和vue還是有相似之處，正所謂萬變不離其宗。只不過這個框架就是直接使用微信小程序所需要的wxml、wxss等文件，而其他框架最終打包生成的文件才是官方所需要的。所以我建議就是初學者，還是可以先使用或學習下該框架，更能直接的了解小程序和學習。所以初學者值得推薦。

5. WePY

官方地址：WePY Document

WePY (發音(yin): /'wepi/) 項目啟動于(yu) 2016 年 11 月(yue)份， 是(shi)小程(cheng)序(xu)最早的(de)(de)框(kuang)架(jia)之一，是(shi)一款(kuan)讓(rang)小程(cheng)序(xu)支持組件化(hua)開(kai)發的(de)(de)框(kuang)架(jia)，通過預編譯的(de)(de)手段讓(rang)開(kai)發者可以選擇自己(ji)喜(xi)歡的(de)(de)開(kai)發風格去開(kai)發小程(cheng)序(xu)。框(kuang)架(jia)的(de)(de)細節優化(hua)，Promise，Async Functions的(de)(de)引入都是(shi)為了(le)能讓(rang)開(kai)發小程(cheng)序(xu)項目變(bian)得更加簡單(dan)，高(gao)效。騰訊(xun)團隊開(kai)源的(de)(de)一款(kuan)類vue語(yu)法規(gui)范的(de)(de)小程(cheng)序(xu)框(kuang)架(jia),借鑒了(le)Vue的(de)(de)語(yu)法風格和功能特(te)性,支持了(le)Vue的(de)(de)諸多特(te)征。

特性：

使用 Vue Observer 實現數據綁定

支(zhi)持 Vue watch/computed/mixin 等特性

基于(yu)原(yuan)生(sheng)組件實現組件化(hua)開(kai)發

支持 TypeScript

6. Tina.js 一款輕巧的漸進式微信小程序框架

開源框架地址(zhi)： [GitHub - tinajs/tina: 一款輕巧(qiao)的漸進(jin)式微信小程序框架](GitHub - tinajs/tina: 一款輕巧的漸進式微(wei)信小程序框(kuang)架)

官方地(di)址：GitHub - tinajs/tina: 一款(kuan)輕巧(qiao)的漸進(jin)式(shi)微(wei)信(xin)小程(cheng)序框架(jia)

官方介紹(shao)：是一(yi)款輕巧的漸進(jin)式微信小(xiao)程序框架，保(bao)留(liu) MINA (微信小程序官方框架) 的大部分 API 設計；無論你有無小程序開發經驗，都可以輕松過渡上手。

這款(kuan)開源框架比較(jiao)輕(qing)量(liang)，感興(xing)趣(qu)的可以使用下。

上(shang)海西陸信(xin)息科技有限公司 承接(jie)各(ge)類微信(xin)小(xiao)程序開(kai)發(fa)(fa)制(zhi)作、小(xiao)程序定制(zhi)、APP 網站(zhan) 開(kai)發(fa)(fa)制(zhi)作，聯系電話 18221533805、15900430334