痛点
在i18n多语言模块使用过程中，发现下面几个问题，需要解决
1）uni-best框架下，$t功能函数无法实时的切换语言，可能跟使用有关
2）uni-best建议的translate方式在vue块外使用太繁琐，希望不用导入，直接书写$t使用。统一逻辑，减少复杂度
目标
需要完成的目标如下
1）将多语言模块放到公共区域，可能会导致原生标题无法正常切换语音。这个无所谓，因为标题栏已经custom定制并组件化了
2）修复无法正常实时切换语言的$t，这个可能跟使用方式有关，anyway，让它能按原模式正常工作
3）在任何地方都可以使用$t功能，无论是template还是script部分
实现
uni-best的translate方法代码实现了一个很好的思路，只是无法支持占位符的功能。让我们改进它
/**
* 任意文件使用$t翻译方法，需要在app里全局导入
* @param { string } localeKey 多语言的key，eg: "app.name"
*/
export const translate = (localeKey: string, opt: Record<string, any> = {}) => {
if (!localeKey) {
console.error(`[i18n] Function translate(), localeKey param is required`)
return ''
}
const locale = uni.getLocale()
const message = messages[locale]
if (Object.keys(message).includes(localeKey)) {
const template = message[localeKey]
// 使用 Object.keys 遍历 params 对象，替换模板中的大括号占位符
return Object.keys(opt).reduce(
(acc, key) => acc.replace(new RegExp(`{${key}}`, 'g'), opt[key]),
template
)
}
return localeKey // 转换不了则原样输出
}
然后在main.ts里把它挂载到全局
import { message, alert, confirm, translate } from '@/utils'
...
export function createApp() {
const app = createSSRApp(App)
...
app.use(i18n)
app.config.globalProperties.$t = translate // 覆盖不能正常工作的$t函数
// #ifdef MP-WEIXIN
// 由于微信小程序的运行机制问题，需声明如下一行，H5和APP非必填
app.config.globalProperties._i18n = i18n
// #endif
return {
app
}
}
至于在任意位置使用，让我们把translate挂载到代码部分的全局
// 安装到全局，覆盖不能正常工作的$t
;(function (global) {
console.log('install')
;(global as any).$t = translate
})(this || window || globalThis)下面是最终完成的i18n.ts模块，添加了语言切换功能的导出。
API.tools.locale.request是后端的语言切换代码，实现前后端语言统一切换，目前只导入了3种语言，需要其它语言可以自行增加
/**
* ccframe i18n模块
* 注意：由于某种未知的原因，uni-best的$t()翻译方法有无法切换语音以及安卓出错的问题，因此使用导出的translate方法进行动态翻译
* @Jim 24/09/20
*/
import { createI18n } from 'vue-i18n'
import en from '@/datas/en.json'
import zhHans from '@/datas/zh-Hans.json'
import zhHant from '@/datas/zh-Hant.json'
const messages = {
en,
'zh-Hant': zhHant,
'zh-Hans': zhHans // key 不能乱写，查看截图 screenshots/i18n.png
}
const i18n = createI18n({
legacy: false, // 解决空白报错问题
locale: uni.getLocale(), // 获取已设置的语言，fallback 语言需要再 manifest.config.ts 中设置
messages
})
type LocaleType = 'en' | 'zh-Hant' | 'zh-Hans'
i18n.global.locale.value = import.meta.env.VITE_FALLBACK_LOCALE
/**
* 任意文件使用$t翻译方法，需要在app里全局导入
* @param { string } localeKey 多语言的key，eg: "app.name"
*/
export const translate = (localeKey: string, opt: Record<string, any> = {}) => {
if (!localeKey) {
console.error(`[i18n] Function translate(), localeKey param is required`)
return ''
}
const locale = uni.getLocale()
const message = messages[locale]
if (Object.keys(message).includes(localeKey)) {
const template = message[localeKey]
// 使用 Object.keys 遍历 params 对象，替换模板中的大括号占位符
return Object.keys(opt).reduce(
(acc, key) => acc.replace(new RegExp(`{${key}}`, 'g'), opt[key]),
template
)
}
return localeKey // 转换不了则原样输出
}
const langMapper: Record<string, string> = {
'zh-Hans': 'zh-CN',
'zh-Hant': 'zh-TW',
en: 'en-US'
}
export const setLocale = async (locale: LocaleType) => {
await API.tools.locale.request({ lang: langMapper[locale] })
// #ifdef APP-PLUS
setTimeout(() => {
// 如果是APP，需要等待重新启动页面
i18n.global.locale.value = locale
uni.setLocale(locale)
}, 300)
// #endif
// #ifndef APP-PLUS
i18n.global.locale.value = locale
uni.setLocale(locale)
// #endif
// currentLang.value = locale
}
// 安装到全局，覆盖不能正常工作的$t
;(function (global) {
console.log('install')
;(global as any).$t = translate
})(this || window || globalThis)
export default i18n
/** 非vue 文件使用 i18n
export const testI18n = () => {
console.log(t('app.name'))
// 下面同样生效
uni.showModal({
title: 'i18n 测试',
content: t('app.name')
})
} */
然后就可以简单愉快的使用多语言功能了。
页面上$t('login.enterPhone')根据语言显示“输入手机号码”：
<up-input
fontSize="32rpx"
:placeholder="$t('login.enterPhone')"
border="surround"
v-model="data.userMobile"
style="letter-spacing: 2rpx"
@change="data.mobileErr = ''"
type="number"
maxlength="11"
/>
代码片段，这个是form表单验证公共库里的使用：
required(error?: string): Validator {
this.push({
required: true,
validator: (rule: any, val: any, callback: (error?: Error) => void) => {
// 补充验证模式
return val !== undefined && val !== null && val !== ''
},
message:
error ??
(this.labelText
? $t('utils.validator.required') + this.labelText
: $t('utils.validator.notEmpty')),
trigger: ['change', 'blur']
})
return this
}
$t('utils.validator.required')根据语言输出：请输入
$t('utils.validator.notEmpty')根据语言输出：内容不能为空
完善Typescript类型定义
这样使用起来，还有那么一点不舒服，就是在script中使用$t时，会报错类型找不到红红的一片（实际编译没问题）。对于代码强迫症人会有点一点受不了，那么让这个错误的爆红消失掉：
unibest里原本带了i18n.d.ts文件，把我们挂载到script全局的定义添加进去：
/* eslint-disable no-unused-vars */
export {}
declare module 'vue' {
interface ComponentCustomProperties {
$t: (key: string, opt?: Record<string, any>) => string
// $tm: (key: string, opt?: Record<string, any>) => [] | { [p: string]: any }
}
}
declare global {
function $t(localeKey: string, opt?: Record<string, any>): string
}
刷新一下vscode，不爆红了，完美~
