下面給大家介紹小程序7個開源框架,大家更具自己喜歡選擇, 7個都很好,各有各的優勢(mpvue, Tina.js, Taro, wepy, weweb, touchwx, uni-app)
1、 mpvue
mpvue 是美團點評開源的一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 實現,使其可以運行在小程序環境中,從而為小程序開發引入了整套 Vue.js 開發體驗。使用 mpvue 開發小程序,你將在小程序技術體系的基礎上獲取到這樣一些能力:
徹底的組件化開發能力:提高代碼復用性
完整的 Vue.js 開發體驗
方便的 Vuex 數據管理方案:方便構建復雜應用
快捷的 webpack 構建機制:自定義構建策略、開發階段 hotReload
支持使用 npm 外部依賴
使用 Vue.js 命令行工具 vue-cli 快速初始化項目
H5 代碼轉換編譯成小程序目標代碼的能力
Github:https://github.com/Meituan-Dianping/mpvue
官網:http://mpvue.com/
2、Tina.js
Tina.js 一款輕巧的漸進式微信小程序框架。
特性: 輕盈小巧。 極易上手,保留 MINA (微信小程序官方框架) 的大部分 API 設計;無論你有無小程序開發經驗,都可以輕松過渡上手。 漸進增強,既有狀態管理器,也有路由增強,還可以自己編寫插件。
Tina.js 開源框架地址:https://github.com/tinajs/tina
3、Taro
Taro 是由京東 - 凹凸實驗室打造的一套遵循 React 語法規范的多端統一開發框架。我要沒記錯的話,是最近剛剛開源的。
使用 Taro,我們可以只書寫一套代碼,再通過 Taro 的編譯工具,將源代碼分別編譯出可以在不同端(微信小程序、H5、App 端等)運行的代碼。同時 Taro 還提供開箱即用的語法檢測和自動補全等功能,有效地提升了開發體驗和開發效率。
官網:http://taro.aotu.io/
GitHub: http://github.com/nervjs/taro
4、wepy
WePY 是一款讓小程序支持組件化開發的框架,通過預編譯的手段讓開發者可以選擇自己喜歡的開發風格去開發小程序。框架的細節優化,Promise,Async Functions 的引入都是為了能讓開發小程序項目變得更加簡單,高效。
特性:
類 Vue 開發風格
支持自定義組件開發
支持引入 NPM 包
支持 Promise
支持 ES2015 + 特性,如 Async Functions
支持多種編譯器,Less/Sass/Styus、Babel/Typescript、Pug
支持多種插件處理,文件壓縮,圖片壓縮,內容替換等
支持 Sourcemap,ESLint 等
小程序細節優化,如請求列隊,事件優化等
Github :https://github.com/Tencent/wepy
官網:https://tencent.github.io/wepy
5、weweb
weweb 是一個兼容小程序語法的前端框架,你可以用小程序的寫法,來寫 web 應用。如果你已經有小程序了,通過它你可以將你的小程序運行在瀏覽器中。
特性: 跨平台,一套代碼多端運行(小程序、h5、未來直接打包成安卓、ios app 也不是夢) 自帶常用組件,完美繼承了小程序內置組件 兼容小程序 rpx 語法,使頁面更容易適配各種機型
GitHub:https://github.com/wdfe/weweb
組件庫
還有各種開源的組件庫,比如有以下這幾個:
有贊的 zanui-weapp 和 iview 這兩個比較出名。
這兩個組件庫我之前在我的公眾號都推薦過,具體用法和功能我就不多介紹了,自己找我以前的推文或者自己搜索一下就很清楚了。用法很簡單。
原文:https://blog.csdn.net/OQjya206rsQ71/article/details/81213237
6.我推薦這個:touchwx
Touch WX 是一套完全免費的微信小程序開發框架,包含豐富的 UI 控件用於官方組件的補充。特點如下:
1、組件擴充:
增加了 30 多種常用的組件用於官方組件的補充。
2、功能擴充:
兼容阿里的 iconfont 圖標庫,海量矢量圖標隨意使用;補充了常用樣式庫、支持 less 語法、支持全局配置主題色等
3、開發體驗改善:
四文件方式改為單文件方式,通過 VSCode 編輯器 + 插件的方式開發,擁有 web 開發體驗;
4、小程序轉為 H5 應用:
可以與 H5 開發框架 Touch UI 工程相互轉換,發布成 webApp。開發一套代碼,擁有兩套應用。
這套框架的原理是:
將 Touch WX 工程中所寫的代碼進行編譯,直接輸出為微信小程序工程原始代碼。擴充的 30 多種組件,完全是基於小程序官方的自定義組件機制實現(row&col 除外)。
所以它支持小程序的全部語法,怎么開發小程序,就怎么開發 Touch WX。
不過因為是單文件的開發方式,在文件的代碼結構上稍有不同。請注意這一點。
這樣好處在於:
1、開發者遷移成本很小。
可以輕松的將已有的小程序移植為 Touch WX 工程,來使用它的擴展能力;
2、便於排查錯誤。
當遇到問題時,開發者也可以隨時查看輸出的小程序原始代碼來定位問題所在。不會搞不清楚到底是框架問題還是自己代碼的問題;
3、按需編譯
由於小程序對體積有限制,在使用框架開發時,只有使用到的組件才會編譯輸出為小程序源碼。沒用到的不會輸出。
4、不會對框架產生依賴。
以后不想用了這套框架,可以直接對已經輸出的小程序工程進行維護。
目前我認為單獨針對小程序開發的話,這個開源框架是最適合我們的,效率也是最高的。
GitHub:https://github.com/uileader/touchwx
官網:https://www.wetouch.net/wx.html
掃描二維碼體驗 touchwx:
參考文獻鏈接:https://blog.csdn.net/OQjya206rsQ71/article/details/81213237
peace & love
7.uni-app (也很推薦)
uni-app
是一個使用 Vue.js 開發跨平台應用的前端框架,開發者編寫一套代碼,可編譯到iOS、Android、H5、小程序等多個平台。
官網鏈接:https://uniapp.dcloud.io/
掃碼體驗: