uniapp を使用して多言語機能を開発する方法

uniapp を使用して多言語機能を開発する方法

はじめに: 多言語アプリケーション開発において、世界中のユーザーにより良いサービスを提供するためには、多言語機能を実現することが非常に重要な要件です。この記事では、uniapp を使用して多言語機能を開発するための実践的な方法と、対応するコード例を紹介します。

1. 準備

1. uniapp プロジェクトの作成
   まず、新しい uniapp プロジェクトを作成する必要があります。 HBuilderX ツールを使用して作成でき、作成用のユニアプリ テンプレートを選択できます。
2. 言語パックプラグインのインストール
   HBuilderXのプラグインマーケットで言語パックプラグイン「vue-i18n」を検索し、プロジェクトにインストールします。
3. 言語ファイルの作成
   プロジェクト内に言語フォルダーを作成し、フォルダー内に対応する言語ファイルを作成します。例:
4. zh-cn.js (簡体字中国語)
5. en-us.js (英語)

各言語ファイルで、対応するキーと値のペアを定義する必要があります。例:

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

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

With key value 正しい形式では、異なる言語バージョンを切り替えるために、いくつかの単純なテキスト コンテンツが定義されています。

2. 言語パッケージの構成
vue-i18n プラグインを uniapp プロジェクトの main.js ファイルに導入し、構成します。

まず、vue と vue-i18n の依存関係を導入する必要があります

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

次に、Vue.use() メソッドを使用して vue-i18n プラグインをグローバルに登録します

Vue.use(VueI18n)

次に、vue-i18n インスタンスを作成し、言語ファイルのパスとデフォルト言語を設定します。

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

最後に、インスタンスを vue のルート インスタンスにマウントします。

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

After設定は完了し、uniappの多言語化機能は基本的に構築されました。

3. 多言語の使用と切り替え

1. 多言語の使用
   ページのテンプレート ファイル (.vue) で、## を渡すことができます。 #$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
     }
   }

   このようにして、対応するテキスト コンテンツを現在のロケールに従ってページ上に動的に表示できます。

複数言語の切り替え
2. uniapp では、通常、ボタンをクリックするか、選択ボックスに入力してイベントをトリガーすることで複数言語を切り替えます。
   

まず、テンプレート ファイルに選択ボックスを追加し、変更イベントをバインドします。

<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>

次に、スクリプト ファイルにイベント メソッドを追加して、選択の変更イベントをリッスンします。ボックスと言語環境の切り替え

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

選択ボックスをクリックして、対応する言語オプションを選択すると、対応する言語環境に切り替えることができます。ページに表示されるテキストは、言語環境に応じて切り替わります。

要約:

この記事では、uniapp を使用して多言語機能を開発するための実践的な方法を紹介します. 言語パッケージを設定し、vue-i18n プラグインを使用することで、多言語環境でのテキスト切り替えを実現します。多言語アプリケーションを開発する際の参考になれば幸いです。

以上がuniapp を使用して多言語機能を開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。