uniapp实现中英文切换

小小心LOVE2024-11-21 9:19

home.js

复制代码

const data = {
    ZH: {
        content1: "苹果",
    },
    EN: {
        content1: "Apple",
    }
}
export default data

index.js

复制代码

import home from "./home.js"
export default {
    home
}

en.js

复制代码

import part1 from './data/part1/index.js'
const en = {
	language: {
		name: "english"
	},
	part1: {
		home: {
			content1: part1.home.EN.content1,
		}
     }
}
export default en

zh.js

复制代码

import part1 from './data/part1/index'
const zh = {
	language: {
		name: "中文"
	},
	part1: {
		home: {
			content1: part1.home.ZH.content1,
		},
	},
}
export default zh

使用

复制代码

{{$t("part1.home.content1")}}

页面标题

复制代码

onShow: function() {
			uni.hideHomeButton();
			if (this.$i18n.locale == 'en') {
				uni.setNavigationBarTitle({
					title: 'Home Page'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '首页'
				});
			}
		},

main.js

复制代码

import ZH from '@/language/zh.js'  //中文最终汇总暴露的信息
import EN from '@/language/en.js'  //英文
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
  // localStorage.getItem('languageSet') || 'zh'
  locale: 'zh',   //从localStorage里获取用户中英文选择，没有则默认中文
  messages: {
    'zh': ZH,
    'en': EN
  }
})

const app = new Vue({
	i18n,
	store,
	...App
})

使用

复制代码

<u-button size="medium" type='primary' @click="chagelanguage">{{ language }}</u-button>

chagelanguage() {
				this.$i18n.locale == 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh' //设置中英文模式
				if (this.$i18n.locale === 'zh') {
					this.language = "en"
					uni.setNavigationBarTitle({
						title: '首页'
					});
					uni.setTabBarItem({
						index: 0,
						text: '首页',
					})
					uni.setTabBarItem({
						index: 1,
						text: '我的',
					})
				} else {
					this.language = "zh"
					uni.setNavigationBarTitle({
						title: 'Home Page'
					});
					uni.setTabBarItem({
						index: 0,
						text: 'Home Page',
					})
					uni.setTabBarItem({
						index: 1,
						text: 'User',
					})

				}
			},