总体是基本参考实例中的多语言代码。
1,手动选择语言
在login.vue中增加语言下拉框:
computed中增加数据:
locales() {
return [{
text: this.$t('locale.en'),
code: 'en'
},
{
text: this.$t('locale.zh-hans'),
code: 'zh-Hans'
},
{
text: this.$t('locale.zh-hant'),
code: 'zh-Hant'
}
]
}
<picker class="m-select" @change="bindPickerChange" :value="localeIndex" :range="locales" range-key="text">
<view>
{{locales[localeIndex].text}}
</view>
</picker>
调用的函数:
bindPickerChange: function(e) {
this.changeLocale(e.detail.value)
},
changeLocale: function(index){
this.localeIndex= index
this.localeCode = this.locales[this.localeIndex].code
uni.setLocale(this.localeCode);
this.$i18n.locale = this.localeCode;
},
2,加载时自动选择语言,直接从uni.getLocale()获取当前语言,并给下拉框自动赋值:
//默认选中语言
if(uni.getLocale()=='zh-Hans'){
this.localeIndex=1;
}else if(uni.getLocale()=='zh-Hant'){
this.localeIndex=2;
}else{
this.localeIndex=0;
}
this.changeLocale(this.localeIndex)
至此,多语言准备工作完成,剩下只需要分别在local目录的en.json、zh-Hans.json以及zh-Hant.json中分别编写变量以及变量对应的多语言文字:
如en.json:
{
"add": "Add",
"refresh": "Refresh",
"submit": "Submit",
"reset": "Reset",
"confirm": "Confirm",
"cancel": "Cancel",
"success": "Success",
"failue": "Failue"
}
zh-Hans.json:
{
"add": "增加",
"refresh": "刷新",
"submit": "提交",
"reset": "复位",
"confirm": "确定",
"cancel": "取消",
"success": "成功",
"failue": "失敗"
}
zh-Hant.json:
{
"add": "增加",
"refresh": "刷新",
"submit": "提交",
"reset": "復位",
"confirm": "確定",
"cancel": "取消",
"success": "成功",
"failue": "失敗"
}
3,代码中的使用:
主要包括页面和js两部分中的多语言:
页面中示例:{{$t('account')}}
js代码中示例:this.$t('day')