更新记录

0.0.4(2024-07-25) 下载此版本

  • chore: 更新文档

0.0.3(2024-07-05) 下载此版本

  • feat: 增加 缓存key uVueI18nLocale,可通过uni.getStorageSync('uVueI18nLocale')获取上次缓存语言,保持应用退出再启动语言不变
  • fix: 修复 ios 报错的问题

0.0.2(2024-06-30) 下载此版本

  • feat: 增加$t插值功能
  • feat: 增加$tc复数功能
  • feat: 增加tabbar规则
查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.21,Android:支持,iOS:支持,HarmonyOS:不确定 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

lime-i18n

安装

在市场导入即可

基础使用

// main.uts
import { createI18n } from '@/uni_modules/lime-i18n'

//目录自己决定
import zhCN from './locales/zh-CN'
import enUS from './locales/en_US'

const i18n = createI18n({
   // 使用uni.getStorageSync('uVueI18nLocale') 能获取上次退出应用后保存的语言
  locale: 'zh-CN', // 默认显示语言
  fallbackLocale: 'en-US',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
}) 

export function createApp(){
    const app = createSSRApp(App);
    app.use(i18n)
    //....
}

切换语言

使用创建的i18n切换

// 假设在这个文件里使用createI18n创建i18n,创建步骤就是上面 基础使用
import i18n from 'xxx/locales';

i18n.global.locale.value = 'zh-CN'

模板中

<template>
    <view>
        <text>测试:{{ $t('headMenus.userName') }}</text>
        <button @click="$locale.value = $locale.value != 'zh-CN' ? 'zh-CN' : 'en-US'">切换{{$locale}}</button>
    </view>
</template>

选项式API

  export default {
    data() {
      return {

      }
    },
    methods: {
        onClick() {
            this.$locale.value = this.$locale.value != 'zh-CN' ? 'zh-CN' : 'en-US'
        }
    }
  }

组合式API

import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
const onClick = () => {
    if(instance == null) return
    instance.proxy!.$locale.value = instance.proxy!.$locale.value != 'zh-CN' ? 'zh-CN' : 'en-US'
}

延迟加载

直接调用创建的

// 模拟请求后端接口返回
setTimeout(() => {
    // 直接调用创建的
    i18n.global.setLocaleMessage('zh-CN', zhCN)
}, 5000)

选项组合API

// 模拟请求后端接口返回
setTimeout(() => {
    this.$i18n.global.setLocaleMessage('zh-CN', zhCN)
}, 5000)

组合式API

// 模拟请求后端接口返回
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
setTimeout(() => {
    instance.proxy!.$i18n.global.setLocaleMessage('zh-CN', zhCN)
}, 5000)

格式化

具名插值

语言环境信息如下:

const messages = {
  en: {
    message: {
      hello: '{msg} world'
    }
  }
}

模板如下:

<text>{{ $t('message.hello', { msg: 'hello' }) }}</text>

输出如下:

<text>hello world</text>

列表插值

语言环境信息如下:

const messages = {
  en: {
    message: {
      hello: '{0} world'
    }
  }
}

模板如下:

<text>{{ $t('message.hello', ['hello']) }}</text>

输出如下:


<text>hello world</text>

链接插值

如果有一个翻译关键字总是与另一个具有相同的具体文本,你可以链接到它。要链接到另一个翻译关键字,你所要做的就是在其内容前加上一个@:符号后跟完整的翻译键名,包括你要链接到的命名空间。
语言环境信息如下:

const messages = {
  en: {
    message: {
      the_world: 'the world',
      dio: 'DIO:',
      linked: '@:message.dio @:message.the_world !!!!'
    }
  }
}

模板如下:

<text>{{ $t('message.linked') }}</text>

输出如下:

<text>DIO: the world !!!!</text>

内置修饰符

如果语言区分字符大小写,则可能需要控制链接的区域设置消息的大小写。链接邮件可以使用修饰符@.modifier:key 进行格式化

以下修饰符当前可用

  • upper: 链接消息中的所有字符均大写
  • lower: 小写链接消息中的所有字符
  • capitalize: 大写链接消息中的第一个字符

语言环境信息如下:

const messages = {
  en: {
    message: {
      homeAddress: 'Home address',
      missingHomeAddress: 'Please provide @.lower:message.homeAddress'
    }
  }
}

模板如下:

<text>{{ $t('message.homeAddress') }}</text>
<text class="error">{{ $t('message.missingHomeAddress') }}</text

输出如下:

<text>Home address</text>
<text class="error">Please provide home address</text>

自定义修饰符

如果要使用非内置修饰符,则可以使用自定义修饰符。

const i18n = createI18n({
  locale: 'en',
  messages: {
    // set something locale messages ...
  },
  // set custom modifiers at `modifiers` option
  modifiers: {
    snakeCase: (str:string):string => str.split(' ').join('_')
  }
})

区域设置消息如下:

const messages = {
  en: {
    message: {
      snake: 'snake case',
      custom_modifier: "custom modifiers example: @.snakeCase:{'message.snake'}"
    }
  }
}

复数

你可以使用复数进行翻译。你必须定义具有管道 | 分隔符的语言环境,并在管道分隔符中定义复数。

*您的模板将需要使用 $tc() 而不是 $t()
语言环境信息如下:

const messages = {
  en: {
    car: 'car | cars',
    apple: 'no apples | one apple | {count} apples'
  }
}

模板如下:

<text>{{ $tc('car', 1) }}</text>
<text>{{ $tc('car', 2) }}</text>

<text>{{ $tc('apple', 0) }}</text>
<text>{{ $tc('apple', 1) }}</text>
<text>{{ $tc('apple', 10, { count: 10 }) }}</text>

输出如下:

<text>car</text>
<text>cars</text>

<text>no apples</text>
<text>one apple</text>
<text>10 apples</text>

通过预定义的参数访问该数字

你无需明确指定复数的数字。可以通过预定义的命名参数 {count} 和/或 {n} 在语言环境信息中访问该数字。如有必要,你可以覆盖这些预定义的命名参数。
语言环境信息如下:

const messages = {
  en: {
    apple: 'no apples | one apple | {count} apples',
    banana: 'no bananas | {n} banana | {n} bananas'
  }
}

模板如下:

<text>{{ $tc('apple', 10, { count: 10 }) }}</text>
<text>{{ $tc('apple', 10) }}</text>

<text>{{ $tc('banana', 1, { n: 1 }) }}</text>
<text>{{ $tc('banana', 1) }}</text>
<text>{{ $tc('banana', 100, { n: 'too many' }) }}</text>

输出如下:

<text>10 apples</text>
<text>10 apples</text>

<text>1 banana</text>
<text>1 banana</text>
<text>too many bananas</text>

自定义复数

但是,这种多元化并不适用于所有语言(例如,斯拉夫语言具有不同的多元化规则)。

为了实现这些规则,您可以将可选的 pluralizationRules 对象传递给 UvueI18n 构造函数选项。

使用针对斯拉夫语言(俄语,乌克兰语等)的规则的非常简化的示例:

function customRule(choice:number, choicesLength:number):number {
  if (choice == 0) {
    return 0
  }

  const teen = choice > 10 && choice < 20
  const endsWithOne = choice % 10 == 1
  if (!teen && endsWithOne) {
    return 1
  }
  if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
    return 2
  }

  return choicesLength < 4 ? 2 : 3
}

const i18n = createI18n({
  locale: 'ru',
  // the custom rules here ...
  pluralizationRules: {
    ru: customRule
  },
  messages: {
    ru: {
      car: '0 машин | {n} машина | {n} машины | {n} машин',
      banana: 'нет бананов | {n} банан | {n} банана | {n} бананов'
    }
  }
})

这将有效地实现以下目的:

<view>Car:</view>
<text>{{ $tc('car', 1) }}</text>
<text>{{ $tc('car', 2) }}</text>
<text>{{ $tc('car', 4) }}</text>
<text>{{ $tc('car', 12) }}</text>
<text>{{ $tc('car', 21) }}</text>

<view>Banana:</view>
<text>{{ $tc('banana', 0) }}</text>
<text>{{ $tc('banana', 4) }}</text>
<text>{{ $tc('banana', 11) }}</text>
<text>{{ $tc('banana', 31) }}</text>

结果如下:

<view>Car:</view>
<text>1 машина</text>
<text>2 машины</text>
<text>4 машины</text>
<text>12 машин</text>
<text>21 машина</text>

<view>Banana:</view>
<text>нет бананов</text>
<text>4 банана</text>
<text>11 бананов</text>
<text>31 банан</text>

切换tabBar文本

这是UvueI18n独有的功能,方便切换tabBar上的文本,暂定这个规则

const i18n = createI18n({
    tabBars: {
        'en-US': ['home','User Center'],
        'zh-CN': ['首页','用户中心'],
    }
})

日期时间本地化

由于APP不支持Intl.DateTimeFormat,故这功能无法在APP上使用。

日期时间格式如下:

const datetimeFormats = {
  'en-US': {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    },
    long: {
      year: 'numeric', month: 'short', day: 'numeric',
      weekday: 'short', hour: 'numeric', minute: 'numeric'
    }
  },
  'zh-CN': {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    },
    long: {
      year: 'numeric', month: 'short', day: 'numeric',
      weekday: 'short', hour: 'numeric', minute: 'numeric', hour12: true
    }
  }
}

如上,你可以定义具名的 (例如:short、long 等) 日期时间格式,并需要使用 ECMA-402 Intl.DateTimeFormat 的选项

之后就像语言环境信息一样,你需要指定 UvueI18n 构造函数的 dateTimeFormats 选项:

const i18n = createI18n({
  datetimeFormats
})

模板如下:

<text>{{ $d(new Date(), 'short') }}</text>
<text>{{ $d(new Date(), 'long', 'zh-CN') }}</text>

第一个参数是日期时间可用值(例如,timestamp)作为参数,第二个参数是日期时间格式名称作为参数。最后一个参数 locale 值作为参数。Date

<text>Jun 30, 2024</text>
<text>2024年6月30日周日 下午6:35</text>

数字格式

由于APP不支持Intl.NumberFormat,故这功能无法在APP上使用。

你可以使用你定义的格式来本地化数字。

const numberFormats = {
  'en-US': {
    currency: {
      style: 'currency', currency: 'USD', notation: 'standard'
    },
    decimal: {
      style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2
    },
    percent: {
      style: 'percent', useGrouping: false
    }
  },
  'zh-CN': {
    currency: {
      style: 'currency', currency: 'CNY', useGrouping: true, currencyDisplay: 'symbol'
    },
    decimal: {
      style: 'decimal', minimumSignificantDigits: 3, maximumSignificantDigits: 5
    },
    percent: {
      style: 'percent', useGrouping: false
    }
  }
}

如上,你可以指定具名的 (例如:currency 等) 的数字格式,并且需要使用 ECMA-402 Intl.NumberFormat 的选项

之后,在使用区域设置消息时,您需要指定以下选项:numberFormatscreateI18n

const i18n = createI18n({
  numberFormats
})

以下是在模板中使用的示例:$n

<text>{{ $n(10000, 'currency') }}</text>
<text>{{ $n(10000, 'currency', 'zh-CN') }}</text>
<text>{{ $n(10000, 'currency', 'zh-CN', { useGrouping: false }) }}</text>
<text>{{ $n(987654321, 'currency', { notation: 'compact' }) }}</text>
<text>{{ $n(0.99123, 'percent') }}</text>
<text>{{ $n(0.99123, 'percent', { minimumFractionDigits: 2 }) }}</text>
<text>{{ $n(12.11612345, 'decimal') }}</text>
<text>{{ $n(12145281111, 'decimal', 'zh-CN') }}</text>

第一个参数是作为参数的数值,第二个参数是作为参数的数字格式名称。最后一个参数 locale 值作为参数。

结果如下:

<text>$10,000.00</text>
<text>¥10,000.00</text>
<text>¥10,000.00</text>
<text>$988M</text>
<text>99%</text>
<text>99.12%</text>
<text>12.12</text>
<text>12,145,000,000</text>

API

获取方法 传参 locale,设置方法 传参locale format

例如:

// 可以手动引入i18n,例如你单独文件创建了i18n,就可以导入这个文件使用i18n
i18n.global.setLocaleMessage('zh-CN', zhCN)
i18n.global.getLocaleMessage('zh-CN')

// 如果是选择项API 可以使用
this.$i18n.global.setLocaleMessage

// 如果是组合式API 可以先获取当前组件实例
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
instance.proxy!.$i18n.global.setLocaleMessage

setLocaleMessage

getLocaleMessage

mergeLocaleMessage

getDateTimeFormat

setDateTimeFormat

mergeDateTimeFormat

getNumberFormat

setNumberFormat

mergeNumberFormat

setTabBar

getTabBar

<!-- ## useI18n 创建一个小范围的i18n,例如在当前页面下使用,本功能未实测过,因为`useI18n`导出的方法需要写全参数,不能省略。不建议使用。 ```html {{ t('headMenus.userName') }} ``` ```js import { useI18n } from '@/uni_modules/lime-i18n'; const {locale, setLocaleMessage, t} = useI18n() ``` -->

打赏

如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问