小程序到底有多火，看看目前推出的開源框架以及組件庫(kù)就知道了。由于小程序開發(fā)的火爆，大家都在致力于探索如何更好的哥力，更加高效的開發(fā)小程序，以至于很多公司都貢獻(xiàn)了小程序開源框架和組件庫(kù)墩弯。
比如我列舉一些：
開源框架
1吩跋、 mpvue
mpvue 是美團(tuán)點(diǎn)評(píng)開源的一個(gè)使用 Vue.js 開發(fā)小程序的前端框架∮婀ぃ框架基于 Vue.js 核心锌钮，mpvue 修改了 Vue.js 的? runtime 和? compiler 實(shí)現(xiàn)，使其可以運(yùn)行在小程序環(huán)境中引矩，從而為小程序開發(fā)引入了整套 Vue.js 開發(fā)體驗(yàn)梁丘。使用? mpvue 開發(fā)小程序，你將在小程序技術(shù)體系的基礎(chǔ)上獲取到這樣一些能力：
? ? 徹底的組件化開發(fā)能力：提高代碼復(fù)用性
? ? 完整的 Vue.js 開發(fā)體驗(yàn)
? ? 方便的 Vuex 數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用
? ? 快捷的 webpack 構(gòu)建機(jī)制：自定義構(gòu)建策略旺韭、開發(fā)階段 hotReload
? ? 支持使用 npm 外部依賴
? ? 使用 Vue.js 命令行工具 vue-cli 快速初始化項(xiàng)目
? ? H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力
? ? Github：https://github.com/Meituan-Dianping/mpvue
? ? 官網(wǎng)：http://mpvue.com/
2氛谜、Tina.js
Tina.js 一款輕巧的漸進(jìn)式微信小程序框架。
特性： 輕盈小巧区端。 極易上手值漫，保留 MINA (微信小程序官方框架) 的大部分 API 設(shè)計(jì)；無(wú)論你有無(wú)小程序開發(fā)經(jīng)驗(yàn)织盼，都可以輕松過(guò)渡上手杨何。 漸進(jìn)增強(qiáng)，既有狀態(tài)管理器悔政，也有路由增強(qiáng)晚吞，還可以自己編寫插件延旧。
? ? Tina.js 開源框架地址：https://github.com/tinajs/tina
3谋国、Taro
Taro 是由京東 - 凹凸實(shí)驗(yàn)室打造的一套遵循 React 語(yǔ)法規(guī)范的多端統(tǒng)一開發(fā)框架。我要沒記錯(cuò)的話迁沫，是最近剛剛開源的芦瘾。
使用 Taro捌蚊，我們可以只書寫一套代碼，再通過(guò) Taro 的編譯工具近弟，將源代碼分別編譯出可以在不同端（微信小程序缅糟、H5、App 端等）運(yùn)行的代碼祷愉。同時(shí) Taro 還提供開箱即用的語(yǔ)法檢測(cè)和自動(dòng)補(bǔ)全等功能窗宦，有效地提升了開發(fā)體驗(yàn)和開發(fā)效率。
? ? 官網(wǎng)：http://taro.aotu.io/
? ? GitHub: http://github.com/nervjs/taro
4二鳄、wepy
WePY 是一款讓小程序支持組件化開發(fā)的框架赴涵，通過(guò)預(yù)編譯的手段讓開發(fā)者可以選擇自己喜歡的開發(fā)風(fēng)格去開發(fā)小程序《┧希框架的細(xì)節(jié)優(yōu)化髓窜，Promise，Async Functions 的引入都是為了能讓開發(fā)小程序項(xiàng)目變得更加簡(jiǎn)單欺殿，高效寄纵。
特性：
? ? 類 Vue 開發(fā)風(fēng)格
? ? 支持自定義組件開發(fā)
? ? 支持引入 NPM 包
? ? 支持 Promise
? ? 支持 ES2015 + 特性，如 Async Functions
? ? 支持多種編譯器脖苏，Less/Sass/Styus程拭、Babel/Typescript、Pug
? ? 支持多種插件處理棍潘，文件壓縮哺壶，圖片壓縮，內(nèi)容替換等
? ? 支持 Sourcemap蜒谤，ESLint 等
? ? 小程序細(xì)節(jié)優(yōu)化山宾，如請(qǐng)求列隊(duì)，事件優(yōu)化等
? ? Github ：https://github.com/Tencent/wepy
? ? 官網(wǎng)：https://tencent.github.io/wepy
5鳍徽、weweb
weweb 是一個(gè)兼容小程序語(yǔ)法的前端框架资锰，你可以用小程序的寫法，來(lái)寫 web 應(yīng)用阶祭。如果你已經(jīng)有小程序了绷杜，通過(guò)它你可以將你的小程序運(yùn)行在瀏覽器中。
特性： 跨平臺(tái)濒募，一套代碼多端運(yùn)行（小程序鞭盟、h5、未來(lái)直接打包成安卓瑰剃、ios app 也不是夢(mèng)) 自帶常用組件齿诉，完美繼承了小程序內(nèi)置組件 兼容小程序 rpx 語(yǔ)法，使頁(yè)面更容易適配各種機(jī)型
? ? GitHub：https://github.com/wdfe/weweb
組件庫(kù)
還有各種開源的組件庫(kù)，比如有以下這幾個(gè)：
有贊的 zanui-weapp 和 iview 這兩個(gè)比較出名粤剧。
這兩個(gè)組件庫(kù)我之前在我的公眾號(hào)都推薦過(guò)歇竟，具體用法和功能我就不多介紹了，自己找我以前的推文或者自己搜索一下就很清楚了抵恋。用法很簡(jiǎn)單焕议。
大餐來(lái)了
上面介紹了 5 個(gè)開源框架和兩個(gè)組件庫(kù)，我并不是說(shuō)上面的不好弧关，上面的絕對(duì)都很好盅安，不管上面的幾個(gè)開源框架還是組件庫(kù)都是大廠產(chǎn)品，都很好世囊。但是他們僅僅就是開源框架就是開源框架宽堆，組件庫(kù)就是組件庫(kù)。一直沒有滿足我單獨(dú)針對(duì)微信小程序開發(fā)的痛點(diǎn)茸习。
小程序開發(fā)一個(gè)是開源框架的好用畜隶，另外一個(gè)就是豐富的組件庫(kù)，單純官方推出的并不能滿足我們的需要号胚，上面的框架和組件庫(kù)都是分開的籽慢。所以并不能解決我的痛點(diǎn)。而今天我推薦的這個(gè)開源框架既能提供框架也豐富擴(kuò)展了很多組件猫胁，使我們開發(fā)的時(shí)候不用擔(dān)心再自己封裝組件了箱亿。
其實(shí)上面分享的組件庫(kù)有一個(gè)重大的缺點(diǎn)，他們組件庫(kù)足夠豐富弃秆，但是對(duì)于樣式的自定義很死板届惋，不靈活，但是今天的這個(gè)就靈活多了菠赚。
我給大家推薦的這個(gè)開源框架就是：touchwx脑豹。
Touch WX 是一套完全免費(fèi)的微信小程序開發(fā)框架，包含豐富的 UI 控件用于官方組件的補(bǔ)充衡查。特點(diǎn)如下：
1瘩欺、組件擴(kuò)充：
增加了 30 多種常用的組件用于官方組件的補(bǔ)充。
2拌牲、功能擴(kuò)充：
兼容阿里的 iconfont 圖標(biāo)庫(kù)俱饿，海量矢量圖標(biāo)隨意使用；補(bǔ)充了常用樣式庫(kù)塌忽、支持 less 語(yǔ)法拍埠、支持全局配置主題色等
3、開發(fā)體驗(yàn)改善：
四文件方式改為單文件方式土居，通過(guò) VSCode 編輯器 + 插件的方式開發(fā)枣购，擁有 web 開發(fā)體驗(yàn)嬉探；
4、小程序轉(zhuǎn)為 H5 應(yīng)用：
可以與 H5 開發(fā)框架 Touch UI 工程相互轉(zhuǎn)換坷虑，發(fā)布成 webApp。開發(fā)一套代碼埂奈，擁有兩套應(yīng)用迄损。
這套框架的原理是：
將 Touch WX 工程中所寫的代碼進(jìn)行編譯，直接輸出為微信小程序工程原始代碼账磺。擴(kuò)充的 30 多種組件芹敌，完全是基于小程序官方的自定義組件機(jī)制實(shí)現(xiàn)（row&col 除外）。
所以它支持小程序的全部語(yǔ)法垮抗，怎么開發(fā)小程序氏捞，就怎么開發(fā) Touch WX。
不過(guò)因?yàn)槭菃挝募拈_發(fā)方式冒版，在文件的代碼結(jié)構(gòu)上稍有不同液茎。請(qǐng)注意這一點(diǎn)。
這樣好處在于：
1辞嗡、開發(fā)者遷移成本很小捆等。
可以輕松的將已有的小程序移植為 Touch WX 工程，來(lái)使用它的擴(kuò)展能力续室；
2栋烤、便于排查錯(cuò)誤。
當(dāng)遇到問(wèn)題時(shí)挺狰，開發(fā)者也可以隨時(shí)查看輸出的小程序原始代碼來(lái)定位問(wèn)題所在明郭。不會(huì)搞不清楚到底是框架問(wèn)題還是自己代碼的問(wèn)題；
3丰泊、按需編譯
由于小程序?qū)w積有限制薯定，在使用框架開發(fā)時(shí)，只有使用到的組件才會(huì)編譯輸出為小程序源碼瞳购。沒用到的不會(huì)輸出沉唠。
4、不會(huì)對(duì)框架產(chǎn)生依賴苛败。
以后不想用了這套框架满葛，可以直接對(duì)已經(jīng)輸出的小程序工程進(jìn)行維護(hù)。
目前我認(rèn)為單獨(dú)針對(duì)小程序開發(fā)的話罢屈，這個(gè)開源框架是最適合我們的嘀韧，效率也是最高的。
? ? GitHub：https://github.com/uileader/touchwx
? ? 官網(wǎng)：https://www.wetouch.net/wx.html
最后缠捌，大家可以長(zhǎng)按下方二維碼锄贷，體驗(yàn)一下：
640?wx_fmt=jpeg
今天的貨其實(shí)挺干的译蒂，但是越干的貨，可能看得人就越少谊却，還是希望大家多多支持柔昼，并轉(zhuǎn)發(fā)，讓更多的人知道這樣好用的開發(fā)框架炎辨。
---------------------
作者：非著名程序員_
來(lái)源：CSDN
原文：https://blog.csdn.net/OQjya206rsQ71/article/details/81213237
版權(quán)聲明：本文為博主原創(chuàng)文章捕透，轉(zhuǎn)載請(qǐng)附上博文鏈接！
