uni-app 设置多语言切换uni-i18n插件

安装uni-i18n插件

npm install uni-i18n

main.js文件中引入并初始化VueI18n

复制代码
///main.js
import messages from './language/index'
let i18nConfig = {
  locale: uni.getLocale(),
  messages
}

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App'
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    i18n, 
    ...App
})
// 国际化

app.$mount()
复制代码

建立相关的语言文件夹,存放.js语言文件

 

定义index.js在设置全局变量

///index.js
import en from './enHans.json'
import zhHans from './zh-Hans.json' 
export default {
    'zh-Hans': zhHans,
     en,
}

在页面中应用

页面模板中使用 t() 获取,并传递国际化json文件中定义的key,js中使用 this.t('')

<template>
  <view class="container">
    <view class="title">{{$t('index.title')}}</view>
  </view>
</template
复制代码
computed: {
            locales() {
                return [{
                    text: this.$t('language.zh'),
                    tip:this.$t('language.zh_tip'),
                    code: 'zh-Hans',
                    }, {
                    text: this.$t('language.en'),
                    tip:this.$t('language.en_tip'),
                    code: 'en'
                }]
            }
        },
        onLoad() {
            let systemInfo = uni.getSystemInfoSync();
            this.systemLocale = systemInfo.language;
            this.applicationLocale = uni.getLocale();
            uni.onLocaleChange((e) => {
                this.applicationLocale = e.locale;
            })
        },
复制代码
注:语言API
uni-app内置了一批与国际化相关的API和生命周期。

注意要区分系统语言和应用语言的概念。

uni.getSystemInfo
可以得到设备OS的语言、运行宿主host的语言以及应用自身的语言。

uni.getLocale
获取应用当前使用的语言

uni.setLocale
设置应用语言

uni.onLocaleChange
当前应用语言发生变化时,触发回调。也就是uni.setLocale执行时。

Vue页面 i18n代码提示

 

 

pages.json i18n代码提示

 

posted @   一招致命九虎山  阅读(247)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
点击右上角即可分享
微信分享提示