Ray 开发框架——小程序框架配置开发（一）

跨端适配

文件同构

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

• .tsx 通配
• .web.tsx Web 平台
• .mini.tsx 小程序平台
  • .wechat.tsx 微信小程序
  • .tuya.tsx 智能小程序

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

运行时

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

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

示例：

import { isTuya, isWechat } from '@ray-js/env';
 
export function say() {
  if (isTuya) {
    // 智能小程序逻辑
  } else if (isWechat) {
    // 微信小程序逻辑
  } else {
    //
  }
}

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。

 

全局配置

全局配置描述项目运行时的配置信息。配置文件 src/global.config.ts 格式如下：

import { GlobalConfig } from '@ray-js/types';
 
// 微信小程序全局配置
export const wechat = {
  // 微信小程序全局配置 */
};
 
// 智能小程序全局配置
export const tuya = {};
 
// Web H5 全局配置
export const web = {};
 
// 通用配置
const globalConfig: GlobalConfig = {
  basename: '',
};
 
export default globalConfig;

• 微信小程序全局配置
• 智能小程序全局配置

当存在跨平台配置，则通过 export const <$target> = {} 的方式导出，应当总是默认导出通用配置。

通用配置

basename

类型：string

路由基准路径。

 

工程配置

用于声明工程编译时的配置信息。配置文件 ray.config.ts 格式如下：

import { RayConfig } from '@ray-js/types';
 
const config: RayConfig = {};
 
export default config;

resolveAlias

类型: object

模块别名，可用于构建时替换模块名，或缺省路径。默认支持 { '@': './src' }。

- import Foo from '../../components/foo/index';
+ import Foo from '@/components/foo/index';

 👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。