I18n 多语言切换
本教程旨在指导您在uni-app(小程序，H5，APP(不含NVUE)等)中从0开始，到熟练使用多语言切换功能，在这里，我们使用的是vue-i18n插件，请您务必按照我们提供的步骤，完整的做好每一步的配置。
前言：
i18n是一个专门用于处理多语言的插件，其义来自于internationalization(国际化)，取其首尾两个字母i和n，中间部分nternationalizatio刚好18个字母， 故被起名i18n。- 此插件非uView内置功能，您需要通过
npm下载方可使用。
温馨提示
uView精心为您准备了一个多语言切换的工程，包含了本文的所有演示功能，在下载页找到对应资源下载运行即可：资源下载
安装vue-i18n
您需要通过npm安装此插件：
// 如果您的项目由HX创建，根目录没有package.json的话，先通过如下命令创建package.json
// npm init -y
// 安装vue-i18n
npm install vue-i18n
在main.js中引用vue-i18n
// 原有内容
import Vue from 'vue'
import App from './App'
// 以下为添加的内容
// 引入语言包，注意路径
import zh from '@/common/locales/zh.js';
import en from '@/common/locales/en.js';
// 引入并使用vue-i18n
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// 构造i18n对象
const i18n = new VueI18n({
// 默认语言，这里的local属性，对应message中的zh、en属性
locale: 'zh',
// 引入语言文件
messages: {
// 这里的属性名是任意的，您也可以把zh设置为cn等，只是后续切换语言时
// 要标识这里的语言属性，如：this.$i18n.locale = zh|en|zh|xxx
'zh': zh, // 这里为上面通过import引入的语言包
'en': en,
}
})
// 由于微信小程序的运行机制问题，需声明如下一行，H5和APP非必填
Vue.prototype._i18n = i18n
// 原有内容，需在这添加i18n
const app = new Vue({
// 记得在这添加i18n
i18n,
store,
...App
})
注意
别忘了上面的最后处，需要在new Vue构造器中写入i18n
定义语言包
上面我们在main.js通过import引入了两个语言包，一般来说，需要多少种语言，就要有多少个语言包，建议语言包中通过定义不同的字段划分不同页面 所属的素材：
// zh.js
export default {
// 可以以页面为单位来写，比如首页的内容，写在index字段，个人中心写在center，公共部分写在common部分
lang: {
title: 'uView UI',
intro: '多平台快速开发的UI框架',
},
common: {
// ......
},
index: {
// ......
}
}
使用
在实际场景中，我们可能在js中，也有可能在模板中使用，需通过$t('lang.title')的形式引用，这里的lang是我们上一步zh.js中定义的lange字段，title 自然而然就是lang对象的title属性了。
<template>
<view style="margin-top: 200rpx;">
{{$t('lang.intro')}}
</view>
</template>
<script>
export default {
onLoad() {
console.log(this.$t('lang.intro'));
}
}
</script>
语言切换
当我们点击语言切换的时候，通过this.$i18n.locale来设置新的语言，这个语言是我们定义在main.js中的message属性：
回顾：我们上面第二步在main.js中进行了如下设置，其中的message对象的zh和en就是我们所能切换的语言：
// main.js
// 构造i18n对象
const i18n = new VueI18n({
// 默认语言，这里的local属性，对应message中的zh、en属性
locale: 'zh',
// 引入语言文件
messages: {
// 这里的属性名是任意的，您也可以把zh设置为zh等，只是后续切换语言时
// 要标识这里的语言属性，如：this.$i18n.locale = zh|en|zh|xxx
'zh': Chinese,
'en': English,
}
})
语言切换：
<template>
<view style="margin-top: 200rpx;">
{{$t('lang.intro')}}
<u-button @click="switchLang">切换语言</u-button>
</view>
</template>
<script>
export default {
onLoad() {
console.log(this.$t('lang.intro'));
},
methods: {
switchLang() {
// 切换为英文
this.$i18n.locale = 'en';
}
}
}
</script>
双向绑定的陷阱
有时候，我们可能需要给data中的属性赋值多语言的值，很遗憾当您切换语言时会发现这是无法双向绑定的，体现在语言切换了，但是视图并没有更新。 这本质上是因为data中的属性是一次性赋值的，解决办法是在computed中定义相关的变量。
<template>
<view style="margin-top: 200rpx;">
{{intro}}
<u-button @click="switchLang">切换语言</u-button>
</view>
</template>
<script>
export default {
data() {
return {
// 错误示例，切换语言时，这个intro并不会自动更新到视图
// intro: this.$t('lang.intro')
}
},
computed: {
// 正确用法
intro() {
return this.$t('lang.intro')
}
},
methods: {
switchLang() {
this.$i18n.locale = 'en';
}
}
}
</script>
难点
上面我们解决了如何引入插件，定义和使用语言包，但是我们依然会碰到如下几个难点：
- 如果我需要在js中判断当前语言，进行不同的页面跳转怎么办？
- 如何修改导航栏的标题？
- 如何修改底部Tabbar导航的文字？
没关系，uView已经为您提供了完善的解决方案：
1. 如果我需要在js中判断当前语言，进行不同的页面跳转怎么办？
这个其实很简单，我们只需通过this.$i18n.locale就能获取当前的语言名称。当然，您也可以将当前的语言变量放到一个全局变量中， 关于全局变量，详见我们的另一个专题：全局变量的实现方式
2. 如何修改导航栏的标题？
修改原生导航栏，我们需要通过uni.setNavigationBarTitle()进行，既然是调用uni的接口，意味着我们无法通过双向绑定，切换语言时自动更新导航栏标题，所以 我们需要在onShow生命周期调用此接口，当每次页面出现在窗口时，重新设置导航栏(不管语言是否切换)：
<template>
<view style="margin-top: 200rpx;">
{{$t('lang.intro')}}
<u-button @click="switchLang">切换语言</u-button>
</view>
</template>
<script>
export default {
// 在onShow生命周期设置导航栏标题
onShow() {
uni.setNavigationBarTitle({
title: this.$t('lang.title')
});
},
methods: {
switchLang() {
this.$i18n.locale = 'en';
// 当您切换了语言之后，并不会触发onShow生命周期，意味着本页的标题不会马上
// 变更，所以我们需要在切换了语言之后，手动执行一遍设置标题的接口
uni.setNavigationBarTitle({
title: this.$t('lang.title')
});
}
}
}
</script>
3. 如何修改底部Tabbar导航的文字？
我们可以通过uni.setTabBarItem()设置单个的Tabbar Item，这很简单，我们在切换语言的地方，将所有的item设置一遍即可：
<template>
<view style="margin-top: 200rpx;">
<u-button @click="switchLang">切换语言</u-button>
</view>
</template>
<script>
export default {
methods: {
switchLang() {
this.$i18n.locale = 'en';
// uni.setTabBarItem接口详见：https://uniapp.dcloud.io/api/ui/tabbar?id=settabbaritem
// 说明：这种方法不适用自定义tabbar，自定义tabbar请自行根据逻辑调整
// 注意：【支付宝小程序开发工具】需要1.13版本才支持此接口的模拟，真机预览不受限制
uni.setTabBarItem({
index: 0,
text: this.$t('tabbar.index'),
})
uni.setTabBarItem({
index: 1,
text: this.$t('tabBar.news'),
})
uni.setTabBarItem({
index: 2,
text: this.$t('tabBar.center'),
})
}
}
}
</script>
写在最后
通过上面的教程，相信您已经对多语言切换有了全面的认识，但不止于此，因为uView对您的爱是无微不至的，我们为您准备了一个完整的示例，下载运行即可，快试试吧！