面板小程序的国际化多语言使用详情介绍

使用

面板小程序的国际化多语言是开发过程中必不可少的一部分，因此在 ray 中内置了 I18N 模块，该模块依赖了智能小程序内置 I18n 对象。

需要注意的是，面板小程序多语言相比智能小程序多语言额外增加了获取产品多语言的逻辑，用于满足不同产品使用的为同一个面板小程序时，需要配置不同的多语言，您可查阅 产品多语言管理 进一步了解如何进行多语言的管理。

定义多语言

请勿在本地代码内定义除中英文外的多语言。其他语种涉及多地区，本地代码无法全兼容，请在 涂鸦 IoT 平台 的 产品多语言 页面设定 设备面板 的多语言配置。

在 src/i18n/strings.{js,ts} 文件中进行编辑。

// en 和 zh 必须都定义
export default {
  en: {
    hello: 'Hello',
  },
  zh: {
    hello: '你好',
  },
};

多语言规范

bitmap 类型使用详情如下：

bitmap 一般用于定义故障类型节约空间，通过二进制的位表示对应的故障是否存在，上报回来的是对应的十进制。假设一个产品有四种故障型：

• 无故障：十进制 -> 0， 二进制 -> 0000；

• 第一种故障出现： 十进制 -> 1； 二进制 -> 0001；

• 第一种和第二种故障同时出现： 十进制 -> 3； 二进制 -> 0011；

• 所有故障同时出现： 十进制 -> 15； 二进制 -> 1111；

export default {
  en: {
    dsc_edit: 'Edit', // Basic multi language with dsc_ start and name it semantically
    dsc_hour: 'Hour',
    dsc_minute: 'Minute',
    dsc_countdown_on: 'Turn on after {0}',
    dp_switch: 'Switch', // Datapoint (DP) related multi language should be in accordance with the `dp_${dpCode}`
    dp_switch_on: 'Switch is On', // Boolean type datapoint related multi language should be in accordance with the `dp_${dpCode}_${'on' || 'off'}`
    dp_mode_smart: 'Smart Mode', // Enum type datapoint related multi language should be in accordance with the `dp_${dpCode}_${enumValue}`
    dp_fault_0: 'Binary first bit is faulty', // Bitmap type datapoint related multi language should be in accordance with the `dp_${dpCode}_${bit}`
    dp_fault_1: 'Binary second bit is faulty',
  },
  zh: {
    dsc_edit: '编辑', //  基础多语言以 dsc_ 开头并命名语义化即可
    dsc_hour: '时',
    dsc_minute: '分',
    dsc_countdown_on: '设备将在{0}后开启',
    dp_switch: '开关', // 功能点（DP）相关多语言需按照 `dp_${dpCode}` 进行命名
    dp_switch_on: '开关开', // 布尔类型功能点状态相关多语言需按照 `dp_${dpCode}_${'on' || 'off'}` 进行命名
    dp_mode_smart: '智能模式', // 枚举类型功能点状态相关多语言需按照 `dp_${dpCode}_${enumValue}` 进行命名
    dp_fault_0: '第一位故障', // Bitmap 类型功能点状态相关多语言需按照 `dp_${dpCode}_${bit}` 进行命名
    dp_fault_1: '第二位故障',
  },
};

导出多语言

在 src/i18n/index.{js,ts} 文件中进行实例化导出。

// @ray-js/ray^1.2.5 导入方式（推荐）
import { I18N } from '@ray-js/ray'; 
 
// @ray-js/ray 低于 1.2.5，需要使用 @ray-js/panel-sdk
import { kit } from '@ray-js/panel-sdk'
const { I18N } = kit;
 
import Strings from './strings';
 
export default new I18N(Strings);

使用多语言

可在任意需要使用多语言的场景进行调用。

import Strings from '../i18n';
 
const localizedText = Strings.getLang('hello');
 
console.log(localizedText);

上传多语言

仅支持大小小于 1M 的 JSON 文件，此外注意在 涂鸦 IoT 平台 上传的多语言优先级比本地代码定义的优先级高。

1. 找到上传多语言区块。
2. 点击上传多语言。
3. 上传如以下 JSON 格式的中英文多语言文件即可，请注意保证 JSON 文件格式的正确性。

{
  "en": {
    "hello": "Hello"
  },
  "zh": {
    "hello": "你好"
  }
}

 

API

API 示例中的多语言数据源均来自于下方多语言对象

export default {
  en: {
    dsc_edit: 'Edit', // Basic multi language with dsc_ start and name it semantically
    dsc_hour: 'Hour',
    dsc_minute: 'Minute',
    dsc_countdown_on: 'Turn on after {0}',
    dp_switch: 'Switch', // Datapoint (DP) related multi language should be in accordance with the `dp_${dpCode}`
    dp_switch_on: 'Switch is On', // Boolean type datapoint related multi language should be in accordance with the `dp_${dpCode}_${'on' || 'off'}`
    dp_mode_smart: 'Smart Mode', // Enum type datapoint related multi language should be in accordance with the `dp_${dpCode}_${enumValue}`
    dp_fault_0: 'Binary first bit is faulty', // Bitmap type datapoint related multi language should be in accordance with the `dp_${dpCode}_${bit}`
    dp_fault_1: 'Binary second bit is faulty',
  },
  zh: {
    dsc_edit: '编辑', //  基础多语言以 dsc_ 开头并命名语义化即可
    dsc_hour: '时',
    dsc_minute: '分',
    dsc_countdown_on: '设备将在{0}后开启',
    dp_switch: '开关', // 功能点（DP）相关多语言需按照 `dp_${dpCode}` 进行命名
    dp_switch_on: '开关开', // 布尔类型功能点状态相关多语言需按照 `dp_${dpCode}_${'on' || 'off'}` 进行命名
    dp_mode_smart: '智能模式', // 枚举类型功能点状态相关多语言需按照 `dp_${dpCode}_${enumValue}` 进行命名
    dp_fault_0: '第一位故障', // Bitmap 类型功能点状态相关多语言需按照 `dp_${dpCode}_${bit}` 进行命名
    dp_fault_1: '第二位故障',
  },
};

获取多语言

名称

getLang

描述

获取 key 值对应的多语言字符串

请求参数

参数	数据类型	说明	是否必填
key	string	多语言 key 值	是
defaultValue	string	默认值，没有查到对应配置时，返回该值	是

返回参数

参数	数据类型	说明
result	string	返回对应 key 值的多语言字符串，或 defaultValue

请求示例

import Strings from '../i18n';
 
Strings.getLang('on', '开启');
Strings.getLang('on');
Strings.getLang('dsc_edit');

返回示例

'开启';
'I18N@on';
'编辑';

获取功能点多语言

名称

getDpLang

描述

获取 dp code 对应的多语言字符串

请求参数

参数	数据类型	说明	是否必填
code	string	dp code	是
value	string|boolean|number	对应 dp 点的状态值	否

返回参数

参数	数据类型	说明
result	string	返回对应 key 值的多语言字符串，或 code

请求示例

import Strings from '../i18n';
 
Strings.getDpLang('switch', true);
Strings.getDpLang('switch', false);

返回示例

'开关开';
'I18N@dp_switch_off';

获取功能点名称

名称

getDpName

描述

获取 dp 点对应的名称

请求参数

参数	数据类型	说明	是否必填
code	string	dp code	是
defaultName	string	默认名称	否

返回参数

参数	数据类型	说明
result	string	返回对应 key 值的多语言字符串，或 defaultName

请求示例

import Strings from '../i18n';
 
Strings.getDpName('switch');

返回示例

'开关';

获取多语言集合

名称

getDpsLang

描述

获取多语言或 dp 点多语言对应的集合多语言

请求参数

参数	数据类型	说明	是否必填
key	string|object	dp code 或 dp 点集合	是

返回参数

参数	数据类型	说明
result	string|object	返回对应 key 值的多语言字符串，或 dp 点对应的多语言集合

请求示例

import Strings from '../i18n';
 
Strings.getDpsLang('dsc_edit');
Strings.getDpsLang(['dsc_hour', 'dsc_minute', 'dsc_edit']);

返回示例

'编辑'
{dsc_hour: "时", dsc_minute: "分", dsc_edit: "编辑"}

获取功能点枚举值多语言集合

名称

getRangeStrings

描述

根据枚举型 dp 点 schema 描述获取枚举值对应的多语言集合

请求参数

参数	数据类型	说明	是否必填
code	string	dp code	是
schema	object	dp 点对应的 schema 对象	是

返回参数

参数	数据类型	说明
result	object	返回 code 对应 dp 点的 range 及多语言信息

请求示例

import Strings from '../i18n';
 
Strings.getRangeStrings('mode', schema);

返回示例

{mode_smart: "智能模式", mode_cold: "dp_mode_cold"}

格式化字符串

名称

formatString

描述

格式化字符串

请求参数

参数	数据类型	说明	是否必填
str	string	要格式化的文本	是
values	any[]	格式化文本中的对应参数	是

返回参数

参数	数据类型	说明
result	string	格式化后的文案

请求示例

import Strings from '../i18n';
const str = '我们首先要{0}，然后{1}，最后{2}。';
Strings.formatString(str, '起床', '洗漱', '吃饭');

返回示例

'我们首先要起床，然后洗漱，最后吃饭。';

格式化多语言字符串

名称

formatValue

描述

格式化多语言字符串

请求参数

参数	数据类型	说明	是否必填
key	string	要格式化多语言 key 值	是
values	any[]	格式化文本中的对应参数	是

返回参数

参数	数据类型	说明
result	string	格式化后的文案

请求示例

import Strings from '../i18n';
Strings.formatValue('dsc_countdown_on', '1分钟');

返回示例

'设备将在1分钟后开启';