Implémenter la fonction de commutation multilingue dans le mini-programme WeChat-tutoriel HTML-php.cn

Implémenter la fonction de commutation multilingue dans le mini-programme WeChat

Avec le développement de la mondialisation, tous les horizons utilisent de plus en plus plusieurs langues pour communiquer. Lors du développement de l'applet WeChat, afin de permettre à davantage d'utilisateurs d'utiliser l'applet de manière pratique, la mise en œuvre d'une fonction de commutation multilingue devient très importante. Dans cet article, nous présenterons comment implémenter la fonction de commutation multilingue dans l'applet WeChat et fournirons des exemples de code spécifiques.

1. Définition du pack de langue

Avant de commencer à implémenter la fonction de commutation multilingue, nous devons d'abord définir le pack de langue. Un pack de langue est un fichier au format JSON, qui contient divers textes de langue utilisés dans les mini-programmes, tels que la copie de boutons, le texte d'étiquette, les invites, etc. Voici un exemple simple de pack de langue :

{
  "zh-cn": {
    "app_title": "微信小程序",
    "button_text": "点击我",
    "input_placeholder": "请输入内容",
    "toast_text": "操作成功"
  },
  "en": {
    "app_title": "WeChat Mini Program",
    "button_text": "Click me",
    "input_placeholder": "Please enter content",
    "toast_text": "Operation succeeded"
  }
}

Copier après la connexion

Dans l'exemple ci-dessus, nous avons défini le texte en deux langues, le chinois simplifié et l'anglais pour la Chine continentale. Le texte de chaque langue est placé sous une clé appelée identifiant de langue, telle que zh-cn et en. En fait, chaque mini-programme doit prendre en charge au moins une langue. Cette langue est la langue native utilisée par le développeur du mini-programme et est généralement la langue utilisée par les utilisateurs cibles. zh-cn 和 en。实际上，每一个小程序都至少要支持一种语言，这种语言就是小程序开发者所用的母语，通常也是开发目标用户所使用的语言。

二、语言包的加载

下一步，我们需要在小程序中加载定义好的语言包。这里我们可以使用微信提供的 wx.getSystemInfo API 获取用户当前使用的语言以及地区信息，再根据这些信息来动态加载不同的语言包。以下是示例代码：

// 获取用户当前语言和地区
let language = wx.getStorageSync('language') || wx.getSystemInfoSync().language

// 加载语言包
let langData = require(`../../i18n/${language}.json`)

Copier après la connexion

在上面的代码中，我们首先获取用户当前的语言和地区信息，如果用户在之前已经进行过语言设置，则可以从缓存中取出用户所选择的语言。然后，我们使用 require 方法动态加载对应语言包的文件，例如上面的语言标识符是 en，就会加载 en.json 文件。

三、文本的替换

当用户进行了语言切换操作之后，我们希望小程序中的各种文本都能进行相应的更改。为此，我们需要在小程序的页面中定义一个 setDataLang 方法，该方法将会遍历当前页面中所有需要被更新的文本元素，并将其对应的文本替换为语言包中的对应文本。以下是示例代码：

setDataLang() {
  // 遍历所有需要被更新的文本元素
  Array.from(document.querySelectorAll('[data-lang]')).forEach(item => {
    // 获取语言包中对应的文本
    let key = item.getAttribute('data-lang')
    let value = langData[key]

    // 根据元素类型进行不同的文本替换操作
    switch (item.tagName) {
      case 'INPUT':
        // 如果是输入框，则替换 placeholder 属性的值
        item.setAttribute('placeholder', value)
        break

      case 'TEXTAREA':
        // 如果是文本域，则替换 placeholder 属性的值
        item.setAttribute('placeholder', value)
        break

      case 'BUTTON':
        // 如果是按钮，则替换 innerText 属性的值
        item.innerText = value
        break
  
      default:
        // 默认情况下，替换元素的 innerHTML 属性值
        item.innerHTML = value
        break
    }
  })
}

Copier après la connexion

在上面的代码中，我们首先通过 document.querySelectorAll 方法获取页面中所有带有 data-lang 属性的元素。然后，我们遍历这些元素，并分别根据元素的类型进行所需的文本替换操作。例如，如果是输入框或文本域元素，就需要替换其 placeholder 属性的值；如果是按钮元素，就需要替换其 innerText 属性的值；如果以上都不是，则默认替换其 innerHTML 属性的值。

四、语言切换事件的处理

最后，我们需要在小程序中处理语言切换事件。在这个示例中，我们将在小程序的 app.js 文件中定义一个 switchLanguage 方法来处理语言切换操作，该方法会在用户选择了新的语言之后触发。以下是示例代码：

switchLanguage() {
  // 获取用户选择的新语言
  let newLanguage = this.globalData.language === 'zh-cn' ? 'en' : 'zh-cn'

  // 保存新语言到缓存中
  wx.setStorageSync('language', newLanguage)

  // 重新加载语言包
  langData = require(`./i18n/${newLanguage}.json`)

  // 遍历所有页面并进行文本替换
  let pages = getCurrentPages()
  pages.forEach(page => {
    page.setDataLang()
  })
}

Copier après la connexion

在上面的代码中，我们首先通过判断当前语言是否为简体中文来获取用户新选择的语言，然后将其保存到缓存中。接着，我们重新加载新语言包并遍历所有页面进行文本替换。最后，我们可以通过绑定语言切换事件来触发 switchLanguage

2. Chargement du package linguistique

Étape suivante, nous devons charger le package linguistique défini dans le mini programme. Ici, nous pouvons utiliser l'API wx.getSystemInfo fournie par WeChat pour obtenir les informations actuelles sur la langue et la région de l'utilisateur, puis charger dynamiquement différents packages de langue en fonction de ces informations. Voici un exemple de code :

rrreee

Dans le code ci-dessus, nous obtenons d'abord les informations actuelles sur la langue et la région de l'utilisateur. Si l'utilisateur a déjà défini les paramètres de langue, la langue sélectionnée par l'utilisateur peut être récupérée du cache. Ensuite, nous utilisons la méthode require pour charger dynamiquement le fichier correspondant au package de langue. Par exemple, si l'identifiant de langue ci-dessus est en,

en.json<.> sera chargé le document. 🎜🎜3. Remplacement du texte🎜🎜Lorsque l'utilisateur effectue une opération de changement de langue, nous espérons que divers textes du mini-programme pourront être modifiés en conséquence. Pour ce faire, nous devons définir une méthode <code>setDataLang

dans la page de l'applet. Cette méthode parcourra tous les éléments de texte qui doivent être mis à jour dans la page actuelle et remplacera leur texte correspondant par celui du pack de langue. .texte correspondant. Voici l'exemple de code : 🎜rrreee🎜Dans le code ci-dessus, nous obtenons d'abord tous les éléments avec l'attribut data-lang dans la page via la méthode document.querySelectorAll. Nous parcourons ensuite ces éléments et effectuons les opérations de remplacement de texte requises individuellement en fonction du type de l'élément. Par exemple, s'il s'agit d'un élément de zone de saisie ou de champ de texte, vous devez remplacer la valeur de son attribut placeholder ; s'il s'agit d'un élément de bouton, vous devez remplacer la valeur de son ; attribut innerText ; si ce qui précède. Si ce n'est pas le cas, la valeur de son attribut innerHTML sera remplacée par défaut. 🎜🎜4. Traitement des événements de changement de langue🎜🎜Enfin, nous devons gérer les événements de changement de langue dans le mini programme. Dans cet exemple, nous définirons une méthode switchLanguage dans le fichier app.js du mini programme pour gérer l'opération de changement de langue. Cette méthode gérera l'opération de changement de langue lorsque. l'utilisateur sélectionne une nouvelle langue. Déclenché ensuite. Voici l'exemple de code : 🎜rrreee🎜 Dans le code ci-dessus, nous obtenons d'abord la langue nouvellement sélectionnée par l'utilisateur en déterminant si la langue actuelle est le chinois simplifié, puis nous l'enregistrons dans le cache. Ensuite, nous rechargeons le nouveau module linguistique et parcourons toutes les pages pour remplacer le texte. Enfin, nous pouvons déclencher la méthode switchLanguage en liant l'événement de changement de langue. 🎜🎜5. Résumé🎜🎜Grâce aux étapes ci-dessus, nous pouvons implémenter la fonction de commutation multilingue dans l'applet WeChat. Dans l'ensemble du processus de mise en œuvre, l'étape la plus critique consiste à charger dynamiquement le package linguistique correspondant en fonction de la langue actuellement utilisée par l'utilisateur. Une fois le pack de langue chargé, nous pouvons effectuer des opérations de remplacement de texte en parcourant les éléments de la page et obtenir l'effet de commutation multilingue. Dans le développement réel, nous pouvons suivre les étapes ci-dessus pour implémenter la fonction de commutation multilingue correspondante et apporter les optimisations et améliorations correspondantes si nécessaire. 🎜

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!