小程序開(kāi)源框架有哪些

小編給大家分享一下小程序開(kāi)源框架有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1、 mpvue

mpvue 是美團(tuán)點(diǎn)評(píng)開(kāi)源的一個(gè)使用 Vue.js 開(kāi)發(fā)小程序的前端框架?？蚣芑?Vue.js 核心，mpvue 修改了 Vue.js 的  runtime 和  compiler 實(shí)現(xiàn)，使其可以運(yùn)行在小程序環(huán)境中，從而為小程序開(kāi)發(fā)引入了整套 Vue.js 開(kāi)發(fā)體驗(yàn)。使用  mpvue 開(kāi)發(fā)小程序，你將在小程序技術(shù)體系的基礎(chǔ)上獲取到這樣一些能力：

• 徹底的組件化開(kāi)發(fā)能力：提高代碼復(fù)用性

• 完整的 Vue.js 開(kāi)發(fā)體驗(yàn)

• 方便的 Vuex 數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用

• 快捷的 webpack 構(gòu)建機(jī)制：自定義構(gòu)建策略、開(kāi)發(fā)階段 hotReload

• 支持使用 npm 外部依賴

• 使用 Vue.js 命令行工具 vue-cli 快速初始化項(xiàng)目

• H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力

2、Tina.js

Tina.js 一款輕巧的漸進(jìn)式微信小程序框架。

特性： 輕盈小巧。 極易上手，保留 MINA (微信小程序官方框架) 的大部分 API 設(shè)計(jì)；無(wú)論你有無(wú)小程序開(kāi)發(fā)經(jīng)驗(yàn)，都可以輕松過(guò)渡上手。 漸進(jìn)增強(qiáng)，既有狀態(tài)管理器，也有路由增強(qiáng)，還可以自己編寫(xiě)插件。

3、Taro

Taro 是由京東 - 凹凸實(shí)驗(yàn)室打造的一套遵循 React 語(yǔ)法規(guī)范的多端統(tǒng)一開(kāi)發(fā)框架。我要沒(méi)記錯(cuò)的話，是最近剛剛開(kāi)源的。

使用 Taro，我們可以只書(shū)寫(xiě)一套代碼，再通過(guò) Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信小程序、H5、App 端等）運(yùn)行的代碼。同時(shí) Taro 還提供開(kāi)箱即用的語(yǔ)法檢測(cè)和自動(dòng)補(bǔ)全等功能，有效地提升了開(kāi)發(fā)體驗(yàn)和開(kāi)發(fā)效率。

4、wepy

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

特性：

• 類 Vue 開(kāi)發(fā)風(fēng)格

• 支持自定義組件開(kāi)發(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)化等

5、weweb

weweb 是一個(gè)兼容小程序語(yǔ)法的前端框架，你可以用小程序的寫(xiě)法，來(lái)寫(xiě) web 應(yīng)用。如果你已經(jīng)有小程序了，通過(guò)它你可以將你的小程序運(yùn)行在瀏覽器中。

特性： 跨平臺(tái)，一套代碼多端運(yùn)行（小程序、h6、未來(lái)直接打包成安卓、ios app 也不是夢(mèng)) 自帶常用組件，完美繼承了小程序內(nèi)置組件 兼容小程序 rpx 語(yǔ)法，使頁(yè)面更容易適配各種機(jī)型

組件庫(kù)

還有各種開(kāi)源的組件庫(kù)，比如有以下這幾個(gè)：

有贊的 zanui-weapp 和 iview 這兩個(gè)比較出名。

這兩個(gè)組件庫(kù)我之前在我的公眾號(hào)都推薦過(guò)，具體用法和功能我就不多介紹了，自己找我以前的推文或者自己搜索一下就很清楚了。用法很簡(jiǎn)單。

重點(diǎn)

上面介紹了 5 個(gè)開(kāi)源框架和兩個(gè)組件庫(kù)，我并不是說(shuō)上面的不好，上面的絕對(duì)都很好，不管上面的幾個(gè)開(kāi)源框架還是組件庫(kù)都是大廠產(chǎn)品，都很好。但是他們僅僅就是開(kāi)源框架就是開(kāi)源框架，組件庫(kù)就是組件庫(kù)。一直沒(méi)有滿足我單獨(dú)針對(duì)微信小程序開(kāi)發(fā)的痛點(diǎn)。

小程序開(kāi)發(fā)一個(gè)是開(kāi)源框架的好用，另外一個(gè)就是豐富的組件庫(kù)，單純官方推出的并不能滿足我們的需要，上面的框架和組件庫(kù)都是分開(kāi)的。所以并不能解決我的痛點(diǎn)。而今天我推薦的這個(gè)開(kāi)源框架既能提供框架也豐富擴(kuò)展了很多組件，使我們開(kāi)發(fā)的時(shí)候不用擔(dān)心再自己封裝組件了。

其實(shí)上面分享的組件庫(kù)有一個(gè)重大的缺點(diǎn)，他們組件庫(kù)足夠豐富，但是對(duì)于樣式的自定義很死板，不靈活，但是今天的這個(gè)就靈活多了。

我給大家推薦的這個(gè)開(kāi)源框架就是：touchwx。

Touch WX 是一套完全免費(fèi)的微信小程序開(kāi)發(fā)框架，包含豐富的 UI 控件用于官方組件的補(bǔ)充。特點(diǎn)如下：

1、組件擴(kuò)充：

增加了 30 多種常用的組件用于官方組件的補(bǔ)充。

2、功能擴(kuò)充：

兼容阿里的 iconfont 圖標(biāo)庫(kù)，海量矢量圖標(biāo)隨意使用；補(bǔ)充了常用樣式庫(kù)、支持 less 語(yǔ)法、支持全局配置主題色等

3、開(kāi)發(fā)體驗(yàn)改善：

四文件方式改為單文件方式，通過(guò) VSCode 編輯器 + 插件的方式開(kāi)發(fā)，擁有 web 開(kāi)發(fā)體驗(yàn)；

4、小程序轉(zhuǎn)為 H5 應(yīng)用：

可以與 H5 開(kāi)發(fā)框架 Touch UI 工程相互轉(zhuǎn)換，發(fā)布成 webApp。開(kāi)發(fā)一套代碼，擁有兩套應(yīng)用。

這套框架的原理是：

將 Touch WX 工程中所寫(xiě)的代碼進(jìn)行編譯，直接輸出為微信小程序工程原始代碼。擴(kuò)充的 30 多種組件，完全是基于小程序官方的自定義組件機(jī)制實(shí)現(xiàn)（row&col 除外）。

所以它支持小程序的全部語(yǔ)法，怎么開(kāi)發(fā)小程序，就怎么開(kāi)發(fā) Touch WX。

不過(guò)因?yàn)槭菃挝募拈_(kāi)發(fā)方式，在文件的代碼結(jié)構(gòu)上稍有不同。請(qǐng)注意這一點(diǎn)。

這樣好處在于：

1、開(kāi)發(fā)者遷移成本很小。

可以輕松的將已有的小程序移植為 Touch WX 工程，來(lái)使用它的擴(kuò)展能力；

2、便于排查錯(cuò)誤。

當(dāng)遇到問(wèn)題時(shí)，開(kāi)發(fā)者也可以隨時(shí)查看輸出的小程序原始代碼來(lái)定位問(wèn)題所在。不會(huì)搞不清楚到底是框架問(wèn)題還是自己代碼的問(wèn)題；

3、按需編譯

由于小程序?qū)w積有限制，在使用框架開(kāi)發(fā)時(shí)，只有使用到的組件才會(huì)編譯輸出為小程序源碼。沒(méi)用到的不會(huì)輸出。

4、不會(huì)對(duì)框架產(chǎn)生依賴。

以后不想用了這套框架，可以直接對(duì)已經(jīng)輸出的小程序工程進(jìn)行維護(hù)。

目前我認(rèn)為單獨(dú)針對(duì)小程序開(kāi)發(fā)的話，這個(gè)開(kāi)源框架是最適合我們的，效率也是最高的。

以上是“小程序開(kāi)源框架有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！