mpx 增强型小程序框架技术调研

mpx 是滴滴开源的 增强型小程序框架，在保留各平台原生组件与渲染模型的前提下，提供类 Vue 单文件组件、响应式数据、增强编译与跨平台输出能力。与「运行时模拟 Vue」不同，mpx 走 编译到各端原生小程序 路线，输出 WXML/AXML 等标准产物。2026 年 mpx 在滴滴系业务持续迭代，是国内 Vue 技术栈小程序 的重要选项之一。

一、 基本信息

二、 技术定位与简介

mpx 核心设计：

• 原生渲染：编译产物在各端使用平台原生组件，非 WebView 套壳。
• 类 Vue SFC：.mpx 单文件含 template/script/style，支持 watch、computed。
• 增强 setData：编译期分析数据依赖，合并更新，降低 setData 频次与数据体积。
• 跨端输出：一套源码通过 @mpxjs/webpack-plugin 生成多平台目录。

与 uni-app 对比：mpx 更偏 深度优化微信小程序 与 Vue2/3 语法融合；uni-app 平台覆盖更广、生态更大众。与 Taro 对比：mpx 默认 Vue 路线；Taro 默认 React 且 RN/H5 叙事更强。

适合：Vue 团队、以微信为主的多端小程序、对 setData 性能敏感的中大型小程序。

三、 快速上手安装说明

npm install -g @mpxjs/cli
mpx create my-project
cd my-project
npm install
npm run watch:wx    # 微信小程序
npm run watch:ali   # 支付宝

mpx 单文件组件示例

<!-- src/pages/index.mpx -->
<template>
  <view class="container">
    <text>{{ message }}</text>
    <button bindtap="onTap">Count: {{ count }}</button>
  </view>
</template>
 
<script>
import { createPage } from '@mpxjs/core'
 
createPage({
  data: {
    message: 'Hello mpx',
    count: 0
  },
  methods: {
    onTap() {
      this.count++
    }
  }
})
</script>
 
<style lang="stylus">
.container
  padding 24rpx
</style>

跨平台条件编译

// 仅微信生效
/* @mpx-if (__mpx_mode__ === 'wx') */
wx.someApi()
/* @mpx-endif */

四、 核心特性

1. 响应式数据系统

@mpxjs/core 实现依赖追踪，自动优化 setData 路径。

2. 类 Vue 开发体验

computed、watch、生命周期与组件 properties 对齐小程序模型。

3. 原生组件输出

编译为平台标准组件，可直接使用 wx://component 等原生能力。

4. 分包与异步组件

支持分包加载、createComponent 异步化，控制主包 2MB 限制。

5. TypeScript 支持

@mpxjs/cli 模板可选 TS；类型推导覆盖组件 props 与 API。

6. Web 同构

可输出 Web 版本，与小程序共享业务逻辑（需评估 SEO 场景）。

五、 适用场景

1. 黄金适用场景

• 微信小程序为主，兼顾支付宝/字节等分发。
• 团队熟悉 Vue 2/3，希望保留小程序原生性能特征。
• 列表密集、setData 频繁的业务（出行、电商、本地生活）。
• 滴滴系技术栈延续或参考其工程实践。

2. 局限适用场景

• React 团队（优先 Taro）。
• 需要 App（iOS/Android 原生）同一仓库（uni-app/Capacitor 更合适）。
• 极简单页活动，原生小程序或 uni-app 更轻。
• 依赖大量仅支持 Taro 插件的生态包。

六、 技术亮点

1. setData 编译优化

静态分析与依赖收集，减少无效通信，微信性能面板可见改善。

2. 生产级验证

滴滴出行、青桔等业务长期承载高并发小程序场景。

3. 原生组件零损耗

不引入重运行时，主包体积可控。

4. 渐进接入

可在存量原生小程序中逐步引入 mpx 页面或组件。

5. 活跃维护

GitHub 持续更新，跟进微信 Skyline、按需注入等新特性。

七、 核心概念与架构

digraph Mpx_Arch {
  rankdir=LR
  node [shape=box, style="rounded,filled", fillcolor="#f0f9ff"]
  MPX [label=".mpx SFC\n(Vue-like)", fillcolor="#bae6fd"]
  Compiler [label="@mpxjs/webpack-plugin\n(编译器)"]
  Core [label="@mpxjs/core\n(响应式运行时)"]
  WX [label="微信 WXML/WXSS"]
  Ali [label="支付宝 AXML"]
  Web [label="Web 产物"]
 
  MPX -> Compiler
  Compiler -> Core
  Core -> WX
  Core -> Ali
  Core -> Web
}

关键概念：createApp、createPage、createComponent、mpx.config.js 多平台配置、mode 环境变量。

八、 技术局限与边界

1. 学习成本：.mpx 语法与标准 Vue SFC 有差异，需阅读 mpx 专有文档。
2. 生态小于 uni-app/Taro：第三方 UI 库、模板市场相对少。
3. 多端差异：条件编译不可避免，支付宝/字节 API 需单独封装。
4. Webpack 为主：Vite 生态集成不如 Taro 4 成熟（以官方文档为准）。
5. 招聘认知：外部团队熟悉度低于 uni-app，需内部培训。
6. Web 输出：非 SSR 框架，SEO 站点需另选方案。

九、 生态地图

十、 生态集成

十一、 开发与工程化

1. 目录结构

src/
  app.mpx
  pages/
  components/
  api/
mpx.config.js      # 多平台构建配置
dist/
  wx/              # 微信开发者工具导入目录
  ali/

2. 环境变量

mpx.mode 区分平台；package.json scripts 分 watch:wx、build:ali。

3. 类型与规范

开启 ESLint + @typescript-eslint；组件 props 显式声明 properties。

4. 版本锁定

package-lock.json 入 Git；升级 @mpxjs/* 前读 CHANGELOG。

十二、 性能与安全

• 长列表用 recycle-view 或分页；避免整页大对象 setData。
• 图片 CDN + lazy-load；静态资源走分包或独立域名。
• 开启微信「按需注入」「初始渲染缓存」等基础库能力（版本门槛见文档）。
• 用户隐私：__usePrivacyCheck__、隐私协议弹窗合规。
• 敏感 token 不进 globalData；会话由后端短期凭证刷新。

十三、 技术对比

十四、 最佳实践

1. 以微信为主端做性能基线，再扩展其他小程序平台。
2. 平台 API 封装为 src/platform/ 薄层，业务不直接散落 wx./my.。
3. 组件粒度适中，利用 mpx 依赖分析避免父级大数据下发。
4. 主包控制在 1.5MB 内留缓冲；非首屏页面进分包。
5. 升级 mpx 大版本前用 demo 页对比编译产物 diff。
6. 与 uni-app 选型：要滴滴系 setData 优化与 Vue 原生输出选 mpx；要 App+小程序一体选 uni-app。

十五、 学习与社区资源

• 官方文档：https://mpxjs.cn
• GitHub：https://github.com/didi/mpx
• 掘金 mpx 专栏：社区实践文章与案例
• 微信开放文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
• 对比阅读：uni-app、Taro 官方架构说明