}）差异已消除

目前，主要制造商的小程序技术规格在宏观层面上大致相同，但是技术细节上存在许多差异，大致可分为以下几部分：

其中，对于模板语法/基本组件，json配置和wxs中的静态差异，我们主要使用编译方式进行转换，对于无法转换的部分差异，将在编译阶段报告错误对于页面/ webview桥中的组件对象，api调用和js运行时之间的差异主要由运行时方式处理，并且相应的非过渡部分也将在运行时报告。

值得注意的是，我们在跨平台转换中所做的不仅是转换和映射可转换的技术标准，而且对于目标平台中不存在的某些功能，我们还尝试使用编译和运行时方式作为尽可能提供模拟和支持，以最大程度地减少用户在跨平台开发中需要支付的额外工作量。以微信以支付宝为例，该支付宝的差异最大，但场景最真实。 Mpx模拟提供微信支持的许多功能，但支付宝则不支持：

对于本机自定义组件的跨平台转换，我们将执行简单的运行时注入，以使其能够使用Mpx框架提供的运行时转换功能。

有条件的编译

对于框架无法消除的差异，将在编译和运行时报告错误。对于错误的这一部分，我们提供了完整的条件编译机制，以便用户可以为目标平台编写补丁来修复它们。此功能还可用于实现具有平台差异的业务逻辑。

如上所述，Mpx通过读取用户传递的模式和srcMode来决定是否以及如何转换项目。 mode和srcMode代表整个项目的目标平台和源平台。条件编译允许用户创建在其中声明自己的平台属性（localSrcMode）的文件和代码块。在项目构造中，框架将首先加载具有与项目目标平台匹配的localSrcMode声明和localSrcMode的文件和代码块（localSrcMode ===模式）。这些文件和代码块需要根据它们自己声明的平台标准来编写。 Mpx在编译和运行时不会执行任何跨平台转换。

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

性能优化

Mpx框架专注于小程序开发。我们在性能优化方面进行了许多尝试和努力，主要在两个方面：

setData优化

数据响应是Mpx运行时增强的核心功能。此功能使用户可以像在Vue中一样在小程序开发中使用监视和计算功能，并使用直接分配操作数据驱动的视图更新，而无需手动调用setData方法，换句话说，框架将接管setData的调用。 小程序。

通过主要小程序平台的设计原理和性能优化建议，我们可以知道setData对于小程序的性能非常重要，并且setData优化的两个主要方向是：

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

在运行时，框架在创建每个组件时都会创建一个渲染监视程序。该观察者跟踪渲染功能。当呈现相关数据发生更改时，呈现功能将异步执行，并在呈现监视程序回调中获取呈现功能返回的数据路径。根据这些路径与最后缓存的数据之间的差异比较，可以在滤除未更改的数据后获得最少的必需数据。最后，调用setData将最少的必要数据发送到实际的小程序渲染层以更新视图。

基于此机制，当数据更改时，只有当前渲染所依赖的数据部分将异步触发渲染观察器的执行，并且在每次执行之后，只有实际更改的数据部分将被触发被setData发送到渲染层。这样，用户可以根据业务需求自由地操作数据，而无需关注setData调用的优化。该框架可以自动在程序中进行最佳的setData调用，从而在改善用户开发体验的同时还提高了程序性能。

在1.x版本中，无法在渲染功能中执行wxs的逻辑。对于包含wxs的组件，它可能会降级为完整设置数据的模式。在版本2.0中，我们将wxs模块转换为js可执行代码注入js捆绑包后，包含wxs的呈现函数也可以正常访问和执行。

SetData优化图程序包体积优化

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

作为微信小程序中优化包装尺寸的核心方法（类似于异步按需加载），Mpx完全支持分包。为了准确地标记子包的唯一资源，我们在构建期间将主包和子包的依赖项收集步骤分开进行串行处理，首先处理主包，然后再处理子包。在处理主程序包期间，将记录主程序包页面中引用的所有非js资源（组件，外部样式，外部模板，wxs，图像媒体等）。在处理子包时，将检查子包Non-js资源中引用的资源，如果主包已引用了它们，则将它们输出到主包中，否则仅标记为子包的资源为输出到子软件包目录。

对于js模块资源，我们在脚手架中生成的构建配置中提供辅助功能，以方便用户配置子软件包捆绑包。完成此配置后，仅子包通用模块将包含在子包束输出中。转到子包目录，其余的公共模块将正常添加到主包中。

在跨平台开发中，我们建议用户使用Mpx提供的软件包：（＃packages定义子软件包，以便在切换到不支持子软件包的小程序平台时，它将自动降级为同步程序包进行处理。

分包施工示意图渐进迁移

Mpx提供了良好的逐步迁移支持。对于使用本机框架或其他小程序框架的开发人员，通过逐步移植逐步引入Mpx进行开发并不昂贵。

在2.0版本中，我们进一步改善了Mpx的本机兼容性，并跟踪并支持了每个小程序平台的最新技术功能，例如自定义标签栏，独立分包，分包预加载，工作人员，云开发1.x版本还缺少一些支持，从而补充了其他功能。因此，对于使用本机小程序开发的开发人员，迁移Mpx的成本几乎为零。用户只需要用Mpx提供的createPage / createCompnent替换相应页面组件的构造函数即可使用Mpx。各种增强功能。

对于使用其他框架的开发人员，Mpx还提供了部分构造机制，允许用户将特定的页面和组件分别作为本机组件进行构建。用户只需手动或编写脚本即可将本机组件集成到项目中的原始Just中。

作为Didi公司中小程序生态系统的基础架构，我们将对Mpx框架进行长期维护和更新，以确保每个小程序平台的最新技术功能都可以得到支持。第一次。同时，我们将进一步改善框架的基本功能。当前议程中的功能包括：

就跨平台功能而言，我们还将根据社区的反馈和建议以及小程序的标准化流程，继续对其进行改进和更新。

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

Github：

正式文件：

阅读本书后是否有尝试该框架的冲动？

●否。 973，直接在本文中输入数字

●输入m以获取文章目录

网站开发