快捷導(dǎo)航

在uniapp中實(shí)現(xiàn)中英文切換的方法

更新時(shí)間：2023年11月01日 09:33:55 作者：掘金歸海一刀

最近使用uniapp做了個(gè)APP,由于客戶是巴西的,所以使用中文已經(jīng)滿足不了客戶需求了,本打算直接使用英文開發(fā)算了,老板非要做成可以中英文切換的,沒辦法只能開干,需要的朋友可以參考下

具體實(shí)現(xiàn)步驟

1.安裝插件：首先，需要安裝用于管理多語言的插件。我們可以選擇 vue-i18n插件，它是一款比較流行的國際化插件，重要的是它可以在uniApp 中使用。直接在終端中執(zhí)行以下命令即可：

npm install vue-i18n

安裝成功我們可以看到項(xiàng)目下多了個(gè)node_modules目錄，里面有vue-i18n插件了。

2.創(chuàng)建兩個(gè)js文件zh.js和en.js，用戶保存翻譯的中英文內(nèi)容，這也沒辦法，這樣自己翻譯的比較準(zhǔn)確。我這里是放到了common/util目錄下，這需要你自己看放哪里合適了。

zh.js實(shí)例如下：

export default {
	common:{
		switch:'切換語言',
		setting:'設(shè)置中心',
		back:'返回',
		account:'賬號(hào)',
		login:'登錄',
		password:'密碼'
	}
}

en.js實(shí)例如下：

export default {
	common:{
		switch:'Switch language',
		setting:'Setting',
		back:'Back',
		account:'Account',
		login:'Login',
		password:'Password'
	}
}

3.在入口文件main.js中初始化 vue-i18n 插件，并配置多語言支持，即加入以下代碼：

import VueI18n from 'vue-i18n'
import zh from './common/util/zh.js'
import en from './common/util/en.js'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en', // 默認(rèn)語言為英文
  messages: {
    en,
    zh
  }
})

在最后掛載到app的地方加入上面定義的i18n

new Vue({ 
    i18n, 
    // 其他配置... 
    }).$mount('#app')

4.下面就是在設(shè)置頁面做個(gè)切換語言的功能了，我在個(gè)人中心的設(shè)置頁面寫了一下樣式：

[注] 代碼邏輯很簡單，就是寫了個(gè)語言切換樣式，切換時(shí)觸發(fā)checkChange事件，從而達(dá)到切換語言的目的，代碼如下：

<template>
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="backText">{{$t('common.back')}}</block>
				<block slot="content">{{$t('common.setting')}}</block>
				<!-- <view slot="right"  @tap="rightClick">編輯</view> -->
			</cu-custom>
			<uni-section :title="$t('common.switch')" type="line">
				<view class="uni-px-5 uni-pb-5">
					<uni-data-checkbox v-model="lang" :localdata="items" @change="checkChange"></uni-data-checkbox>
				</view>
			</uni-section>
		</scroll-view>
	</view>
</template>

<script>
	import api from '@/api/api.js'
	export default {
		data() {
			return {
				items: [{
						value: 'en',
						text: 'English'
					},
					{
						value: 'zh',
						text: '中文簡體'
					}
				],
				lang: 'en'
			};
		},
		onLoad() {},
		methods: {
			checkChange: function(evt) {
				this.$i18n.locale = evt.detail.value;
			},
		}
	}
</script>

5.從上面代碼我們可以看出，在組件模板中使用$t方法獲取對(duì)應(yīng)的語言文本：

<template>
  <view>
    <text>{{ $t('common.switch') }}</text> <!-- 使用 $t 方法獲取對(duì)應(yīng)語言的文本 -->
  </view>
</template>

6.如果是js中需要設(shè)置多語言，我們可以使用this.$t()方式獲取對(duì)應(yīng)的語言文本，如：

this.loginText = this.$t('common.login')

7.到此我們需要的功能基本就實(shí)現(xiàn)了，剩下的就是需要翻譯什么往js里面寫，需要的地方獲取就行，來看下效果：

總結(jié)

好了，通過以上步驟我們已經(jīng)知道怎么實(shí)現(xiàn)多語言切換了，如果需要增加其他語言，我們可以繼續(xù)增加js語言翻譯文件，按照上面的方法引入即可；這種方式跟我之前用elementUI做的后臺(tái)語言切換實(shí)現(xiàn)方式一模一樣，可見平時(shí)多積累，后面再碰到相同的問題就很容易解決了。

以上就是在uniapp中實(shí)現(xiàn)中英文切換的方法的詳細(xì)內(nèi)容，更多關(guān)于uniapp中英文切換的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: