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国际化配置与实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue使用xlsx和xlsx-style导出表格出现部分样式缺失的问题解决
这篇文章主要为大家详细介绍一下Vue使用xlsx-style导出excel时样式的设置,以及出现添加背景色,合并单元格部分样式缺失问题的解决,需要的可以参考下2024-01-01解决vite项目Uncaught Syntaxerror:Unexpected token>vue项
这篇文章主要介绍了解决vite项目Uncaught Syntaxerror:Unexpected token>vue项目上线白屏问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论