Comment utiliser Uniapp pour développer des fonctionnalités multilingues

Comment utiliser uniapp pour développer des fonctions multilingues

Introduction : Dans le développement d'applications multilingues, afin de mieux servir les utilisateurs mondiaux, la mise en œuvre de fonctions multilingues est une exigence très importante. Cet article présentera des méthodes pratiques sur la façon d'utiliser uniapp pour développer des fonctions multilingues et joindra des exemples de code correspondants.

1. Préparation

1. Créer le projet uniapp
   Tout d'abord, nous devons créer un nouveau projet uniapp. Il peut être créé à l'aide de l'outil HBuilderX et sélectionner le modèle uni-app pour la création.
2. Installez le plug-in du pack de langue
   Recherchez le plug-in du pack de langue "vue-i18n" sur le marché des plug-ins de HBuilderX et installez-le dans le projet.
3. Créer des fichiers de langue
   Créez un dossier de langues dans le projet et créez les fichiers de langue correspondants dans le dossier, par exemple :
4. zh-cn.js (chinois simplifié)
5. en-us.js (anglais)

Dans chaque fichier de langue, nous devons définir la paire clé-valeur correspondante, par exemple :

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

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

Plusieurs contenus de texte simples sont définis sous la forme de paires clé-valeur pour basculer entre différentes versions linguistiques.

2. Configurez le package de langue
Introduisez le plug-in vue-i18n dans le fichier main.js du projet uniapp et configurez-le.

Tout d'abord, nous devons introduire les dépendances de vue et vue-i18n

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

Ensuite, utilisez la méthode Vue.use() pour enregistrer globalement le plug-in vue-i18n

Vue.use(VueI18n)

Ensuite, créez une instance vue-i18n et configurez le chemin du fichier de langue et la langue par défaut

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

Enfin, montez l'instance sur l'instance racine de vue

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

Une fois la configuration terminée, la fonction multilingue d'uniapp a été essentiellement configurée.

3. Utiliser et changer de multi-langue

1. Utiliser multi-langue
   Dans le fichier modèle (.vue) de la page, nous pouvons obtenir le contenu du texte correspondant via la méthode $t , par exemple : $t 方法来获取对应的文本内容，例如：

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

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

   computed: {
     ...mapState(['locale'])
   },
   
   watch: {
     locale() {
    this.$i18n.locale = this.locale
     }
   }

   Ensuite, utilisez l'attribut calculed dans le fichier de script (.vue) pour définir la relation de mappage de la valeur clé du texte

   <template>
     <view>
       <picker mode="selector" range="{{ languageOptions }}" bind:change="onLanguageChange">
         <view>{{ languageOptions[languageIndex] }}</view>
       </picker>
       <!-- 这里根据语言环境展示不同的内容 -->
       <text>{{ $t('welcome') }}</text>
       <text>{{ $t('hello') }}</text>
     </view>
   </template>

   De cette façon, le texte correspondant peut être affiché dynamiquement sur la page en fonction du contenu du texte local actuel.
2. 
   Changement multilingue
Dans uniapp, le changement multilingue s'effectue généralement en cliquant sur un bouton ou en saisissant une zone de sélection pour déclencher un événement.

Tout d'abord, ajoutez une zone de sélection dans le fichier modèle et liez l'événement de changement

onLanguageChange(e) {
  // 获取选择框的当前索引值
  let index = e.detail.value
  
  // 更新全局语言环境为对应索引的值
  this.$store.commit('setLocale', this.languageOptions[index])
}

Ensuite, ajoutez une méthode d'événement dans le fichier de script pour écouter l'événement de changement de la zone de sélection et changez les paramètres régionaux

rrreee

Cliquez sur le bouton boîte de sélection Après cela, sélectionnez l'option de langue correspondante pour passer aux paramètres régionaux correspondants. Le texte affiché sur la page sera modifié en conséquence en fonction des paramètres régionaux.

Résumé :

Cet article présente la méthode pratique d'utilisation d'uniapp pour développer des fonctions multilingues. En configurant des packages de langue et en utilisant le plug-in vue-i18n, la commutation de texte dans des environnements multilingues est obtenue. J'espère que cela sera utile lors du développement d'applications multilingues. 🎜

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!