uniapp实现多语言国际化切换

2023-06-02 22:57| 来源: 网络整理| 查看: 265

1.下载vue-i18n

vue-i18n是一个vue插件，主要作用就是让项目支持国际化多语言. 官网地址

npm install vue-i18n yarn add vue-il8n 复制代码

2.在main.js中引入插件

main.js

import Vue from 'vue' import App from './App' // 引入多语言包 import VueI18n from 'vue-i18n' import i18n from './assets/lang/index.js' Vue.config.productionTip = false Vue.prototype._i18n = i18n App.mpType = 'app' const app = new Vue({ i18n, ...App }) app.$mount() 复制代码

/assets/lang/index.js

import Vue from 'vue' // 引入多语言包 import VueI18n from 'vue-i18n' import zh from './zh.js' import en from './en.js' import hk from './hk.js' Vue.use(VueI18n) // 创建实例 const i18n = new VueI18n({ locale: uni.getStorageSync('lang') ? uni.getStorageSync('lang') : "zh", messages: { zh, en, hk } }); export default i18n; 复制代码

zh.js

import loginOrRegister from "./loginAndRegister/zh.js" export default { loginOrRegister: { login: '登录', emailOrPhone: '邮箱或者手机号' } } 复制代码使用

uniapp 不支持在取值表达式中直接调方法，因此，$t方法不可用，需要通过计算属性的方式 login.vue

{{ i18n.login }} export default { computed: { i18n() { return this.$t('loginOrRegister') } } } 复制代码修改页面 title 与底部 tabbar app.vue onShow() { uni.setNavigationBarTitle({// 修改头部标题 title: this.$i18n.messages[this.$i18n.locale].loginOrRegister.login }); uni.setTabBarItem({// 修改底部导航 index: 0, text: this.$i18n.messages[this.$i18n.locale].loginOrRegister.login }); } 复制代码切换语言中文简体 English switchZh(lang) { //中文 this._i18n.locale = lang; uni.setStorageSync('lang', lang); }, 复制代码也可以使用 json数据 const i18n = new VueI18n({ locale: uni.getStorageSync('lang') == (undefined || "" || null) ? "zh" : uni.getStorageSync('lang'), messages: { zh: require("./static/lang/zh.json"), en: require("./static/lang/en.json") } }); 复制代码 tips 为了在页面刷新后仍然能够保持当前的语言环境，一般会将语言参数缓存到localStorage中语言切换只要改变i18n实例中locale的值

【本文地址】

公司简介

联系我们