Mpx框架跨端开发完全指南：从基础配置到高级条件编译

Mpx框架跨端开发完全指南：从基础配置到高级条件编译

mpx Mpx，一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架 项目地址: https://gitcode.com/gh_mirrors/mp/mpx

一、Mpx跨端能力概述

Mpx作为滴滴开源的增强型小程序开发框架，其核心优势在于强大的跨端输出能力。开发者只需编写一套基于微信增强DSL的代码，即可编译输出到多个平台：

1. 小程序平台：支付宝、百度、抖音、京东、QQ等主流小程序
2. Web平台：基于Vue实现的Web应用
3. 客户端平台：基于React Native的iOS、Android及鸿蒙原生应用

这种"一次编写，多端运行"的能力大幅提升了开发效率，避免了为不同平台重复开发的成本。

二、跨端基础配置

2.1 Webpack配置方式

在项目构建配置中，通过设置@mpxjs/webpack-plugin的参数即可实现跨端输出：

new MpxwebpackPlugin({
  mode: 'ali',       // 目标平台：ali/wx/swan/qq/tt/jd/web/ios/android/harmony
  srcMode: 'wx'      // 源码平台：目前仅支持微信小程序规范
})

2.2 CLI快捷配置

使用官方脚手架创建的项目，可以通过npm scripts快速指定多目标平台：

{
  "scripts": {
    "build:cross": "mpx-cli-service build --targets=wx,ali,ios,android"
  }
}

三、多维度条件编译详解

虽然Mpx框架已经处理了大量平台差异，但业务中仍会遇到需要平台特定实现的场景。Mpx提供了完整的条件编译方案，开发者可以根据需求选择不同粒度的解决方案。

3.1 文件维度条件编译

适用场景：平台差异较大的独立组件/模块

实现方式：

• 创建平台特定文件：原文件名.平台标识.扩展名（如map.ali.mpx）
• 编译时会自动优先加载匹配当前平台的文件

高级技巧：对于npm包中的文件，可通过webpack alias实现"虚拟"条件编译：

// vue.config.js
configureWebpack: {
  resolve: {
    alias: {
      'somePackage/lib/index.ali': 'projectRoot/somePackage/lib/index'
    }
  }
}

3.2 区块维度条件编译

适用场景：单文件内存在平台差异的某个区块（template/js/style/json）

实现方式：

<template mode="ali">
  <!-- 支付宝专用模板 -->
</template>

<script mode="wx">
  // 微信专用逻辑
</script>

3.3 代码维度条件编译

适用场景：简单的局部逻辑差异

实现方式：

• 通过__mpx_mode__获取当前平台标识
• 支持在JS、模板、JSON、样式中使用

JS示例：

if(__mpx_mode__ === 'ali') {
  // 支付宝逻辑
} else {
  // 其他平台逻辑
}

模板示例：

<view wx:if="{{__mpx_mode__ === 'ali'}}">支付宝</view>

JSON动态配置：

<script name="json">
module.exports = {
  pages: __mpx_mode__ === 'wx' ? ['main/xxx'] : ['test/xxx']
}
</script>

样式条件编译：

/* @mpx-if (__mpx_mode__ === 'wx') */
.wx-style { color: green; }
/* @mpx-endif */

3.4 属性维度条件编译

适用场景：组件属性或节点本身的平台差异

基本语法：属性名@平台1|平台2="属性值"

示例1：平台特定属性

<button 
  open-type@wx|swan="getUserInfo"
  open-type@ali="getAuthorize">
  获取用户信息
</button>

示例2：平台特定节点

<view @ali>仅支付宝显示</view>

注意事项：

• 直接使用@ali会禁用该节点的属性转换
• 如需保留属性转换，使用隐式规则@_ali
• 节点标签名替换使用mpxTagName属性

3.5 自定义环境条件编译

除了平台差异，Mpx还支持自定义环境变量__mpx_env__，实现多环境差异化编译。

配置方式：

new MpxwebpackPlugin({
  env: "didi"  // 定义环境标识
})

使用示例：

<!-- 文件维度 -->
map.ali.didi.mpx

<!-- 区块维度 -->
<template env="didi">...</template>

<!-- 代码维度 -->
if(__mpx_env__ === 'didi') {...}

<!-- 属性维度 -->
<button open-type@:didi="getUserInfo">

四、最佳实践建议

1. 优先使用框架自动转换：Mpx已处理大部分平台差异，仅在必要时使用条件编译
2. 合理选择条件编译粒度：
   • 大块差异 → 文件维度
   • 局部差异 → 代码/属性维度
3. 保持代码可维护性：过度使用条件编译会增加复杂度，建议做好代码组织
4. 注意平台特性测试：条件编译代码需在各目标平台充分验证

通过合理运用Mpx提供的多维度条件编译能力，开发者可以高效实现一套代码适配多端运行的需求，在保证开发效率的同时兼顾各平台的体验一致性。

mpx Mpx，一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架 项目地址: https://gitcode.com/gh_mirrors/mp/mpx