快應(yīng)用 多語言覆蓋

快應(yīng)用平臺的能力會覆蓋多個(gè)國家地區(qū)，平臺支持多語言的能力后，可以做到讓一個(gè)快應(yīng)用產(chǎn)品（一個(gè) RPK 文件）同時(shí)支持多個(gè)語言版本的切換，開發(fā)者無需開發(fā)多個(gè)不同語言的源碼項(xiàng)目，避免給項(xiàng)目維護(hù)帶來困難。

使用系統(tǒng)默認(rèn)的語言，開發(fā)者配置多語言的方式非常簡單，只需要?定義資源?與?引用資源?兩個(gè)步驟即可；如果允許用戶在快應(yīng)用中修改地區(qū)語言，請參考第三步?獲取更新語言?；

定義資源文件

資源文件用于存放多個(gè)語言的業(yè)務(wù)信息定義，與其它技術(shù)平臺類似（它們使用?properties文件?或者?xml文件?的格式），快應(yīng)用平臺使用?JSON文件?保存資源定義；

在項(xiàng)目源碼src目錄下定義?i18n文件夾?，內(nèi)部放置每個(gè)語言地區(qū)下的資源定義文件即可；其中文件名定義為：?zh-CN.json?、?zh.json?；

如果開發(fā)者當(dāng)前產(chǎn)品僅計(jì)劃支持一種語言，同時(shí)還希望用到多語言能力，那么僅聲明一個(gè)名稱為?defaults.json?的文件即可；

每個(gè) JSON 文件的內(nèi)容格式如下：

{
  "message": {
    "pageA": {
      "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引用對應(yīng)內(nèi)容?"pure-text-content";

頁面中引用資源

頁面中多語言的使用語法，主要體現(xiàn)在 ViewModel 的幾個(gè)函數(shù)上，如：$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>

簡單格式化方法

比如：

// 示例：無額外參數(shù)的格式化
// 輸出："pure-text-content"
this.$t('message.pageA.text')
// 示例：額外參數(shù)為對象，替換引用內(nèi)容中的綁定
// 輸出："type-arg-object"
this.$t('message.pageA.format.object', { name: 'arg-object' })
// 示例：額外參數(shù)為數(shù)組，替換引用內(nèi)容中的綁定
// 輸出："type-arg-array"
this.$t('message.pageA.format.array', ['arg-array'])

單復(fù)數(shù)格式化方法

比如：

// 示例：message的值為兩個(gè)選項(xiàng)時(shí)，傳遞數(shù)值不為單數(shù)
// 輸出："cars"
this.$tc('message.pageA.plurals.double', 0)
// 示例：message的值為兩個(gè)選項(xiàng)時(shí)，傳遞數(shù)值為單數(shù)
// 輸出："car"
this.$tc('message.pageA.plurals.double', 1)
// 示例：message的值為兩個(gè)選項(xiàng)時(shí)，傳遞數(shù)值不為單數(shù)
// 輸出："cars"
this.$tc('message.pageA.plurals.double', 2)

// 示例：message的值為三個(gè)及以上的選項(xiàng)時(shí)，傳遞數(shù)值不為單數(shù)
// 輸出："no apples"
this.$tc('message.pageA.plurals.three', 0)
// 示例：message的值為三個(gè)及以上的選項(xiàng)時(shí)，傳遞數(shù)值為單數(shù)
// 輸出："one apple"
this.$tc('message.pageA.plurals.three', 1)
// 示例：message的值為三個(gè)及以上的選項(xiàng)時(shí)，傳遞數(shù)值不為單數(shù)
// 輸出："10 apples"
this.$tc('message.pageA.plurals.three', 10)

獲取更新語言

上面的能力用于資源內(nèi)容的格式化，在某些場景下開發(fā)者可能需要獲取當(dāng)前系統(tǒng)的地區(qū)語言 locale 并進(jìn)行更改，來完成不同的邏輯處理：

• 比如：不同的 locale 對應(yīng)的頁面布局不同；
• 比如：開發(fā)者為用戶提供設(shè)置某種語言的能力；

此時(shí)開發(fā)者，可以通過?system.configuration?接口來完成，詳見：系統(tǒng)配置；

比如：

import configuration from '@system.configuration'

// 獲取locale，后續(xù)開發(fā)者可以將locale設(shè)置為VM中的data屬性，并在模板中判斷以區(qū)分不同的布局
const localeObject = configuration.getLocale()
// 轉(zhuǎn)換為字符串格式，如：'zh'或者'zh-CN'
const locale = [localeObject.language, localeObject.countryOrRegion]
  .filter(n => !!n)
  .join('-')

console.info(`獲取當(dāng)前l(fā)ocale：${locale}`)

import configuration from '@system.configuration'

// 設(shè)置locale成功后，通過VM的生命周期函數(shù) onConfigurationChanged 觸發(fā)
configuration.setLocale({
  language: 'zh',
  countryOrRegion: 'CN'
})

修改地區(qū)語言后的回調(diào)

當(dāng)用戶在系統(tǒng)設(shè)置或者通過 configuration.setLocale 切換地區(qū)語言，都會觸發(fā) onConfigurationChanged 回調(diào)，且返回來的 event.type 值為locale

詳情可 參考文檔

示例代碼

// 監(jiān)聽語言、地區(qū)變化
onConfigurationChanged(event) {
  if (event && event.type && event.type === 'locale') {
    console.log('locale or language changed!')
  }
}