DOCSEARCHbyAlgolia
Submit Docs

Mpx Framework

website·Indexed 32 days ago

https://mpxjs.cn/

An enhanced mini-program framework designed to improve development experience and efficiency. Mpx utilizes static compilation and flexible conditional compilation to ensure high performance and availability across multiple platforms. It features a non-invasive reactive system, a unified lifecycle system, and support for state management via store and Pinia, as well as i18n, dependency injection, and single-file development.

Tokens
153.6K
Snippets
726
Records
996
Agent score
62%

What's inside Mpx

  1. Overview of Mpx Framework

    Mpx is an enhanced mini-program framework that extends native mini-program development standards to improve developer experience and efficiency. Unlike frameworks that simulate a Web environment (runtime frameworks) or fully translate Web DSLs (static compilation frameworks), Mpx is based on the mini-program's own DSL. It leverages native capabilities such as routing systems, custom components, event systems, and slots. It is a development framework, not a component library, and is compatible with existing libraries like Vant and iView.

  2. Overview of Mpx-cube-ui component library

    Mpx-cube-ui is a mobile basic component library based on the Mpx framework. It allows developers to write source code once and output it across all mini-program platforms (such as WeChat, Alipay, Baidu, QQ, and Toutiao) as well as the Web. The library is designed for high extensibility and customization to accelerate the construction of Mpx applications.

  3. Overview of Mpx Lifecycle Systems

    Mpx provides a unified lifecycle system to normalize differences between various mini-program platforms. It categorizes lifecycles into four levels: Component (creation, mounting, updating, destruction), Page (loading, showing, hiding, unloading), App (startup, visibility, error handling), and SSR (server-side rendering specific hooks). Developers can use either the Options API (native or framework constants) or the Composition API (Vue-style hooks).

  4. Overview of Mpx Template Syntax

    Mpx template syntax is based on standard mini-program template syntax and supports all native mini-program features. Additionally, Mpx provides a set of enhanced directives to simplify template descriptions and reduce boilerplate code.

  5. Overview of Frontend Unit Testing Frameworks

    Several popular frameworks are used for JavaScript unit testing. Mocha is a flexible framework that runs in Node.js and browsers but requires separate assertion and simulation libraries. Jasmine is a BDD-style framework with built-in assertion and mock capabilities. Jest is a comprehensive, 'out-of-the-box' framework based on Jasmine that adds features like parallel execution and source-code change detection, making it highly popular for most JS projects due to its zero-config setup and integrated coverage and snapshot testing.

  6. Overview of @mpxjs/cli Plugin Architecture

    The @mpxjs/cli has transitioned from a remote-template-based initialization process to a plugin-based architecture. This new design uses @vue/cli and @vue/cli-service as the underlying engine to manage dependencies, templates, and build configurations. By adopting the vue-cli-plugin specification, Mpx can now provide modular, on-demand project initialization and build configurations, reducing project bloat and improving maintainability.

  7. Overview of Mpx Mini-program Framework

    Mpx is an enhanced mini-program framework designed to improve the development experience by combining modern web development patterns (Vue + Webpack) with deep production performance optimizations. Unlike translation-based frameworks (e.g., Taro, mpvue) that convert other syntaxes into mini-program code, Mpx is an enhancement framework based on the native mini-program specification. This approach ensures better support for new native technical specifications and reduces unpredictable errors associated with full syntax translation.

  8. Overview of MPX framework capability enhancements

    MPX enhances the native mini-program development experience by providing several feature sets that go beyond standard native capabilities:

    • Template Enhancements: Style class name binding, inline event parameter passing, dynamic components, two-way data binding, and node references (ref).
    • JavaScript Enhancements: Data reactivity (powered by MobX), computed and watch properties, setData optimization, and ES6+ support.
    • Style Enhancements: Pre-processor support and rpx conversion.
    • JSON Enhancements: Support for packages and sub-package resource optimization.

  9. Overview of MPX Framework

    MPX is an enhanced framework developed by DiDi for mini-program development. It is designed to be fully compatible with native mini-programs while providing enhancements such as reactive data, template improvements, performance optimizations, and cross-platform development capabilities. Unlike frameworks that abstract mini-programs into React or Vue, MPX embraces native syntax, meaning developers write code that closely aligns with native mini-program standards, reducing conversion errors and ensuring immediate support for new native features (e.g., custom component relations and WXS).

  10. Overview of Mpx 2.0 Cross-Platform Framework

    Mpx 2.0 is an enhanced mini-program framework designed to improve development efficiency and enable cross-platform capabilities. Unlike frameworks that use Web DSLs (like React or Vue), Mpx is based on mini-program technical standards, allowing for 0-cost migration of native mini-programs. It supports converting projects from a source platform (primarily WeChat) to target platforms including WeChat (wx), Alipay (ali), Baidu (swan), QQ (qq), and Toutiao (tt). Key features include native component cross-compilation, deep sub-packaging optimization, and support for native capabilities like workers, cloud development, and custom tabbars.

  11. Overview of Utility-First CSS in Mpx

    Starting from Mpx 2.9, the framework includes built-in support for utility-first CSS based on UnoCSS. This allows developers to use pre-defined basic style classes (e.g., flex, pt-4, text-center, rotate-90) directly in Mpx page/component templates. These styles are compatible across all Mpx-supported mini-program platforms and the web. Unlike standard web UnoCSS usage, Mpx does not require importing a virtual uno.css module; the framework automatically analyzes usage and injects styles into the appropriate main or sub-packages to optimize bundle size.
    <view class="container">
  <view class="flex">
    <view class="py-8 px-8 inline-flex mx-auto bg-white rounded-xl shadow-md">
      <view class="text-center">
        <view class="text-base text-black font-semibold mb-2">
          Erin Lindford
        </view>
        <view class="text-gray-500 font-medium pb-3">
          Product Engineer
        </view>
        <view
          class="mt-2 px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-solid border-purple-200">
          Message
        </view>
      </view>
    </view>
  </view>
</view>

  12. Get storage information synchronously with mpx.getStorageInfoSync()

    Use mpx.getStorageInfoSync() to synchronously retrieve information about the current storage, such as the list of keys and space usage. This is the synchronous version of mpx.getStorageInfo. It is supported on WeChat, Alipay, and Web platforms.
    try {
  const res = mpx.getStorageInfoSync()
  console.log(res.keys)       // Array of all keys in storage
  console.log(res.currentSize) // Current space used in KB (Alipay only)
  console.log(res.limitSize)   // Maximum space limit in KB (Alipay only)
} catch (e) {
  // Handle errors
}