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

2020-02-13 12:01:04 浏览数 (1)

文 / 李艺 2020年02月08日

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

有了这个可以事半功倍,

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

尤其有用

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

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

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

小程序还有内存限制,

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

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

第一是性能,第二才是效果

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

weuivant、iview、minUi、wux、colorUi

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

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

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

1、weui

微信官方团队出品的,

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

代码语言:javascript复制
https://github.com/Tencent/weui-wxss

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

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

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

所以才催生了其它类库

2、vant weapp

有赞出品的,原来叫 ZanUI,

业务组件较多,

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

有较强的业务实用性

代码语言:javascript复制
https://github.com/youzan/vant-weapp

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

是一种典型的电商风格

3、iview

iview 对比之下显得简单了,

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

代码语言:javascript复制
https://github.com/TalkingData/iview-weapp

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

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

4、minui

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

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

必须点赞

代码语言:javascript复制
https://github.com/meili/minui

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

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

(注:截于 minui 的示例程序)

你不必使用这套颜色,

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

还有字号,

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

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

再搭以设计好的 ui 组件,

产品就不会太难看了

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

minui 确实像是她出品的。

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

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

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

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

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

这点对读者是很用心的。

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

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

5、wux weapp

代码语言:javascript复制
https://github.com/wux-weapp/wux-weapp
https://www.wuxui.com/#/

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

不在 github上,深藏在网站中

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

主页有广告,内页还有广告,

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

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

所以有广告就有广告吧,

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

6、colorui

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

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

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

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

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

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

代码语言:javascript复制
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

0 人点赞