Mpx 2.0: An Enhanced Mini‑Program Framework for Cross‑Platform Development

Mpx is an enhanced mini‑program framework created to improve development experience and efficiency for small‑program applications. It powers several Didi mini‑programs such as Didi Ride‑hailing, Qingju Bike, and others, and has attracted external developers since its open‑source release.

Version 2.0 adds full support for all major mini‑program platforms (WeChat, Alipay, Baidu, Toutiao, QQ) and provides the ability to compile an existing WeChat mini‑program into other platform formats.

Key features of Mpx 2.0 include:

Complete support for all published mini‑program platforms.

Cross‑platform compilation of WeChat projects to other platforms.

Cross‑platform compilation of native components.

Deep sub‑package optimization with precise resource analysis.

Full wxs module support in render functions.

Support for template import, inline wxs, custom tabbar, independent sub‑packages, workers, cloud development, and other native capabilities.

The framework emphasizes enhancement rather than heavy DSL conversion, ensuring minimal learning cost and high compatibility with native specifications. It achieves cross‑platform development by adding a conversion layer during compilation and runtime, while offering a flexible conditional compilation mechanism for platform‑specific patches.

Cross‑Platform Development

Mpx allows developers to compile a WeChat project (or its native components) to run on other mini‑program platforms, enabling reuse of popular UI component libraries such as Vant and iView.

The design philosophy focuses on augmenting native capabilities, providing platform‑specific template directives, and preserving deterministic behavior.

Conditional compilation works at file, block, and code dimensions, allowing developers to write platform‑specific code that the build system loads only when the target platform matches.

Performance Optimization

setData Optimization

Mpx implements a render‑watcher that tracks data dependencies during template compilation. At runtime, only the minimal set of changed data paths is sent to the native layer via setData, reducing call frequency and payload size.

Wxs modules are transpiled to JavaScript and injected into the bundle, enabling full execution within render functions.

Bundle Size Optimization

Using a custom Webpack plugin, Mpx performs dependency‑based tree‑shaking, extracts common modules, and supports precise sub‑package splitting. Resources referenced only by sub‑packages are emitted to their respective directories, while shared assets remain in the main bundle.

Developers can define sub‑packages via the provided packages configuration, which automatically degrades to synchronous loading on platforms without sub‑package support.

Progressive Migration

Mpx offers near‑zero migration cost for native mini‑program developers: replace page/component constructors with createPage / createComponent to gain all enhancements. For projects using other frameworks, Mpx supports partial builds that output native components for integration.

Future Roadmap

Planned enhancements include i18n support, TypeScript integration, and unit‑testing capabilities, along with continued improvements to cross‑platform compatibility based on community feedback.

For more details, refer to the official documentation and GitHub repository.

// 微信转支付宝
new MpxWebpackPlugin({
  // mode指定目标平台，可选值有(wx|ali|swan|qq|tt)
  mode: 'ali',
  // srcMode指定源码平台，默认值同目标平台一致
  srcMode: 'wx'
})