Comment obtenir un support multilingue et une internationalisation dans Uniapp

Comment obtenir un support multilingue et une internationalisation dans uniapp

Avec le développement continu du marché des applications mobiles, de plus en plus d'applications doivent prendre en charge des environnements multilingues afin de mieux répondre aux besoins des utilisateurs mondiaux. Dans le cadre uniapp, nous pouvons facilement mettre en œuvre le support multilingue et l'internationalisation. Cet article présentera en détail comment implémenter la prise en charge multilingue et l'internationalisation dans uniapp, et fournira des exemples de code spécifiques.

1. Créer un fichier de langue
Nous créons d'abord un fichier de langue pour stocker le contenu de la traduction dans différentes langues. Dans uniapp, nous pouvons créer un répertoire nommé lang et créer des fichiers de traduction pour chaque langue de ce répertoire. Par exemple, nous avons créé lang/zh-cn.js (chinois simplifié), lang/en.js (anglais) et lang/ja.js code code> (japonais) trois fichiers. <code>lang的目录，并在该目录下创建各个语言的翻译文件。例如，我们创建了lang/zh-cn.js（中文简体）、lang/en.js（英语）和lang/ja.js（日语）三个文件。

在zh-cn.js文件中，我们可以存放中文简体的翻译内容：

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

在en.js文件中，我们可以存放英语的翻译内容：

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

在ja.js文件中，我们可以存放日语的翻译内容：

export default {
  hello: 'こんにちは',
  welcome: 'ようこそ'
}

二、配置语言切换按钮
我们在页面中添加一个语言切换按钮，以便用户可以自由选择使用的语言。在uniapp中，我们可以使用uni.navigateTo方法切换到语言选择页面，并通过URL参数传递选择的语言。

在首页的index.vue文件中，我们可以添加一个按钮，并设置点击事件：

<template>
  <view>
    <button @click="goToLanguagePage">切换语言</button>
    <text>{{ $t('hello') }}</text>
    <text>{{ $t('welcome') }}</text>
  </view>
</template>

<script>
export default {
  methods: {
    goToLanguagePage() {
      uni.navigateTo({
        url: '/pages/language/language'
      })
    }
  }
}
</script>

三、选择语言并切换
我们创建一个名为language.vue的页面，在该页面中展示所有支持的语言，并为每种语言添加点击事件，以便选择语言。

在language.vue文件中，我们可以使用uni.navigateTo方法返回首页，并通过URL参数传递选择的语言。

<template>
  <view>
    <button @click="selectLanguage('zh-cn')">中文简体</button>
    <button @click="selectLanguage('en')">English</button>
    <button @click="selectLanguage('ja')">日本語</button>
  </view>
</template>

<script>
export default {
  methods: {
    selectLanguage(lang) {
      // 将选择的语言存储到本地缓存
      uni.setStorageSync('language', lang)
      // 返回首页并刷新
      uni.navigateBack({
        delta: 1,
        success() {
          // 刷新页面
          const pages = getCurrentPages()
          const homePage = pages[pages.length - 1]
          homePage.onLoad()
        }
      })
    }
  }
}
</script>

四、多语言支持和国际化
我们可以在main.js

Dans le fichier zh-cn.js, nous pouvons stocker le contenu de la traduction chinoise simplifiée :

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

// 导入语言文件
import zhCn from './lang/zh-cn.js'
import en from './lang/en.js'
import ja from './lang/ja.js'

// 读取本地缓存中的语言设置，默认为中文简体
const lang = uni.getStorageSync('language') || 'zh-cn'

// 根据语言设置读取对应的翻译文件
let messages = {}
if (lang === 'zh-cn') {
  messages = zhCn
} else if (lang === 'en') {
  messages = en
} else if (lang === 'ja') {
  messages = ja
}

// 将翻译文件添加到Vue实例的原型上，以便全局访问
Vue.prototype.$t = (key) => {
  return messages[key] || key
}

const app = new Vue({
  ...App
})
app.$mount()

Dans le fichier en.js, nous pouvons stocker la traduction anglaise Contenu :

rrreee
Dans le fichier ja.js, nous pouvons stocker le contenu de la traduction japonaise :

rrreee

2 Configurez le bouton de changement de langue

Nous ajoutons un bouton de changement de langue à la page afin que les utilisateurs peut Libre choix de la langue à utiliser. Dans uniapp, nous pouvons utiliser la méthode uni.navigateTo pour basculer vers la page de sélection de la langue et transmettre la langue sélectionnée via le paramètre URL. 🎜🎜Dans le fichier index.vue de la page d'accueil, nous pouvons ajouter un bouton et définir l'événement de clic : 🎜rrreee🎜3 Sélectionnez la langue et changez 🎜Nous créons un fichier nommé langue. Page .vue qui affiche toutes les langues prises en charge et ajoute un événement de clic pour chaque langue afin de sélectionner la langue. 🎜🎜Dans le fichier langue.vue, nous pouvons utiliser la méthode uni.navigateTo pour revenir à la page d'accueil et passer la langue sélectionnée via le paramètre URL. 🎜rrreee🎜4. Prise en charge multilingue et internationalisation🎜Nous pouvons lire le fichier de traduction correspondant en fonction de la langue sélectionnée par l'utilisateur dans le fichier main.js et l'ajouter au prototype de l'instance Vue. , pour un accès mondial. 🎜rrreee🎜À ce stade, nous avons implémenté avec succès des fonctions de support multilingue et d'internationalisation dans uniapp. Les utilisateurs peuvent sélectionner la langue à utiliser via le bouton de changement de langue, et le système changera automatiquement le contenu de la traduction en fonction de la sélection de l'utilisateur. 🎜🎜Résumé🎜Grâce aux étapes ci-dessus, nous pouvons obtenir une prise en charge multilingue et une internationalisation dans Uniapp. En créant des fichiers de langue, en configurant les boutons de changement de langue et en lisant globalement les fichiers de traduction correspondants, nous pouvons automatiquement changer d'environnement linguistique en fonction de la sélection de l'utilisateur et afficher le contenu de traduction correspondant. Cela peut mieux répondre aux besoins des utilisateurs mondiaux et améliorer l'expérience utilisateur de l'application. 🎜🎜Les exemples de code ci-dessus montrent comment implémenter la prise en charge multilingue et l'internationalisation dans uniapp. J'espère que cela aide! 🎜

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!