So verwenden Sie Uniapp zur Entwicklung mehrsprachiger Funktionen

So verwenden Sie Uniapp zum Entwickeln mehrsprachiger Funktionen

Einführung: Bei der Entwicklung mehrsprachiger Anwendungen ist die Implementierung mehrsprachiger Funktionen eine sehr wichtige Voraussetzung, um globale Benutzer besser bedienen zu können. In diesem Artikel werden praktische Methoden zur Verwendung von Uniapp zur Entwicklung mehrsprachiger Funktionen vorgestellt und entsprechende Codebeispiele angehängt.

1. Vorbereitung

1. Erstellen Sie das Uniapp-Projekt
   Zuerst müssen wir ein neues Uniapp-Projekt erstellen. Es kann mit dem HBuilderX-Tool erstellt werden und die Uni-App-Vorlage zur Erstellung auswählen.
2. Installieren Sie das Sprachpaket-Plug-in
   Suchen Sie im Plug-in-Markt von HBuilderX nach dem Sprachpaket-Plug-in „vue-i18n“ und installieren Sie es im Projekt.
3. Sprachdateien erstellen
   Erstellen Sie einen Sprachenordner im Projekt und erstellen Sie die entsprechenden Sprachdateien im Ordner, zum Beispiel:
4. zh-cn.js (vereinfachtes Chinesisch)
5. en-us.js (Englisch)

In jeder Sprachdatei müssen wir das entsprechende Schlüssel-Wert-Paar definieren, zum Beispiel:

// zh-cn.js
export default {
  welcome: '欢迎使用uniapp',
  hello: '你好'
}

// en-us.js
export default {
  welcome: 'Welcome to uniapp',
  hello: 'Hello'
}

Mehrere einfache Textinhalte werden in Form von Schlüssel-Wert-Paaren für den Wechsel zwischen verschiedenen Sprachversionen definiert.

2. Konfigurieren Sie das Sprachpaket.
Fügen Sie das vue-i18n-Plugin in die Datei main.js im Uniapp-Projekt ein und konfigurieren Sie es.

Zuerst müssen wir die Abhängigkeiten von vue und vue-i18n einführen und konfigurieren Sie den Pfad und die Standardsprache der Sprachdatei

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Zuletzt mounten Sie die Instanz in der Stamminstanz von vue

Vue.use(VueI18n)

Nach Abschluss der Konfiguration ist die Mehrsprachenfunktion von uniapp grundsätzlich eingerichtet.

3. Mehrsprachigkeit verwenden und wechseln

Mehrsprachigkeit verwenden

In der Vorlagendatei (.vue) der Seite können wir den entsprechenden Textinhalt über die Methode $t abrufen , zum Beispiel:

const i18n = new VueI18n({
  locale: 'zh-cn', // 默认语言为中文简体
  messages: {
    'zh-cn': require('./languages/zh-cn'), // 中文简体
    'en-us': require('./languages/en-us') // 英文
  }
})

1. Dann verwenden Sie das Attribut berechnet in der Skriptdatei (.vue), um die Zuordnungsbeziehung des Textschlüsselwerts zu definieren

   new Vue({
     i18n,
     ...
   }).$mount()

   
   Auf diese Weise kann der entsprechende Text sein dynamisch auf der Seite entsprechend dem aktuellen Gebietsschema angezeigt. $t 方法来获取对应的文本内容，例如：

   <template>
     <view>
    <text>{{ $t('welcome') }}</text>
    <text>{{ $t('hello') }}</text>
     </view>
   </template>

   然后，在脚本文件(.vue)中使用 computed

   Wechseln der Mehrsprachigkeit

   In uniapp wird das Wechseln der Mehrsprachigkeit normalerweise durch Klicken auf eine Schaltfläche oder Eingabe eines Auswahlfelds erreicht, um ein Ereignis auszulösen.
2. 
   Fügen Sie zunächst ein Auswahlfeld in der Vorlagendatei hinzu und binden Sie das Änderungsereignis Auswahlfeld Wählen Sie anschließend die entsprechende Sprachoption aus, um zum entsprechenden Gebietsschema zu wechseln. Der auf der Seite angezeigte Text wird entsprechend dem Gebietsschema geändert.

Zusammenfassung:

Dieser Artikel stellt die praktische Methode zur Verwendung von Uniapp zur Entwicklung mehrsprachiger Funktionen vor. Durch die Konfiguration von Sprachpaketen und die Verwendung des vue-i18n-Plug-Ins wird die Textumschaltung in mehrsprachigen Umgebungen erreicht. Ich hoffe, dass es bei der Entwicklung mehrsprachiger Anwendungen hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Uniapp zur Entwicklung mehrsprachiger Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!