Design and Development of the Mpx‑cube‑ui Component Library for Mini‑Programs

Mpx‑cube‑ui is a mobile component library built on the Mpx mini‑program framework. A single code base can be compiled to all major mini‑program platforms (WeChat, Alipay, Baidu, QQ, Toutiao, etc.) as well as Web, offering strong extensibility and customizability.

The library provides flexible theme customization by extracting style definitions into pre‑processor variables and CSS variables, allowing fine‑grained control over colors, fonts, border‑radius, shadows, and more. Projects can choose between compile‑time or runtime theming solutions.

In Didi’s large‑scale mini‑program ecosystem, many business teams develop custom components for their specific products. To avoid duplicated effort, two common reuse strategies are used: (1) hard‑coding conditional logic within a shared component, and (2) forking the component library for isolated maintenance. Both approaches have drawbacks such as increased maintenance cost, code bloat, and fragmented updates.

To address these issues, the Mpx‑cube‑ui component system classifies components into three layers:

Business components – highly specific to a product feature.

Basic business components – reusable across a class of products with minimal business logic.

Basic components – generic UI building blocks derived from design language, emphasizing consistency and reusability.

The design philosophy focuses on weakening business‑specific design constraints and returning to the component’s core behavior, structure, and style. Behavior includes methods like show , hide , and close ; structure defines composable regions (header, title, content, footer); style enables theme customization.

Theme customization follows a three‑level variable hierarchy: global base style variables, component‑specific style variables (inheriting from the global set), and the final rendered component styles that consume these variables.

Future plans include open‑sourcing more internal base components, packaging documentation and demo examples as a standalone open‑source project, and encouraging community participation through the Mpx user group.