开始
同步下组件库最新进展、业务使用情况、未来规划。
最新进展
- Press UI 新增 RollingText, Signature, TextEllipsis, Barrage 等组件,一些组件已应用到和平赛事等业务中
- Press UI 中 Dialog, Toast, Notify, ImagePreview 等可函数调用的组件,增加更语义化、易理解的方法,如 showDialog/closeDialog/showNotify 等
- Press Plus, Press Next 支持 tailwind,后续新增组件都需使用 tailwind,目前已沉淀 20+ 使用 tailwind 的组件
业务价值
Press UI 组件库自2022年11月5日发布第一个版本,现在已经2年多,目前已经在多个业务、多个团队使用。相比于 vant、uview、tdesign 等组件库,Press UI 有以下优势:
- 兼容 uni-app 和 非 uni-app,兼容 Vue2 和 Vue3

使用条件编译,兼容多平台时,包体积不会增加
得益于丰富的兼容性,项目迁移和升级简单

按照是否跨端和 Vue 版本,项目可分为四象限。Press UI 组件库可支持四象限任意变动,但实际上,一般只会升级,不会降级,即:
- Vue2 非跨端 => Vue2 跨端,比如赛宝、和平赛事的第1次升级
- Vue2 跨端 => Vue3 跨端,比如赛宝、和平赛事的第2次升级
- Vue2 非跨端 => Vue3 非跨端,比如和平横版赛事的升级,这种一般是无需考虑小程序、APP平台的场景
- Vue3 非跨端 => Vue3 跨端
- Vue2 非跨端 => Vue3 跨端,比如无畏赛事的升级,跨度较大
源 | 目标 | 项目举例 |
---|---|---|
Vue2 非跨端 | VUe2 跨端 | 赛宝、和平赛事的第1次升级 |
Vue2 跨端 | Vue3 跨端 | 赛宝、和平赛事的第2次升级 |
Vue2 非跨端 | Vue3 非跨端 | 和平横版赛事的升级 |
Vue3 非跨端 | Vue3 跨端 | - |
Vue2 非跨端 | Vue3 跨端 | 无畏赛事的升级 |
业务组件库
除了 Press UI 基础组件库外,还沉淀了 Press Plus 和 Press Next 业务组件库。目前也在游戏人生项目中深度应用。
Press Plus 和 Press Next 的区别是,前者会同时兼容 Vue2 和 Vue3,后者只兼容 Vue3,可以使用组合式API。
Press Plus 中物品列表、物品详情、物品兑换等相关组件,在多个业务项目中使用,部分业务项目升级困难,所以 Press Plus 组件库无法去除。
业务组件库是必需的:
- 项目开发人员水平参差不齐,总有些人对代码的理解仅停留在能跑就行,拼命拉低代码质量,你写好的代码,他分分钟入侵,给你搞得四不像,所以必须物理隔离、权限隔离,把关键代码抽离出去
- 业务核心组件需要保持稳定,在组件库中每行代码都会单独 review,不会揉杂在业务的某次MR中,蒙混过关
- 复杂的、复用性强的组件需要示例、文档,典型的包括赛程树、物品相关组件
所以这里鼓励沉淀高质量的核心业务组件,但宁缺毋滥,沉淀的组件必须符合 Press Plus、Press Next 规范:
- CSS 使用tailwind
- 详尽的文档、丰富的示例
- 完备的类型声明
核心价值观
- 多平台、多技术栈统一体验
- 渐进式增强
- 对用户简单、易用
- API 规范标准
- 示例丰富、文档详细
- 对开发者高效、自动化
- 示例、文档自动派发
- 多端示例自动构建
- 始终向下兼容,避免breaking changes。 要做到这一点并不容易,一开始就应该不能太差,对齐社区主流组件库的标准,能用多种方式实现同一效果
核心技术
- 多平台、多技术栈如何统一体验
- 多平台、多技术栈如何兼容而不增加组件体积(非 uni-app 的条件编译实现)
- 一些复杂组件的实现,以及小程序下的巧妙适配
Tailwind
Tailwind 是一种原子化CSS的技术,其思想十分朴素,就是重复的样式应该复用。使用 Tailwind 有以下好处:
- 大幅减少样式体积
- 无需费心想类名
- 变更更安全
其中第3点,完全遵循 scoped 开发模式的项目感受不到。
我们项目更适合用 Tailwind,性能是一方面,更重要的是,类名起的过于随意了,不要说BEM规范,统一的前缀都没做到。要求严格一点的项目负责人还会多强调一下,其他的基本就是“百花齐放”。举个例子,一个按钮在同一个项目中的多种命名方式:
- btn
- button
- tip-btn
- tip-match-btn
- xx-match-btn
使用 Tailwind 后,同一个CSS表达式,基本只有一个正确答案,再也不会看到乱七八糟的类名了。