更新记录
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,觉得有用可自行扩展功能。
使用方法
-
创建
language
目录 -
在目录下创建如下文件: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.json
、zh-Hant.json
等更多的不同国家语言的uts
- 在
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
}
}
- 在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: .