uniapp多语言实现
项目引入vue-i18n实现国际化多语言,vue-i18n包 自行下载,放到libs目录下,在main.js中引入//main.jsimport Vue from 'vue'import App from './App'//多语言引入import VueI18n from './libs/vue-i18n'import en from './common/js/en.js'//英文........
·
项目使用vue-i18n实现国际化多语言
npm install vue-i18n
//main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
//多语言引入
import VueI18n from './libs/vue-i18n'
import en from './common/js/en.js'//英文
import cn from './common/js/cn.js'//中文
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: uni.getStorageSync('lang') ? uni.getStorageSync('lang') : 'zh-CN', //当前语言中文;
// locale:'en',
messages: {
'en': en,
'zh-CN': cn,
}
})
const app = new Vue({
i18n,
...App
})
app.$mount()
cn.js,en.js结构如下
//cn
export default {
message: {
home:"首页",
}
}
//en
export default {
message: {
home:"home",
}
}
在页面中使用
<template>
<view>
<text>{{$t('message.home')}}</text>
</view>
</template>
切换语言
data() {
return {
language:'zh-CN',
}
},
onShow(){
// 判断是否已经有设置过语言
if (uni.getStorageSync('lang')) {
this.language = uni.getStorageSync('lang')
//修改tabbar文字
uni.setTabBarItem({
index: 0,
text: this.$t('tabbar.tabbar1'),
})
uni.setTabBarItem({
index: 1,
text: this.$t('tabbar.tabbar2'),
})
uni.setTabBarItem({
index: 2,
text: this.$t('tabbar.tabbar3'),
})
}
},
methods: {
//切换语言
change_language(text) {
if (this.language == 'en') {
this.$i18n.locale = 'zh-CN';
this.language = 'zh-CN'
} else {
this.$i18n.locale = 'en';
this.language = 'en'
}
uni.setStorageSync('lang', this.$i18n.locale)
uni.setTabBarItem({
index: 0,
text: this.$t('tabbar.tabbar1'),
})
uni.setTabBarItem({
index: 1,
text: this.$t('tabbar.tabbar2'),
})
uni.setTabBarItem({
index: 2,
text: this.$t('tabbar.tabbar3'),
})
},
}
2020.6.13更新:
uni-app 自 3.1.5起,App 和 H5 支持框架国际化。
可以在HBuilderX
新建项目里选择Hello i18n
示例或者插件市场查看https://ext.dcloud.net.cn/plugin?id=6462
总结下最新版本使用多语言的教程(已经不再需要npm install vue-i18n):
1、创建多语言json文件,
// en.json
{
"tabbar1": "Home",
"tabbar2": "Assets",
"tabbar3": "Mine"
}
// zh-Hans.json
{
"tabbar1": "首页",
"tabbar2": "资产",
"tabbar3": "我的"
}
// index.js
import en from './en.json'
import zhHans from './zh-Hans.json'
export default {
en,
'zh-Hans': zhHans,
}
2、main.js
import messages from './locale/index'
let i18nConfig = {
locale: uni.getLocale(),
messages
}
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
const app = new Vue({
...App,
i18n,
})
app.$mount()
3、页面切换语言,展示默认语言
<h1>{{$t('tabbar1')}}</h1>
<h1>当前语言:{{applicationLocale}}</h1>
<button @click="onLocaleChange('en')">切换英文</button>
<button @click="onLocaleChange('zh-Hans')">切换中文</button>
data() {
return {
applicationLocale:'',
}
},
onShow() {
this.applicationLocale = uni.getLocale(); // 当前语言
// 用于监听应用语言切换,也可吧切换后的值存入本地,方便其他地方调用
uni.onLocaleChange((e) => {
this.applicationLocale = e.locale;
this.$i18n.locale = e.locale;
uni.setStorageSync('locale', e.locale);
})
},
methods: {
// 切换语言
onLocaleChange(e) {
console.log(e);
uni.showModal({
content: '应用此设置将重启App',
success: (res) => {
if (res.confirm) {
uni.setLocale(e);
}
}
})
},
}
4、pages.json
locale目录下 语言地区代码.json 文件中定义的 key,使用 %% 占位
"tabBar": { // 设置底部 tab 的表现
"color": "#848F9F",
"selectedColor": "#38404D",
"borderStyle": "black",
"backgroundColor": "#fff",
"list": [{
"pagePath": "pages/assets/assets",
"iconPath": "static/icon/3.png",
"selectedIconPath": "static/icon/3-3.png",
"text": "%tabbar1%"
}, {
"pagePath": "pages/mill/mill",
"iconPath": "static/icon/2.png",
"selectedIconPath": "static/icon/2-2.png",
"text": "%tabbar2%"
}, {
"pagePath": "pages/index/index",
"iconPath": "static/icon/1.png",
"selectedIconPath": "static/icon/1-1.png",
"text": "%tabbar3%"
}]
}
更多推荐
已为社区贡献15条内容
所有评论(0)