跨端输出配置

Mpx以微信增强DSL为基础，支持跨端输出至多端小程序、web和客户端，包括支付宝、百度、抖音、京东、QQ等多端小程序平台，基于Vue的web平台，和基于react-native的ios、android及鸿蒙平台。

跨端输出配置

配置mpx进行跨端输出十分简单，找到项目构建的webpack配置，在@mpxjs/webpack-plugin的配置参数中设置mode和srcMode参数即可。

javascript

new MpxwebpackPlugin({
  // mode为mpx编译的目标平台，可选值有(wx|ali|swan|qq|tt|jd|web|ios|android|harmony)
  mode: 'ali',
  // srcMode为mpx编译的源码平台，目前仅支持wx   
  srcMode: 'wx'
})

对于使用 @mpxjs/cli 创建的项目，可以通过在 npm script 当中定义 targets 来设置编译的目标平台，多个平台标识以,分隔。

javascript

// 项目 package.json
{
  "script": {
    "build:cross": "mpx-cli-service build --targets=wx,ali,ios,android"
  }
}

支持的平台

小程序平台

微信小程序 (wx)
支付宝小程序 (ali)
百度小程序 (swan)
QQ小程序 (qq)
抖音小程序 (tt)
京东小程序 (jd)

Web平台

基于Vue的Web应用 (web)

客户端平台

iOS应用 (ios)
Android应用 (android)
鸿蒙应用 (harmony)

支付宝文本与滚动条兼容

当 mode 为 ali 时，Mpx 会在 App 全局样式之前加载支付宝兼容样式，其中包含 text { white-space: inherit }。因此，text 默认会继承父节点的换行方式；业务在 App 样式、页面样式、组件样式或行内样式中显式声明 white-space 时，后加载的业务规则仍可覆盖该默认值。

该默认值只处理换行继承。省略号布局仍需由业务设置宽度、overflow、text-overflow 等必要样式。

使用微信语法开发并输出支付宝小程序时，scroll-view 的 show-scrollbar 支持以下布尔契约：

html

<scroll-view
  scroll-y="{{true}}"
  show-scrollbar="{{showScrollbar}}"
>
  <view>列表内容</view>
</scroll-view>

show-scrollbar="false" 会为当前节点添加滚动条隐藏样式。
动态值仅在结果严格等于布尔值 false 时隐藏；undefined、null、0 和字符串 "false" 均不会触发隐藏。
true 只移除 Mpx 添加的隐藏样式，恢复宿主默认行为，不会强制宿主显示滚动条。
支付宝原生语法源码（srcMode: 'ali'）不会转换该属性。

滚动条最终是否可见仍受支付宝客户端、基础库、系统和设备影响，建议在目标真机上验证横向、纵向及嵌套滚动场景。该兼容样式由完整 App 构建的全局样式入口提供；独立分包、插件产物及单独编译的页面或组件不在自动覆盖范围内。

支付宝与 Web 的 .mpx-root-view { display: initial }、page { line-height: normal } 也作为框架默认样式先于用户 App 样式加载。业务同优先级声明可以覆盖这些默认值。

构建命令

单平台构建

bash

# 构建微信小程序 {#build-wechat-miniprogram}
npm run build:wx

# 构建支付宝小程序 {#build-alipay-miniprogram}
npm run build:ali

# 构建Web应用 {#build-web-app}
npm run build:web

# 构建iOS应用 {#build-ios-app}
npm run build:ios

多平台构建

bash

# 构建所有支持的平台 {#build-all-platforms}
npm run build:cross

# 构建指定的多个平台 {#build-specific-platforms}
mpx-cli-service build --targets=wx,ali,web

项目结构

跨端项目的典型目录结构：

src/
├── components/          # 公共组件
├── pages/              # 页面文件
├── utils/              # 工具函数
├── styles/             # 样式文件
├── app.mpx             # 应用入口
└── app.json            # 应用配置

下一步

条件编译机制 - 了解如何处理平台差异
平台差异处理 - 掌握差异抹平技巧

跨端输出配置 ​