美文网首页
uni-app 使用vue-i18n实现国际化语言切换

uni-app 使用vue-i18n实现国际化语言切换

作者: Jeex | 来源:发表于2020-08-26 14:39 被阅读0次

1.我们需要vue-i18n的js文件,官方下载地址 https://unpkg.com/vue-i18n@8.21.0/dist/vue-i18n.js
或者在https://gitee.com/TANJIE-2020/vue-i18n下载demo源码,将demo源码中的lang文件直接考到项目目录;

2.1 将在源码下载后的文件包中的 lang 文件放到 uni-app 项目的根目录下


image.png

2.1 或者将vue-i18n.js 文件下载下来后, 在 uni-app 项目 根目录下 新建一个 lang 文件夹;将vue-i18n.js 放入其中,为了方便后续语言切换,我们在新建两个js 文件 一个是 zh_CN.js(中文) 和 en_US.js(英文),最后在新建一个index.js 来使用他们;
index.js:

import LangEn from './en_US.js'
import LangCn from './zh_CN.js'
import Vue from 'vue'
import VueI18n from './vue-i18n'
Vue.use(VueI18n)
const system_info = uni.getStorageSync('system_info')
if (!system_info) {
    // 获取设备信息
    uni.getSystemInfo({
        success: function (res) {
            console.log('设备信息'+res)
            uni.setStorageSync('system_info', res);
        }
    })
}
    const cur_lang = system_info.language == 'en' ? 'en' : 'zh_CN'
    const i18n = new VueI18n({
        locale: cur_lang || 'zh_CN',  // 默认选择的语言
        messages: {  
                'en': LangEn,
                'zh_CN': LangCn
            }
    })
    export default i18n

zh_CN.js

export default {
    index: {
        title:'你好,UNI-APP',
        navBack:'返回',
        set:'设置',
        mine:'我的',
        navTitle:'菜单',
        currentSystemLang:'当前系统语言',
        langChange:'语言切换',
        navRightMenu:'菜单',
        tabBar:{home:'首页',shop:'商店',search:'搜索',mine:'我的'}
    },
    
}

en_US.js

export default {
    index: { // 首页语言
        title:'HELLO,UNI-APP',
        navBack:'back',
        set:'set',
        mine:'mine',
        navTitle:'menu',
        currentSystemLang:'Current system language',
        langChange:'Language switch',
        navRightMenu:'menu',
        tabBar:{home:'home',shop:'shop',search:'search',mine:'mine'}
    },
}

2.2 最后lang文件结构如下


image.png
  1. 在main.js中引入
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false;

App.mpType = 'app';

import i18n from './lang/index' 
Vue.prototype._i18n = i18n

const app = new Vue({
    i18n,
    ...App
})
app.$mount()

  1. 在页面中
<template>
    <view class="content">
        <uni-nav-bar left-icon="back" :left-text="i18n.navBack" :right-text="i18n.navRightMenu" :title="i18n.navTitle"></uni-nav-bar>
        <view class="text-area">
            <text class="title">{{i18n.title}}</text>
        </view>
        <view class="" style="margin: 100rpx;">
            {{i18n.currentSystemLang}}:{{system_lenguage}}
        </view>
        <view class="">
            <button type="warn" @click="changeLanguage">{{i18n.langChange}}</button>
        </view>
    </view>
</template>

顶部导航栏使用的是uni-ui自定义导航栏
底部tabBar使用的原生tabBar;

脚本代码

<script>
    export default {
        data() {
            return {
                system_lenguage:'',
            }
        },
        onLoad() {
            const system_info = uni.getStorageSync('system_info')
            console.log(system_info)
            this.$data.system_lenguage = system_info.language;
        },
        onReady() {
            
        },
        methods: {
            changeLanguage(){
                console.log('语言切换')
                const system_info = uni.getStorageSync('system_info')
                this.$data.system_lenguage = system_info.language;
                system_info.language === 'en' ? system_info.language = this._i18n.locale = 'zh_CN' : system_info.language = this._i18n.locale = 'en'
                uni.setStorageSync('system_info',system_info)
                uni.setTabBarItem({index: 0,text: this.i18n.tabBar.home});
                uni.setTabBarItem({index: 1,text: this.i18n.tabBar.shop});
                uni.setTabBarItem({index: 2,text: this.i18n.tabBar.search});
                uni.setTabBarItem({index: 3,text: this.i18n.tabBar.mine});
                
                uni.reLaunch({
                    url: 'index'
                })
            }
        },
        computed: {  
            i18n () {  
                return this.$t('index')  
            },
        },
    }
</script>

样式代码:

<style>
    page{
        background-color: #FFFFFF;
    }
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

最后看看运行效果;
中文:


image.png

英文:


image.png

相关文章

  • uni-app 使用vue-i18n实现国际化语言切换

    1.我们需要vue-i18n的js文件,官方下载地址 https://unpkg.com/vue-i18n@8.2...

  • vue实现国际化(vue-i18n)

    使用vue-i18n插件来实现vue项目中的国际化功能 vue-i18n安装 全局使用 vue页面中使用 输出如下...

  • 国际化:i18n实现多语言

    如果项目需要多语言的支持,我们需要做国际化 使用 vue-i18n 来实现多语言的界面 安装 关于语言包,我们有几...

  • 前端笔记(12)nuxt js 多语言方案

    使用vue-i18n实现国际化,多语言数据保存在locales文件夹内; 通过URL的params与vuex共同维...

  • Android国际化(多语言)实现,支持8.0

    前言 最近因为项目中使用了国际化,所以正好研究了下实现方法;首先说下项目需求: 可以随着系统切换语言而切换语言,不...

  • iOS国际化支持

    iOS国际化支持 一、背景 最近一个项目中需要使用到不同国家语言的切换,包括UI控件的语言切换,最好是能够实现动态...

  • i18n国际化

    vue中如何使用i18n实现国际化 一、前言 项目中需要实现多语言切换,这时候接触到国际化,前端框架无数,其中几种...

  • uniapp与i18n实现国际化

    参考:uniapp与vue-i18n实现国际化多语言 1. main.js 备注:main.js文件:定义全局函数...

  • vue-i18n网页国际化配置

    通常在vue中,会使用vue-i18n来做页面语言的国际化。省的开发人员还自己去实现。这里就简单说下具体的用法。 ...

  • uni-app 语言化 Vue-i18n

    说到vue-i18n,我们并不陌生,国际化多语言实现。 1.安装依赖包 2.注入vue实例中,项目中实现调用api...

网友评论

      本文标题:uni-app 使用vue-i18n实现国际化语言切换

      本文链接:https://www.haomeiwen.com/subject/zwixsktx.html