小程序跨端组件库 Mpx-cube-ui 开源：助力高效业务开发与主题定制
肖磊约 7 分钟Mpx-cube-ui 是一款基于 Mpx 小程序框架的移动端基础组件库，一份源码可以跨端输出所有小程序平台及 Web，同时具备良好的拓展能力和可定制化的能力来帮助你快速构建 Mpx 应用项目。
Mpx-cube-ui 提供了灵活配置的主题定制能力，在组件设计开发阶段对表现层的结构和样式进行抽离，利用预编译器和 CSS 变量的能力，提供细粒度（颜色、字体、圆角、阴影等）的样式定制能力，你的项目可以按需使用主题的编译方案还是运行时方案来满足不同样式风格的业务场景开发。
Mpx-cube-ui 提供了开箱即用的跨端输出能力，源码基于 Mpx 小程序框架进行开发，依托于 Mpx 提供的跨平台能力即基于微信小程序跨平台编译输出为支付宝、百度、QQ、头条等目标平台的小程序代码，同时还可以输出到 Web。
接下来会通过这篇文章去分享一下 Mpx-cube-ui 是如何诞生的。
如需深入了解滴滴开源项目Mpx，请参阅相关文章：
背景
随着越来越多的业务产品通过小程序这一渠道进行推广和使用，各个技术团队也开始根据各自业务产品的需求进行定制化开发。在滴滴的所有小程序产品中，滴滴出行小程序作为最大的C端流量入口，负责将不同业务的流量进行有效分发。在具体的小程序产品研发过程中，这些不同业务的小程序被集成到滴滴出行小程序中，统一打包上线和发布。
除了在跨业务产品研发场景中，同一技术团队内部也可能需要应对来自不同业务产品方向的需求。这些不同业务产品同样具有独立发展和迭代的需求。由于业务场景的限制，团队内部也需要考虑如何积累和复用基础能力，以便在节约研发资源的同时提高业务项目交付的质量和效率。
在不同业务产品的发展初期，为了快速交付产品功能并确保上线时间，研发团队会尽可能地利用已有基础能力来快速构建产品功能。以小程序组件库的复用为例，常见的做法包括：
直接在原有组件代码中进行硬编码（Hard Code），使不同业务产品依赖于同一份组件代码。通过使用if/else或条件编译等手段，使原有组件既能满足最新业务需求，又不会影响原有业务的使用。 Fork 一份原有组件库的代码，并在其基础上进行单独迭代和维护，从而实现与原有组件的完全隔离，避免产生污染。
Mpx 技术生态
Mpx 组件体系
业务组件：通常源于某个具体的产品功能，用于解决特定问题领域，强调关注点分离和代码维护成本。 基础业务组件：通常源于某一类业务产品，在特定业务背景下较为通用，较少融合业务逻辑，介于基础组件和业务组件之间，强调解决效率、可复用性和可维护性。 基础组件：通常源于我们的设计交互元语言，用于定义业务产品和用户的交互、反馈，强调一致性、效率和可复用性。
Mpx-cube-ui 组件设计和开发思考
行为：组件特有的行为方法，如展示（show）、隐藏（hide）和关闭（close）。 结构：便于组件间的重新组合，如头部区、标题区、内容区和底部操作区。 样式：便于业务场景的主题定制，如颜色、字号、圆角和边距等。
全局基础样式变量：提供基本色值、字号等，影响所有组件的展示。 组件样式变量：继承全局基础变量的基本色值、字号等，涉及组件自身的结构、样式变量会单独定义。 组件渲染样式：直接依赖组件样式变量。
利用预编译器的可编程能力，在编译阶段即可完成主题能力的定制。当业务项目作为独立应用迭代时，可以仅利用预编译器的能力，以减小 CSS 代码体积。 利用 CSS Variables 的能力，可以解决更复杂的场景，例如同一个组件在巨型应用中，在不同业务场景页面需要有不同的主题样式。
在官网示例中，用户可以直接体验主题切换功能。
未来规划
开源更多内部沉淀的基础组件，以满足多样化的业务场景开发需求。 将文档示例一体化的能力独立打包开源，以便快速建立组件库网站，降低文档和示例代码的维护成本。