---
title: Ecosystem Compatibility
---

## Overview

Years of development in mini program frameworks by platforms like WeChat, Alipay, and TikTok have brought proven and excellent components and solutions. To help you develop swiftly and integrate established solutions easily, Tuya MiniApp frameworks have been adapted to the WeChat Mini Program ecosystem (excluding WeChat native APIs). `The base library must be 2.12.0 or later` to support component reuse.

## Try out

The [Vant Weapp](https://youzan.github.io/vant-weapp/#/home) library has been integrated into Tuya MiniApp. Scan the code using the Tuya app to give it a try.

<Image src="/images/guide/vant-weapp.png" style={{width: '200px'}} />

- Native Mini App syntax

<DemoBlock 
  githubUrl="https://github.com/Tuya-Community/tuya-miniapp-demo/tree/master/vant-weapp" 
  qrCodeUrl="/images/qrCode/vant-weapp.png" 
  lang="en">
</DemoBlock>

- Ray syntax

<DemoBlock 
  githubUrl="https://github.com/Tuya-Community/tuya-miniapp-demo/tree/master/rayUseWX" 
  qrCodeUrl="/images/qrCode/rayWx.png" 
  lang="en">
</DemoBlock>

## How to adapt

- The base library version must be 2.12.0 or later.
- Tuya MiniApp IDE must be 0.5.4 or later.

### Configure project

Compatibility mode is disabled by default. You can enable it with `compilerOptions.compatible` in ` project.tuya.json `.

```diff
{
  "projectname": "your-app",
  "dependencies": {
    "BaseKit": "3.0.0",
    "MiniKit": "3.0.0",
    "BizKit": "3.0.1"
  },
+  "compilerOptions": {
+    "compatible": ["wx"]
+  },
  "baseversion": "2.12.0",
}
```

> Currently, only `wx` compatibility is supported.

The compatibility mode supports `.wxml`, `.wxs`, `wx:` syntax, `wx` object, and basic APIs such as `wx.showToast()`.


### Import component

Tuya MiniApp supports importing third-party npm packages without the need to build a separate package. Adaptation is required when using `usingComponents` to import components.

#### Use @vant/weapp component

[@vant/weapp](https://youzan.github.io/vant-weapp/#/intro) is a UI component library based on WeChat Mini Program. It is compatible with Tuya MiniApp and used similarly to WeChat Mini Program.

Import the component through `usingComponents`

```json
{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
}
```

Check the `miniprogram` declaration in [@vant/weapp/package.json](https://unpkg.com/browse/@vant/weapp/package.json).

In Tuya MiniApp, import files directly from the `lib` directory using the following method.


```json
{
  "usingComponents": {
    "van-button": "@vant/weapp/lib/button/index"
  }
}
```

#### Use WeChat recycle-view

[recycle-view](https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/en/extended/component-plus/recycle-view.html) is a high-performance list component from WeChat Mini Program. It is compatible with Tuya MiniApp and used similarly to WeChat Mini Program.

Import the component through `usingComponents`

```json
{
  "usingComponents": {
    "recycle-view": "miniprogram-recycle-view/recycle-view",
    "recycle-item": "miniprogram-recycle-view/recycle-item"
  }
}
```

Check the `miniprogram` declaration in [miniprogram-recycle-view/package.json](https://unpkg.com/browse/miniprogram-recycle-view/package.json).

In Tuya MiniApp, import files directly from the `miniprogram_dist` directory using the following method.

```json
{
  "usingComponents": {
    "recycle-view": "miniprogram-recycle-view/miniprogram_dist/recycle-view",
    "recycle-item": "miniprogram-recycle-view/miniprogram_dist/recycle-item"
  }
}
```

### Conclusion

When importing component libraries from the WeChat community, you only need to change the path with `usingComponents`. They are used similarly to WeChat Mini Program.

The path should match the `miniprogram` value in the `package.json` of the corresponding component library.


## Notes

The community compatibility is in beta. While most UI component libraries can work, there are also some incompatibilities.

- [Built-in behavior](https://developers.weixin.qq.com/miniprogram/en/dev/framework/custom-component/behaviors.html#Built-in-Behaviors)
- Abstract nodes and placeholder components
- `requirePlugin` and `requireMiniProgram`
- Two-way binding
- canvasContext
- Event system: `longpress`, `longtap`, `touchforcechange`, and `animationiteration`
- Tuya MiniApp does not have `wx` object APIs like `wx.revokeBufferURL`.