1.语言切换
app的语言基于当前手机系统的语言进行显示,所以如果需要切换app的语言,只需要将手机的系统语言设置成对应语言。当然,当前的app只支持中文和英文两种语种。
2.语种添加开发说明
2.1 配置文件国际化
如果需要对添加在配置文件中的内容进行翻译,如page.json文件,需要使用双%包裹,如"%xxx%",这是基于框架本身的标准设计的。如下代码所示:
{
"path": "pages/messageDetailList/index",
"style": {
"navigationBarTitleText": "%Message Details%",
"enablePullDownRefresh": false
}
},
其中"%Message Details%"就是需要被翻译的部分,他会按照你给的翻译文件进行翻译。这部分主要是对顶部提示及底部导航栏进行翻译。
控制app语言的核心代码如下所示:
// 设置app语言
const setLocale = () => {
const systemInfo = uni.getSystemInfoSync()
console.log('systemInfo.language', systemInfo.language);
if (systemInfo.language.includes('en')) {
// 设为英文
uni.setLocale('en')
commonStore.changeLanguage('en')
} else if (systemInfo.language.includes('zh')) {
// 设为中文
uni.setLocale('zh-Hans')
commonStore.changeLanguage('zh-Hans')
} else {
uni.setLocale('zh-Hans')
commonStore.changeLanguage('zh-Hans')
}
}
这部分代码主要是对配置文件中的语言进行设置,uniapp有他的规范,在项目根目录的locale目录下配置语言json文件,locale/语言地区代码
.json,如:en.json,zh-Hans.json,zh-Hant.json
├── locale
│ ├── en.json
│ ├── zh-Hans.json
│ └── zh-Hant.json
2.2 js代码国际化
js代码国际化基于一个方法来实现,通过对比语言文件来获取到准确的翻译,核心代码及使用方式如下所示:
const i18n = (target) => {
const commonStore = useCommonStore()
const module = commonStore.language
if (language[module] && language[module][target]) {
return language[module][target]
} else {
return target
}
}
i18n('xxxxxxx') // 使用
如果只是单纯的添加语种,这部分代码并不需要更改。只需要将翻译文件添加到local目录下即可。
2.3 系统对应的language
因为机型不同,获取到的language会有部分不同,但是前缀是一样的,如中文是zh-xx,英文是en-xx,所以这里可以通过前缀来判断对应的系统语言,如下是部分语言对应的language前缀。
en: 英文
zh: 中文
ko: 韩文
ja: 日文
vi: 越南语
ru: 俄语
in: 印度尼西亚语
de: 德语
fr: 法语
es: 西班牙语
ar: 阿拉伯语
it: 意大利语
nl: 荷兰语
pt: 葡萄牙语
sw: 斯瓦希里语
pl: 波兰语
hi: 印地语
tr: 土耳其语