uniapp language switching only takes effect once

With the rapid development of globalization, more and more applications need to support multiple languages. As a cross-platform framework, uniapp has also received widespread attention when implementing multi-language switching. However, some developers reported that when using the uniapp framework for multi-language switching, they found that switching languages ​​only took effect once. That is to say, after switching to another language and then switching back to the original language, the interface was not completely restored. This caused many developers to worry and conduct in-depth exploration of the uniapp framework. This article will discuss the problem that uniapp language switching only takes effect once and provide a solution.

1. Problem description

In uniapp development, we will use the uni-i18n plug-in to achieve multi-language switching. This plug-in is very convenient and only needs to be introduced in the main entry file. The code is as follows:

import VueI18n from 'vue-i18n';
import messages from '@/common/lang'; // 引入语言文件
Vue.use(VueI18n);

const i18n = new VueI18n({
    locale: uni.getStorageSync('lang') || 'zh',
    messages
});

export default i18n;

Then within each component, use the $t() method to obtain the translation of the corresponding language. For example:

<template>
  <view>{{ $t('home.title') }}</view>
</template>
<script>
  export default {
    mounted() {
      console.log(this.$t('home.title')); // 打印出对应语言的翻译
    }
  }
</script>

This way we can easily switch between multiple languages. However, some developers have reported that in actual use, switching languages ​​only takes effect once. In other words, after switching languages, when switching back to the original language again, it is not completely restored to the original state. In this case, we need to find the cause and fix it.

2. Cause Analysis

By studying the source code of the uni-i18n plug-in, we can find that language switching is achieved by modifying the locale attribute. The locale attribute is stored in the app.globalData object. Therefore, the problem of switching languages ​​only taking effect once can be attributed to the locale attribute not being updated correctly.

When switching between multiple languages, we will store the new locale attribute in storage. Every time the application is opened, the locale attribute is first read from storage. If there is no locale attribute in storage, the default language is used. When switching languages, we will first update the locale attribute, and then store the new locale attribute in storage. According to this process, we can find that the reason why switching the language only takes effect once is that we did not update the locale attribute in the app.globalData object in time. Therefore, when we switch back to the original language again, the old locale attribute is still read, resulting in the interface not being fully restored.

3. Solution

In fact, solving this problem is relatively simple. By modifying the locale attribute, we only need to modify it in the app.globalData object. The specific code is as follows:

import VueI18n from 'vue-i18n';
import messages from '@/common/lang'; // 引入语言文件
Vue.use(VueI18n);

const i18n = new VueI18n({
    locale: uni.getStorageSync('lang') || 'zh',
    messages
});

// 加入以下代码
i18n.vm.$watch('locale', function(val) {
    console.log('i18n.vm.locale:', val);
    uni.setStorageSync('lang', val);
    uni.$emit('localeChange', val);
    uni.getStorage({
        key: 'lang',
        success: function(res) {
            if (res.data !== val) {
                uni.setStorageSync('lang', val);
            }
        }
    });
    app.globalData.locale = val;
});

export default i18n;

The main purpose here is to add a vm.$watch method. When the locale attribute changes, the locale attribute in the app.globalData object will be automatically updated, thereby solving the problem that switching languages ​​only takes effect once. The problem.

Summary

In uniapp development, achieving multi-language switching is a very common requirement. However, if we don't pay attention to details, we may encounter the problem that switching languages ​​only takes effect once. Through research and analysis of the uni-i18n plug-in, we found that the root cause of the problem lies in the failure to update the locale attribute in the app.globalData object in a timely manner. Therefore, you only need to update the locale attribute in the app.globalData object while modifying the locale attribute. The solution to this problem is very simple, but it also reminds us to pay attention to details during the development process to avoid the application not functioning properly due to some small errors.

The above is the detailed content of uniapp language switching only takes effect once. For more information, please follow other related articles on the PHP Chinese website!