uni-app国际化中的中英文切换按钮实现

凉风习习 發表於 2020-9-21 14:50:00

uni-app国际化中的中英文切换按钮实现

前面所写的是静态的国际化切换方式：https://www.cnblogs.com/yoona-lin/p/13594447.html
uni-app系列回顾总结----项目国际化2(翻译问题与解决方案)总结
现在通过页面的按钮进行中英文切换
如图：
<img src="https://img2020.cnblogs.com/blog/1572968/202009/1572968-20200921143653073-2088187475.png">  <img src="https://img2020.cnblogs.com/blog/1572968/202009/1572968-20200921143717088-2129916094.png"> <img src="https://img2020.cnblogs.com/blog/1572968/202009/1572968-20200921143752520-2075258853.png">
 

 
实现： 
 
<div class="cnblogs_code">
<pre>// 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
}

App.mpType = 'app';

const app = new Vue({
i18n,// 国际化
...App
});</pre>
</div>
 
<img src="https://img2020.cnblogs.com/blog/1572968/202009/1572968-20200921144104360-844692001.png">
 
 
changeLang.vue
<div class="cnblogs_code">
<pre><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></pre>
</div>
changeLang.css
<div class="cnblogs_code">
<pre>.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;
}</pre>
</div>
 
<img src="https://img2020.cnblogs.com/blog/1572968/202009/1572968-20200921144423385-1396032421.png">
 
 
调用：
<img src="https://img2020.cnblogs.com/blog/1572968/202009/1572968-20200921144639875-1750744634.png">
 
 <img src="https://img2020.cnblogs.com/blog/1572968/202009/1572968-20200921144652807-255878184.png">
 
 <img src="https://img2020.cnblogs.com/blog/1572968/202009/1572968-20200921144715609-1380732245.png">
  
来源：https://www.cnblogs.com/yoona-lin/p/13705543.html

頁: [1]

琼殿技术论坛's Archiver

uni-app国际化中的中英文切换按钮实现