小程序跨端组件库 Mpx-cube-ui 开源：助力高效业务开发与主题定制

随着越来越多的业务产品通过小程序这一渠道进行推广和使用，各个技术团队也开始根据各自业务产品的需求进行定制化开发。在滴滴的所有小程序产品中，滴滴出行小程序作为最大的C端流量入口，负责将不同业务的流量进行有效分发。在具体的小程序产品研发过程中，这些不同业务的小程序被集成到滴滴出行小程序中，统一打包上线和发布。

除了在跨业务产品研发场景中，同一技术团队内部也可能需要应对来自不同业务产品方向的需求。这些不同业务产品同样具有独立发展和迭代的需求。由于业务场景的限制，团队内部也需要考虑如何积累和复用基础能力，以便在节约研发资源的同时提高业务项目交付的质量和效率。

在不同业务产品的发展初期，为了快速交付产品功能并确保上线时间，研发团队会尽可能地利用已有基础能力来快速构建产品功能。以小程序组件库的复用为例，常见的做法包括：

1. 直接在原有组件代码中进行硬编码（Hard Code），使不同业务产品依赖于同一份组件代码。通过使用if/else或条件编译等手段，使原有组件既能满足最新业务需求，又不会影响原有业务的使用。
2. Fork 一份原有组件库的代码，并在其基础上进行单独迭代和维护，从而实现与原有组件的完全隔离，避免产生污染。

Mpx 组件体系

• 业务组件：通常源于某个具体的产品功能，用于解决特定问题领域，强调关注点分离和代码维护成本。
• 基础业务组件：通常源于某一类业务产品，在特定业务背景下较为通用，较少融合业务逻辑，介于基础组件和业务组件之间，强调解决效率、可复用性和可维护性。
• 基础组件：通常源于我们的设计交互元语言，用于定义业务产品和用户的交互、反馈，强调一致性、效率和可复用性。

Mpx-cube-ui 组件设计和开发思考

• 行为：组件特有的行为方法，如展示（show）、隐藏（hide）和关闭（close）。
• 结构：便于组件间的重新组合，如头部区、标题区、内容区和底部操作区。
• 样式：便于业务场景的主题定制，如颜色、字号、圆角和边距等。

• 全局基础样式变量：提供基本色值、字号等，影响所有组件的展示。
• 组件样式变量：继承全局基础变量的基本色值、字号等，涉及组件自身的结构、样式变量会单独定义。
• 组件渲染样式：直接依赖组件样式变量。

• 利用预编译器的可编程能力，在编译阶段即可完成主题能力的定制。当业务项目作为独立应用迭代时，可以仅利用预编译器的能力，以减小 CSS 代码体积。
• 利用 CSS Variables 的能力，可以解决更复杂的场景，例如同一个组件在巨型应用中，在不同业务场景页面需要有不同的主题样式。

在官网示例中，用户可以直接体验主题切换功能。

1. 开源更多内部沉淀的基础组件，以满足多样化的业务场景开发需求。
2. 将文档示例一体化的能力独立打包开源，以便快速建立组件库网站，降低文档和示例代码的维护成本。