uniapp の国際化 (html、js、タブバー、ナビゲーションバータイトルテキスト)

あなたが作成したアプリが uniapp+vue3 で構築されている場合、この国際化はあなたに適しているはずです。

問題の説明: アプリには海外のユーザーもいるため、顧客のニーズを満たすために国際化された言語を構成する必要があります。

解決策: uniapp に組み込まれた i18n 多言語構成。ユーザーが表示できる単語 ( HTML ページ、js の一部のプロンプトコード、タブバーナビゲーション、navigationBarTitleText を含む) が国際化され、リアルタイムで言語を切り替える必要があります。達成することができます。

インストール

プロジェクト作成時に選択したテンプレートが uni-ui プロジェクトの場合、npm vue-i18n は必要ありません。

npm install vue-i8n --save

i18n の設定を開始しましょう。Web サイトを参照してください: uni-app 公式 Web サイト

ファイルディレクトリ:

1.言語パックを構成する

コード構成

便宜上、多言語構成コードは locale/index.ts に記述され、その後 mian.js に導入されます。

import {
	createI18n
} from 'vue-i18n'

import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'


const messages = {
	en,
	'zh-Hans': zhHans,
	'zh-Hant': zhHant
}

const i18n = createI18n({
	locale: uni.getLocale() || 'zh-Hant', // 获取已设置的语言，如果没有默认繁体
	messages
})

export default i18n

main.js で導入 (プロジェクトでは vue3 を使用しているため、現在は vue3 のみが構成されています)

import App from './App'
import i18n from '@/locale/index'

// vue2
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	...App
})
app.$mount()
// #endif

// vue3
// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	app.use(i18n)
	return {
		app
	}
}
// #endif

HTMLページでの使用

$t は i18n に付属するグローバル設定メソッドで、HTML で直接使用できます。

<view class="title">{
   
   {$t('index.hello')}}</view>

jsまたはtsで使用する

Vue2ではjsで多言語でthis.$t()を使用しますが、vue3ではこれが未定義なのでここでは以下の方法を使用します

<script setup lang="ts">
    import { useI18n } from 'vue-i18n'
    const { t } = useI18n()

    const test = () => {
        console.log(t('index.home'))
    }
</script>

Pages.json で %% プレースホルダーを使用する

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "%index.home%"
			}
		},
		{
			"path": "pages/about/about",
			"style": {
				"navigationBarTitleText": "%index.about%"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {},
	"tabBar": {
		"list": [
			{
				"pagePath": "pages/index/index",
				"text": "%index.home%"
			},
			{
				"pagePath": "pages/about/about",
				"text": "%index.about%"
			}
		]
	}
}

多言語に切り替える

uni.setLocale('set value') を通じて言語を設定します。オプションの値には、zh-Hans (簡体字中国語)、zh-Hant (繁体字中国語)、en (英語) が含まれますが、これらに限定されません。詳細については、上記公式サイトをご参照ください。

注: uni.setLocale() メソッドはアプリケーションを再起動します。