uniapp支持多语言

最新推荐文章于 2025-09-13 11:14:59 发布

原创最新推荐文章于 2025-09-13 11:14:59 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #servlet

本文介绍了如何在Vue.js应用中实现多语言切换功能。通过在login.vue组件中添加语言选择下拉框，利用$tc函数动态获取翻译文本，并根据uni.getLocale()自动选择初始语言。同时，详细展示了en.json、zh-Hans.json和zh-Hant.json等多语言资源文件的配置方法，以及在页面和JS中使用$t()函数进行多语言文本的引用。

总体是基本参考实例中的多语言代码。

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')