石桥码农：小程序 6 个 UI 框架体验感受

文 / 李艺 2020年02月08日

开发微信小程序离不开一个称手的 UI 框架，

有了这个可以事半功倍，

特别对于程序员出身不太会美工的开发者

尤其有用

这些框架，单个组件拿出来展示，可能效果都很好，

但放在具体的项目中，可能就有问题了。

色调整体不搭配，或者程序卡顿。

小程序还有内存限制，

用户体验是微信很在意的一件事情。

所以，在 ui 框架的选择上，

第一是性能，第二才是效果。

作者在一篇文章里看到 6 个最优秀的微信小程序 UI 类库

weui、vant、iview、minUi、wux、colorUi

这 6 个类库都在微信上架了示例小程序，

都可以在手机上直接扫码体验。

以下是作者的体验感受，分享出来供读者朋友们参考

1、weui

微信官方团队出品的，

最大的优点是具有与微信一致的用户体验

https://github.com/Tencent/weui-wxss

可能也是这几个 UI 类库里资质最老的，

也可能是最中规中距的一个，

或许因为不能满足业务开发的某些个性需求，

所以才催生了其它类库

2、vant weapp

有赞出品的，原来叫 ZanUI，

业务组件较多，

组件更多贴合实际的电商业务场景，

有较强的业务实用性

https://github.com/youzan/vant-weapp

但其风格就不像 weui 那样中规中距了，

是一种典型的电商风格

3、iview

iview 对比之下显得简单了，

无论从组件功能上、还是从 ui 效果上讲

https://github.com/TalkingData/iview-weapp

简洁，或者不客气地说有点单调、简陋。

菊码也附在这里，但基本没必要扫

4、minui

蘑菇街出品的，很有意思，

是最用心做的一个 ui 框架，

必须点赞

https://github.com/meili/minui

它不仅有场景使用价值的业务组件，

在示例中还附有色彩搭配的哲学

（注：截于 minui 的示例程序）

你不必使用这套颜色，

但这种管理颜色的方法可以借鉴

还有字号，

什么内容用什么字号都是有逻辑的

基本把字号、颜色处理好，

再搭以设计好的 ui 组件，

产品就不会太难看了

想到 2020 蘑菇街年会的风格——

minui 确实像是她出品的。

其小程序 demo 对学习者很贴心。

不仅展示效果，还附有实现效果的代码

单击“水下倒序、垂直正序”等类别按钮，

可以以互动的方式查看效果。

单击show code，就可以看效果代码。

这点对读者是很用心的。

不足之处，组件不如有赞的丰富。

不过，她那个色彩哲学，值得所有人学习。

5、wux weapp

https://github.com/wux-weapp/wux-weapp
https://www.wuxui.com/#/

它也有小程序示例体验码，

不在 github上，深藏在网站中

它是作者第一个看到广告的示例，

主页有广告，内页还有广告，

操作两次就弹出一个广告，实在让人很受挫

这毕竟是一个个人项目，坚持做到这个程度，实属不易，

所以有广告就有广告吧，

为表感谢，作者对着广告狠狠单击了一下

6、colorui

颜色艳丽，组件丰富，在组件的收纳上可谓不拘一格。

龚自珍有诗云，“不拘一格降人才”，

该框架是“不拘一格纳组件”。

这是作者喜欢的做事风格，

管它什么什么，只要有用就备用起来

动画很细腻，那个全屏抽屉效果很不错。

https://github.com/weilanwl/ColorUI
https://www.color-ui.com/

示例菊码在这里

这个也有广告，好吧，

貌似个人死磕的项目都有广告挂载。

我们理解一下，帮原作者再单击一下。

试想如果是我们，可能做的更过分吧

最后总结一下

首先，这几个框架都十分优秀，

换是作者都写不出来的。

那么，如何选择呢？

太简单的不行，所以 iview 首先被排除。

从长远支持上考虑，

团队出品总比个人出品的更有保障，

所以，最后两个 colorui、wux 被刷掉。

主要担心的是持续更新意愿，广告是其次。

剩下的还有 weui、vant、minui

这三个都很不错，毕竟都是经受众多产品实战考验的。

开发企业产品，倾向于 weui，它最简洁；

开发电商产品，倾向于 vant，有赞电商产品有口皆碑；

其它产品，倾向于选择 minui，

她深具个性，谁让她独具色彩哲学呢。

作者选择 minui，至少是当下

你是怎么选择的，欢迎留言。

如果你还知道其它优秀的 UI 框架，也欢迎留言推荐~

有一个问题，如果选择一个框架，

但是也想使用另一个框架里的某个组件怎么办？

这个也好办，可以只引用那一个组件，

如果内存允许的话，运行效果上还 ok 的话

参考链接

• 6个最优秀的微信小程序UI组件库 https://www.jianshu.com/p/4182f4a18cb6
• https://www.color-ui.com/
• https://github.com/meili/minui
• https://github.com/Tencent/weui-wxss