文 / 李艺 2020年02月08日
开发微信小程序离不开一个称手的 UI 框架,
有了这个可以事半功倍,
特别对于程序员出身不太会美工的开发者
尤其有用
这些框架,单个组件拿出来展示,可能效果都很好,
但放在具体的项目中,可能就有问题了。
色调整体不搭配,或者程序卡顿。
小程序还有内存限制,
用户体验是微信很在意的一件事情。
所以,在 ui 框架的选择上,
第一是性能,第二才是效果。
作者在一篇文章里看到 6 个最优秀的微信小程序 UI 类库
weui、vant、iview、minUi、wux、colorUi
这 6 个类库都在微信上架了示例小程序,
都可以在手机上直接扫码体验。
以下是作者的体验感受,分享出来供读者朋友们参考
微信官方团队出品的,
最大的优点是具有与微信一致的用户体验
https://github.com/Tencent/weui-wxss
可能也是这几个 UI 类库里资质最老的,
也可能是最中规中距的一个,
或许因为不能满足业务开发的某些个性需求,
所以才催生了其它类库
有赞出品的,原来叫 ZanUI,
业务组件较多,
组件更多贴合实际的电商业务场景,
有较强的业务实用性
https://github.com/youzan/vant-weapp
但其风格就不像 weui 那样中规中距了,
是一种典型的电商风格
iview 对比之下显得简单了,
无论从组件功能上、还是从 ui 效果上讲
https://github.com/TalkingData/iview-weapp
简洁,或者不客气地说有点单调、简陋。
菊码也附在这里,但基本没必要扫
蘑菇街出品的,很有意思,
是最用心做的一个 ui 框架,
必须点赞
https://github.com/meili/minui
它不仅有场景使用价值的业务组件,
在示例中还附有色彩搭配的哲学
(注:截于 minui 的示例程序)
你不必使用这套颜色,
但这种管理颜色的方法可以借鉴
还有字号,
什么内容用什么字号都是有逻辑的
基本把字号、颜色处理好,
再搭以设计好的 ui 组件,
产品就不会太难看了
想到 2020 蘑菇街年会的风格——
minui 确实像是她出品的。
其小程序 demo 对学习者很贴心。
不仅展示效果,还附有实现效果的代码
单击“水下倒序、垂直正序”等类别按钮,
可以以互动的方式查看效果。
单击show code
,就可以看效果代码。
这点对读者是很用心的。
不足之处,组件不如有赞的丰富。
不过,她那个色彩哲学,值得所有人学习。
https://github.com/wux-weapp/wux-weapp
https://www.wuxui.com/#/
它也有小程序示例体验码,
不在 github上,深藏在网站中
它是作者第一个看到广告的示例,
主页有广告,内页还有广告,
操作两次就弹出一个广告,实在让人很受挫
这毕竟是一个个人项目,坚持做到这个程度,实属不易,
所以有广告就有广告吧,
为表感谢,作者对着广告狠狠单击了一下
颜色艳丽,组件丰富,在组件的收纳上可谓不拘一格。
龚自珍有诗云,“不拘一格降人才”,
该框架是“不拘一格纳组件”。
这是作者喜欢的做事风格,
管它什么什么,只要有用就备用起来
动画很细腻,那个全屏抽屉效果很不错。
https://github.com/weilanwl/ColorUI
https://www.color-ui.com/
示例菊码在这里
这个也有广告,好吧,
貌似个人死磕的项目都有广告挂载。
我们理解一下,帮原作者再单击一下。
试想如果是我们,可能做的更过分吧
首先,这几个框架都十分优秀,
换是作者都写不出来的。
那么,如何选择呢?
太简单的不行,所以 iview 首先被排除。
从长远支持上考虑,
团队出品总比个人出品的更有保障,
所以,最后两个 colorui、wux 被刷掉。
主要担心的是持续更新意愿,广告是其次。
剩下的还有 weui、vant、minui
这三个都很不错,毕竟都是经受众多产品实战考验的。
开发企业产品,倾向于 weui,它最简洁;
开发电商产品,倾向于 vant,有赞电商产品有口皆碑;
其它产品,倾向于选择 minui,
她深具个性,谁让她独具色彩哲学呢。
作者选择 minui,至少是当下
你是怎么选择的,欢迎留言。
如果你还知道其它优秀的 UI 框架,也欢迎留言推荐~
有一个问题,如果选择一个框架,
但是也想使用另一个框架里的某个组件怎么办?
这个也好办,可以只引用那一个组件,
如果内存允许的话,运行效果上还 ok 的话