uniapp国际化中的中英文切换按钮实现

原博客地址：https://www.cnblogs.com/yoona-lin/p/13705543.html

现在通过页面的按钮进行中英文切换

如图：

实现：

// 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;
}

 调用：