1. Project Overview

Mpx is an enhanced cross-platform mini-program framework featuring an excellent development experience and in-depth performance optimizations.

Mpx is an enhanced cross-platform mini-program framework designed to improve both the development experience and user experience of mini-programs. With Mpx, developers can efficiently and elegantly build high-performance cross-platform mini-program applications using a Vue-like development experience, running across all supported mini-program platforms and the web.

2. Open Source License

Licensed under Apache-2.0

3. Screenshots

4. Feature Overview

Enhanced Cross-Platform Mini-Program Framework

A great development experience, outstanding application performance, comprehensive native compatibility, and a single codebase that runs across all mini-program platforms and the Web.

Mpx offers the following features:

• Reactive Data (Reactive Assignment / watch / computed)
• [Composition API](#todo link)
• Enhanced Template Syntax (Dynamic Components / Style Binding / Class Binding / Inline Event Functions / Two-Way Binding / refs)
• Extreme Performance (Runtime Performance Optimization / Bundle Size Optimization / Framework Runtime Size: 14KB)
• Efficient and Powerful Compilation and Build System (Based on webpack5 / Persistent Cache Support / webpack Ecosystem Compatibility / Native Mini-Program Compatibility / Comprehensive Support for Subpackage Output in npm Scenarios / Efficient Debugging)
• Single-File Component Development
• Progressive Integration / Native Component Support
• State Management (Vuex Specification / Multiple Store Instances Support)
• Cross-Team Development (packages)
• Logic Reuse (mixins)
• Additional Capabilities (fetch / Enhanced API / mock / webview-bridge)
• CLI Support
• Multi-Platform Enhancements (Enhanced development support for WeChat, Alipay, Baidu, QQ, and Toutiao mini-program platforms)
• Cross-Platform Compilation (A single codebase can be compiled to run on WeChat, Alipay, Baidu, ByteDance, QQ, JD, Quick App (web), and Web platforms)
• TypeScript Support (Comprehensive Type Inference Implemented Based on ThisType)
• I18n Internationalization
• Unit Testing Support
• E2E Testing Support
• Component-Level Runtime Rendering Solution (Coming Soon)

5. Tech Stack

Quick Start

# Install the Mpx CLI Tool
npm i -g @mpxjs/cli

# Initialize the Project
mpx create mpx-project

# Enter the Project Directory
cd mpx-project

# Install Dependencies
npm i

# Development
npm run serve

# Production
npm run build

Open the corresponding platform folder inside the project's dist directory using the mini-program developer tools to preview the application.

Usage Examples

<template>
  <!--Dynamic Styles-->
  <view class="container" wx:style="{{dynamicStyle}}">
    <!--Data Binding-->
    <view class="title">{{title}}</view>
    <!--Computed Property Data Binding-->
    <view class="title">{{reversedTitle}}</view>
    <view class="list">
      <!--Loop Rendering, Dynamic Class Names, Inline Event Parameters-->
      <view wx:for="{{list}}" wx:key="id" class="list-item" wx:class="{{ {active:item.active} }}"
            bindtap="handleTap(index)">
        <view>{{item.content}}</view>
        <!--Two-Way Data Binding Inside Loops-->
        <input type="text" wx:model="{{list[index].content}}"/>
      </view>
    </view>
    <!--Accessing Custom Component Instances, Two-Way Binding, Custom Two-Way Binding Properties and Events-->
    <custom-input wx:ref="ci" wx:model="{{customInfo}}" wx:model-prop="info" wx:model-event="change"/>
    <!--Dynamic Components: Pass a Component Name String to is. Components must be registered in the JSON file; global registration is also supported-->
    <component is="{{current}}"></component>
    <!--Show/Hide DOM Elements-->
    <view class="bottom" wx:show="{{showBottom}}">
      <!--Conditional Template Compilation: __mpx_mode__ is an environment variable injected by the framework. Templates whose conditions evaluate to false will not be generated in dist-->
      <view wx:if="{{__mpx_mode__ === 'wx'}}">wx env</view>
      <view wx:if="{{__mpx_mode__ === 'ali'}}">ali env</view>
    </view>
  </view>
</template>

<script>
  import { createPage } from '@mpxjs/core'

  createPage({
    data: {
      // Dynamic styles and class names can also use computed to return values
      dynamicStyle: {
        fontSize: '16px',
        color: 'red'
      },
      title: 'hello world',
      list: [
        {
          content: 'All troops, attack!',
          id: 0,
          active: false
        },
        {
          content: 'Farm safely and avoid unnecessary risks',
          id: 1,
          active: false
        }
      ],
      customInfo: {
        title: 'test',
        content: 'test content'
      },
      current: 'com-a',
      showBottom: false
    },
    computed: {
      reversedTitle () {
        return this.title.split('').reverse().join('')
      }
    },
    watch: {
      title: {
        handler (val, oldVal) {
          console.log(val, oldVal)
        },
        immediate: true
      }
    },
    handleTap (index) {
      // The handler directly receives the current clicked index as a parameter, keeping the code clear and concise
      this.list[index].active = !this.list[index].active
    },
    onReady () {
      setTimeout(() => {
        // Update the data; the associated computed property reversedTitle will also be updated
        this.title = 'Hello, World'
        // The dynamic component will switch from com-a to com-b
        this.current = 'com-b'
      }, 1000)
    }
  })
</script>

<script type="application/json">
  {
    "usingComponents": {
      "custom-input": "../components/custom-input",
      "com-a": "../components/com-a",
      "com-b": "../components/com-b"
    }
  }
</script>

<style lang="stylus">
  .container
    position absolute
    width 100%
</style>

For more examples, please refer to the official example project.

Design Philosophy

The core design philosophy of Mpx is enhancement. Unlike most mini-program frameworks in the industry that migrate web MVVM frameworks to run within mini-programs, Mpx is built on native mini-program syntax and technical capabilities. It draws inspiration from mainstream web technology designs, extending and enhancing them. On this foundation, it implements isomorphic cross-platform output based on enhanced WeChat syntax. The benefits of this design are as follows:

• Excellent Development Experience: While conveniently using the features provided by the framework, developers can also enjoy the predictability and stability comparable to native development, without worrying about the numerous pitfalls often associated with frameworks or feeling that native development would be a better choice. Whether using enhanced output or cross-platform output, the final dist code remains highly readable, making debugging and troubleshooting easier.
• Outstanding Performance: Thanks to its enhancement-oriented design philosophy, the Mpx framework does not need to perform extensive wrapping, abstraction, or conversion at runtime. Its runtime is extremely lightweight and concise, occupying only 14KB after minification and gzip compression. Combined with bundle size optimization during compilation and build processes, as well as data dependency tracking based on template rendering functions, Mpx achieves industry-leading performance (Mini-Program Framework Runtime Performance Evaluation Report).
• Comprehensive Native Compatibility: Also thanks to its enhancement-oriented design philosophy, the Mpx framework fully supports native mini-program technical specifications and keeps up with their latest developments. Developers can conveniently use existing mini-program ecosystem resources in Mpx projects, such as component libraries and analytics tools. Native developers can also migrate progressively with ease. Furthermore, the framework's cross-platform compilation capabilities can even be applied to native WeChat mini-program components to enable cross-platform output.

Ecosystem and Related Packages

Package Name

Description

@mpxjs/core

Mpx Runtime Core

@mpxjs/webpack-plugin

Mpx Compilation Core

@mpxjs/api-proxy

Converts APIs across different platforms and can also convert APIs into Promise format

@mpxjs/store

Vuex-like Store

@mpxjs/pinia

mpx pinia store

@mpxjs/fetch

Mpx network request library that handles wx concurrent request limits

@mpxjs/cli

Mpx CLI Tool

@mpxjs/webview-bridge

Provides a universal webview-bridge for H5 projects targeting multiple mini-program platforms

@mpxjs/mock

Provides data mocking capabilities through integration with mockjs

@mpxjs/utils

Mpx Runtime Utility Library

@mpxjs/babel-plugin-inject-page-events

Composition API Page Event Handling Plugin