多语言支持

定义资源文件

资源文件用于存放多个语言的业务信息定义，与其它技术平台类似（它们使用properties文件或者xml文件的格式），快应用平台使用JSON文件保存资源定义。

在项目源码src目录下定义i18n文件夹，内部放置每个语言地区下的资源定义文件即可。多个资源文件会按一定顺序进行匹配，例如：对于zh-CN，则按zh-CN -> zh -> zh-* -> defaults的顺序匹配，其中zh-*匹配到多个，则按字母升序区分大小写排序。

如果开发者当前产品仅计划支持一种语言，同时还希望用到多语言的格式化、复数、本地化等能力，那么仅声明一个名称为defaults.json的文件即可。

每个 JSON 文件的内容格式如下：

{
    "message": {
        "appName":"Quick App Sample",
        "pageA": {
            "pageTitle": "Quick App feature display",
            "text": "pure-text-content",
            "format": {
                "object": "type-{name}",
                "array": "type-{0}"
            },
            "array": [
                "item-type-string",
                {
                    "key": "item-type-object-attribute"
                },
                ["item-type-array"]
            ],
            "plurals": {
                "double": "car | cars",
                "three": "no apples | one apple | {count} apples",
                "format": {
                    "object": "type-{name}",
                    "array": "type-{0}"
                }
            }
        }
    }
}

页面中通过message.pageA.text类似的path引用对应内容"pure-text-content"。

页面中引用资源

页面中多语言的使用语法，主要体现在 ViewModel 的几个函数上，如：$t，这些方法可以在<template>或<script>中使用；

如下代码所示：

<template>
    <div>
        <text>{{ $t('message.pageA.text') }}</text>
        <text>{{ $t('message.pageA.format.object', { name: 'arg-object' }) }}</text>
        <text>{{ $t('message.pageA.format.array', ['arg-array']) }}</text>
    </div>
</template>
<script>
    export default {
        onInit () {
            // 简单格式化：
            this.$t('message.pageA.text')
            this.$t('message.pageA.format.object', { name: 'arg-object' })
            this.$t('message.pageA.format.array', ['arg-array'])
        }
    }
</script>

[h2]简单格式化方法

示例代码

// 示例：无额外参数的格式化
// 输出："pure-text-content"
this.$t('message.pageA.text')
// 示例：额外参数为对象，替换引用内容中的绑定
// 输出："type-arg-object"
this.$t('message.pageA.format.object', { name: 'arg-object' })
// 示例：额外参数为数组，替换引用内容中的绑定
// 输出："type-arg-array"
this.$t('message.pageA.format.array', ['arg-array'])

[h2]单复数格式化方法

示例代码

// 示例：message的值为两个选项时，传递数值不为单数
// 输出："cars"
this.$tc('message.pageA.plurals.double', 0)
// 示例：message的值为两个选项时，传递数值为单数
// 输出："car"
this.$tc('message.pageA.plurals.double', 1)
// 示例：message的值为两个选项时，传递数值不为单数
// 输出："cars"
this.$tc('message.pageA.plurals.double', 2)
// 示例：message的值为两个选项时，传递数值不为单数
// 输出："no apples"
this.$tc('message.pageA.plurals.three', 0)
// 示例：message的值为三个及以上的选项时，传递数值为单数
// 输出："one apple"
this.$tc('message.pageA.plurals.three', 1)
// 示例：message的值为三个及以上的选项时，传递数值不为单数
// 输出："10 apples"
this.$tc('message.pageA.plurals.three', 10)

获取更新语言

上面的能力用于资源内容的格式化，在某些场景下开发者可能需要获取当前系统的地区语言locale并进行更改，来完成不同的逻辑处理。例如：不同的 locale 对应的页面布局不同；开发者为用户提供设置某种语言的能力；此时开发者，可以通过system.configuration接口来完成，详细请参见“应用配置”。

import configuration from '@system.configuration'
// 获取locale，后续开发者可以将locale设置为VM中的data属性，并在模板中判断以区分不同的布局
const localeObject = configuration.getLocale()
// 转换为字符串格式，如：'zh'或者'zh-CN'
const locale = [localeObject.language, localeObject.countryOrRegion]
    .filter(n => !!n)
    .join('-')
console.info(`获取当前locale：${locale}`)
import configuration from '@system.configuration'
// 设置locale成功后，通过VM的生命周期函数 onConfigurationChanged 触发
configuration.setLocale({
  language: 'zh',
  countryOrRegion: 'CN'
})

修改地区语言后的回调

当用户在系统设置或者通过 configuration.setLocale 切换地区语言，都会触发 onConfigurationChanged 回调。

onConfigurationChanged(data) {
    // 输出 {"type":"locale"}
    console.info(JSON.stringify(data))
}

manifest.json中配置国际化

对manifest.json中配置的应用名称和页面标题进行国际化处理。

• 应用名称：将name设置为JSON文件中定义应用名称的参数，例如：${message.appName}
• 页面标题：将display下的titleBarText设置为JSON文件中定义页面标题的参数，例如：${message.pageA.pageTitle}