hbuilderx中uniapp动态设置导航栏和标题栏语言
一 、下载vue-i18n文件引入项目
hbuilder本身是带有能够运行nmp命令的终端,由于用不到全部文件,我采用的是在电脑cmd窗口下载后选中文件放入项目(只需要其中的vue-i18n.js文件).下载方法有两种:
- hbuilderx终端运行命令
npm install vue-i18n --save
- cmd运行命令
npm install vue-i18n --save
下载完成后,找到下载内容中的vue-i18n.js文件放入项目中
二 、多语言静态变量文件添加
根据自己的情况添加对应的文件就行
例如:
中文简体:zh_CN.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原生的导航栏,标题栏进行常规设置。
- 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"
}
]
}
}
- 在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>
个人学习记录,如有问题还望指正,谢谢!!