uniapp实现国际化多语言切换

HK酋长 lv.1

发布时间：2022-11-03 19:55:18 445

相关标签： # javascript# java# java

前言

项目有海外用户所以需要配置多语言满足客户需求

解决方法

在uni-app里有内置i18n多语言的配置，并且uni-app里的组件可是可以支持跟随设置语言进行变换的，i18n的主要功能是可以做到实时切换语言。

uniapp实现国际化多语言切换_javascript

步骤

1. 在相对根目录 utils/lang 的文件夹创建js的语言文件。当然，也可以根据实际情况，在其他目录下。这里，使用了两种语言，en-US （英文）和zh-CN(简体中文)。

2. 打开main.js引入 vue-i18n 和语言包，并根据需要默认其中一种语言。

import VueI18n from 'vue-i18n'  
import enUS from 'common/lang/en-US.js'
import zhCN from 'common/lang/zh-CN.js'
Vue.use(VueI18n)  
const locales={
　　'en-US':enUS,
    'zh-CN':zhCN
};
const i18n = new VueI18n({  
  locale: 'zh-CN',  // 默认选择的语言
  messages : locales
})
Vue.prototype._i18n = i18n 
const app = new Vue({
  i18n,
    ...App
})
app.$mount()

3. 当页面中需要引用语言栏时，调用$t方法。

{{$t('key')}}，$t('key')，this.$t('key')

4.切换语言

langChange(e) {
  this.langIndex = e.detail.value
  if(this.langIndex == 0){
    this.$i18n.locale = 'zh-CN'
  }else if(this.langIndex == 1){
    this.$i18n.locale = 'en-US'
  }
}

5.设置tabbar

uni.setTabBarItem({
  index: 0,
  text: this.$t('tabbar.home')
});

就这样，语言切换实现了，而且不会有什么延迟，几乎完美。开源字节的源代码都已开源在Gitee中，欢迎使用交流。

文章来源： https://blog.51cto.com/u_13578391/5814052

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。