uniapp实现中英文切换



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',
					})

				}
			},
相关推荐
gongzemin18 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
-代号952735 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据1 小时前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
三翼鸟数字化技术团队2 小时前
Vue自定义指令最佳实践教程
前端·vue.js
猿榜3 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队3 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Spark2383 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
Mintopia3 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js