Configuration d'UniApp et mise en œuvre de l'internationalisation multilingue

UniApp est un framework de développement multiplateforme basé sur Vue.js, qui peut développer rapidement des applications s'exécutant sur plusieurs plates-formes en même temps. Dans le développement actuel, avec la mondialisation des applications, l'internationalisation multilingue devient de plus en plus importante. Cet article présentera comment UniApp configure et implémente l'internationalisation multilingue et joindra des exemples de code.

1. Configuration des fichiers multilingues

Tout d'abord, créez un dossier nommé lang dans le répertoire racine du projet UniApp pour stocker les fichiers liés multilingues. Créez un fichier nommé index.js dans le dossier lang pour configurer le multilingue et la langue par défaut. L'exemple de code est le suivant : lang的文件夹，用于存放多语言相关文件。在lang文件夹下创建一个名为index.js的文件，用于配置多语言语种和默认语言。示例代码如下：

// lang/index.js

export default {
  // 可选的多语言语种
  locales: ['en-US', 'zh-CN'],
  // 默认语言
  defaultLocale: 'zh-CN'
}

2. 编写多语言文本

在lang文件夹下创建一个名为locales的文件夹，用于存放不同语种的文本文件。在locales文件夹下创建对应的语种文件，命名格式为语种.js，例如en-US.js和zh-CN.js。示例代码如下：

// lang/locales/en-US.js

export default {
  hello: 'Hello',
  welcome: 'Welcome to UniApp',
}

// lang/locales/zh-CN.js

export default {
  hello: '你好',
  welcome: '欢迎来到UniApp',
}

3. 组件中使用多语言文本

在组件中使用多语言文本时，可以通过this.$t方法获取对应语种的文本。示例代码如下：

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

<script>
export default {
  mounted() {
    console.log(this.$t('hello')) // 输出对应语种的文本
  }
}
</script>

4. 切换语言

为了切换不同的语种，可以使用Vuex来存储当前选择的语言，并在需要切换语言的地方触发相应的方法。示例代码如下：

// store/index.js

export default {
  state: {
    locale: 'zh-CN' // 默认语言
  },
  mutations: {
    setLocale(state, locale) {
      state.locale = locale
    }
  },
  actions: {
    changeLocale({ commit }, locale) {
      commit('setLocale', locale)
    }
  }
}

// App.vue

<template>
  <view>
    <button @click="changeLocale('en-US')">English</button>
    <button @click="changeLocale('zh-CN')">中文</button>
    <component-a></component-a>
  </view>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['changeLocale'])
  }
}
</script>

通过点击按钮来调用changeLocale方法，从而改变当前语言。

综上所述，UniApp实现多语言国际化的配置与实现需要进行多语言文件的配置，在组件中使用多语言文本时通过this.$trrreee

Écrire un texte multilingue🎜🎜🎜Créez un dossier nommé locales sous le dossier lang, Utilisé pour stocker des fichiers texte dans différentes langues. Créez le fichier de langue correspondant dans le dossier locales, avec le format de nom langue.js, tel que en-US.js et zh -CN.js. L'exemple de code est le suivant : 🎜rrreee
🎜Utiliser du texte multilingue dans le composant🎜🎜🎜Lors de l'utilisation de texte multilingue dans le composant, vous pouvez obtenir la langue correspondante via le this.$t texte de la méthode. L'exemple de code est le suivant : 🎜rrreee
🎜Changer de langue🎜🎜🎜Afin de changer de langue, vous pouvez utiliser Vuex pour stocker la langue actuellement sélectionnée et déclencher la méthode correspondante là où la langue doit être commuté. L'exemple de code est le suivant : 🎜rrreee🎜Appelez la méthode changeLocale en cliquant sur le bouton pour changer la langue actuelle. 🎜🎜En résumé, la configuration et la mise en œuvre de l'internationalisation multilingue dans UniApp nécessitent la configuration de fichiers multilingues Lorsque vous utilisez du texte multilingue dans le composant, obtenez la langue correspondante via le this.$tcode> méthode Text, utilisez Vuex pour stocker la langue actuelle là où la langue doit être changée, et changez de langue en appelant la méthode correspondante. Ce qui précède est la méthode de configuration et de mise en œuvre d'UniApp pour réaliser une internationalisation multilingue. 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!