汇总9款优秀的开源小程序UI框架

1. 卧槽这玩意儿写的这么烂，我可以写一个更烂的来恶心作者
2.                                                         --开源社区，典范语录

复制代码

随着小法式日渐火爆，各类分歧范例的小法式也渐渐更新，其中不乏一些优异好用的框架/组件库。
保举刚需

一些小我开辟者可以操纵流量主赢利的小法式，工具类的小法式很是合适小我开辟，用云开辟形式开辟本钱很低，可以快速上线，唯一的弱点是小我没法接入付出，变现渠道受限，今朝只能经过流量主变现。
保举一些的优异小法式源码，希望你能从中获得一些启发！
很多自在职业开辟者已经经过微信小法式变现很多，采用一款开源的UI组件库，是最间接、简单的变现方式！省时省力！
比如这个头像加口罩的小法式，就是基于uniapp利用vue快速实现。
充实操纵的流量运营思维包括取名截流，公众号文章引流，广告放置战略优化，慢慢获得10w +用户，获得广告支出4K +。焦点代码开辟时候为两个周末。


下面就来保举8款优异的小法式UI框架
1.TouchUI WX

https://github.com/uileader/touchuiwx
TouchUI-WX是一套完全免费的微信小法式开辟框架，包括丰富的UI控件用于官方组件的补充，并扩大了小法式很多其他才能。


特点：
1.组建扩大
增加了30多种常用的组件用于官方组件的补充。
2、功用扩大
兼容阿里的iconfont图标库，海量矢量图标随意利用；补充了常用款式库、支持less语法、支持全局设置主题色等
3、开辟体验改良
四文件方式改成单文件方式，经过VSCode编辑器+插件的方式开辟，具有web开辟体验；
4、小法式转为H5利用
可以与H5开辟框架TouchUI工程相互转换，公布成webApp。开辟一套代码，具有两套利用。
2.lin-ui

https://github.com/TaleLin/lin-ui
简洁，易用，灵活的微信小法式组件库。

• 采用原生小法式说话编写, 利用npm安装
  
• 满足场景各利用处景, 更有电商专题组件供给支持
  
• 可在mpvue, Taro, WePY品级三方框架中利用LinUI
  
• LinUI不是常规意义上的组件库, 我们还具有过滤器, 行为等高级功用, 满足开辟者本性化需求
  
• 无需变动款式即可搭建精彩小法式
  
• 林间有风官方供给专业详实的文档帮助你快速上手LinUI
  

3.WeUI

https://github.com/Tencent/weui-wxss
WeUI WXSS是腾讯官方UI组件库WeUI的小法式版，供给了跟微信界面气概分歧的用户体验。
可在https://weui.io/ 间接看到UI结果



WeUI 利用简单，气概微信原生气概，以绿色为主色 ，主如果两个大版本 ，1.x版本和2.x版本 ，相比1.x版原本说，2.x版本视觉上更好。
气概与微信视觉体验分歧，在开辟中我们需要更丰富标致的UI结果 ，需要点窜WeUI的款式或自界说css 。
4.iview weapp

https://github.com/TalkingData/iview-weapp
iView是TalkingData公布的一款高质量的基于Vue.js组件库，而iView weapp则是它们的小法式版本。
官网地址：iView Weapp - 一套高质量的微信小法式 UI 组件库


优点：供给了丰富的UI组件，特别是 tabBar、Tabs、抽屉、index索引 ，利用比力方便。
弱点：页面气概比力牢固、点窜起来比力困难。输入框在模拟器下经常没法输入，给利用调试带来了麻烦。
5.ColorUI

https://github.com/weilanwl/ColorUI
鲜明的高饱和色彩，专注视觉的小法式组件库。
ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小法式组件库，ColorUI更重视于视觉交互！
其组件在美妙性方面比力突出。
开辟文档参考（编辑中）：https://www.color-ui.com


优点：视觉结果标致，留意看一下，他可以将款式沉醉得手机最顶部，这一点很好，同时其他组件也挺好，可针对自己的需求，间接点窜或覆盖他的css款式。
弱点：缺少文档、很多新人无从动手。扫码预览时，近期广告有些频仍，影响利用，开辟者也想有点用度，大师了解，喜好的可以对开辟者点广告支持，开源不易。
6.Vant Weapp

https://github.com/youzan/vant-weapp
Vant Weapp 是有赞移动端组件库 Vant 的小法式版本，两者基于不异的视觉标准，供给分歧的 API 接口，助力开辟者快速搭建小法式利用。
开辟文档参考：https://youzan.github.io/vant-weapp/#/intro


优点：视觉结果简单清朗、供给了平常开辟利用的组件、文档很具体。
弱点：门坎相比其他几个UI框架高，需要会 vue 的开辟者，同时不支持原生开辟。像我这样对 vue 不是很熟悉的，不倡议利用，比力熟悉 vue 的保举利用。
7.TaroUI

NervJS/taro-ui
TaroUI 是由京东·凹凸尝试室公布的多端 UI 组件库。这套组件库，可以在 H5、微信小法式、付出宝小法式、百度小法式多端适配运转。TaroUI 的整体气概繁复、清新、同一，合适工具、念书、资讯、教育、商务等范例的小法式。
开辟文档：https://taro-ui.aotu.io/#/docs/introduction


除了具有上文所说起的组件之外，TaroUI 还有几个特此外组件。在「表单」中有一项「范围挑选器」，可以经过滑动条指定数值范围。在「高阶组件」中，可以显现「日历」，而且支持多种日期挑选款式。


8优点：Taro UI 可谓雕虫小技，功用丰富，开辟一套代码可以可以在微信小法式 / H5 / 百度小法式 等多端适配运转。
弱点：入门门坎高，不合适新人开辟者。相对而言，利用的人数不够多，开辟中出现题目排查困难。只用在微信小法式开辟上，牛鼎烹鸡了，杀鸡焉用宰牛刀！
8.WuxUI

这套组件库所包括的组件最为丰富。不但我们前文提到的各类组件都可以在 Wux 中找到，而且还有进度环、骨架屏、挑选栏、数字键盘、成果页等适用工具类组件。假如你想开辟一款工具类小法式，Wux 是个不错的挑选。
开辟文档：https://wux-weapp.github.io/wux-weapp-docs/#/introduce


9.MinUI

meili/min-cli
MinUI 是由蘑菇街公布的组件库。与其他组件库分歧的是，MinUI 更重视一些细节的处置。
开辟文档：https://meili.github.io/min/docs/minui/index.html#README


挪用「根本元件」中的「文本截断」，可以控制长文本的显现行数，文本超长的用省略号结尾。「页底提醒」可以用在上拉加载中的进程中。而「价格」则供给了各类款式的价格及货币标记。


相比其他组件库，MinUI 将各类组件拆分得更细，真正利用时，需要开辟者更多的对各个组件停止再次连系，但也是以 MinUI 显得加倍通用。
结语

假如你有保举的开源小法式UI框架，也可以保举哦！延续更新...
这 些 UI 组件库各有所长，合适分歧的小法式范例，Vant 合适电商类的，TaroUI 与 Wux 合适工具类的，而蘑菇街的 MinUI 固然更合适社区类的了。

10w +用户，获得广告支出4K +，现在的用户已经这么不值钱了吗

月入4000

Vant Weapp应当就是vant的小法式版，是小法式原生的，不用进修vue相关常识。

现在写小法式都是间接uniappuview[捂脸]

Vant Weapp + 小法式利用起来运转好慢啊，提早可高