WeChatミニプログラムに多言語切り替え機能を実装

グローバリゼーションの発展に伴い、あらゆる階層がコミュニケーションに複数の言語を使用することが増えています。 WeChat アプレットを開発する場合、より多くのユーザーがアプレットを便利に使用できるようにするために、多言語切り替え機能の実装が非常に重要になります。この記事では、WeChat アプレットに多言語切り替え機能を実装する方法と具体的なコード例を紹介します。

1. 言語パッケージの定義

多言語切り替え機能の実装を開始する前に、まず言語パッケージを定義する必要があります。言語パックは JSON 形式のファイルで、ボタンのコピー、ラベル テキスト、プロンプトなど、ミニ プログラムで使用されるさまざまな言語テキストが含まれています。以下は簡単な言語パックの例です。

{
  "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"
  }
}

上記の例では、中国本土用に簡体字中国語と英語という 2 つの言語でテキストを定義しました。各言語のテキストは、zh-cn や en など、言語識別子と呼ばれるキーの下に配置されます。実際、すべてのミニ プログラムは少なくとも 1 つの言語をサポートする必要があります。この言語は、ミニ プログラム開発者が使用するネイティブ言語であり、通常はターゲット ユーザーが使用する言語です。

2. 言語パッケージのロード

次のステップでは、定義された言語パッケージをミニ プログラムにロードする必要があります。ここでは、WeChat が提供する wx.getSystemInfo API を使用して、ユーザーが現在使用している言語と地域の情報を取得し、この情報に基づいてさまざまな言語パッケージを動的にロードできます。以下はサンプル コードです:

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

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

上記のコードでは、まずユーザーの現在の言語と地域情報を取得します。ユーザーが以前に言語設定を行ったことがある場合は、ユーザーが選択した言語をキャッシュから取得できます。 。次に、require メソッドを使用して、言語パッケージに対応するファイルを動的に読み込みます。たとえば、上記の言語識別子が en の場合、en.json ファイルがロードされます。

3. テキストの置換

ユーザーが言語切り替え操作を実行すると、それに応じてミニ プログラム内のさまざまなテキストが変更されることが望まれます。これを行うには、ミニ プログラム ページで 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
    }
  })
}

上記のコードでは、まず document.querySelectorAll を通じてページ内の data-lang 属性を持つすべての要素を取得します。方法。次に、これらの要素を反復処理し、要素のタイプに基づいて必要なテキスト置換操作を個別に実行します。たとえば、入力ボックスまたはテキスト フィールド要素の場合は、その placeholder 属性の値を置き換える必要があり、ボタン要素の場合は、その innerText 属性の値を置き換える必要があります。 属性。上記のいずれでもない場合、その innerHTML 属性の値がデフォルトで置き換えられます。

4. 言語切り替えイベントの処理

最後に、ミニ プログラムで言語切り替えイベントを処理する必要があります。この例では、言語切り替え操作を処理するために、ミニ プログラムの 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()
  })
}

上記のコードでは、まず現在の言語が簡体字中国語かどうかを判断して、ユーザーが新しく選択した言語を取得し、それをキャッシュに保存します。次に、新しい言語パックを再ロードし、テキストを置換するためにすべてのページをスキャンします。最後に、言語切り替えイベントをバインドすることで、switchLanguage メソッドをトリガーできます。

5. 概要

上記の手順により、WeChat アプレットに多言語切り替え機能を実装できます。実装プロセス全体において、最も重要なステップは、ユーザーが現在使用している言語に従って、対応する言語パッケージを動的にロードすることです。言語パックが読み込まれた後、ページ要素をトラバースすることでテキスト置換操作を実行し、複数言語切り替えの効果を実現できます。実際の開発では、上記の手順に従って、対応する多言語切り替え機能を実装し、必要に応じて対応する最適化と改善を行うことができます。

以上がWeChatミニプログラムに多言語切り替え機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。