uniapp vue2版本如何设置i18n

embedded/2025/1/8 23:40:57/

如何设置i18n在该软件设置过语言的情况下优先选择所设置语言,在没有设置的情况下,获取本系统默认语言就,将系统默认语言设置为当前选择语言。

1、下载依赖:

npm install vue-i18n --save

2、创建相关文件(在最外层,与main.js平级)

3、en文件下:

{"pageJson.switchLanguage": "Switch Language","checkLanguage.chinese": "Chinese","checkLanguage.russian": "Russian","checkLanguage.english": "English","checkLanguage.auto": "Automatic","checkLanguage.applicationLanguage": "Current language:","checkLanguage.language": "Switch Language:","checkLanguage.restartApp": "Applying this setting will restart the app"
}

4、zh_CN文件:

{"pageJson.switchLanguage": "切换语言","checkLanguage.chinese": "中文","checkLanguage.russian": "俄语","checkLanguage.english": "英文","checkLanguage.auto": "自动","checkLanguage.applicationLanguage": "当前语言:","checkLanguage.language": "语言","checkLanguage.restartApp": "应用此设置将重启App"
}

5、index文件:

import en from './en.json'
import zh_CN from './zh_CN.json'export default {en,'zh_CN': zh_CN
}

6、main.js文件:(locale取值逻辑为:优先获取locastorage中的值,如果locastorage中不存在,获取当前系统的值并赋值)

import Vue from 'vue'
import App from './App'import uView from "uview-ui";
Vue.use(uView);import messages from './local/index.js'
let i18nConfig = {// locale: uni.getLocale(),locale: uni.getStorageSync('locale') != null && uni.getStorageSync('locale') != undefined && uni.getStorageSync('locale') != '' ? (uni.getStorageSync('locale').startsWith('zh') ? 'zh_CN' : 'en') : (uni.getLocale().startsWith('zh') ? 'zh_CN' : 'en'),messages
}
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue({i18n,...App
})
app.$mount()

7、将时区和uniapp当前所选择的值放入请求头中(cookie字段uniapp请求头回自动屏蔽,所以设置为其他字段传给后端)

时区获取使用moment-timezone,三方插件(具体使用请查看我的另外一篇文章:https://blog.csdn.net/xiao_qiang666/article/details/144984641?spm=1001.2014.3001.5502)

import moment from 'moment-timezone';const timeZone = moment.tz.guess();
let localLanguage = uni.getStorageSync('locale');
let cookieObj = null
if (localLanguage && localLanguage == 'zh_CN') {cookieObj = 'za-language=zh-CN; timeZone=' + timeZone
} else if (localLanguage && localLanguage == 'en') {cookieObj = 'za-language=en_US; timeZone=' + timeZone
} else {let systemInfo = uni.getSystemInfoSync();let systemLocale = systemInfo.language;if (systemLocale && systemLocale == 'zh-CN') {cookieObj = 'za-language=zh_CN; timeZone=' + timeZone} else {cookieObj = 'za-language=en_US; timeZone=' + timeZone}}//以其中一个为例
let _get = function(url, obj, callback) {return ajax({method: 'GET',header: {'content-type': 'multipart/form-data; boundary=XXX','cache-control': 'no-cache','xcookie': cookieObj,'Authorization': 'Bearer ' + uni.getStorageSync('token'),},url: url,data: utils.formatForm(obj),success: function(res) {// let pages = getCurrentPages();if (res.code === 200) {callback && callback(res);}}})
}

8、语言切换页面:
 

<template><view class="container"><view class="card_container"><view class="list-item"><text class="k">{{$t(`checkLanguage.applicationLanguage`)}}</text><text class="v">{{applicationLocale.startsWith('zh')?'中文':'English' }}</text></view><view class="locale-setting">{{$t(`checkLanguage.language`)}}</view><view class="locale-list"><view class="locale-item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)"><text class="text">{{item.text}}</text><text class="icon-check" v-if="item.code == applicationLocale"></text></view></view></view></view>
</template><script>export default {data() {return {systemLocale: '',applicationLocale: '',curChange: null}},computed: {locales() {return [{text: this.$t('checkLanguage.auto'), //自动code: 'auto'}, {text: "English",code: 'en'},{text: "中文",code: 'zh_CN'}]}},onLoad() {let systemInfo = uni.getSystemInfoSync();this.systemLocale = systemInfo.language;this.applicationLocale = uni.getLocale();this.isAndroid = systemInfo.platform.toLowerCase() === 'android';uni.onLocaleChange((e) => {this.applicationLocale = e.locale;})},methods: {onLocaleChange(e) {if (this.isAndroid) {uni.showModal({content: this.$t(`checkLanguage.restartApp`),success: (res) => {if (res.confirm) {uni.setLocale(e.code);uni.setStorageSync('locale', e.code);this.$i18n.locale = e.code;}}})} else {uni.setLocale(e.code);this.$i18n.locale = e.code;}}}}
</script><style>.container {height: 100vh;padding: 20% 10%;display: flex;justify-content: center;}.card_container {height: 500upx;width: 100%;background-color: #FFF;padding: 8%;border-radius: 24upx;}.title {font-size: 16px;font-weight: bold;margin-bottom: 15px;}.description {font-size: 14px;opacity: 0.6;margin-bottom: 15px;}.detail-link {font-size: 14px;word-break: break-all;}.link {color: #007AFF;margin-left: 10px;}.locale-setting {font-size: 16px;font-weight: bold;margin-top: 25px;margin-bottom: 5px;padding-bottom: 5px;border-bottom: 1px solid #f0f0f0;}.list-item {font-size: 14px;padding: 10px 0;}.list-item .v {margin-left: 5px;}.locale-item {display: flex;flex-direction: row;padding: 10px 0;}.locale-item .text {flex: 1;}.icon-check {margin-right: 5px;border: 2px solid #007aff;border-left: 0;border-top: 0;height: 12px;width: 6px;transform-origin: center;/* #ifndef APP-NVUE */transition: all 0.3s;/* #endif */transform: rotate(45deg);}
</style>

9、page.json中使用:

代码:

"%pageJson.signOut%"

10、正常页面中使用:

template中:{{$t(`measure.concentration`)}}
script中:this.$t(`measure.linkDevice`)


http://www.ppmy.cn/embedded/152414.html

相关文章

pygame飞机大战

飞机大战 1.main类2.配置类3.游戏主类4.游戏资源类5.资源下载6.游戏效果 1.main类 启动游戏。 from MainWindow import MainWindow if __name__ __main__:appMainWindow()app.run()2.配置类 该类主要存放游戏的各种设置参数。 #窗口尺寸 #窗口尺寸 import random import p…

力扣 跳跃游戏

每次更新目标位置时&#xff0c;实际上是在做一个局部的最优选择&#xff0c;选择跳跃能够到达当前目标位置的最远位置。因为每次更新目标位置时&#xff0c;都是基于当前能跳跃到的最远位置&#xff0c;因此最终的结果是全局最优的。 题目 从前往后遍历&#xff0c;更新可以到…

UE4_用户控件_4_Widgets嵌套Widgets构建复杂系统

一、效果展示&#xff1a; 二、创建嵌套控件UMG_NestedWidgets 1、新建用户控件&#xff0c;并更名为UMG_NestedWidgets。 2、拖拽图像到画布面板&#xff0c;调整参数如下&#xff1a; 3、拖拽垂直框到画布面板&#xff0c;调整参数如下&#xff1a; 4、添加滚动框&#xff0…

JVM生产环境常用参数配置及调优建议

一、生产常用参数配置 JAVA_OPTS"-server -Xms3000m -Xmx3000m -Xmn1500m -XX:UseG1GC -XX:ConcGCThreads8 -XX:PrintGCDetails -XX:PrintGCTimeStamps -Xloggc:./g1-gc.log -XX:MaxMetaspaceSize256m -XX:-UseGCOverheadLimit -XX:UseCompressedOops -XX:HeapDumpOnOu…

使用ElasticSearch查询

从一个query body开始 {"query": {"bool": {"disable_coord": true,"must": [{"match": {"enabled": "1"}},{"range": {"effectTime": {"lt": "2017-06-13 13:33:…

明源地产ERP VisitorWeb_XMLHTTP.aspx SQL注入漏洞复现

0x01 产品简介 明源地产ERP是一款专门为房地产行业设计的企业资源规划(ERP)系统,旨在帮助房地产企业实现全面的信息化管理,提高运营效率和管理水平。系统涵盖了项目管理、财务管理、供应链管理、客户关系管理(CRM)、人力资源管理等多个核心功能模块,通过整合企业的各个…

docker镜像制作的命令,docker自定义镜像

一.Dockerfile制作镜像的命令1.Dockerfile文件的编写格式FROM //指定基础镜像&#xff08;唯一&#xff09;FROM 镜像名:标签USER //启动容器使用的用户,切换用户执行命令&#xff08;唯一)相当与sudo -u nobody,切换用户执行命令RUN //在容器内执行命令&#xff0c;可以写多条…

【办公类-47-02】20250103 课题资料快速打印(单个docx转PDF,多个pdf合并一个PDF 打印)

背景需求&#xff1a; 2023区级大课题《运用Python优化3-6岁幼儿学习活动材料的实践研究》需要做阶段资料 本来应该2024年6月就提交电子稿和打印稿。可是python学具的教学实验实在太多了&#xff0c;不断生成&#xff0c;我忙着做教学&#xff0c;都没有精力去整理。 2025年…