注意:

h5、安卓可以;ios、微信小程序存在问题参考最下面官网解决

1、下载插件hello-i18n 地址:hello-i18n 示例工程 - DCloud 插件市场 uni-app 国际化演示https://ext.dcloud.net.cn/plugin?id=6462

2.在与pages目录同级新建locale目录放置语言json文件。如:uni-app.en.json,uni-app.zh-Hans.json,uni-app.zh-Hant.json

3.配置main.js

// 国际化 json 文件,文件内容详见下面的示例
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
}

let i18nConfig = {
  locale: uni.getLocale(),// 获取已设置的语言
  messages
}


import Vue from 'vue'
import VueI18n from 'vue-i18n'// v8.x
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  i18n,
  ...App
})
app.$mount()

4.index.vue中进行切换

<template>
	<view class="container">
		<view class="locale-item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">
			<text class="text">{{item.text}}</text>
			<text class="icon-check" v-if="item.code == applicationLocale"></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				applicationLocale: '', // 应用设置的语言
				// 语言类型数组
				locales:[{
						text: this.$t('locale.en'),
						code: 'en'
					},
					{
						text: this.$t('locale.zh-hans'),
						code: 'zh-Hans'
					},
					{
						text: this.$t('locale.zh-hant'),
						code: 'zh-Hant'
					},
					{
						text: this.$t('locale.ja'),
						code: 'ja'
					}
				]
			}
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync();
			this.applicationLocale = uni.getLocale(); // 获取当前设置的语言
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			uni.onLocaleChange((e) => { // 用于监听应用语言切换
				this.applicationLocale = e.locale;
			})
		},
		methods: {
			onLocaleChange(e) {
				if (this.isAndroid) {
					uni.showModal({
						content: this.$t('index.language-change-confirm'),
						success: (res) => {
							if (res.confirm) {
								uni.setLocale(e.code); // 设置当前语言
							}
						}
					})
				} else {
					uni.setLocale(e.code); // 设置当前语言
				}
			}
		}
	}
</script>

<style>
	
</style>

5.参考

uni-app官网https://uniapp.dcloud.net.cn/tutorial/i18n.html#uni-frameworkuni.getLocale() | uni-app官网https://uniapp.dcloud.net.cn/api/ui/locale.html#setlocale

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐