文章目录
推荐刚需（一）UI 框架1.iView Weapp2.WeUI3.Vant Weapp4.ColorUI5.Thor UI （二）.基础框架1.WePY2.Taro3.UniApp4.Chameleon 框架如何使用小编UI设计模板推荐刚需
一些个人开发者可以利用流量主赚钱的小程序，工具类的小程序非常适合个人开发，用云开发模式开发成本很低，能够快速上线，唯一的缺点是个人无法接入支付，变现渠道受限，目前只能通过流量主变现。
推荐一些的优秀小程序源码，希望你能从中得到一些启发！
比如小编的小程序也是套用框架开发的。
一般来说，我们在社区中看到的框架，主要分为两种：
UI 框架:主要提供的是不同样式的组件，可以方便开发者使用一些现成的样式，完成自己产品、应用的开发。
基础框架:基础框架的主要能力是提供小程序的打包、编译、组件化等能力，让开发者可以更加简单，方便的使用自己熟悉的方案，完成应用的开发。
（一）UI 框架
1.iView Weapp
iView 是国内用户量极大的 Vue UI 组件库，随着项目的不断发展，iView 也推出其自己的小程序 UI 组件库，我们可以使用 iView 提供的组件库，来完成小程序的开发。
iView Weapp 和其 Vue 组件库一样，封装了大量精致的组件。
项目地址:/TalkingData/iview-weapp
项目预览:
2.WeUI
WeUI 是由微信官方团队推出的，一套同微信原生视觉体验一致的基础样式库。由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
项目地址:/Tencent/weui-wxss
项目预览:
3.Vant Weapp
Vant UI 的前身是有赞团队开源出来的 ZanUI，后统一品牌名称，为 VantUI。因为有赞团队的业务主要是电商相关，你可以在其中找到大量电商场景下的组件，如果你自己开发的产品也是电商相关，则可以考虑使用其产品。
项目地址：https://youzan.github.io/vant-weapp/#/home
项目预览：
4.ColorUI
ColorUI 是一个非常漂亮的组件库，其作者在视觉效果方面投入了大量的精力和时间在做优化，使用其构建出来的小程序都称得上是美仑美奂。
*** 项目地址***：/weilanwl/ColorUI
*** 项目预览***：
5.Thor UI
Thor UI 也是一个小程序 UI 库，声名不显，不过，其代码更新还算频繁，值得一试。
项目地址：/dingyong0214/ThorUI
项目预览：
（二）.基础框架
1.WePY
WePy 是最早的小程序基础框架之一，目前依然在更新，WePY 使用的是类 Vue 的语法实现的基础框架，市场上也有大量的 Demo 和课程基于 WePY 开发，对于初学者来说，可以很轻松的找到自己想要学习的内容。
项目地址：/Tencent/wepy
2.Taro
Taro 是来自京东凹凸实验室的产品，是一套遵循 React 语法规范的多端开发解决方案，使用 Taro 可以编译出微信/百度/支付宝/字节跳动小程序、H5、React-Native 等多个平台的代码。
项目地址：/NervJS/taro
3.UniApp
uni-app 是使用 Vue 语法开发小程序、H5、App的统一框架。开发者使用 Vue语法编写代码，uni-app框架将其编译到 小程序（微信/支付宝/百度/字节跳动/QQ/钉钉）、App（iOS/Android）、H5等多个平台，保证其正确运行并达到优秀体验。
项目地址：/dcloudio/uni-app
4.Chameleon
Chameleon 是滴滴团队开发的一套多端小程序解决方案，目前已经支持了web、微信小程序、支付宝小程序、百度小程序、android(weex)、ios(weex)、qq 小程序、字节跳动小程序、快应用(进行中)等多个平台。如果你有多平台的需求，可以试试看。
项目地址：/didi/chameleon
框架如何使用
有了这么多开源的框架，怎么用？ 是个问题。接下来，我就用其中一个作为演示，开发小程序如何使用框架开发，减少不会写样式的烦恼。
1.打开微信开发者工具，创建一个新的项目。
创建完成如下图
本章主要教学内容是UI框架的引用，项目结构说明后续详细介绍。此章节省略。
2.使用 Vant Weapp 作为演示
通过npm安装
打开调试器，控制台打开终端
输入安装代码
npm i @vant/weapp -S --production
框架就下载到自己新建的项目中了，接下来就是用框架开发自己想要的UI，其实就是引用他封装好的组件。
以按钮组件为例，只需要在 json 文件中引入按钮对应的自定义组件即可
{"usingComponents": {"van-button": "/path/to/vant-weapp/dist/button/index"}}
进入pages下的index.wxml，删除全部代码。
进入index.json，输入上方示例代码。
在index.wxml使用样式即可。
小编UI设计模板
小程序UI参考：
