您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

uni-app使用i18n实现多语言的切换及国际化开发

1、首先我们需要安装这个插件,安装的命令为

npm install vue-i18n --save

2、创建我们存放翻译文件的文件夹
在这里插入图片描述
我这次开发用的是英语和印尼语这两种语言。
这个是英语
在这里插入图片描述
这个是印尼语
在这里插入图片描述
两个文件包里面对相同文字进行翻译的名称应该是一样的。
在对应的文件中,我们需要把我们需要的文字进行翻译,我这里是使用模块导出的方式,将每个页面需要的文字进行导出。
3、接下来就是在main.js中的配置操作了
在这里插入图片描述
在这里插入图片描述
这里实例化了一个i18n,locale中是设置默认加载的语言,message中是导入的语言包。

//引入国际化
import VueI18n from 'vue-i18n';
import $indo from '@/locales/indo.js';
import $en from '@/locales/en.js';


Vue.use(VueI18n);
const i18n = new VueI18n({ 
	locale: uni.getStorageSync('locale') ? uni.getStorageSync('locale'):'indo', 
	// 加载语言文件的内容
	messages: { 
		'indo': $indo,//印尼语
		'en': $en//英语
	}
});

Vue.prototype._i18n = i18n;

const app = new Vue({
	i18n,
    ...App
})

4、main.js中配置结束之后我们可以开始使用了
我们切换语言是要修改页面中的数据,所以我们需要用到计算属性

computed: {
	    i18n (){
	      return this.$t('home')
	    },
		navtitle(){
			 return this.$t('tabBar').首页
		},
			
},

页面中使用

<view>{{i18n.任务中心}}</view>

js中使用

this.$t('loading').加载中

修改tabbar的文本

uni.setTabBarItem({
	index: 0,
	text: this.$t('tabBar').首页
});
uni.setTabBarItem({
	index: 1,
	text: this.$t('tabBar').任务中心
});
uni.setTabBarItem({
	index: 2,
	text: this.$t('tabBar').我的任务
});
uni.setTabBarItem({
	index: 3,
	text: this.$t('tabBar').我的
});

修改导航栏的文字

uni.setNavigationBarTitle({
    title: this.$t('tabBar').首页
});

5、最关键的一点来了,如何改变语言
我们在mian.js中定义了你需要切换语言的名字
在这里插入图片描述
我们在你需要切换语言的地方修改this._i18n.locale的值就可以了,修改要与你定义的名字对应。
我是在一个点击事件里面,因为只有两种语言切换所以使用了三目运算,大家可以参考。

this._i18n.locale = this._i18n.locale == 'indo' ? 'en':'indo';

接下来交给你了,快来试一试吧


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进