---
title: 跨端适配
summary: "介绍 Ray 通过文件后缀同构和 @ray-js/env 运行时环境变量实现跨平台适配的方法。"
tags: [Ray跨端适配, 文件后缀同构.web.tsx与.tuya.tsx, "@ray-js/env运行时平台判断"]
questions:
  - Ray 支持哪些文件后缀来区分不同平台的代码？
  - .web.tsx、.mini.tsx、.wechat.tsx、.tuya.tsx 的加载优先级是什么？
  - 如何通过 --target 参数指定构建的目标平台？
  - "@ray-js/env 提供了哪些运行时环境变量来判断当前平台？"
  - 如何在运行时代码中用 isTuya 和 isWechat 区分智能小程序和微信小程序逻辑？
---

# 跨端适配

## 文件同构

工程体系中，可通过文件后缀形式编写特定平台的逻辑。

- `.tsx` 通配
- `.web.tsx` Web 平台
- `.mini.tsx` 小程序平台
  - `.wechat.tsx` 微信小程序
  - `.tuya.tsx` 智能小程序
  <!-- - `.native.tsx` React Native 平台
  - `.ios.tsx` React Native iOS 端
  - `.android.tsx` React Native Android 端 -->

通过 CLI 命令 `--target` 参数，指定构建和调试的目标平台，然后按优先级（从下至上）加载对应的文件。

## 运行时

通过运行时环境变量区分。

```js
import {
  isWeb,
  isWechat,
  isTuya,
  isMiniProgram,
  isIOS,
  isAndroid,
  isNative,
} from '@ray-js/env';
```

示例：

```js
import { isTuya, isWechat } from '@ray-js/env';

export function say() {
  if (isTuya) {
    // 智能小程序逻辑
  } else if (isWechat) {
    // 微信小程序逻辑
  } else {
    //
  }
}
```