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

痛定思痛。 2023-02-27 14:59 61阅读 0赞

## 1、国际化使用方案 ##

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

## 2、i18n配置及使用 ##

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

npm install vue-i18n --save

1.  在main.js中配置  
    接下来我们在main.js中配置i18n，将插件注入到实例中。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb3lhbmdidXphaQ_size_16_color_FFFFFF_t_70]  
    我默认的是中文。这里的messages是多语言的语言包配置，我的是放在pages同级目录的common文件下，接下来是去配置语言包文件
2.  生成国际化文件  
    本文只是简单示例，所以我将所有配置都放在了一个文件中，如果需要配置的语言和字段比较多的，可以在common下分别建多个存放。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb3lhbmdidXphaQ_size_16_color_FFFFFF_t_70 1]  
    我这里简单设置了首页的一个更多按钮的字段，接下来，我们就要在页面中使用这个字段。
3.  在页面中使用  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb3lhbmdidXphaQ_size_16_color_FFFFFF_t_70 2]  
    我们在页面的conputed中返回我们需要的语言包配置，然后直接在组件中使用。效果如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb3lhbmdidXphaQ_size_16_color_FFFFFF_t_70 3]
4.  切换语言  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb3lhbmdidXphaQ_size_16_color_FFFFFF_t_70 4]  
    我们通过更改locale的值来修改语言配置。这是点击英文按钮后的效果，更多变成了more。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb3lhbmdidXphaQ_size_16_color_FFFFFF_t_70 5]

## 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
    });

[uni-app_i18n]: https://ask.dcloud.net.cn/article/35102
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb3lhbmdidXphaQ_size_16_color_FFFFFF_t_70]: /images/20230209/cac66aa0b5b947f6a01eacf5cf4ecac2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb3lhbmdidXphaQ_size_16_color_FFFFFF_t_70 1]: /images/20230209/662b8e9a89fb4b7aabe7a357cf83c326.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb3lhbmdidXphaQ_size_16_color_FFFFFF_t_70 2]: /images/20230209/41461e4d84a345f69798ed4f376c4926.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb3lhbmdidXphaQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200718171205958.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb3lhbmdidXphaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb3lhbmdidXphaQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200718171611951.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb3lhbmdidXphaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb3lhbmdidXphaQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200718171753702.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb3lhbmdidXphaQ==,size_16,color_FFFFFF,t_70