uniapp国际化配置

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.baseUrlconst request = config => {// 是否需要设置 tokenconst isToken = (config.headers || {}).isToken === falseconfig.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] = responseif (error) {toast(i18n.t('request.unusual'))reject(i18n.t('request.unusual'))return}const code = res.data.code || 200const 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 } = errorif (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>