Comment implémenter la fonction de commutation multilingue dans Uniapp

Comment implémenter la fonction de commutation multilingue dans uniapp

Avec le développement rapide de l'Internet mobile, il est devenu de plus en plus important de développer une application prenant en charge plusieurs langues. Dans le cadre uniapp, nous pouvons facilement implémenter des fonctions de commutation multilingues et offrir aux utilisateurs une expérience d'interface plus conviviale. Cet article expliquera comment implémenter la fonction de commutation multilingue dans uniapp et donnera des exemples de code.

1. Créer des fichiers de pack de langue
Tout d'abord, nous devons créer des fichiers de pack de langue multilingues. Dans uniapp, les fichiers au format JSON peuvent être utilisés pour stocker des traductions dans différentes langues. Nous pouvons créer un fichier JSON distinct pour chaque langue et stocker le contenu de la traduction de la langue correspondante dans le fichier.

Par exemple, prenons le chinois et l'anglais comme exemple et créons deux fichiers zh-CN.json et en-US.json. Parmi eux, le fichier zh-CN.json stocke le contenu de la traduction chinoise et le fichier en-US.json stocke le contenu de la traduction anglaise. Le contenu du fichier est le suivant :

// zh-CN.json
{
"welcome": "Bienvenue sur uniapp",
"home": "Home",
"about": "À propos de nous"
}

// en-US.json
{
"welcome": "Bienvenue sur uniapp",
"home": "Home",
"about": "À propos de nous"
}

2. uniapp, vous pouvez Le changement de langue est obtenu en définissant des variables globales. Nous pouvons stocker la langue actuelle dans une variable globale et, là où le contenu de la traduction doit être affiché, obtenir le contenu de traduction correspondant à partir du fichier du pack de langue correspondant en fonction de la langue actuelle.

Tout d'abord, définissez la variable globale lang dans le fichier main.js et définissez sa valeur par défaut sur zh-CN, indiquant que la langue actuelle est le chinois. Le code est le suivant :

// main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

/ / Définir la variable globale lang

Vue.prototype.lang = 'zh-CN'

const app = new Vue({

...App

})

app.$mount()

Ensuite, où le contenu traduit doit être affiché , vous pouvez utiliser les propriétés Vue Computed pour obtenir le contenu de traduction correspondant. Le code est le suivant :

d477f9ce7bf77f53fbcf36bec1b69b7a

89c662c6f8b87e82add978948dc499d2

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

de5f4c1163741e920c998275338d29b2

21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a

export default {
calculé : {

  // 获取翻译内容
  $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>

De cette façon, lorsque la valeur de la variable lang passe à en-US, le contenu du texte sur la page passera automatiquement en anglais.

3. Bouton Changer de langue

Afin de permettre aux utilisateurs de changer de langue, nous pouvons ajouter un bouton pour changer de langue sur la page. Lorsque l'utilisateur clique sur le bouton, la langue actuelle change.

Tout d'abord, ajoutez un bouton à la page avec le code suivant :

d477f9ce7bf77f53fbcf36bec1b69b7a

89c662c6f8b87e82add978948dc499d2

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

de5f4c1163741e920c998275338d29b2

21c97d3a051048b8e55e3c8f199a54b2

Ensuite, ajoutez-le au script correspondant sur la méthode switchLanguage de la page, le code est le suivant :

3f1c4e4b6b16bbbd69b2ee476dc4f83a

export default {
méthodes : {

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

}

}
2cacc6d41bbb37262a98f745aa00fbf0

Après avoir obtenu l'effet ci-dessus, lorsque l'utilisateur clique sur le bouton, le contenu du texte sur la page Il changera automatiquement en fonction de la langue actuelle.

Résumé

Grâce aux étapes ci-dessus, nous pouvons implémenter la fonction de commutation multilingue dans uniapp. Tout d'abord, créez un fichier de pack de langue pour stocker le contenu de la traduction dans différentes langues, puis changez de langue en définissant des variables globales et obtenez le contenu de traduction correspondant via des attributs calculés sur la page. Enfin, ajoutez un bouton pour changer de langue pour changer de langue.

Ce qui précède est le processus de mise en œuvre de la fonction de changement multilingue dans uniapp. J'espère que cela vous sera utile !

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!