UniApp の構成と多言語国際化の実装-uni-app-php.cn

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

WBOY

リリース： 2023-07-04 08:34:36

オリジナル

2942 人が閲覧しました

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

多言語ファイルの構成

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

// lang/index.js

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

ログイン後にコピー

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

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;'><template> <view> <text>{{ $t('hello') }}</text> <text>{{ $t('welcome') }}</text> </view> </template> <script> export default { mounted() { console.log(this.$t('hello')) // 输出对应语种的文本 } } </script></pre><div class="contentsignin">ログイン後にコピー</div></div>

言語の切り替え

// 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 サイトの他の関連記事を参照してください。