uniapp切换语言只生效一次-猿码集

1. 问题描述

在使用uniapp开发的过程中，经常会遇到需要在APP中切换语言的需求。但是，我们会发现有些时候切换语言只生效了一次，第二次切换却不起作用了。本文结合实际开发经验，对这个问题进行探讨，并给出解决方案。

2. 问题分析

2.1 切换语言的原理

在APP中切换语言，本质上就是把显示在页面上的文字换成对应语言的文字。一般来说，我们会将需要切换语言的文字都存储在一个json文件中，然后根据用户设置的语言选择对应的json文件，将相应的文字显示在页面上。

2.2 切换语言失败的原因

切换语言只生效一次的原因一般是由于对json文件的引用不当导致的。一般在切换语言的时候，我们会调用一个方法，重新引用json文件中的文字。然而，如果在引用json文件的时候，没有正确引用对应语言的json文件，或者引用的方法有误，都有可能导致切换语言失败。

2.3 具体表现

切换语言失败的表现一般是，第一次切换语言可以正常显示，但是再次切换语言后，页面上的文字不会发生变化，仍然显示的是第一次切换语言时的文字。这时，我们需要重新启动APP，才能看到新语言下的文字。

3. 解决方案

3.1 修改语言设置的方法

在实际开发中，我们可以考虑重新设计语言设置的方法。比如，不再使用uniapp提供的语言设置插件，而是自己编写一个语言设置页面，通过保存用户设置的语言到本地存储中，来实现语言的切换。这种方法可以减少插件的使用，同时也能更加灵活地控制语言切换。

3.2 修改引用json文件的方法

为了保证切换语言的正常运作，我们需要重新设计引用json文件的方法。一般来说，我们会在APP的公共方法中引用json文件。可以考虑将引用json文件的方法放在APP的根组件下，然后在需要引用json文件的组件中通过$root来引用。这样，即使我们在切换语言时重新引用了json文件，也不会影响之前引用的组件。


//在根组件下定义引用json文件的方法
Vue.prototype.$getLanguage = function() {
    let language = uni.getStorageSync('language') || 'zh-CN'; //从本地存储中读取语言设置
    if (language == 'zh-CN') {
        return require('@/common/lang/zh-CN.json');
    } else {
        return require('@/common/lang/en.json');
    }
}
//在需要引用json文件的组件中使用$root来调用上述方法
this.$root.$getLanguage().example

3.3 修改页面刷新方式

另一种可以解决切换语言失败问题的方式是修改页面刷新方式。我们可以使用vuex来存储当前语言，每次切换语言时，都将当前语言存储到vuex中。在需要显示文字的组件中，直接从vuex中读取当前语言，不再重新引用json文件。这样一来，只要切换了语言，就可以实时看到文字的变化。


//在vuex中保存当前语言
const store = new Vuex.Store({
    state: {
        language: uni.getStorageSync('language') || 'zh-CN'
    },
    mutations: {
        changeLanguage(state, data) {
            state.language = data;
            uni.setStorageSync('language', data);
        }
    }
})
//在需要显示文字的组件中，直接从vuex中读取当前语言
{{ $store.state.language }}

4. 总结

切换语言是APP开发中常见的需求，它可以提高APP的用户体验。然而，切换语言有时会失败，导致文字无法切换。本文主要从json文件引用、语言设置方法和页面刷新方式三个方面探讨了如何解决切换语言失败的问题，希望能给大家在实际开发中提供一些帮助。

uniapp切换语言只生效一次