前言

上周，也发布了自己的小程序，看来跨平台的“战争”已经蔓延到了小程序上。今天的晨读文章，由滴滴 Mpx 框架负责人@投稿 分享。

@滴滴出行网约车乘客团队负责人、滴滴开源小程序框架Mpx负责人及核心作者

正文从这里开始~~

Mpx 是一款增强型小程序框架，致力于提升小程序开发体验和效率。目前支持滴滴内部的小程序生态，包括滴滴出行小程序、滴滴出行广场小程序、青桔单车、黑马摩托、小桔车养护、小桔加油等。自去年 11 月开源以来，Mpx 也吸引了众多外部开发者加入，基于 Mpx 开发了开走、好面街、画翼等小程序。

一直以来，Mpx优秀的开发体验和强大的稳定性得到了国内外开发者的一致认可和好评，非常符合Mpx的设计初衷。然而随着各大厂商陆续上线自己的小程序平台，且其技术标准并不统一，单纯提升某一平台的开发体验已经不能满足广大小程序开发者的诉求，一套代码在多个小程序平台上运行已经成为了现实的需要。为了解决小程序开发的这一痛点，Mpx发布了2.0版本，兼容目前行业内发布的所有小程序平台（微信、支付宝、百度、今日头条、QQ），并且提供了将已有的微信小程序直接编译输出到其他平台运行的功能。

Mpx2.0版本的主要特性包括：

与业界主流的小程序跨终端框架相比，Mpx更加专注于小程序开发本身，在小程序开发方面具有以下优势：

关于Mpx更详细的信息，请参考官方文档：和这篇文章：。

跨平台开发

作为 2.0 版本的核心能力，Mpx 的跨平台开发能力可以让用户直接编译已有的小程序项目，输出到其他支持的小程序平台运行。微信小程序作为小程序概念的鼻祖，生态覆盖面最广，所以我们优先考虑将微信小程序编译成其他平台小程序的能力。基于该能力，用户不仅可以跨平台编译微信 Mpx 项目，甚至可以将微信原生的自定义组件编译到其他小程序平台运行。这意味着我们的跨平台项目可以直接使用社区中一些已有的 UI 组件库生态（如 vant 等），大大提升了跨平台开发的适用范围。

设计概念

MPX框架的核心设计理念是增强。增强意味着在小程序已有的原生能力上进行添加，扩展小程序的开发能力，提升小程序的开发体验和效率。这样的设计理念使得MPX能够为开发者带来更大的确定性和可预见性，以及更低的学习和调试成本。基于这一理念，MPX在不同的小程序平台进行了差异化的增强适配，并参考各平台的模板指令风格提供了不同的增强模板指令集，让用户可以在各小程序平台上以增强的方式最大化利用平台自身的原生能力。

我们在为 Mpx 提供跨平台支持时也遵循了增强的核心设计理念。简单来说，Mpx 的跨平台能力是在多平台能力的基础上，在编译和运行时增加一个转换层，将源平台代码转换为目标平台代码，再根据现有的目标平台处理逻辑进行增强。同时，我们还提供了完整的条件编译机制，让用户可以自己实现少数框架无法转换的部分。

Mpx跨平台开发流程图

Mpx跨平台能力的设计理念与业界现有的其他小程序跨平台框架有显著不同，主要区别在于：

如此设计主要基于以下几点理由：

如何使用

Mpx 对于跨平台开发来说使用起来非常简单，用户只需要在创建平台时传入模式和参数指定源平台和目标平台即可，当模式不一致时，框架会在运行时读取对应的配置对项目进行编译转换。

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

消除差异

目前各大厂商的小程序技术规格在宏观上大致一致，但在技术细节上存在较多差异，大致可分为以下几个部分：

其中，对于模板语法/基础组件、json配置、wxs等静态方面的差异，我们主要通过编译手段进行转换，这些差异中无法转换的部分，在编译阶段就会提示错误；而对于页面/组件对象、api调用、js运行时方面的差异，我们主要通过运行时手段进行处理，相应的无法转换的部分，在运行时也会提示错误。

值得注意的是，我们在跨平台转换方面的工作不仅仅是对可转换的技术标准进行转换和映射，还尽可能通过编译和运行时手段，对目标平台不存在的一些能力提供模拟和支持，尽量减少用户在跨平台开发中需要付出的额外工作量。以差异性最大但也最贴近现实场景的微信转支付宝为例，Mpx模拟提供了很多微信支持而支付宝不支持的能力：

对于原生自定义组件的跨平台转换，我们会对其进行简单的运行时注入，以便它们能够使用Mpx框架提供的运行时转换能力。

条件编译

对于框架无法平滑的差异，在编译和运行时都会报错。​​针对这些错误，我们提供了完整的条件编译机制，允许用户针对目标平台编写自己的修复。这个能力也可以用来实现具有平台差异的业务逻辑。

上面提到，Mpx通过读取用户传入的mode和源平台来决定是否以及如何转换项目。mode和分别代表整个项目的目标平台和源平台。条件编译允许用户在项目中创建声明自己平台属性（）的文件和代码块。在项目构建时，框架会优先加载声明与项目目标平台（===mode）匹配的文件和代码块。这些文件和代码块需要完全按照自己声明的平台标准来编写，Mpx在编译和运行时不会对它们做任何跨平台转换。

Mpx提供了文件维度、块维度、代码维度三个维度的条件编译，用户可以根据差异范围和自身需求选择使用。

性能优化

Mpx框架专注于小程序开发，在性能优化上我们做了很多尝试和努力，主要集中在两个方面：

优化

数据响应是 Mpx 增强的核心能力，该能力让用户可以像在 Vue 中一样在小程序开发中使用和功能，通过直接赋值的方式进行数据驱动的视图更新，无需手动调用方法，也就是说，框架接管了小程序中的调用。

通过各个小程序、大程序平台的设计原则和性能优化建议可以知道，小程序的性能非常重要，而优化的两大方向是：

为了实现优化，我们在模板编译过程中为每个组件模板生成一个渲染函数（），该函数模拟模板的渲染逻辑，每次执行时访问当前渲染所需的数据，并将该次访问的数据路径记录为函数返回值。

在运行时，框架会在每一个组件创建时创建一个，它会跟踪渲染函数，当渲染依赖数据发生变化时，异步执行渲染函数，在回调中获取渲染函数返回的数据路径，并根据这些路径和上次的缓存数据做 diff 对比，过滤掉没有变化的数据，得到最少必要数据，最后调用将最少必要数据发送给真正的小程序渲染层，更新视图。

基于这种机制，当数据发生变化时，只有当前渲染所依赖的数据发生变化才会异步触发执行，而每次执行完毕后，也只有真正发生变化的数据才会被发送到渲染层。这样，用户就可以根据业务需求自由地操作数据，而不必担心调用优化。框架可以自动在程序中做出最佳的调用，提升用户开发体验的同时也提升了程序性能。

在1.x版本中，渲染函数中无法执行wxs的逻辑，包含wxs的组件可能会降级为全量数据设置的模式，在2.0版本中我们将wxs模块翻译成js可执行代码注入到js中，包含wxs的渲染函数也能正常访问并执行wxs的逻辑。

优化原理图封装的尺寸

与运行时接管类似，Mpx 在编译阶段接管了项目的资源管理。得益于强大的插件机制，Mpx 在完成小程序的打包构建基础上，开发了深度定制的插件。使用 Mpx 开发小程序时，用户可以不受限制地使用 npm 依赖、最新的 es 特性、css 预处理器等现代 Web 开发能力。同时，Mpx 在包大小优化上也做了大量工作，让用户可以专注于业务开发，而不必在包大小管理上花费过多的精力。我们所做的优化工作如下：

分包是微信小程序中优化包大小的核心手段（类似异步按需加载），Mpx 对此提供了完美的支持。为了精准标记仅供分包使用的资源，我们在构建时将主包和子包的依赖收集步骤拆分，串行处理，先处理主包，再处理子包。在处理主包时，会记录主包页面中引用的所有非 js 资源（组件、外挂样式、外挂模板、wxs、图片媒体等）。在处理子包时，会检查子包中引用的所有非 js 资源，如果已经被主包引用，则输出到主包中，否则将标记为仅供分包使用的资源输出到子包目录。

对于 js 模块资源，我们在脚手架中生成的构建配置中提供了辅助功能，方便用户配置子包。经过此配置后，只有子包的公共模块会打包进子包并输出到子包目录，其余公共模块会正常打包到主包中。

在跨平台开发中，我们建议用户使用Mpx提供的:(#定义子包，这样在转换到不支持子包的小程序平台时，会自动降级为同步包进行处理。

分包构建及逐步迁移示意图

Mpx对逐步迁移提供了良好的支持，对于使用原生或者其他小程序框架的开发者来说，通过逐步迁移的方式逐步引入Mpx进行开发的成本并不高。

在 2.0 版本中，我们进一步完善了 Mpx 的原生兼容性，跟进并支持了各小程序平台最新的技术能力，比如定制化、独立分包、分包预加载、云端开发等，同时也补充了一些在 1.x 版本中缺失的支持。得益于此，对于使用原生小程序开发的开发者来说，迁移到 Mpx 的成本几乎为零。用户只需要将对应页面组件的构造函数替换为 Mpx 提供的 / 即可使用 Mpx 提供的各种增强能力。

对于使用其他框架的开发者，Mpx还提供了本地构建机制，用户可以单独构建特定的页面和组件并输出为原生组件，用户只需要手动或者通过编写脚本的方式将输出的原生组件集成到原项目中即可。

未来计划

作为滴滴内部小程序生态的基础设施，我们将对 Mpx 框架进行长期的维护和更新，确保其能尽快支持各小程序平台最新的技术特性。同时，我们会进一步完善框架的基础能力。目前提上日程的能力包括：

在跨平台能力方面，我们会根据社区的反馈和建议，以及小程序的标准化进程，持续改进和更新。

最后，如果你专注于小程序开发，注重开发体验和产品性能，那么Mpx将是你最好的选择。

：

官方文档：

读完这篇文章后，您是否想尝试一下这个框架？

适合您的资源