为什么要自建组件库

项目一做大，每个页面都自己写按钮、卡片、弹窗，很快就会出现：同一个按钮十个颜色、同一个弹窗三种间距。自建一套组件库，就是把这些反复出现的界面元素收敛成统一的、可配置的组件。

自建不代表从零造轮子。可以在开源组件库基础上改，也可以只沉淀自己项目高频用到的那十几个组件。关键是「统一」，不是「全」。

当然，也别为了组件库而组件库。页面量小、改动又快的项目，硬套一套组件库反而拖慢节奏，按需收敛就好。

组件库的价值，是让十个页面看起来像同一个产品。

自建组件库不是大项目的专利。哪怕是三两个人的小项目，把按钮、弹窗、表单这几个高频件统一一下，后面改版都能省一半时间。

本文核心知识点
  • 设计 token颜色、字号、圆角先定成变量。
  • 自建组件用 properties 让组件可配置。
  • 主题定制一套皮肤变量，全站换色。
  • 落地设计稿的规范要能对得上代码。
小程序 UI 组件库示意：蓝调渐变背景上并排的组件卡片、调色板与排版栅格组成的扁平科技插画
token 定规范、组件做复用、主题换皮肤——界面就统一了。

设计规范：先定 token 再写组件

写组件之前，先把最基础的设计 token 定下来：主色、辅助色、文字字号、圆角、间距。后面所有组件都引用这套 token，而不是各处写死数值。

token作用
颜色主色、成功、警告、危险统一
字号标题、正文、辅助文字分级
圆角/间距统一卡片和按钮的观感
 
/* 把 token 放到全局样式，组件里引用 */
:root {
  --brand: #1E5FA8;
  --radius: 12rpx;
}

token 不用一上来就定全套。先把主色、两种字号、一个圆角定下来跑起来，用着用着缺什么再补。想一次定完美，往往定不下来。

自建组件：可复用、可配置

小程序自定义组件通过 properties 接收外部参数。一个好的组件，长得像不像由外部配置决定，内部只管布局和交互。

Component({
  properties: {
    type: { type: String, value: "primary" },
    text: { type: String, value: "按钮" }
  }
});

组件别堆太多冷门功能。只做项目里真的会用到的那几种形态，用不上的先别加。

组件的事件也要设计好：对外只抛清晰的事件名，把内部细节藏住。外面用组件的人，不需要知道你内部怎么实现的。

这样组件才能在不同页面里放心复用，而不用担心一处改动牵动全身。

主题定制：一套皮肤多处用

因为颜色、圆角都走 token，换主题本质就是换一套 token。深色模式、品牌换色，改的是变量，不是每个组件逐个改样式。

  • token 集中在一处，全站引用。
  • 深色模式只切一套变量。
  • 别在组件里硬写颜色。

主题切换时，别忘记动效和图片。有些插画在深色背景下会发灰，换主题时要一起过一遍视觉，不能只切颜色就完事。

落地：从设计稿到代码

组件库要真能用，设计稿和代码得对得上。设计师给的标注里的颜色、字号，最好就是你定的那套 token，别设计一套、代码另一套。

// 设计稿用的色值，和代码 token 保持一致
// 对不上的地方先统一，再开工

做一个组件展示页，把所有组件各种状态摆出来，团队照着用，省得口口相传。

如果团队有设计稿工具，最好把 token 同步成设计工具里的变量。设计师改色，代码那边也能跟着改，两边不脱节。

另外，给组件配好默认值。外部不传参数时，组件也该有个合理的默认长相，这样接入才轻。