微信小程序的 UI 库

in 前端 with 0 comment

近些年来,类似于微信小程序的 轻应用 被越来越多的人们选择用来替代开发一个 APP 来完成一些不复杂并且可以快速的发布,使用轻应用可以完成不少工作
同时,微信小程序可以直接调起微信的一些功能,例如“扫码”等去完成一些工作,用来替代 H5 完善一些特殊功能是非常好的。

实际上也有一些类似于 mpvue 或者 weapp 之类的“框架”使用 vuejs 语法并且再转换成微信小程序原生代码的方法。在实际使用中我发现这些所谓的框架都有各种各样的问题。例如 mpvue 虽然是美团的技术方案,但是已经停止更新好多年了,里面遗留了一些问题也无法解决。

所以我在几次踩坑之后还是选择了使用小程序原生的方案。这样的方案,实际上也可以应对诸如飞书小程序头条小程序钉钉小程序等轻应用场景。

原生方案

在使用原生方案中,开发者必须了解原生的嵌入式组件如何使用。
例如需要在对应的 page.json 中设置 useComponents,并且把组件引入。

UI 库(组件库)

对比了我用过的组件库,发现并不是每一个库都能称作“组件库”,而且他们的易用程度也有不小的差别,这里根据我个人的使用感受做一个对比

weui wxss

微信小程序本身提供了一套完整的 ui 供小程序开发者使用。目前也提供了逻辑封装版本,不只有 UI 库了。
使用这个库可以做到和微信保持统一的主题,例如暗色模式也可以使用

小程序官方组件演示

ColorUI

Color UI 自称是一个 css 库,在语雀上进行维护了文档,是一个个人开发者开发和维护的开源项目。设计上并不是中规中矩的“标准”业务 APP 的风格,而是比较自由,我曾经一度怀疑过他们是不是语雀团队或者阿里的团队搞出来的,但并没有办法证实

ColorUI

Vant Weapp

有赞的团队维护了一套 vue 的组件库,包含了不少常用的组件
由于是做电商出身,所以在电商场景下的组件有很好的支持
对于小程序的场景,这个团队也做了一套组件库,功能齐全,挺好用的
(原名 ZenUI,后来升级改名了 Vant,使用了相同的视觉规范)

Vant

Wux weapp

Wux 是一整套组件化、可复用、易扩展的微信小程序组件
并没有更多的介绍,虽然我觉得他还算是比较好用,但是有点过于简单,不过那也是好久以前的感受了。现在看好想是更新了不少组件,不知道有没有比之前更好用了

Wux

总结

如果后面又发现了一些有趣好用的组件我会陆续的更新上面的内容

在使用框架或者库来完成开发工作时,经常会收到很多局限,例如在支撑页面高度时需要自己计算等。不过这些都不是严重的问题,具体问题具体分析即可。

腾讯官方也总结了一些 UI 库或组件库,点击了解更多

我也在考虑自己写一套,不过也许需要花很多时间才能完成吧?