快捷導(dǎo)航

uniapp項目國際化標(biāo)準(zhǔn)的配置與實現(xiàn)

更新時間：2023年11月18日 11:38:24 作者：Wen先森

UniApp是一種基于Vue.js的跨平臺開發(fā)框架,可以快速地開發(fā)同時運行在多個平臺的應(yīng)用程序,這篇文章主要介紹了uniapp項目國際化標(biāo)準(zhǔn)的配置與實現(xiàn),需要的朋友可以參考下

創(chuàng)建資源文件

創(chuàng)建一個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(),// 獲取已設(shè)置的語言
  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文件內(nèi)容

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

頁面使用i18n

vue和js里的內(nèi)容國際化是與web通行的方案。

<template>
  <view class="container">
    <view class="title">{{$t('index.title')}}</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
      }
    }
  }
</script>

//普通文本使用方式：
{{ $t('index.titlee') }}
//標(biāo)簽內(nèi)使用方式：
:placeholder="$t('index.title')"
//js內(nèi)使用方式
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對發(fā)給后臺的接口Header進(jìn)行統(tǒng)一處理

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 => {
  // 是否需要設(shè)置 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參數(shù)
  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中，實現(xiàn)與后端同步切換語言

config.header["Accept-Language"] = (uni.getLocale()==='zh-Hans'?'zh':'en') || "en"

在頁面切換語言

注意：頁面中設(shè)置語言后需要調(diào)用 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 {
			// 語言標(biāo)識
				lang:''
			}
		},
		methods: {
		// 動態(tài)更改語言
			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>

到此這篇關(guān)于uniapp項目國際化標(biāo)準(zhǔn)的配置與實現(xiàn)的文章就介紹到這了,更多相關(guān)uniapp國際化配置與實現(xiàn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: