ui网站一般建好大,诸城网络营销,旅游网站信息门户建设方案,同步修改 wordpress如何设置i18n在该软件设置过语言的情况下优先选择所设置语言#xff0c;在没有设置的情况下#xff0c;获取本系统默认语言就#xff0c;将系统默认语言设置为当前选择语言。
1、下载依赖#xff1a;
npm install vue-i18n --save
2、创建相关文件#xff08;在最外层在没有设置的情况下获取本系统默认语言就将系统默认语言设置为当前选择语言。
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.jsonexport default {en,zh_CN: zh_CN
}
6、main.js文件locale取值逻辑为优先获取locastorage中的值如果locastorage中不存在获取当前系统的值并赋值
import Vue from vue
import App from ./Appimport 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 appconst app new Vue({i18n,...App
})
app.$mount() 7、将时区和uniapp当前所选择的值放入请求头中cookie字段uniapp请求头回自动屏蔽所以设置为其他字段传给后端
时区获取使用moment-timezone三方插件具体使用请查看我的另外一篇文章https://blog.csdn.net/xiao_qiang666/article/details/144984641?spm1001.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-languagezh-CN; timeZone timeZone
} else if (localLanguage localLanguage en) {cookieObj za-languageen_US; timeZone timeZone
} else {let systemInfo uni.getSystemInfoSync();let systemLocale systemInfo.language;if (systemLocale systemLocale zh-CN) {cookieObj za-languagezh_CN; timeZone timeZone} else {cookieObj za-languageen_US; timeZone timeZone}}//以其中一个为例
let _get function(url, obj, callback) {return ajax({method: GET,header: {content-type: multipart/form-data; boundaryXXX,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、语言切换页面
templateview classcontainerview classcard_containerview classlist-itemtext classk{{$t(checkLanguage.applicationLanguage)}}/texttext classv{{applicationLocale.startsWith(zh)?中文:English }}/text/viewview classlocale-setting{{$t(checkLanguage.language)}}/viewview classlocale-listview classlocale-item v-for(item, index) in locales :keyindex clickonLocaleChange(item)text classtext{{item.text}}/texttext classicon-check v-ifitem.code applicationLocale/text/view/view/view/view
/templatescriptexport 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;}}}}
/scriptstyle.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)
