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.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>