Die Uniapp-Sprachumschaltung ist nur einmal wirksam

Mit der rasanten Entwicklung der Globalisierung müssen immer mehr Anwendungen mehrere Sprachen unterstützen. Als plattformübergreifendes Framework hat Uniapp auch bei der Implementierung der Mehrsprachenumschaltung große Beachtung gefunden. Einige Entwickler berichteten jedoch, dass sie bei der Verwendung des Uniapp-Frameworks zum Wechseln mehrerer Sprachen festgestellt haben, dass der Sprachwechsel nur einmal wirksam wurde, d wurde nicht vollständig wiederhergestellt. Dies führte dazu, dass sich viele Entwickler Sorgen machten und das Uniapp-Framework eingehend untersuchten. In diesem Artikel wird das Problem, dass die Uniapp-Sprachumschaltung nur einmal wirksam wird, erörtert und eine Lösung bereitgestellt.

1. Problembeschreibung

In der Uniapp-Entwicklung werden wir das Uni-i18n-Plug-In verwenden, um eine Mehrsprachenumschaltung zu erreichen. Dieses Plug-In ist sehr praktisch und muss nur in die Haupteintragsdatei eingeführt werden. Der Code lautet wie folgt:

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;

Verwenden Sie dann innerhalb jeder Komponente die Methode $t(), um die Übersetzung der entsprechenden Sprache zu erhalten. Zum Beispiel:

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

Auf diese Weise können wir problemlos zwischen mehreren Sprachen wechseln. Einige Entwickler haben jedoch berichtet, dass der Sprachwechsel im tatsächlichen Einsatz nur einmal wirksam wird. Mit anderen Worten: Nach einem Sprachwechsel wird beim erneuten Wechsel zur Originalsprache der Originalzustand nicht vollständig wiederhergestellt. In diesem Fall müssen wir die Ursache finden und beheben.

2. Ursachenanalyse

Durch das Studium des Quellcodes des uni-i18n-Plug-Ins können wir feststellen, dass die Sprachumschaltung durch Ändern des Gebietsschemaattributs erreicht wird. Das Gebietsschemaattribut wird im app.globalData-Objekt gespeichert. Daher kann das Problem, dass der Sprachwechsel nur einmal wirksam wird, darauf zurückgeführt werden, dass das Locale-Attribut nicht korrekt aktualisiert wird.

Beim Wechsel zwischen mehreren Sprachen speichern wir das neue Gebietsschemaattribut im Speicher. Jedes Mal, wenn die Anwendung geöffnet wird, wird das Gebietsschemaattribut zuerst aus dem Speicher gelesen Die Standardsprache wird verwendet. Beim Wechseln der Sprache aktualisieren wir zunächst das Gebietsschemaattribut und speichern dann das neue Gebietsschemaattribut im Speicher. Gemäß diesem Prozess können wir feststellen, dass der Grund dafür, dass die Sprachumschaltung nur einmal wirksam wird, darin besteht, dass wir das Gebietsschemaattribut im app.globalData-Objekt nicht rechtzeitig aktualisiert haben. Wenn wir also wieder zur Originalsprache wechseln, wird das alte Locale-Attribut weiterhin gelesen, was dazu führt, dass die Schnittstelle nicht vollständig wiederhergestellt wird.

3. Lösung

Tatsächlich ist die Lösung dieses Problems relativ einfach. Durch Ändern des Gebietsschemaattributs müssen wir es nur im app.globalData-Objekt ändern. Der spezifische Code lautet wie folgt:

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;

Die Hauptsache hier ist das Hinzufügen einer vm.$watch-Methode. Wenn sich das Gebietsschemaattribut ändert, wird das Gebietsschemaattribut im app.globalData-Objekt automatisch aktualisiert. Dadurch wird das Problem des Sprachwechsels gelöst. Ein Problem, das nur einmal auftritt.

Zusammenfassung

Bei der Uniapp-Entwicklung ist die Erzielung einer mehrsprachigen Umschaltung eine sehr häufige Anforderung. Wenn wir jedoch nicht auf Details achten, kann es zu dem Problem kommen, dass der Sprachwechsel nur einmal wirksam wird. Durch Recherche und Analyse des uni-i18n-Plug-ins haben wir herausgefunden, dass die Hauptursache des Problems darin liegt, dass das Gebietsschemaattribut im app.globalData-Objekt nicht rechtzeitig aktualisiert wurde. Daher müssen Sie beim Ändern des Locale-Attributs nur das Locale-Attribut im app.globalData-Objekt aktualisieren. Die Lösung dieses Problems ist sehr einfach, erinnert uns aber auch daran, während des Entwicklungsprozesses auf Details zu achten, um zu vermeiden, dass die Anwendung aufgrund kleiner Fehler nicht ordnungsgemäß funktioniert.

Das obige ist der detaillierte Inhalt vonDie Uniapp-Sprachumschaltung ist nur einmal wirksam. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!