uniapp支持多语言

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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值