uni-app使用i18n实现国际化/多语言配置

1、国际化使用方案

uni-app是基于vue.js的，因此国际化的方案也是使用的 i18n 插件，uni-app的，这里是uni-app开发者分享的i18n的使用。

2、i18n配置及使用

1. 引入i18n插件依赖
   首先，我们将i18n插件引入到项目中，安装依赖的方式就不多赘述了，我使用的是npm安装

npm install vue-i18n --save

3. 在main.js中配置
   接下来我们在main.js中配置i18n，将插件注入到实例中。
   
   我默认的是中文。这里的messages是多语言的语言包配置，我的是放在pages同级目录的common文件下，接下来是去配置语言包文件

4. 生成国际化文件
   本文只是简单示例，所以我将所有配置都放在了一个文件中，如果需要配置的语言和字段比较多的，可以在common下分别建多个存放。
   
   我这里简单设置了首页的一个更多按钮的字段，接下来，我们就要在页面中使用这个字段。

5. 在页面中使用
   
   我们在页面的conputed中返回我们需要的语言包配置，然后直接在组件中使用。效果如下：
   

6. 切换语言
   
   我们通过更改locale的值来修改语言配置。这是点击英文按钮后的效果，更多变成了more。
   

3、相关问题

1、顶部导航栏的国际化设置

顶部的title，用uni.setNavigationBarTitle动态设置文字（如果每个页面都需要设置，可以使用 Vue.mixin）；

2、底部tabBar的国际化配置

底部tabbar，用uni.setTabBarItem的api动态设置文字；

注：

• uni.setTabBarItem只能在tab页面使用，其他页面设置不生效，因此可以在tab页面的onShow声明周期中，获取当前语言设置，更新tab的国际化

onShow(){
	const { tabBar }=this._i18n.messages[this._i18n.locale]
   		uni.setTabBarItem({
   			index:0,
   			text:tabBar.service
   		})
   		uni.setTabBarItem({
   			index:1,
   			text:tabBar.timetable
   		})
   		uni.setTabBarItem({
   			index:2,
   			text:tabBar.mine
   		})
}

3、页面刷新字体恢复默认

• 第一步：将语言配置存储到storage中
• 第二步：修改main.js中locale初始化

uni.setStorageSync('language','en_US')

main.js
const i18n = new VueI18n({
  locale: uni.getStorageSync("language") || "zh_CN",
  messages
});