前言
发展到今天,手机端组件库其实已经大同小异,熟练的程序员甚至都能背过80%的组件名称,比如toast、cell、checkbox……,来来回回就是这么些,那么,面对市面上最火的5个小程序组件库,我们该如何选择?
其实,并没有最好的那一个组件库,只是看你的需求。
以下数据统计于2019.3.20。
Vant Weapp
star:8578
github:https://github.com/youzan/vant-weapp
官网:https://youzan.github.io/vant-weapp
开发者:有赞
目前最后更新时间:2天前
印象:
组件数量很“中庸”,不多也不少,常见的组件类型一个不少,但是“有点独特想法”的组件几乎没有。
视觉上说比较无特色,画面比较粗糙,比如开关单元格,按钮上不能自定义文字(比如 开启/关闭,开/关 这种文字),而其他几个组件都可以显示文字。
iView Weapp
star:3931
github:https://github.com/TalkingData/iview-weapp
官网:https://weapp.iviewui.com/
开发者:移动互联网大数据平台(TalkingData)
目前最后更新时间:2个月前
印象:
组件数量跟Vant相当,但是没有任何选择器,比如没有时间选择器,也没有树形选择器等等。
比较特色的是“抽屉”,也就是从屏幕某侧伸出来一个浮层,可以作为菜单使用。
MinUI
star:3053
github:https://github.com/meili/minui
官网:https://meili.github.io/min/docs/minui/
开发者:美丽说
目前最后更新时间:4个月前
印象:
组件数量是最少的,连ActionSheet都没有你敢信?反而是有一些纯js组件,比如倒计时等,还有纯css声明,比如文本截断,还有一些组件,比如购物车为空的一张图,比如一张遮罩就成了一个组件,比如页底的“到页底啦”提示,等等,这些完全没有必要做成组件。
Wux Weapp
star:3011
github:https://github.com/wux-weapp/wux-weapp/
官网:https://wux-weapp.github.io/wux-weapp-docs
开发者:个人(skyvow)
目前最后更新时间:2个月前
印象:
虽然是个人作品,但是组件却是最多的,而且基本上没有什么“废物”组件,新颖的组件不少,比如“骨架屏”,而且自带日历等。
ColorUI
star:2071
github:https://github.com/weilanwl/ColorUI/
官网:https://www.color-ui.com/
开发者:个人(weilanwl)
目前最后更新时间:21天前
印象:
这个UI就有意思了,它跟其他组件走的路线不一样:
就跟它的名称一样,它更强调色彩,包括背景色、文本色、边框阴影,都能给你做出来一系列推荐方案。
它的组件的分类法是“操作条”、“导航栏”“表单”“轮播”这样的分类,不要以为里面的内容很少,比如“操作条”,凡是条形的UI在这里几乎全能找到,而且配色都比较漂亮,尤其是底部导航条的中央大“发布”按钮,也特意给你做了出来。导航栏里面,navbar、tabbar都可以找到。
优势&劣势
说到最后,到底我们怎么选型呢?一句话评价一下这5个组件吧:
Vant Weapp:
优势:版本升级最勤快,开发团队实力最强,组件数量足以应对交互不多的APP。
劣势:组件数量不是最多的,画面比较糙。
iView Weapp
优势:跟Vant Weapp有个哥哥叫Vant一样,iView Weapp也有一个哥哥叫iVew,说明开发者实力也是不用担心。美观度大于Vant Weapp。
劣势:缺少选择器组件,如果你很需要这个组件,那么你可能要放弃iView。
MinUI
优势:优势是……简单?果然跟项目名称一样,Min,最小。
劣势:美丽说的这个项目,应该是公司的程序员业余用来练手的一个项目,至今也有4个月没见动静了,是几个项目中最惨的。我认为应该将这个组件库作为末选,实在没办法才去考虑。
Wux Weapp
优势:组件库足够多,没有废物组件,之前还在别处见到有人找小程序的“骨架屏”,Wux正好有。如果你的项目交互非常多,我们能想到的通用组件几乎全能用得到,那么,选Wux Weapp会给你节省开发时间,也减少维护成本。
劣势:笼统说,没有缺点。如果细说,可以说,它的手册的效果是用视频演示的,不够直观。当然了,其他的那几个组件库的演示也不是说就是完美的,如果你觉得Wux好用,手册的问题可以克服。
ColorUI
优势:当然是色彩华丽,如果你对配色完全没有概念,可以试试这款组件库。它的组件大多是做了视觉优化的,你可以直接拿过来就用。
劣势:交互性的组件不够多。
个人推荐
其实上面也说的比较清楚了,相信各位有了一定的认识了。
我个人推荐的话,就是:
- 记住,小程序组件的优势是“天生可拆分”,所以,没必要太纠结选哪个,因为你完全可以从这5个组件库都挑选一些组件,最后凑成一个项目!
- 如果你无理由钟爱某款,那就选某款。
- 如果喜欢大厂,就从Vant和iView选一个,它俩之间,要画面略好就iView,要选择器就Vant。
- 如果无所谓大厂不大厂,就Wux,几乎无缺点。
- ColorUI的组件大多是无交互的组件,所以可以和其他的组件搭配使用,就比如底部导航条,它的点击事件和高亮,你用原生代码可以轻松写出来,这时候,组件的美观度才是第一位的,所以优先选择ColorUI的底部导航条当然OK!
所以我的操作建议是:
- 任何组件先去ColorUI里找,除非你明确知道ColorUI里肯定没有。
- ColorUI里没有的组件优先去Wux里找,如果感觉视觉不够漂亮或者功能少那么一丢丢,比如你想用ActionSheet,而且希望弹出层带标题,但是你找的这个组件库的ActionSheet不带标题,那么你大可以看看其他的组件库。
- 同样的组件不要混着用,比如ActionSheet不要同时用多个库的组件,这样不统一显得很弱智。
谢谢,本文为简书microkof个人原创。