uni-app 多语言切换

npm install vue-i18n

main.js

import Vue from 'vue'  
import App from './App'  
import VueI18n from 'vue-i18n'  
import messages from './common/lang.js'

Vue.use(VueI18n)  
Vue.config.productuinTip = false  

const i18n = new VueI18n({ 
  messages
})  

Vue.prototype._i18n = i18n  
App.mpType = 'app'  

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

lang.js

export default {
    locale: 'en-US',  
    'en-US': {
        lang: 'en',
        loading: 'loading...',
        index: {
            navTitle: 'Face TV',
            more: 'more',
            lanContent:['zh','en'],
            go:'goto',
            click:'Click to switch languages'
        },
        content: {
            derector: 'derector',
            protagonist: 'protagonist'
        },
        mine: {
            login: 'login',
            myCollection: 'My favorite'
        }
    },
    'zh-CN': {
        lang: 'zh',
        loading: '加载中...',
        index: {
            navTitle: '扫扫看电视',
            more: '更多',
            lanContent:['中文','英文'],
            go:'跳转',
            click:'点击切换语言'
        },
        content: {
            derector: '导演',
            protagonist: '主演'
        },
        mine: {
            login: '登录',
            myCollection: '我的收藏'
        }
    }
}

使用

<template>  
  <view class="uni-content">  
    <view class="chooseLan" @click="chooseLan">{{ i18n.click }}</view> 
  </view>  
</template>  

<script>  
export default {  
  computed: {  
    i18n () {  
      return this.$t('index')  
    }  
  }  
}  
</script>  

<style>  
</style>

获取当前设备信息

uni.getSystemInfo({
     success: function (res) {
        console.log(res.model);
            console.log(res.pixelRatio);
        console.log(res.windowWidth);
        console.log(res.windowHeight);
        console.log(res.language);
        console.log(res.version);
        console.log(res.platform);
      }
})

或者

const res = uni.getSystemInfoSync();
console.log(res.language)

详情参考:https://blog.csdn.net/zhuoganliwanjin/article/details/81872314

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容