uniappに多言語切り替え機能を実装する方法

uniapp に多言語切り替え機能を実装する方法

モバイル インターネットの急速な発展に伴い、多言語をサポートするアプリケーションを開発することがますます重要になっています。 uniapp フレームワークでは、多言語切り替え機能を簡単に実装でき、より使いやすいインターフェイス エクスペリエンスをユーザーに提供できます。この記事では、uniappに多言語切り替え機能を実装する方法とコード例を紹介します。

1. 言語パック ファイルの作成
まず、複数言語の言語パック ファイルを作成する必要があります。 uniapp では、JSON 形式のファイルを使用して、さまざまな言語の翻訳を保存できます。言語ごとに個別の JSON ファイルを作成し、対応する言語の翻訳コンテンツをファイルに保存できます。

たとえば、中国語と英語を例として、zh-CN.json と en-US.json という 2 つのファイルを作成します。このうち、zh-CN.json ファイルには中国語の翻訳コンテンツが格納され、en-US.json ファイルには英語の翻訳コンテンツが格納されます。ファイルの内容は次のとおりです:

// zh-CN.json
{
"welcome": "uniapp へようこそ",
"home": "Home",
"about ": "私たちについて"
}

// en-US.json
{
"welcome": "uniapp へようこそ",
"ホーム": "ホーム" ,
"about": "会社概要"
}

2. 言語の切り替え
uniappでは、グローバル変数を設定することで言語を切り替えることができます。現在の言語をグローバル変数に保存し、翻訳コンテンツを表示する必要がある現在の言語に基づいて、対応する言語パック ファイルから対応する翻訳コンテンツを取得できます。

まず、main.js ファイルでグローバル変数 lang を定義し、そのデフォルト値を zh-CN に設定します。これは、現在の言語が中国語であることを示します。コードは次のとおりです。

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

Vue.config.productionTip = false

App.mpType = 'app'

// グローバル変数 lang
Vue.prototype.lang = 'zh-CN'

const app = new を定義します。 Vue({

...App

})
app.$mount()

次に、翻訳コンテンツを表示する必要がある場合、対応する翻訳コンテンツを Vue の計算されたプロパティを通じて取得できます。コードは次のとおりです。

d477f9ce7bf77f53fbcf36bec1b69b7a
89c662c6f8b87e82add978948dc499d2

  <text>{{ $t('welcome') }}</text>
  <text>{{ $t('home') }}</text>
  <text>{{ $t('about') }}</text>

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

e914a3ca3d6f3d3ba29bc63eacfc88aa
export default {
計算済み: {

  // 获取翻译内容
  $t() {
     return function(key) {
        const lang = this.$root.lang
        // 根据当前语言从语言包文件中获取对应的翻译内容
        let translations = {}
        try {
           translations = require(`../lang/${lang}.json`)
        } catch (e) {
           console.warn(`Translation file not found for language: ${lang}`)
        }
        return translations[key] || ''
     }
  }

}
}
2cacc6d41bbb37262a98f745aa00fbf0

このようにして、 lang 変数が en-US になると、ページ上のテキスト コンテンツが自動的に英語に切り替わります。

3. 言語切り替えボタン
ユーザーが言語を切り替えやすくするために、ページ上に言語を切り替えるボタンを追加できます。ユーザーがボタンをクリックすると、現在の言語が切り替わります。

まず、次のコードを使用してページにボタンを追加します:

d477f9ce7bf77f53fbcf36bec1b69b7a
89c662c6f8b87e82add978948dc499d2

  切换语言
  <text>{{ $t('welcome') }}</text>
  <text>{{ $t('home') }}</text>
  <text>{{ $t('about') }}</text>

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

次に、ページに対応するスクリプトに switchLanguage メソッドを追加します。コードは次のとおりです。

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
メソッド: {

  // 切换语言
  switchLanguage() {
     // 获取当前语言
     const lang = this.$root.lang
     // 切换为另一种语言
     this.$root.lang = (lang === 'zh-CN' ? 'en-US' : 'zh-CN')
  }

}
}
2cacc6d41bbb37262a98f745aa00fbf0

上記の効果を達成した後、ユーザーがボタンをクリックすると、ページ上のテキスト コンテンツが表示されます。現在の言語に応じて自動的に切り替わります。

まとめ
上記の手順により、uniapp に多言語切り替え機能を実装することができます。まず、さまざまな言語で翻訳コンテンツを保存する言語パック ファイルを作成し、グローバル変数を設定して言語を切り替え、ページ上の計算された属性を通じて対応する翻訳コンテンツを取得します。最後に、言語を切り替えるボタンを追加して言語を切り替えます。

以上はuniappに多言語切り替え機能を実装する手順です。

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