更新记录

0.0.3(2024-12-26) 下载此版本

新增功能:语言文本扩展,用于组件里扩展自己的多语言(api:languageTextExtension(message: object)) 修改使用文档: 把locale目录改为language目录,这样就h5能导入json了

0.0.2(2024-12-25) 下载此版本

把导入.json文件改为导入.uts文件,以此来解决h5不能加载问题

0.0.1(2024-12-25) 下载此版本

几年没玩uniapp了,回来看看

查看更多

平台兼容性

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

lql-i18n

简单轻量的 UTS 国际化插件,可修改tabBar,觉得有用可自行扩展功能。

使用方法

  1. 创建 language 目录

  2. 在目录下创建如下文件:zh.json、 en.json、 index.uts

复制代码├── language
│   ├── zh.json
│   ├── en.json
│   └── index.uts

zh.json 示例

复制代码export default {
    "setting_appearance": "深色模式",
    "language": "语言",
    "tabBar_0": "首页",
    "tabBar_1": "我的"
}

en.json 示例

复制代码export default {
    "app_name": "suancaiyu",
    "setting_appearance": "Dark Mode",
    "language": "Language",
    "tabBar_0": "Home",
    "tabBar_1": "My"
}

index.uts

复制代码import zh from './zh.json'
import en from './en.json'

export default {
    zh,
    en,
}

当然你可能需要更具需求添加 zh-Hans.jsonzh-Hant.json 等更多的不同国家语言的uts

  1. main.uts文件加入
复制代码import { createSSRApp } from 'vue'
import App from './App.uvue'

import messages from './language/index.uts'
import { I18nOptions } from './uni_modules/lql-i18n/interface'
import { createI18n } from '@/uni_modules/lql-i18n/index.uts'

let language = 'zh'
const sysLanguage = uni.getDeviceInfo({filter: ['osLanguage']}).osLanguage
if (typeof sysLanguage == 'string') {
    language = sysLanguage as string
}
let i18nConfig = { 
    locale: language, 
    messages: messages
} as I18nOptions
const i18n = createI18n(i18nConfig)

export function createApp() {
  const app = createSSRApp(App)
  app.use(i18n)
  return {
    app
  }
}
  1. 在uvue中使用
复制代码
<testcomp :title="$t('language')"/>

注意:在language目录下的语言文件中key包含的下划线在使用时用代替.

复制代码
<testcomp :title="$t('setting.appearance')"/>

script中使用

复制代码
import { t } from '@/uni_modules/lql-i18n/index.uts'
const name = computed(() => t('app.name') as string)

在插件组件中使用, 可以下载示例项目查看写法

复制代码lqlfav
├── lqlfav.vue
├── language
│   ├── zh.json
│   ├── en.json
│   └── index.uts
复制代码
import { languageTextExtension, t } from '@/uni_modules/lql-i18n/index.uts'
import message from './language/index.uts'
// 插入组件自己的多语言
languageTextExtension(message)

const text = computed(() => t('lqlfav_follow') as string)

tabBar 文本的使用方法

在language目录下的语言文件中写入固定的格式tabBar_{tab索引}, 索引从0开始

复制代码{
    "tabBar_0": "首页",
    "tabBar_1": "我的"
}

注: tabBar 不包含 midButton

延迟加载,用于网络请求

复制代码const instance = getCurrentInstance()
setTimeout(() => {
  instance.proxy?.$pushLanguage('zh', zh)
    instance.proxy?.$setLanguage('zh')
}, 3000)

问题总结

1.不要在locale目录下放置多语言

因为locale目录导入json, h5端会报如下错

复制代码Uncaught ReferenceError: UTSJSONObject is not defined

问题原因由评论区网友@DCloud_uniCloud_WYQ已给出

复制代码web端是支持引用json文件的,你的报错是由于使用了locale目录,这个目录是用于pages.json等文件国际化的

2. 语言文件不能用app.name方式,只能用app_name这种带下划线的方式;否则会出现如下错误, 无语

复制代码[plugin:uni:app-uts] 编译失败
error: Name contains illegal characters: .

分享工具

语言快速翻译

https://www.i18ncode.com/zh

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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