uniapp で多言語サポートと国際化を実現する方法

uniapp で多言語サポートと国際化を実現する方法

モバイル アプリケーション市場の継続的な発展に伴い、多言語環境をサポートする必要があるアプリケーションが増えています。世界中のユーザーのニーズをよりよく満たすことができます。 uniapp フレームワークでは、多言語サポートと国際化を簡単に実装できます。この記事では、uniapp で多言語サポートと国際化を実装する方法を詳しく紹介し、具体的なコード例を示します。

1. 言語ファイルの作成
まず、翻訳コンテンツをさまざまな言語で保存するための言語ファイルを作成します。 uniapp では、lang という名前のディレクトリを作成し、このディレクトリ内に各言語の翻訳ファイルを作成できます。たとえば、lang/zh-cn.js (簡体字中国語)、lang/en.js (英語)、および lang/ja.js (日本語) 3 つのファイル。

zh-cn.js ファイルには、簡体字中国語の翻訳コンテンツを保存できます。

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

en.js ファイルには、英語の翻訳コンテンツを保存できます:

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

ja.js ファイルに、日本語の翻訳コンテンツを保存できます:

export default {
  hello: 'こんにちは',
  welcome: 'ようこそ'
}

2. 言語切り替えボタンを設定します。
ユーザーが使用する言語を自由に選択できるように、ページに言語切り替えボタンを追加します。 uniapp では、uni.navigateTo メソッドを使用して言語選択ページに切り替え、選択した言語を URL パラメーターを通じて渡すことができます。

ホームページ上の index.vue ファイルで、ボタンを追加し、クリック イベントを設定できます:

<template>
  <view>
    <button @click="goToLanguagePage">切换语言</button>
    <text>{{ $t('hello') }}</text>
    <text>{{ $t('welcome') }}</text>
  </view>
</template>

<script>
export default {
  methods: {
    goToLanguagePage() {
      uni.navigateTo({
        url: '/pages/language/language'
      })
    }
  }
}
</script>

3. 言語を選択し、スイッチ
サポートされているすべての言語を表示し、言語を選択するための各言語のクリック イベントを追加する language.vue というページを作成します。

language.vue ファイルでは、uni.navigateTo メソッドを使用してホームページに戻り、選択した言語を URL パラメータを通じて渡すことができます。

<template>
  <view>
    <button @click="selectLanguage('zh-cn')">中文简体</button>
    <button @click="selectLanguage('en')">English</button>
    <button @click="selectLanguage('ja')">日本語</button>
  </view>
</template>

<script>
export default {
  methods: {
    selectLanguage(lang) {
      // 将选择的语言存储到本地缓存
      uni.setStorageSync('language', lang)
      // 返回首页并刷新
      uni.navigateBack({
        delta: 1,
        success() {
          // 刷新页面
          const pages = getCurrentPages()
          const homePage = pages[pages.length - 1]
          homePage.onLoad()
        }
      })
    }
  }
}
</script>

4. 多言語サポートと国際化
ユーザーが main.js ファイルで選択した言語に応じて、対応する翻訳ファイルを読み取り、オンに追加できます。グローバル アクセス用の Vue インスタンスのプロトタイプ。

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

// 导入语言文件
import zhCn from './lang/zh-cn.js'
import en from './lang/en.js'
import ja from './lang/ja.js'

// 读取本地缓存中的语言设置，默认为中文简体
const lang = uni.getStorageSync('language') || 'zh-cn'

// 根据语言设置读取对应的翻译文件
let messages = {}
if (lang === 'zh-cn') {
  messages = zhCn
} else if (lang === 'en') {
  messages = en
} else if (lang === 'ja') {
  messages = ja
}

// 将翻译文件添加到Vue实例的原型上，以便全局访问
Vue.prototype.$t = (key) => {
  return messages[key] || key
}

const app = new Vue({
  ...App
})
app.$mount()

この時点で、uniapp に多言語サポートと国際化機能を実装することに成功しました。ユーザーは言語切り替えボタンから使用する言語を選択し、ユーザーの選択に応じてシステムが自動的に翻訳内容を切り替えます。

まとめ
上記の手順により、uniapp での多言語サポートと国際化を実現できます。言語ファイルを作成し、言語切り替えボタンを設定し、対応する翻訳ファイルをグローバルに読み込むことで、ユーザーの選択に応じて言語環境を自動的に切り替え、対応する翻訳内容を表示できます。これにより、世界中のユーザーのニーズをより適切に満たし、アプリケーションのユーザー エクスペリエンスを向上させることができます。

上記は、uniapp で多言語サポートと国際化を実装する方法を示す具体的なコード例です。お役に立てれば！

以上がuniapp で多言語サポートと国際化を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。