技術標籤：前端vueapp

hbuilderx中uniapp動態設定導航欄和標題欄語言

一 、下載vue-i18n檔案引入專案

hbuilder本身是帶有能夠執行nmp命令的終端,由於用不到全部檔案,我採用的是在電腦cmd視窗下載後選中檔案放入專案(只需要其中的vue-i18n.js檔案).下載方法有兩種:

1. hbuilderx終端執行命令

npm install vue-i18n --save

2. cmd執行命令

npm install vue-i18n --save

下載完成後,找到下載內容中的vue-i18n.js檔案放入專案中

二 、多語言靜態變數檔案新增

根據自己的情況新增對應的檔案就行

export default {
		index: {
			game: '遊戲',
			nav:'首頁',
			title:'首頁'
		},
		login: {
			game: '遊戲',
			nav:'我的',
			title:'登陸'
		}
	}

中文繁體：zh_TW.js

export default {
		index: {
			game: '遊戲',
			nav:'首頁',
			title:'首頁'
		},
		login: {
			game: '遊戲',
			nav:'我的',
			title:'登入'
		}
	}
 

英文：en_US.JS

export default {
		index: {
			game: 'game',
			nav:'home',
			title:'home'
		},
		login: {
			game: 'game',
			nav:'login',
			title:'login'
		},
	}

三、載入上面的配置檔案
首先使用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"
			}
			]
	} 
}

 

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()  

四、頁面展示效果
程式碼部分：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>

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>

個人學習記錄，如有問題還望指正，謝謝！！