2020年GitHub上最受欢迎小程序框架

男娘i 2022-12-26 09:20 230阅读 0赞

小程序刚刚流行起来的时候，出现了不少的小程序的框架，随着开发者越来越多，很多比较好用的，性能较好的，框架在GitHub上的star越来越多，也越来越受到前端开发者的欢迎。

想要开发出一套高质量的小程序，运用框架，组件库是省时省力省心必不可少一部分，随着小程序日渐火爆，各种不同类型的小程序也渐渐更新，其中不乏一些优秀好用的框架/组件库。

注：以下是按照GitHub上star数量最多的框架进行最新排名

##### 1：Taro多端统一开发解决方案 #####

官网文档：[http://taro-docs.jd.com/taro/docs/README/index.html][http_taro-docs.jd.com_taro_docs_README_index.html]  
GitHub地址：[https://github.com/nervjs/taro][https_github.com_nervjs_taro]  
Star：27.6k

taro 京东开源的小程序框架，多端统一框架，支持一键生成多个平台小程序。

![7b53cd3d5409de444b7332979412bcdf.png][]

##### 2：uni-app 基于 Vue.js 的跨平台框架 #####

GitHub地址：[https://github.com/dcloudio/uni-app][https_github.com_dcloudio_uni-app]  
官网文档：[https://uniapp.dcloud.io/][https_uniapp.dcloud.io]

Star： 27.5k  
uni-app dcloud公司开发的，基于vue.js的多平台框架，支持app，h5，小程序的一键生成。

![1aa9e408057335424a0d9e28e3cb204d.png][]

##### 3：WeUI 小程序–使用教程 #####

官网文档：[https://weui.io/][https_weui.io]  
GitHub地址：[https://github.com/Tencent/weui][https_github.com_Tencent_weui]

Star：25.2k  
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。小程序开发中最常用到的一款框架，受广大开发人员的欢迎。

![41999f2634804893a3c5e176b1d0c045.png][]

##### 4：美团小程序框架mpvue #####

GitHub地址：[https://github.com/Meituan-Dianping/mpvue][https_github.com_Meituan-Dianping_mpvue]  
官网文档：[http://mpvue.com/][http_mpvue.com]

Star：20.1k

mpvue是一个使用 Vue.js开发小程序的前端框架。框架基于 Vue.js核心，mpvue修改了 Vue.js的 runtime和 compiler实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套Vue.js开发体验。

![d06d49098c6852498a43b2c604d5d8b3.png][]

##### 5 ：组件化开发框架wepy #####

Github地址:[https://github.com/Tencent/wepy][https_github.com_Tencent_wepy]  
官网地址：[https://wepyjs.github.io/wepy-docs/][https_wepyjs.github.io_wepy-docs]  
Star：20.9k

组件化开发，完美解决组件隔离，组件嵌套，组件通信等问题,支持使用第三方 npm 资源，自动处理 npm 资源之间的依赖关系，完美兼容所有无平台依赖的 npm 资源包.

![834cd411a783c5eac75e9a8854bb5087.png][]

##### 6：ColorUI-高颜值,高效率的小程序组件库 #####

官网文档：[https://www.color-ui.com/][https_www.color-ui.com]  
GitHub地址：[https://github.com/weilanwl/ColorUI/][https_github.com_weilanwl_ColorUI]  
Star：9.7k  
鲜亮的高饱和色彩，专注视觉的小程序组件库  
ColorUI是一个css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作也有写，可以为你开发提供一些思路。

![5fe4106adb7f5b16c84ce7b1afea8ece.png][]

##### 7：微信UI组件库 iView Weapp #####

官网文档：[https://weapp.iviewui.com/][https_weapp.iviewui.com]  
GitHub地址：[https://github.com/TalkingData/iview-weapp][https_github.com_TalkingData_iview-weapp]  
Star：5.8k

iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称，大幅度降低了学习成本，是一套一套高质量的微信小程序 UI 组件库。

![475b74d3f16a0eeed0c146c288115b46.png][]

5640239-0199c16af08dcf53.png

##### 8：kbone 微信小程序和 Web 端同构的解决方案 #####

官网文档：[https://developers.weixin.qq.com/miniprogram/dev/extended/kbone/][https_developers.weixin.qq.com_miniprogram_dev_extended_kbone]  
GitHub地址：[https://github.com/Tencent/kbone][https_github.com_Tencent_kbone]  
Star：3.6k  
微信小程序的底层模型和 Web 端不同，我们想直接把 Web 端的代码挪到小程序环境内执行是不可能的。kbone 的诞生就是为了解决这个问题，它实现了一个适配器，在适配层里模拟出了浏览器环境，让 Web 端的代码可以不做什么改动便可运行在小程序里。

![b38ddab1fc0d6b18dfd17e0e7684c48b.png][]

[http_taro-docs.jd.com_taro_docs_README_index.html]: https://links.jianshu.com/go?to=http%3A%2F%2Ftaro-docs.jd.com%2Ftaro%2Fdocs%2FREADME%2Findex.html
[https_github.com_nervjs_taro]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fnervjs%2Ftaro
[7b53cd3d5409de444b7332979412bcdf.png]: /images/20221120/ce75f7b0d311409a8f78fe5e632192a6.png
[https_github.com_dcloudio_uni-app]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fdcloudio%2Funi-app
[https_uniapp.dcloud.io]: https://links.jianshu.com/go?to=https%3A%2F%2Funiapp.dcloud.io%2F
[1aa9e408057335424a0d9e28e3cb204d.png]: /images/20221120/cb67601aa1d84555b36b39dd9ce73538.png
[https_weui.io]: https://links.jianshu.com/go?to=https%3A%2F%2Fweui.io%2F
[https_github.com_Tencent_weui]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FTencent%2Fweui
[41999f2634804893a3c5e176b1d0c045.png]: /images/20221120/ba12eefbaa9448a5b2bdb8af5647362d.png
[https_github.com_Meituan-Dianping_mpvue]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FMeituan-Dianping%2Fmpvue
[http_mpvue.com]: https://links.jianshu.com/go?to=http%3A%2F%2Fmpvue.com%2F
[d06d49098c6852498a43b2c604d5d8b3.png]: /images/20221120/96d799a694cb46b683660706c12d255d.png
[https_github.com_Tencent_wepy]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FTencent%2Fwepy
[https_wepyjs.github.io_wepy-docs]: https://links.jianshu.com/go?to=https%3A%2F%2Fwepyjs.github.io%2Fwepy-docs%2F
[834cd411a783c5eac75e9a8854bb5087.png]: /images/20221120/bbd326019a6f496491be4c71c71a827c.png
[https_www.color-ui.com]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.color-ui.com%2F
[https_github.com_weilanwl_ColorUI]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fweilanwl%2FColorUI%2F
[5fe4106adb7f5b16c84ce7b1afea8ece.png]: /images/20221120/39a2b159e0b4400aaede9fe13caca35b.png
[https_weapp.iviewui.com]: https://links.jianshu.com/go?to=https%3A%2F%2Fweapp.iviewui.com%2F
[https_github.com_TalkingData_iview-weapp]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FTalkingData%2Fiview-weapp
[475b74d3f16a0eeed0c146c288115b46.png]: /images/20221120/9ea05fc0708d4e6794beb160de0c8c49.png
[https_developers.weixin.qq.com_miniprogram_dev_extended_kbone]: https://links.jianshu.com/go?to=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fextended%2Fkbone%2F
[https_github.com_Tencent_kbone]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FTencent%2Fkbone
[b38ddab1fc0d6b18dfd17e0e7684c48b.png]: /images/20221120/c64fa6e8481c49a09cdc3186b3433dfc.png