le changement de langue Uniapp ne prend effet qu'une seule fois

Avec le développement rapide de la mondialisation, de plus en plus d'applications doivent prendre en charge plusieurs langues. En tant que framework multiplateforme, uniapp a également reçu une grande attention lors de la mise en œuvre de la commutation multilingue. Cependant, certains développeurs ont signalé que lors de l'utilisation du framework uniapp pour le changement de langue, ils ont constaté que le changement de langue ne prenait effet qu'une seule fois, c'est-à-dire après être passé à une autre langue, puis revenir à la langue d'origine, l'interface. n'a pas été entièrement restauré. Cela a causé des problèmes à de nombreux développeurs et a conduit une exploration approfondie du framework uniapp. Cet article abordera le problème selon lequel le changement de langue Uniapp ne prend effet qu'une seule fois et fournira une solution.

1. Description du problème

Dans le développement d'uniapp, nous utiliserons le plug-in uni-i18n pour réaliser une commutation multilingue. Ce plug-in est très pratique et ne doit être introduit que dans le fichier d'entrée principal. Le code est le suivant :

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;

Ensuite au sein de chaque composant, utilisez la méthode $t() pour obtenir la traduction de la langue correspondante. Par exemple :

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

De cette façon, nous pouvons facilement basculer entre plusieurs langues. Cependant, certains développeurs ont signalé qu'en utilisation réelle, le changement de langue ne prend effet qu'une seule fois. En d’autres termes, après avoir changé de langue, lors du retour à la langue d’origine, celle-ci n’est pas complètement restaurée à son état d’origine. Dans ce cas, nous devons trouver la cause et y remédier.

2. Analyse des causes

En étudiant le code source du plug-in uni-i18n, nous pouvons constater que le changement de langue est obtenu en modifiant l'attribut locale. L'attribut locale est stocké dans l'objet app.globalData. Par conséquent, le problème du changement de langue ne prenant effet qu'une seule fois peut être attribué au fait que l'attribut locale n'est pas mis à jour correctement.

Lors du basculement entre plusieurs langues, nous stockerons le nouvel attribut locale dans le stockage. Chaque fois que l'application est ouverte, l'attribut locale est d'abord lu à partir du stockage, s'il n'y a pas d'attribut locale dans le stockage, la langue par défaut est utilisée. Lors du changement de langue, nous mettrons d'abord à jour l'attribut locale, puis stockerons le nouvel attribut locale dans le stockage. Selon ce processus, nous pouvons constater que la raison pour laquelle le changement de langue ne prend effet qu'une seule fois est que nous n'avons pas mis à jour l'attribut locale dans l'objet app.globalData à temps. Par conséquent, lorsque nous revenons à la langue d'origine, l'ancien attribut locale est toujours lu, ce qui entraîne une restauration incomplète de l'interface.

3. Solution

En fait, résoudre ce problème est relativement simple. En modifiant l'attribut locale, il suffit de le modifier dans l'objet app.globalData. Le code spécifique est le suivant :

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;

L'objectif principal ici est d'ajouter une méthode vm.$watch lorsque l'attribut locale change, l'attribut locale dans l'objet app.globalData sera automatiquement mis à jour, résolvant ainsi le problème de commutation. les langues ne prennent effet qu'une seule fois.

Résumé

Dans le développement d'Uniapp, le changement multilingue est une exigence très courante. Cependant, si nous ne prêtons pas attention aux détails, nous pouvons rencontrer le problème que le changement de langue ne prend effet qu'une seule fois. Grâce à la recherche et à l'analyse du plug-in uni-i18n, nous avons constaté que la cause première du problème réside dans l'incapacité de mettre à jour l'attribut locale dans l'objet app.globalData en temps opportun. Par conséquent, il vous suffit de mettre à jour l’attribut locale dans l’objet app.globalData lors de la modification de l’attribut locale. La solution à ce problème est très simple, mais elle nous rappelle également de prêter attention aux détails pendant le processus de développement pour éviter que l'application ne fonctionne pas correctement à cause de quelques petites erreurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!