1、创建资源文件
创建一个locale文件夹，新增index.js,en.json,zh-hans.json
2.配置locale文件夹中的index.js文件
import Vue from 'vue'
import VueI18n from 'vue-i18n'// v8.x
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
import ja from './ja.json'
Vue.use(VueI18n)
const messages = {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant,
ja
}
let i18nConfig = {
locale: uni.getLocale(),// 获取已设置的语言
messages
}
const i18n = new VueI18n(i18nConfig)
export default i18n
3、main.js 引入
// VUE2
import i18n from './locale'
Vue.use(i18n)
const app = new Vue({
i18n,
...App
})
4、国际化json文件内容
{
"index.title": "Hello i18n"
}
5、页面使用i18n
vue和js里的内容国际化是与web通行的方案。
<template>
<view class="container">
<view class="title">{
{$t('index.title')}}</view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
//普通文本使用方式：
{
{
$t('index.titlee') }}
//标签内使用方式：
:placeholder="$t('index.title')"
//js内使用方式
this.$t('index.title')
6、在js文件中使用国际化
import i18n from '../locale'
export default {
'401': i18n.t('errorCode.401'),
'403': i18n.t('errorCode.403'),
'404': i18n.t('errorCode.404'),
'default': i18n.t('errorCode.default')
}
// 即在引入后使用
i18n.t('')
7、与后台同步切换语言文件
利用封装的request.js对发给后台的接口Header进行统一处理
import store from '@/store'
import config from '@/config'
import {
getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import {
toast, showConfirm, tansParams } from '@/utils/common'
import i18n from '../locale'
let timeout = 60000
const baseUrl = config.baseUrl
const request = config => {
// 是否需要设置 token
const isToken = (config.headers || {
}).isToken === false
config.header = config.header || {
}
if (getToken() && !isToken) {
config.header['Authorization'] = 'Bearer ' + getToken()
}
config.header["Accept-Language"] = (uni.getLocale()==='zh-Hans'?'zh':'en') || "en"
// get请求映射params参数
if (config.params) {
let url = config.url + '?' + tansParams(config.params)
url = url.slice(0, -1)
config.url = url
}
return new Promise((resolve, reject) => {
uni.request({
method: config.method || 'get',
timeout: config.timeout || timeout,
url: config.baseUrl || baseUrl + config.url,
data: config.data,
header: config.header,
dataType: 'json'
}).then(response => {
let [error, res] = response
if (error) {
toast(i18n.t('request.unusual'))
reject(i18n.t('request.unusual'))
return
}
const code = res.data.code || 200
const msg = errorCode[code] || res.data.msg || errorCode['default']
if (code === 401) {
showConfirm(i18n.t('request.exceedTheTimeLimit')).then(res => {
if (res.confirm) {
store.dispatch('LogOut').then(res => {
uni.reLaunch({
url: '/pages/login' })
})
}
})
reject(i18n.t('request.ofNoAvail'))
} else if (code === 500) {
toast(msg)
reject('500')
} else if (code !== 200) {
toast(msg)
reject(code)
}
resolve(res.data)
})
.catch(error => {
let {
message } = error
if (message === 'Network Error') {
message = i18n.t('request.unusual')
} else if (message.includes('timeout')) {
message = i18n.t('request.overtime')
} else if (message.includes('Request failed with status code')) {
message = i18n.t('request.system') + message.substr(message.length - 3) + i18n.t('request.unusual2')
}
toast(message)
reject(error)
})
})
}
export default request
即将选择语言写到接口的Header中，实现与后端同步切换语言
config.header["Accept-Language"] = (uni.getLocale()==='zh-Hans'?'zh':'en') || "en"
8、在页面切换语言
注意：页面中设置语言后需要调用 this.$i18n.locale = ‘zh-Hans’ 后生效
<template>
<view>
<view class="login-footer">
<text @click="changeLang('en')" style="margin-right: 5px;" :class="lang==='en'?'text-black':'text-blue'">English</text>
<text @click="changeLang('zh')" style="margin-left: 5px;" :class="lang==='en'?'text-blue':'text-black'">中文</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 语言标识
lang:''
}
},
methods: {
// 动态更改语言
changeLang(e) {
this.lang = e || 'en'
console.log(e);
if (e === 'en') {
uni.setLocale('en');
this.$i18n.locale = 'en'
this.changTitle()
} else {
uni.setLocale('zh-Hans');
this.$i18n.locale = 'zh-Hans'
this.changTitle()
this.lang = 'zh'
}
}
}
}
</script>
<style lang="scss">
.login-footer {
height: 40px;
line-height: 40px;
position: fixed;
// bottom: 40px;
margin-top: 20px;
width: 100%;
text-align: center;
font-family: Arial;
font-size: 18px;
letter-spacing: 1px;
}
</style>