So implementieren Sie die Funktion zum Umschalten mehrerer Sprachen in Uniapp

So implementieren Sie die Funktion zum Umschalten mehrerer Sprachen in uniapp

Mit der rasanten Entwicklung des mobilen Internets wird es immer wichtiger, eine Anwendung zu entwickeln, die mehrere Sprachen unterstützt. Im Uniapp-Framework können wir problemlos mehrsprachige Umschaltfunktionen implementieren und Benutzern eine benutzerfreundlichere Benutzeroberfläche bieten. In diesem Artikel wird erläutert, wie die Funktion zum Umschalten mehrerer Sprachen in Uniapp implementiert wird, und es werden Codebeispiele gegeben.

1. Sprachpaketdateien erstellen
Zuerst müssen wir mehrsprachige Sprachpaketdateien erstellen. In uniapp können JSON-formatierte Dateien zum Speichern von Übersetzungen für verschiedene Sprachen verwendet werden. Wir können für jede Sprache eine separate JSON-Datei erstellen und den Übersetzungsinhalt der entsprechenden Sprache in der Datei speichern.

Nehmen wir zum Beispiel Chinesisch und Englisch und erstellen zwei Dateien zh-CN.json und en-US.json. Unter anderem speichert die Datei zh-CN.json chinesische Übersetzungsinhalte und die Datei en-US.json speichert englische Übersetzungsinhalte. Der Dateiinhalt lautet wie folgt:

// zh-CN.json
{
„welcome“: „Willkommen bei uniapp“,
„home“: „Home“,
„about“: „Über uns“
}

// en-US.json
{
„welcome“: „Willkommen bei uniapp“,
„home“: „Home“,
„about“: „Über uns“
}

2 Wechseln Sie die Sprache
In uniapp, Sie können die Sprachumschaltung durch das Setzen globaler Variablen erreichen. Wir können die aktuelle Sprache in einer globalen Variablen speichern und dort, wo der Übersetzungsinhalt angezeigt werden muss, den entsprechenden Übersetzungsinhalt aus der entsprechenden Sprachpaketdatei basierend auf der aktuellen Sprache abrufen.

Definieren Sie zunächst die globale Variable lang in der Datei main.js und legen Sie ihren Standardwert auf zh-CN fest, um anzuzeigen, dass die aktuelle Sprache Chinesisch ist. Der Code lautet wie folgt:

// main.js
Vue von 'vue' importieren
App von './App' importieren

Vue.config.produktionTip = false

App.mpType = 'app'

/ / Globale Variable lang
Vue.prototype.lang = 'zh-CN'

const app = new Vue({

...App

})
app.$mount()

Dann dort definieren, wo der übersetzte Inhalt angezeigt werden muss , können Sie Vue Computed-Eigenschaften verwenden, um den entsprechenden Übersetzungsinhalt abzurufen. Der Code lautet wie folgt:

d477f9ce7bf77f53fbcf36bec1b69b7a
89c662c6f8b87e82add978948dc499d2

  <text>{{ $t('welcome') }}</text>
  <text>{{ $t('home') }}</text>
  <text>{{ $t('about') }}</text>

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
berechnet: {

  // 获取翻译内容
  $t() {
     return function(key) {
        const lang = this.$root.lang
        // 根据当前语言从语言包文件中获取对应的翻译内容
        let translations = {}
        try {
           translations = require(`../lang/${lang}.json`)
        } catch (e) {
           console.warn(`Translation file not found for language: ${lang}`)
        }
        return translations[key] || ''
     }
  }

}
}
< ;/script>

Wenn sich auf diese Weise der Wert der lang-Variablen in „en-US“ ändert, wird der Textinhalt auf der Seite automatisch auf Englisch umgestellt.

3. Schaltfläche zum Wechseln der Sprache
Um Benutzern das Wechseln der Sprache zu erleichtern, können wir eine Schaltfläche zum Wechseln der Sprache auf der Seite hinzufügen. Wenn der Benutzer auf die Schaltfläche klickt, wird die aktuelle Sprache umgeschaltet.

Fügen Sie zunächst eine Schaltfläche zur Seite mit dem folgenden Code hinzu:

d477f9ce7bf77f53fbcf36bec1b69b7a
89c662c6f8b87e82add978948dc499d2

  切换语言
  <text>{{ $t('welcome') }}</text>
  <text>{{ $t('home') }}</text>
  <text>{{ $t('about') }}</text>

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

Dann fügen Sie sie dem entsprechenden Skript hinzu Auf der SwitchLanguage-Methode der Seite lautet der Code wie folgt:

3f1c4e4b6b16bbbd69b2ee476dc4f83a
Standardexport {
Methoden: {

  // 切换语言
  switchLanguage() {
     // 获取当前语言
     const lang = this.$root.lang
     // 切换为另一种语言
     this.$root.lang = (lang === 'zh-CN' ? 'en-US' : 'zh-CN')
  }

}
}
2cacc6d41bbb37262a98f745aa00fbf0

Nachdem der Benutzer auf den oben genannten Effekt klickt, wird der oben genannte Effekt erzielt Mit der Schaltfläche wird der Textinhalt auf der Seite automatisch entsprechend der aktuellen Sprache umgeschaltet.

Zusammenfassung
Durch die oben genannten Schritte können wir die Funktion zum Umschalten mehrerer Sprachen in Uniapp implementieren. Erstellen Sie zunächst eine Sprachpaketdatei, um Übersetzungsinhalte in verschiedenen Sprachen zu speichern, wechseln Sie dann die Sprache, indem Sie globale Variablen festlegen, und erhalten Sie den entsprechenden Übersetzungsinhalt über berechnete Attribute auf der Seite. Fügen Sie abschließend eine Schaltfläche zum Wechseln der Sprache hinzu, um die Sprache zu wechseln.

Das Obige ist der Prozess der Implementierung der Mehrsprachenumschaltfunktion in uniapp. Ich hoffe, es wird Ihnen hilfreich sein!

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion zum Umschalten mehrerer Sprachen in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!