• 如何从Vant Weapp、MinUI、iView Weapp、Wux Weapp、ColorUI共5个小程序组件库选型


    前言

    发展到今天,手机端组件库其实已经大同小异,熟练的程序员甚至都能背过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

    • 优势:当然是色彩华丽,如果你对配色完全没有概念,可以试试这款组件库。它的组件大多是做了视觉优化的,你可以直接拿过来就用。

    • 劣势:交互性的组件不够多。

    个人推荐

    其实上面也说的比较清楚了,相信各位有了一定的认识了。

    我个人推荐的话,就是:

    1. 记住,小程序组件的优势是“天生可拆分”,所以,没必要太纠结选哪个,因为你完全可以从这5个组件库都挑选一些组件,最后凑成一个项目!
    2. 如果你无理由钟爱某款,那就选某款。
    3. 如果喜欢大厂,就从Vant和iView选一个,它俩之间,要画面略好就iView,要选择器就Vant。
    4. 如果无所谓大厂不大厂,就Wux,几乎无缺点。
    5. ColorUI的组件大多是无交互的组件,所以可以和其他的组件搭配使用,就比如底部导航条,它的点击事件和高亮,你用原生代码可以轻松写出来,这时候,组件的美观度才是第一位的,所以优先选择ColorUI的底部导航条当然OK!

    所以我的操作建议是:

    1. 任何组件先去ColorUI里找,除非你明确知道ColorUI里肯定没有。
    2. ColorUI里没有的组件优先去Wux里找,如果感觉视觉不够漂亮或者功能少那么一丢丢,比如你想用ActionSheet,而且希望弹出层带标题,但是你找的这个组件库的ActionSheet不带标题,那么你大可以看看其他的组件库。
    3. 同样的组件不要混着用,比如ActionSheet不要同时用多个库的组件,这样不统一显得很弱智。


    作者:microkof
    链接:https://www.jianshu.com/p/2e94c3b3f11c
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    jquery插件库收集网站
    百度地图api笔记
    css3 hover 动画
    使用Slip.js快速创建整屏滑动的手机网页
    mobile移动端,PC桌面端页面无刷新过场JS骨架
    zepto.js手机端网页上下手指滑动图片切换效果代码
    onepage-scroll – jQuery单页/全屏滚动插件
    css3loading动画
    onepage scorll全屏滚动插件
    css3动画集
  • 原文地址:https://www.cnblogs.com/yehuisir/p/12294264.html
Copyright © 2020-2023  润新知