uniapp动态设置导航栏和标题栏语言_uniapp tabbar语言

hbuilderx中uniapp动态设置导航栏和标题栏语言

一 、下载vue-i18n文件引入项目

hbuilder本身是带有能够运行nmp命令的终端,由于用不到全部文件,我采用的是在电脑cmd窗口下载后选中文件放入项目(只需要其中的vue-i18n.js文件).下载方法有两种:

1. hbuilderx终端运行命令

npm install vue-i18n --save
1

2. cmd运行命令

npm install vue-i18n --save
1

下载完成后,找到下载内容中的vue-i18n.js文件放入项目中

二 、多语言静态变量文件添加

根据自己的情况添加对应的文件就行

例如：
中文简体：zh_CN.js

export default {
		index: {
			game: '游戏',
			nav:'首页',
			title:'首页'
		},
		login: {
			game: '游戏',
			nav:'我的',
			title:'登陆'
		}
	}
1
2
3
4
5
6
7
8
9
10
11
12

中文繁体：zh_TW.js

export default {
		index: {
			game: '遊戲',
			nav:'首頁',
			title:'首頁'
		},
		login: {
			game: '遊戲',
			nav:'我的',
			title:'登入'
		}
	}
1
2
3
4
5
6
7
8
9
10
11
12

英文：en_US.JS

export default {
		index: {
			game: 'game',
			nav:'home',
			title:'home'
		},
		login: {
			game: 'game',
			nav:'login',
			title:'login'
		},
	}
1
2
3
4
5
6
7
8
9
10
11
12

三、加载上面的配置文件
首先使用uniapp原生的导航栏，标题栏进行常规设置。

1. page.json中设置底部导航栏

{	
	"dependencies": {
	  "better-scroll": "0.1.15"
	},
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
		    "path" : "pages/login/login",
		    "style" : {
				"navigationBarTitleText": "登录"
			}
		}
    ],
	"style": {
	    "app-plus": {
	        "animationType": "fade-in",
	        "animationDuration": 300,
			"titleNView": false
	    }
	},
	"tabBar":{
		"color":"#000000",
		"selecttedColor":"#00aaff",
		"borderStyle":"black",
		"backgroundColor":"#ffffff",
		"list":[
			{
				"pagePath":"pages/index/index",
				"text":"首页",
				"iconPath":"static/img/index-img/ftmenu1.png",
				"selectedIconPath":"static/img/index-img/f2.png"  
			},
			{
				"pagePath":"pages/login/login",
				"text":"我的",
				"iconPath":"static/img/index-img/ftmenu4.png",
				"selectedIconPath":"static/img/index-img/h4.png"
			}
			]
	} 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

2. 在main.js中引入i18n文件,配置语言。

import Vue from 'vue'
import App from './App'
//多语言文件
import LangEn from './lang/en_US.js'
import LangChs from './lang/zh_CN.js'
import LangTWs from './lang/zh_TW.js'
import LangJap from './lang/ja_JP.js'
//i18n文件
import VueI18n from './lang/vue-i18n'
Vue.config.productionTip = false
Vue.use(VueI18n)    
//指定特定语言环境下加载那个文件
const i18n = new VueI18n({    
  locale: 'zh_CN',    
  messages: {
    'en_US': LangEn,
    'zh_CN': LangChs,
	'ja_JP': LangJap,
	'zh_TW': LangTWs
  }    
})    
//i18n.locale硬件环境所使用的语言
Vue.prototype._i18n = i18n    
Vue.prototype.$i18nMsg = function(){  
    return i18n.messages[i18n.locale]  
}  
const app = new Vue({    
  i18n,    
  ...App    
})    
app.$mount()  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

四、页面展示效果
代码部分：index.vue

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text>{{ i18n.game }}</text>  
		</view>
		<view class="langChange">
			<button class="button" @tap="change" data-lang="zh_CN">中文简体</button>
			<button class="button" @tap="change" data-lang="zh_TW">中文繁体</button>
			<button class="button" @tap="change" data-lang="en_US">英语</button>
			<button class="button" @tap="change" data-lang="ja_JP">日语</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		computed: {  
		    i18n () {  
		      return this.$t('index')  
		    }  
		  },
		onLoad() {
		},
		onShow() {
		    uni.setNavigationBarTitle({// 修改头部标题
		        title: this.$i18n.messages[this.$i18n.locale].index.title
		    });
		    uni.setTabBarItem({// 修改底部导航
		        index: 0,
		        text: this.$i18n.messages[this.$i18n.locale].index.nav,
		    });
			uni.setTabBarItem({// 修改底部导航
			    index: 1,
			    text: this.$i18n.messages[this.$i18n.locale].login.nav,
			});
		},
		methods: {
			change(e) {
				let dataSet = e.currentTarget.dataset;
				this.$i18n.locale=dataSet.lang;
				uni.reLaunch({
					url: 'index'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.langChange{
		display: flex;
		margin-top: 200rpx;
	}
	.button{
		background-color: #007AFF;
		margin: 10rpx;
		color: #fff;
		font-size: 20rpx;
		width:150rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

login.vue

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text>{{ i18n.game }}</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//title: 'Hello'
			}
		},
		computed: {  
		    i18n () {  
		      return this.$t('index')  
		    }
		  },
		onLoad() {
			uni.setTabBarItem({
				index:0,
				text:this.$i18n.messages[this.$i18n.locale].login.title
			})
		},
		onShow() {
		    uni.setNavigationBarTitle({// 修改头部标题
		        title: this.$i18n.messages[this.$i18n.locale].login.title
		    });
			uni.setTabBarItem({// 修改底部导航
			    index: 0,
			    text: this.$i18n.messages[this.$i18n.locale].index.nav,
			});
		    uni.setTabBarItem({// 修改底部导航
		        index: 1,
		        text: this.$i18n.messages[this.$i18n.locale].login.nav,
		    });
		},
		methods: {
			
		}
	}
</script>
<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

个人学习记录，如有问题还望指正，谢谢！！