Mpx：滴滴增强型小程序跨端框架安装与使用指南

Mpx 是滴滴开源的一款具有优秀开发体验和深度性能优化的增强型跨端框架，支持小程序、Web 与 React Native（iOS/Android/Harmony）输出。它以小程序原生语法为基础进行扩展增强，而非把 Web MVVM 框架强行迁移到小程序，运行时仅 14KB（gzip），dist 产物可读性强、便于调试。

一、项目官方信息

输出平台：小程序（wx/ali/swan/qq/tt/jd 等）、Web、React Native（ios/android/harmony）。

二、官方图片

Mpx 官方 Logo：

三、环境要求

• Node.js 14+（推荐 LTS）。
• npm 包管理器。
• 微信开发者工具（用于预览小程序）。

四、完整部署/接入步骤

1. 安装脚手架

npm i -g @mpxjs/cli

2. 初始化项目

mpx create mpx-project

按提示选择模板（小程序/React Native）。

3. 进入项目并安装依赖

cd mpx-project
npm i

4. 开发与构建

npm run serve     # 开发模式
npm run build      # 生产构建

构建产物输出到 dist/ 下对应平台目录。

5. 用微信开发者工具预览

用微信开发者工具打开项目文件夹下 dist 中对应平台的文件夹即可预览效果。

6. React Native 输出（可选）

npm run serve:ios
npm run serve:android
npm run serve:harmony
npm run build:ios
npm run build:android
npm run build:harmony

五、使用方法

单文件组件示例

<template>
  <view class="container" wx:style="{{dynamicStyle}}">
    <view class="title">{{title}}</view>
    <view wx:for="{{list}}" wx:key="id" wx:class="{{ {active:item.active} }}"
          bindtap="handleTap(index)">
      <view>{{item.content}}</view>
    </view>
    <view wx:if="{{__mpx_mode__ === 'wx'}}">wx env</view>
  </view>
</template>

<script>
import { createPage } from '@mpxjs/core'
createPage({
  data: {
    title: 'hello world',
    list: [{ content: '全军出击', id: 0, active: false }]
  },
  computed: {
    reversedTitle () { return this.title.split('').reverse().join('') }
  },
  handleTap (index) { this.list[index].active = !this.list[index].active }
})
</script>

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

核心能力

• 数据响应：赋值响应、watch、computed；
• 组合式 API；
• 增强模板语法：动态组件、样式/类名绑定、内联事件函数、双向绑定、refs；
• 包体积优化与运行时性能优化；
• 基于 webpack5 的编译构建，支持持久化缓存与分包；
• 状态管理（Vuex 规范/Pinia）、TypeScript、I18n、单测与 E2E。

生态周边

六、常见问题 FAQ

1. 安装完 mpx 命令找不到？ npm i -g @mpxjs/cli 后确认 npm bin 目录在 PATH；或用 npx @mpxjs/cli。

2. 编译产物在哪？ dist/ 下按平台分目录，微信开发者工具导入对应平台目录。

3. 如何区分平台代码？ 用 __mpx_mode__ 环境变量或文件后缀 .wx.mpx、.ali.mpx 做条件编译。

4. 支持 React Native 吗？ 支持，输出到 iOS/Android/Harmony，详见 RN 快速开始文档。

5. 想用 Vuex 还是 Pinia？ 都支持，官方同时提供 @mpxjs/store（类 Vuex）和 @mpxjs/pinia。

6. 组件库用哪个？ 官方维护 mpx-cube-ui，文档见 https://www.mpxjs.cn/mpx-cube-ui/guide/intro.html 。

七、跳转链接

• GitHub 仓库：https://github.com/didi/mpx
• 官方文档：https://mpxjs.cn
• 示例项目：https://github.com/didi/mpx/tree/master/examples
• mpx-cube-ui：https://www.mpxjs.cn/mpx-cube-ui/guide/intro.html
• RN 快速开始：https://www.mpxjs.cn/guide/rn/start.html