UniApp の構成と多言語国際化の実装

UniApp は、複数のプラットフォームで同時に実行されるアプリケーションを迅速に開発できる、Vue.js に基づくクロスプラットフォーム開発フレームワークです。実際の開発においては、アプリケーションのグローバル化に伴い、多言語の国際化の重要性がますます高まっています。この記事では、UniApp が多言語国際化を構成および実装する方法を紹介し、コード例を添付します。

1. 多言語ファイルの構成

まず、UniApp プロジェクトのルート ディレクトリに lang という名前のフォルダーを作成し、複数の言語を保存します。関連ファイル。 lang フォルダーに index.js という名前のファイルを作成し、複数言語とデフォルト言語を構成します。サンプル コードは次のとおりです。

// lang/index.js

export default {
  // 可选的多语言语种
  locales: ['en-US', 'zh-CN'],
  // 默认语言
  defaultLocale: 'zh-CN'
}

2. 多言語テキストの書き込み

lang## の下に locales という名前のファイルを作成します。 # フォルダー さまざまな言語のテキスト ファイルを保存するフォルダー。対応する言語ファイルを locales フォルダーに、en-US.js や zh-CN などの名前形式 language.js で作成します。 .js。サンプル コードは次のとおりです。

// lang/locales/en-US.js

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

// lang/locales/zh-CN.js

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

コンポーネントでの多言語テキストの使用

コンポーネントで多言語テキストを使用する場合は、

this.$t## を渡すことができます。 # 対応する言語のテキストを取得するメソッド。サンプル コードは次のとおりです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:vue;toolbar:false;'>&lt;template&gt; &lt;view&gt; &lt;text&gt;{{ $t('hello') }}&lt;/text&gt; &lt;text&gt;{{ $t('welcome') }}&lt;/text&gt; &lt;/view&gt; &lt;/template&gt; &lt;script&gt; export default { mounted() { console.log(this.$t('hello')) // 输出对应语种的文本 } } &lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

言語の切り替え

別の言語間で切り替えるには、Vuex を使用して現在選択されている言語を保存し、応答をトリガーできます。言語を切り替える必要がある場所。サンプル コードは次のとおりです。

// store/index.js

export default {
  state: {
    locale: 'zh-CN' // 默认语言
  },
  mutations: {
    setLocale(state, locale) {
      state.locale = locale
    }
  },
  actions: {
    changeLocale({ commit }, locale) {
      commit('setLocale', locale)
    }
  }
}

// App.vue

<template>
  <view>
    <button @click="changeLocale('en-US')">English</button>
    <button @click="changeLocale('zh-CN')">中文</button>
    <component-a></component-a>
  </view>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['changeLocale'])
  }
}
</script>

ボタンをクリックして

changeLocale

メソッドを呼び出し、現在の言語を変更します。 要約すると、UniApp での多言語国際化の構成と実装には、多言語ファイルの構成が必要です。多言語ファイルは、多言語ファイルを使用するときに

this.$t

メソッドを通じて取得されます。コンポーネント内の言語テキスト 言語に対応するテキストについては、言語を切り替える必要がある現在の言語を Vuex を使用して保存し、対応するメソッドを呼び出すことで言語を切り替えます。以上が多言語国際化を実現するためのUniAppの構成と実装方法でしたので、ご参考になれば幸いです。

以上がUniApp の構成と多言語国際化の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。