• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

如何从VantWeapp、MinUI、iViewWeapp、WuxWeapp、ColorUI共5个小程序组件库选型 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

发展到今天,手机端组件库其实已经大同小异,熟练的程序员甚至都能背过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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小游戏小程序与小游戏获取用户信息接口调整wx.createUserInfoButton ...发布时间:2022-07-18
下一篇:
小程序的性能优化发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap