---
url: /guide/advance/platform.md
---
# 跨平台 {#cross-platform}

## 多平台支持 {#multi-platform-support}

Mpx支持在多个小程序平台中进行增强，目前支持的小程序平台包括微信，支付宝，百度，qq和头条，不过自2.0版本后，Mpx支持了以微信增强语法为base的跨平台输出，实现了一套业务源码在多端输出运行的能力，大大提升了多小程序平台业务的开发效率，详情可以查看[跨平台编译](#跨平台编译)

### template增强特性 {#template-enhancement}

不同平台上的模板增强指令按照平台的指令风格进行设计，文档和代码示例为了方便统一采用微信小程序下的书写方式。

模板增强指令对应表：

增强指令|微信|支付宝|百度|qq|头条
\----|----|----|----|----|----
双向绑定|wx:model|a:model|s-model|qq:model|tt:model
双向绑定辅助属性|wx:model-prop|a:model-prop|s-model-prop|qq:model-prop|tt:model-prop
双向绑定辅助属性|wx:model-event|a:model-event|s-model-event|qq:model-event|tt:model-event
双向绑定辅助属性|wx:model-value-path|a:model-value-path|s-model-value-path|qq:model-value-path|tt:model-value-path
双向绑定辅助属性|wx:model-filter|a:model-filter|s-model-filter|qq:model-filter|tt:model-filter
动态样式绑定|wx:class|a:class|s-class|qq:class|暂不支持
动态样式绑定|wx:style|a:style|s-style|qq:style|暂不支持
获取节点/组件实例|wx:ref|a:ref|s-ref|qq:ref|tt:ref
显示/隐藏|wx:show|a:show|s-show|qq:show|tt:show

### script增强特性 {#script-enhancement}

增强字段|微信|支付宝|百度|qq|头条
\----|----|----|----|----|----
computed|支持|支持|支持|支持|部分支持，无法作为props传递(待头条修复生命周期执行顺序可完整支持)
watch|支持|支持|支持|支持|支持
mixins|支持|支持|支持|支持|支持

### style增强特性 {#style-enhancement}

无平台差异

### json增强特性 {#json-enhancement}

增强字段|微信|支付宝|百度|qq|头条
\----|----|----|----|----|----
packages|支持|支持|支持|支持|部分支持，无法分包

## 跨平台输出小程序 {#cross-platform-output}

自2.0版本开始，mpx开始支持跨小程序平台编译，不同于常规跨平台框架重新定义一套DSL的方式，mpx支持基于现有平台的源码编译为其他已支持平台的目标代码。跨平台编译能力依赖于mpx的多平台支持，目前mpx已经支持将微信小程序跨平台编译为支付宝、百度、qq和头条小程序。

### 使用方法 {#usage}

如果你是使用`mpx init xxx`新生成的项目，package.json里script部分有`npm run build:cross`，直接执行`npm run build:cross`（watch同理），如果仅需构建某几个平台的，可以修改该script，按已有的格式删除或增添某些某些平台

如果你是自行搭建的mpx项目，你只需要进行简单的配置修改，打开项目的webpack配置，找到@mpxjs/webpack-plugin的声明位置，传入mode和srcMode参数即可，示例如下

```javascript
new MpxwebpackPlugin({
  // mode为mpx编译的目标平台，可选值有(wx|ali|swan|qq|tt|jd|web|ios|android)
  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"
  }
}
```

### 跨平台差异抹平 {#cross-platform-diff-flatten}

为了实现小程序的跨平台编译，我们在编译和运行时做了很多工作以抹平小程序开发中各个方面的跨平台差异

#### 模板语法差异抹平 {#template-syntax-diff}

对于通用指令/事件处理的差异，mpx提供了统一的编译转换抹平操作；而对于平台组件和组件属性的差异，我们也在力所能及的范围内进行了转换抹平，对于平台差异性过大无法转换的部分会在编译阶段报错指出。

#### 组件/页面对象差异抹平 {#component-page-object-diff}

不同平台间组件/页面对象的差异主要体现在生命周期上，我们在支持多平台能力时已经将不同平台的生命周期映射到mpx框架的一套内部生命周期中，基于这个统一的映射，不同平台的生命周期差异也得到了抹平。

此外，我们还进行了一系列运行时增强来模拟微信平台中提供而其他平台中未提供的能力，例如：

* 在支付宝组件实例中提供了this.triggerEvent方法模拟微信中的自定义组件事件；
* 提供了this.selectComponent/this.selectAllComponents方法模拟微信中获取子组件实例的能力；
* 重写了createSelectorQuery方法抹平了微信/支付宝平台间的使用差异；
* 转换抹平了微信/支付宝中properties定义的差异；
* 利用mpx本身的数据响应能力模拟了微信中的observers/property observer能力等;
* 提供了this.getRelationNodes方法并支持了微信中组件间关系relations的能力

对于原生小程序组件的转换，还会进行一些额外的抹平，已兼容一些已有的原生组件库，例如：

* 将支付宝组件中的props数据挂载到this.data中以模拟微信平台中的表现；
* 利用mpx本身的mixins能力模拟微信中的behaviors能力。

对于一些无法进行模拟的跨平台差异，会在运行时进行检测并报错指出，例如微信转支付宝时使用moved生命周期等。

#### json配置差异抹平 {#json-config-diff}

类似于模板语法，会在编译阶段进行转换抹平，无法转换的部分会在编译阶段报错指出。

#### api调用差异抹平 {#api-diff-flatten}

对于api调用，mpx提供了一个api调用代理插件来抹平跨平台api调用的差异，使用时需要在项目中安装使用`@mpxjs/api-proxy`，可以通过两种方式使用

#### 方式一：在调用小程序api时统一使用mpx对象进行调用，示例如下： {#method-1-use-mpx-object}

安装插件支持options传入，options说明如下：

| 参数名称         | 类型                | 含义                       | 是否必填  | 默认值                    | 备注                    |
|--------------|-------------------|--------------------------|-------|------------------------|-----------------------|
| ~~platform~~ | ~~Object~~        | ~~各平台之间的转换~~	            | ~~否~~ | ~~{ from:'', to:'' }~~ | 已删除                   |
| usePromise   | Boolean           | 是否将 api 转化为 promise 格式使用 | -     | -                      | -                     |
| ~~exclude~~  | ~~Array(String)~~ | ~~跨平台时不需要转换的 api~~       | -     | -                      | 已删除                     |
| whiteList    | Array(String)     | 强行转化为 promise 格式的 api    | 否     | \[]                     | 需要 usePromise 设为 true |
| blackList    | Array(String)     | 不转换 promise 格式的 api      | 否     | \[]                     | 需要 usePromise 设为 true |
| custom       | Object            | 提供用户在各渠道下自定义api开放能力      | 否     | \[]                     | -                     |

#### 普通形式 {#normal-form}

```js
import mpx from '@mpxjs/core'
import apiProxy from '@mpxjs/api-proxy'

mpx.use(apiProxy)

mpx.showModal({
  title: '标题',
  content: '这是一个弹窗',
  success (res) {
    if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})
```

#### 使用promise形式 {#use-promise}

```js
import mpx from '@mpxjs/core'
import apiProxy from '@mpxjs/api-proxy'

mpx.use(apiProxy, {
  usePromise: true
})

mpx.showActionSheet({
  itemList: ['A', 'B', 'C']
})
.then(res => {
  console.log(res.tapIndex)
})
.catch(err => {
  console.log(err)
})
```

#### 用户自定义 {#user-custom}

```js
import mpx from '@mpxjs/core'
import apiProxy from '@mpxjs/api-proxy'
import { scanCode } from '@test/scanCode'

mpx.use(apiProxy, {
  custom: {
    web: {
      scanCode
    }
  }
})
// 在web下调用的实际是用户自定义部分的scanCode
mpx.scanCode({
  onlyFromCamera: true,
  success (res) {
    console.log(res, 'scanCode, success')
  },
  fail (res) {
    console.log(res, 'scanCode, fail')
  }
})
```

#### 方式二：直接在`@mpxjs/api-proxy`导出想使用的方法 {#method-2-import-from-api-proxy}

```js
// 独立使用 支持treesharking能力
import { showModal } from '@mpxjs/api-proxy'

showModal({
  title: '标题',
  content: '这是一个弹窗',
  success (res) {
    console.log('弹框展示成功')
  }
})
```

对于无法转换抹平的api调用会在运行时阶段报错指出。

#### webview bridge差异抹平 {#webview-bridge-diff-flatten}

Mpx支持小程序跨平台后，多个平台的小程序里都有webview组件，webview打开的页面和小程序可以通过API来通信以及调用一些小程序能力，但是各方webview提供的API是不一样的。

比如微信是用 wx.miniProgram.navigateTo 来跳转到别的小程序页面，而支付宝里是 my.navigateTo ，那么我们开发H5时候为了让H5能适应各家小程序平台就需要写多份对应逻辑。

为解决这个问题，Mpx提供了用于运行在小程序的webview里的H5抹平平台差异的bridge库：@mpxjs/webview-bridge

使用方式很简单，不过注意这个库是给H5用的，不是给小程序用的。在H5项目中引入。

[使用示例](https://github.com/didi/mpx/tree/master/examples/mpx-webview)

支持script标签引入和npm引入，标签引入的话，全局实例是mpx（npm模块使用下也鼓励import mpx from '@mpxjs/webview-birdge'），使用就例如 mpx.navigateTo ，能保持整个项目风格完全一致。

提供的API如下：`navigateTo, navigateBack, switchTab, reLaunch, redirectTo, getEnv, postMessage, getLoadError`

## 跨平台条件编译 {#cross-platform-conditional-compile}

Mpx跨平台编译的原则在于，`能转则转，转不了则报错提示`，对于无法抹平差异的部分，我们提供了完善的跨平台条件编译机制便于用户处理因平台差异而无法相互转换的部分，也能够用于实现具有平台差异性的业务逻辑。

mpx中我们支持了三种维度的条件编译，分别是文件维度，区块维度和代码维度，其中，文件维度和区块维度主要用于处理一些大块的平台差异性逻辑，而代码维度主要用于处理一些局部简单的平台差异。

> 文件和区块维度的 `mode` 只负责选择目标平台内容，不会改变源码方言。命中的文件或区块默认继承资源 `srcMode` 并继续参与跨平台转换；完整目标平台原生文件使用 `srcModeRules` 声明源码方言，完整目标平台原生 SFC 区块使用 `src-mode` 声明源码方言。

### 文件维度条件编译 {#file-conditional-compile}

文件维度条件编译简单的来说就是以文件为维度编写跨平台差异代码。例如在微信 -> 支付宝项目中存在一个业务地图组件 `map.mpx`，可以在相同位置新建 `map.ali.mpx`；编译系统在 `mode` 为 `ali` 时优先加载 `map.ali.mpx`，其他 `mode` 加载 `map.mpx`。`map.ali.mpx` 默认仍按照资源 `srcMode` 编写并参与转换；若文件完整使用支付宝原生语法，需通过 `srcModeRules.ali` 显式声明源码方言。

文件维度条件编译能够与webpack alias结合使用，对于npm包的文件我们并不方便在原本的文件位置创建.ali的条件编译文件，但我们可以通过webpack alias在相同位置创建一个`虚拟的`.ali文件，并将其指向项目中的其他文件位置。

```js
  // 对于npm包中的文件依赖
  import npmModule from 'somePackage/lib/index'

  // 配置以下alias后，当mode为ali时，会优先加载项目目录中定义的projectRoot/somePackage/lib/index文件
  // vue.config.js
  module.exports = defineConfig({
    configureWebpack() {
      return {
        resolve: {
          alias: {
            'somePackage/lib/index.ali': 'projectRoot/somePackage/lib/index'
          }
        }
      }
    }
  })
```

### 区块维度条件编译 {#block-conditional-compile}

在.mpx单文件中一般存在template、js、style、json四个区块。`mode` 只负责区块筛选，命中后仍继承资源 `srcMode` 并执行平台转换；完整目标平台原生 SFC 区块使用 `src-mode` 显式声明源码方言。仅当 `src-mode` 等于当前输出 `mode` 时生效，否则忽略并继续继承资源 `srcMode`：

```html
<!--编译mode为ali时使用如下区块-->
<template mode="ali">
  <view bindtap="handleTap">支付宝环境</view>
</template>

<template mode="ali" src-mode="ali">
  <view onTap="handleTap">完整支付宝原生区块</view>
</template>

<!--其他编译mode时使用如下区块-->
<template>
  <view>其他环境</view>
</template>
```

当 RN 区块声明 `src-mode="ios"` 时，区块会按照 RN 原生源码处理，模板应使用已注册的 `View`、`Text` 等 RN 原生组件，而不是依赖 `view`、`text` 的 Mpx2RN 转换。RN 原生组件的注册方式参见 [Mpx 与 RN 混合开发](../rn/hybrid-with-react-native.md)。

```html
<template mode="ios" src-mode="ios">
  <View>
    <Text>RN 原生区块</Text>
  </View>
</template>
```

`.mpx` 文件的 `<template src="..." src-mode="...">` 仍属于 SFC 模板区块：默认继承当前资源的 `srcMode`，并读取区块显式声明的 `src-mode`。模板区块内部的 `<template name>` 定义同样继承当前区块 `srcMode`；`<import>` / `<include>` 引用的是独立模板资源，不继承引用方 `srcMode`，若其使用目标平台原生语法，应通过 `srcModeRules` 对被引用资源本身进行声明。

### 代码维度条件编译 {#code-conditional-compile}

如果只有局部的代码存在跨平台差异，mpx同样支持在代码内使用if/else进行局部条件编译，用户可以在js代码和template插值中访问`__mpx_mode__`获取当前编译mode，进行平台差异逻辑编写，js代码中使用示例如下。

除了 `__mpx_mode__` 这个默认插值以外，有别的环境变量需要的话可以在mpx.plugin.conf.js里通过defs进行配置。

```js
if(__mpx_mode__ === 'ali') {
  // 执行支付宝环境相关逻辑
} else {
  // 执行其他环境相关逻辑
}
```

template代码中使用示例如下

```html
<!--此处的__mpx_mode__不需要在组件中声明数据，编译时会基于当前编译mode进行替换-->
<view wx:if="{{__mpx_mode__ === 'ali'}}">支付宝环境</view>
<view wx:else>其他环境</view>
```

JSON中的条件编译（注意，这个依赖JSON的动态方案，得通过name="json"这种方式来编写，其实写的是js代码，最终module.exports导出一个可json化的对象即可）：

```html
<script name="json">
const pages = __mpx_mode__ === 'wx' ? [
  'main/xxx',
  'sub/xxx'
] : [
  'test/xxx'
] // 可以为不同环境动态书写配置
module.exports = {
  usingComponents: {
    aComponents: '../xxxxx' // 可以打注释 xxx组件
  }
}
</script>
```

样式的条件编译：

```css
/*
  @mpx-if (__mpx_env__ === 'someEvn')
*/
  /* @mpx-if (__mpx_mode__ === 'wx') */
  .backColor {
    background: green;
  }
  /*
    @mpx-elif (__mpx_mode__ === 'qq')
  */
  .backColor {
    background: black;
  }
  /* @mpx-endif */

  /* @mpx-if (__mpx_mode__ === 'swan') */
  .backColor {
    background: cyan;
  }
  /* @mpx-endif */
  .textSize {
    font-size: 18px;
  }
/*
  @mpx-else
*/
.backColor {
  /* @mpx-if (__mpx_mode__ === 'swan') */
  background: blue;
  /* @mpx-else */
  background: red;
  /* @mpx-endif */
}
/*
  @mpx-endif
*/
```

### 属性维度条件编译 {#attr-conditional-compile}

属性维度条件编译允许用户在组件上使用 `@` 和 `|` 符号来指定某个节点或属性只在某些平台下有效。

对于同一个 button 组件，微信小程序支持 `open-type="getUserInfo"`，但是支付宝小程序支持 `open-type="getAuthorize" `。如果不使用任何维度的条件编译，则在编译的时候会有警告和报错信息。

比如业务中需要通过 button 按钮获取用户信息，虽然可以使用代码维度条件编译来解决，但是增加了很多代码量：

```html
<button
  wx:if="{{__mpx_mode__ === 'wx' || __mpx_mode__ === 'swan'}}"
  open-type="getUserInfo"
  bindgetuserinfo="getUserInfo">
  获取用户信息
</button>

<button
  wx:elif="{{__mpx_mode__ === 'ali'}}"
  open-type="getAuthorize"
  scope="userInfo"
  onTap="onTap">
  获取用户信息
</button>
```

而用属性维度的编译则方便很多：

```html
<button
  open-type@wx|swan="getUserInfo"
  bindgetuserinfo@wx|swan="getUserInfo"
  open-type@ali="getAuthorize"
  scope@ali="userInfo"
  onTap@ali="onTap">
  获取用户信息
</button>
```

属性维度的编译也可以对整个节点进行条件编译，例如只想在支付宝小程序中输出某个节点：

```html
<view @ali>this is view</view>
```

`@mode` 只负责筛选节点。节点命中后会继承资源 `srcMode`，节点自身及其子节点都会执行正常的平台语法转换，条件属性不会保留在输出中。例如 `srcMode` 为 `wx`、输出 `ali` 时：

```html
<!--源码-->
<view @ali bindtap="otherClick">
  <view bindtap="someClick">tap click</view>
</view>

<!--输出 ali 产物-->
<view onTap="otherClick">
  <view onTap="someClick">tap click</view>
</view>
```

`@_mode` 是 `@mode` 的历史兼容别名，两者的筛选和转换行为完全一致。例如下面的写法也会将 `bindtap` 转换为 `onTap`，但新代码建议统一使用 `@mode`：

```html
<view @_ali bindtap="someClick">test</view>
```

有时候我们不仅需要对节点属性进行条件编译，可能还需要对节点标签进行条件编译。

为此，我们支持了一个特殊属性 `mpxTagName`，如果节点存在这个属性，我们会在最终输出时将节点标签修改为该属性的值，配合属性维度条件编译，即可实现对节点标签进行条件编译，例如在百度环境下希望将某个 view 标签替换为 cover-view，我们可以这样写：

```html
<view mpxTagName@swan="cover-view">will be cover-view in swan</view>
```

### 通过 env 实现自定义目标环境的条件编译 {#use-env}

Mpx 支持在以上四种条件编译的基础上，通过自定义 env 的形式实现在不同环境下编译产出不同的代码。

实例化 MpxWebpackPlugin 的时候，传入配置 env。

```javascript
// vue.config.js
module.exports = defineConfig({
  pluginOptions: {
    mpx: {
      srcMode: 'wx' // srcMode为mpx编译的源码平台，目前仅支持wx
      plugin: {
        env: "didi" // env为mpx编译的目标环境，需自定义
      }
    }
  }
})
```

#### 文件维度条件编译 {#file-conditional-compile-1}

微信转支付宝的项目中存在一个业务地图组件 `map.mpx`，而且这个地图组件在不同目标环境中也有较大差异时，可以在相同位置新建 `map.ali.didi.mpx` 或 `map.ali.qingju.mpx`。编译系统根据当前 `mode` 和 `env` 加载对应模块：当 `mode` 为 `ali`、`env` 为 `didi` 时，会依次尝试 `map.ali.didi.mpx`、`map.ali.mpx`，否则加载 `map.mpx`。条件文件默认仍按照资源 `srcMode` 编写并参与转换；若文件完整使用支付宝原生语法，需通过 `srcModeRules.ali` 显式声明源码方言。

#### 区块维度条件编译 {#block-conditional-compile-1}

在 `.mpx` 单文件中一般存在 template、script、style、JSON 四个区块。`mode` 和 `env` 只负责区块筛选，命中后仍继承资源 `srcMode` 并执行平台转换，示例如下：

```html
<!--编译mode为ali且env为didi时使用如下区块，优先级最高是4-->
<template mode="ali" env="didi">
  <view bindtap="handleTap">支付宝 didi 环境</view>
</template>

<!--编译mode为ali时使用如下区块，优先级是3-->
<template mode="ali">
  <view bindtap="handleTap">支付宝环境</view>
</template>

<!--编译env为didi时使用如下区块，优先级是2-->
<template env="didi">
  <view bindtap="handleTap">didi 环境</view>
</template>

<!--其他环境，优先级是1-->
<template>
  <view bindtap="handleTap">默认环境</view>
</template>
```

注意，如果多个相同的区块写相同的 mode 和 env，默认会用最后一个，如：

```html
<template mode="ali">
  <view>该区块会被忽略</view>
</template>

<template mode="ali">
  <view>默认会用这个区块</view>
</template>
```

#### 代码维度条件编译 {#code-conditional-compile-1}

如果在 MpxWebpackPlugin 插件初始化时自定义了 env，你可以访问`__mpx_env__`获取当前编译env，进行环境差异逻辑编写。使用方法与`__mpx_mode__`相同。

#### 属性维度条件编译 {#attr-conditional-compile-1}

env 属性维度条件编译与 mode 的用法大致相同，使用 `:` 符号与 mode 和其他 env 进行串联，与 mode 组合使用格式形如 `attr@mode:env:env|mode:env`，为了不与 mode 混淆，当条件编译中仅存在 env 条件时，也需要添加 `:` 前缀，形如 `attr@:env`。

对于同一个 button 组件，微信小程序支持 `open-type="getUserInfo"`，但是支付宝小程序支持 `open-type="getAuthorize" `。如果不使用任何维度的条件编译，则在编译的时候会有警告和报错信息。

如果当前编译的目标平台是 wx，以下写法 open-type 属性将被忽略

```html
<button open-type@swan:didi="getUserInfo">获取用户信息</button>
```

如果当前 env 不是 didi，以下写法 open-type 属性也会被忽略

```html
<button open-type@:didi="getUserInfo">获取用户信息</button>
```

如果只想在 mode 为 wx 且 env 为 didi 或 qingju 的环境下使用 open-type 属性，则可以这样写：

```html
<button open-type@wx:didi:qingju="getUserInfo">获取用户信息</button>
```

env 属性维度的编译同样支持对整个节点或者节点标签名进行条件编译：

```html
<view @:didi>this is a  view component</view>
<view mpxTagName@:didi="cover-view">this is a  view component</view>
```

如果只声明了 env，没有声明 mode，跨平台输出时框架对于节点属性默认会进行转换：

```html
<!--srcMode为wx，跨平台输出ali时，bindtap会被转为onTap-->
<view @:didi bindtap="someClick">this is a  view component</view>
<view bindtap@:didi ="someClick">this is a  view component</view>
```

### 其他注意事项 {#other-notes}

* 当目标平台为支付宝时，需要启用支付宝最新的component2编译才能保障框架正常工作，关于component2[点此查看详情](https://docs.alipay.com/mini/framework/custom-component-overview)；
* 跨平台源码中自定义组件的标签名不能使用驼峰形式`myComponent`，请使用横杠形式`my-component`来书写；
* 生成的目标代码中文件名和文件夹名不能带有`@`符号，目前媒体文件和原生自定义组件在编译时不会修改文件名，需要重点关注。

## 跨平台输出web {#cross-platform-web}

从2.3.0版本开始，Mpx开始支持将已有项目跨平台输出web平台中运行的能力，目前输出web能力完备，能够支持直接转换大型复杂项目，我们会持续对输出web的能力进行优化，不断的建全更全面的适用范围和开发体验。

### 技术实现 {#tech-implementation}

与小程序平台间的差异相比，web平台和小程序平台间的差异要大很多，小程序相当于是基于web技术的上层封装，所以不同于我们跨平台输出其他小程序平台时以编译转换为主的思路，在输出web时，我们更多地采用了封装的方式来抹平组件/Api和底层环境的差异，与当前大部分的跨平台框架相仿。但与当前大部分跨平台框架以web MVVM框架为base输出到小程序上运行的思路不同，我们是以Mpx小程序增强语法为基础输出到web中运行，前面说过小程序本身是基于web技术进行的实现，小程序->web的转换在可行性和兼容性上会好一些。

在具体实现上，Mpx项目输出到web中运行时在组件化和路由层面都是基于Vue生态实现，所以可以将Mpx的跨端输出产物整合到既有的Vue项目中，或者在条件编译中直接使用Vue语法进行web端的实现。

### 使用方法 {#usage-1}

使用@mpxjs/cli创建新项目时选择跨平台并选择输出web后，即可生成可输出web的示例项目，运行`npm run build:web`，就会在dist/web下输出构建后的web项目，并启动静态服务预览运行。

### 支持范围 {#support-scope}

目前对输出web的通用能力支持已经非常完备，下列表格中显示了当前版本中已支持的能力范围

#### 模板指令 {#template-directives}

指令名称|是否支持
:----|----
Mustache数据绑定|是
wx:for|是
wx:for-item|是
wx:for-index|是
wx:key|是
wx:if|是
wx:elif|是
wx:else|是
wx:model|是
wx:model-prop|是
wx:model-event|是
wx:model-value-path|是
wx:model-filter|是
wx:class|是
wx:style|是
wx:ref|是
wx:show|是

#### 事件绑定方式 {#event-binding}

绑定方式|是否支持
:----|----
bind|是
catch|是
capture-bind|是
capture-catch|是

#### 事件名称 {#event-name}

事件名称|是否支持
:----|----
tap|是
longpress|是
longtap|是

web同名事件默认全部支持，已支持组件的特殊事件默认为支持，不支持的情况下会在编译时抛出异常

#### 基础组件 {#basic-components}

组件名称|是否支持|说明
:----|---- |----
audio|是
block|是
button|是
canvas|是
checkbox|是
checkbox-group|是
cover-view|是
form|是
image|是
input|是
movable-area|是
movable-view|是
navigator|是
picker|是
picker-view|是
progress|是
radio|是
radio-group|是
rich-text|是
scroll-view|是|scroll-view 输出 web 底层滚动依赖 [BetterScroll](https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html) 实现，支持额外传入以下属性： `scroll-options`: object 可重写 BetterScroll 初始化基本配置若出现无法滚动，可尝试手动传入 `{ observeDOM: true }`  `update-refresh`: boolean Vue updated 钩子函数触发时，可用于重新计算 BetterScrolltips: 当使用下拉刷新相关属性时，由于 Vue 数据响应机制的限制，在 web 侧可能出现下拉组件状态无法复原的问题，可尝试在 `refresherrefresh` 事件中，手动将 refresher-triggered 属性值设置为 true
swiper|是|swiper 输出 web 底层滚动依赖 [BetterScroll](https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html) 实现，支持额外传入以下属性： `scroll-options`: object 可重写 BetterScroll 初始化基本配置当滑动方向为横向滚动，希望在另一方向保留原生的滚动时，scroll-options 可尝试传入 `{ eventPassthrough: vertical }`，反之可将 eventPassthrough 设置为 `horizontal`
swiper-item|是
switch|是
slider|是
text|是
textarea|是
video|是
view|是
web-view|是
在项目的app.json 中配置 "style": "v2"启用新版的组件样式，涉及的组件有 button icon radio checkbox switch slider在输出web时也与小程序保持了一致

#### 生命周期 {#lifecycle}

生命周期名称|是否支持
:----|----
onLaunch|是
onLoad|是
onReady|是
onShow|是
onHide|是
onUnload|是
onError|是
onServerPrefetch|是
created|是
attached|是
ready|是
detached|是
updated|是
serverPrefetch|是

#### 应用级事件 {#app-events}

应用级事件名称|是否支持
:----|----
onPageNotFound|是
onPageScroll|是
onPullDownRefresh|是
onReachBottom|是
onResize|是
onTabItemTap|是

#### 组件配置 {#component-config}

配置项|支持度
:----|----
properties|部分支持，observer不支持，请使用watch代替
data|支持
watch|支持
computed|支持
relations|支持
methods|支持
mixins|支持
pageLifetimes|支持
observers|不支持，请使用watch代替
behaviors|不支持，请使用mixins代替

#### 组件API {#component-api}

api名称|支持度
:----|----
triggerEvent|支持
$nextTick|支持
createSelectorQuery/selectComponent|支持

#### 全局API {#global-api}

api名称|支持度
:----|----
navigateTo|支持
navigateBack|支持
redirectTo|支持
request|支持
connectSocket|支持
SocketTask|支持
EventChannel|支持
createSelectorQuery|支持
base64ToArrayBuffer|支持
arrayBufferToBase64|支持
nextTick|支持
set|支持
setNavigationBarTitle|支持
setNavigationBarColor|支持
setStorage|支持
setStorageSync|不支持，请使用 setStorage
getStorage|支持
getStorageSync|不支持，请使用 getStorage
getStorageInfo|支持
getStorageInfoSync|不支持，请使用 getStorageInfo
removeStorage|支持
removeStorageSync|不支持，请使用 removeStorage
clearStorage|支持
clearStorageSync|不支持，请使用 clearStorage
getSystemInfo|支持
getSystemInfoSync|支持
showModal|支持
showToast|支持
hideToast|支持
showLoading|支持
hideLoading|支持
onWindowResize|支持
offWindowResize|支持
createAnimation|支持

#### JSON配置 {#json-config}

配置项|是否支持
:----|----
backgroundColor|是
backgroundTextStyle|是
disableScroll|是
enablePullDownRefresh|是
onReachBottomDistance|是
packages|是
pages|是
navigationBarBackgroundColor|是
navigationBarTextStyle|是
navigationBarTitleText|是
networkTimeout|是
subpackages|是
tabBar|是
usingComponents|是

#### 拓展能力 {#extended-abilities}

能力|是否支持
:---|---
fetch|是
i18n|是

#### 小程序其他原生能力 {#other-native-abilities}

能力|支持度
:---|---
wxs|支持
animation|支持组件的animation属性，支持所有animation对象方法(export、step、width、height、rotate、scale、skew、translate等等)