uni-app国际化中的中英文切换按钮实现
前面所写的是静态的国际化切换方式:https://www.cnblogs.com/yoona-lin/p/13594447.html
uni-app系列回顾总结----项目国际化2(翻译问题与解决方案)总结
现在通过页面的按钮进行中英文切换
如图:
实现:
// main.js
// 国际化模块
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
if (!uni.getStorageSync('lang')) {
// 设置默认语言
uni.getSystemInfo({
success: (res) => {
uni.setStorageSync('lang', (res.language.indexOf('zh') != -1) ? 'zh_CN' : 'en')
}
})
}
const i18n = new VueI18n({
locale: uni.getStorageSync('lang') || 'zh_CN', // 默认使用中文
messages: {
'en': require('utils/lang/en.js'), // 英文语言包
'zh_CN': require('utils/lang/zh.js') // 中文简体语言包
}
})
// 导出国际化
export default i18n
Vue.prototype._i18n = i18n
Vue.prototype.$i18nMsg = function(){
return i18n.messages[i18n.locale]
}
App.mpType = 'app';
const app = new Vue({
i18n, // 国际化
...App
});
changeLang.vue
<template> <view class="change-con" @tap="showLangAn" :animation="animation"> <view class="gary-arrow"> <image src="/static/icons/white-arr.png" :animation="animationArrow"></image> </view> <view class="lang-con" @tap="changeLang"> {{changeLangLabel}} </view> </view> </template> <script> export default { data() { return { showLang: false, animation: '', animationArrow: '', changeLangLabel: 'En', // 当前语言 }; }, components: {}, props: {}, // 挂载数据之前先获取与判断本地语言类型 beforeMount() { uni.getStorageSync("lang").indexOf('zh') != -1 ? this.changeLangLabel = 'En' : this.changeLangLabel = '中文' }, methods: { changeLang() { if (uni.getStorageSync("lang").indexOf('zh') != -1) { this._i18n.locale = 'en'; this.changeLangLabel = '中文' uni.setStorageSync('lang', 'en') } else { this._i18n.locale = 'zh_CN'; this.changeLangLabel = 'En' uni.setStorageSync('lang', 'zh_CN') } // uni.reLaunch({ // 针对单页面的点击切换按钮,响应到整个项目 // url: '/pages/storeLogin/storeLogin', // success: function(e) { // var page = getCurrentPages().pop(); //跳转页面成功之后 // if (!page) return; // console.log(page) // page.onLoad(); //如果页面存在,则重新刷新页面 // } // }) }, showLangAn() { this.showLang = !this.showLang var animation = uni.createAnimation({ duration: 600, timingFunction: 'ease', }) var animationArrow = uni.createAnimation({ duration: 400, timingFunction: 'ease', }) this.animation = animation this.animationArrow = animationArrow if (this.showLang) { animation.translate(-45).step() animationArrow.rotate(180).step() } else { animation.translate(0).step() animationArrow.rotate(0).step() } } } }; </script> <style> @import "./changeLang.css"; </style>
changeLang.css
.change-con {
width: 200rpx;
height: 80rpx;
border-radius: 40rpx 0 0 40rpx;
position: fixed;
bottom: 20%;
right: -120rpx;
display: flex;
/* box-shadow: 2rpx 2rpx 10rpx 0 #aaa; */
}
.gary-arrow {
border-radius: 40rpx 0 0 40rpx;
width: 90rpx;
height: 100%;
background-color: #859e5c;
display: flex;
align-items: center;
box-shadow: 2rpx 2rpx 10rpx 0 #aaa;
}
.gary-arrow image {
width: 18rpx;
height: 24rpx;
margin-left: 40rpx;
}
.lang-con {
width: 80rpx;
font-size: 28rpx;
background-color: #98b369;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
}
调用:
标签:
uni-app
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)