首页 > 网络编程 > JavaScript > javascript类库 > vue.js > uniapp国际化配置与实现

uniapp项目国际化标准的配置与实现

2023-11-18 11:38:24 作者：Wen先森

UniApp是一种基于Vue.js的跨平台开发框架,可以快速地开发同时运行在多个平台的应用程序,这篇文章主要介绍了uniapp项目国际化标准的配置与实现,需要的朋友可以参考下

UniApp是一种基于Vue.js的跨平台开发框架，可以快速地开发同时运行在多个平台的应用程序。这篇文章主要介绍了uniapp项目国际化标准的配置与实现,需要的朋友可以参考下。

创建资源文件

创建一个locale文件夹，新增index.js,en.json,zh-hans.json

配置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

main.js 引入

// VUE2
import i18n from './locale'

Vue.use(i18n)

const app = new Vue({
	i18n,
  ...App
})

国际化json文件内容

{
  "index.title": "Hello i18n"
}

页面使用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')

在js文件中使用国际化

import i18n from '../locale'

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('')

与后台同步切换语言文件

利用封装的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"

在页面切换语言

注意：页面中设置语言后需要调用 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>

到此这篇关于uniapp项目国际化标准的配置与实现的文章就介绍到这了,更多相关uniapp国际化配置与实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！