uniapp使用vue-i18n国际化多国语言

前言:uniapp是自带有i18n这个插件的,如果没有npm安装即可

此插件需要自己去给每一个需要国际化的字符去手动配置key,所以如果是已经完成的项目可能工作量就稍微有点大了

 第一步:

语言命名是有规范的不能乱取名,具体可以参考国际语言代码

在根目录创建locale文件夹用来存放你需要用到的语言包

zh-Hans.json---中文简体语言包,

zh-Hant.json---中文繁体语言包,

en.json---英文语言包,

es.json---西班牙语语言包,

index.js存放相关方法

 index.js

注意:new实例的时候在这里面new比较好,不要去什么main.js里面new然后再挂载,因为在国家化的过程中,有很大概率在外部js中也有文字需要国际化,这时就没办法在外部js访问到国际化实例了

import en from './en.json'//英语语言包
import zhHans from './zh-Hans.json' // 中文简体
import zhHant from './zh-Hant.json' // 中文繁体
import es from './es.json' // 西班牙语言包
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)const lang = uni.getStorageSync('language') || 'en';//获取缓存中的语言
// VueI18n构造函数所需要的配置
const i18nConfig = {locale: lang,//当前语言// 所需要用的语言包messages:{en,'zh-Hans': zhHans,'zh-Hant': zhHant,es}
}
const i18n = new VueI18n(i18nConfig)
export default i18n

json包示例:

如tabBar.home为首页tabbar对应的key,key后面的值代表当前的语言环境文字,中文环境下为“首页”,英文环境下为home,

注意:命名规则

key值必须要是唯一的,key值可以是中文,但是尽量不要这么做,

json可以多层对象形式,使用的时候可以通过.key来获取

key命名的时候尽量语义化一点

中文:                                                                英文

第二步:

将i18n引入到main.js,然后传给Vue实例来保证在任何页面都可以快速访问到i18n实例

import i18n from './locale/index.js'
const app = new Vue({...App,i18n,//})

第三步:切换语言

此处主要用到两个方法:uni.setLocale(),this.$i18n.locale 

uni.setLocale()用来切换系统或应用语言环境,调用此方法后会重启整个应用

this.$i18n.locale 用来切换实际语言

注意:uni.setLocale()方法需要在this.$i18n.locale切换语言之后再调用,否则app端会有问题,语言切换不能实时显示

此处因为外部js有点问题,所以切换语言后强制刷新了一下页面,实际无需刷新页面的

			changeLanguage(){uni.showActionSheet({itemList: [// this.$t('public.en'),// this.$t('public.zh-Hans'),// this.$t('public.es'),'English','中文简体','Español',// '中文繁体'],success:  (res)=>{//#ifdef  H5this.$router.go(0);//刷新页面,不然validate.js不好国际化//#endif//#ifdef  APP-PLUSuni.navigateTo({url: '/pages/user/Login/index' // 要刷新的页面路径});//#endifconst language = [{text:'英文',code:'en'},{text:'中文简体',code:'zh-Hans'},{text:'西班牙语',code:'es'},// {text:'中文繁体',code:'zh-Hant'},]this.curLanguage = language[res.tapIndex].text;this.$store.commit('changeLanguage',language[res.tapIndex].code);uni.setStorage({key:'language',data:language[res.tapIndex].code})this.$i18n.locale = language[res.tapIndex].codeuni.setLocale(language[res.tapIndex].code)//切换语言环境必须在this.$i18n.locale之后,否则app端会有意想不到的bug},fail: function (res) {}});},

第四部:使用

页面使用:直接用过$t()传入对应的json文件对应的key替换文字

<view class="item" :class="current === index ? 'on' : ''" v-for="(item, index) in navList"@click="navTap(index)" :key="index">{{ $t('Login.type-login') }}</view></view>

js使用:加个this

data里面使用:this.$t(),如果不生效可以将此值写入计算属性然后return出去,对于data里面的数组可以把文字换成对应的key,然后在html中{{$t(item.name)}}

外部js使用:导入import i18n from '@/locale/index',然后i18n.t()传入key,外部js不要加$符号

tabbar及页面顶部文字:%key%,用%包裹key值即可

第五步: 设置语言类型持久化及默认

 主要是在设置语言的时候将当前的语言类型放入缓存,然后在加载的时候获取缓存里面的语言再设置语言即可,可以在应用的默认加载页面或者整个应用的onLoad里面写

		onLoad() {const  lang = uni.getStorageSync('language')|| 'en';//获取缓存的语言设置this.$i18n.locale = lang//设置语言uni.setLocale(lang);//设置语言环境this.$store.commit('changeLanguage',lang);// 监听语言的切换uni.onLocaleChange(e=>{this.$store.commit('changeLanguage',e.locale);});},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/201270.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电容电感特性的理解

04730电子技术基础 语雀 在前面&#xff0c;我们提到过电容元件具有隔直通交&#xff0c;通高阻低的特性&#xff0c;电感元件具有隔交通直&#xff0c;通低阻高的特性。那么如何理解这两句话呢&#xff1f;下面我们一一剖析 电容元件的隔直通交&#xff0c;通高阻低的特性 …

MySQL五 | 事务

目录 事务操作 查看/设置事务提交方式 方式一 提交事务 回滚事务 方式二 开启事务 提交事务 回滚事务 事务四大特性(ACID) 事务的隔离级别 查看事务的隔离级别 设置事务隔离级别 事务操作 是一组操作的集合&#xff0c;是一个不可分割的工作单位&#xff0c;会把所…

【C】递归函数

一、什么是递归 递归其实是⼀种解决问题的⽅法&#xff0c;在C语⾔中&#xff0c;递归就是函数⾃⼰调⽤⾃⼰。 我们先了解一个知识&#xff1a; 每一次函数调用&#xff0c;都会向内存栈区上申请一块空间。 这块空间主要用来存放函数中的局部变量&#xff0c;和函数调用过程中…

点滴生活记录1

2023/10/10 今天骑小电驴上班&#xff0c;带着小鸭子一起。路上的时候&#xff0c;我给小鸭子说&#xff0c;你要帮我看着点路&#xff0c;有危险的时候提醒我&#xff0c;也就刚说完没几分钟&#xff0c;一个没注意&#xff0c;直接撞到一个拦路铁墩子上&#xff0c;车子连人歪…

《亲密关系》阅读笔记

前言 仅记录学习笔记&#xff0c;如有错误欢迎指正。 感受&#xff1a; 看完才发现&#xff0c;引用竟然占了大概10分之一的厚度> < ! 这本书更多是实验&#xff0c;数据来支撑观点的&#xff0c;还鄙夷了《男人来自火星&#xff0c;女人来自金星》这本书&#xff0c;说…

12、组合模式(Composite Pattern,不常用)

组合模式&#xff08;Composite Pattern&#xff09;&#xff0c;有时又叫作部分-整体模式&#xff0c;它是一种将对象组合成树状的层次结构的模式&#xff0c;用来表示“部分-整体”的关系&#xff0c;使用户对单个对象和组合对象具有一致的访问性。 它在我们树型结构的问题中…

python实现模拟用户点击行为测试

目录 一、需求背景 二、爬虫需求实战测试 1、目标需求: 可实现遍历访问多个html网页地址

【Java——反射机制详解】

JAVA反射机制是在运行状态中&#xff0c;对于任意一个类&#xff0c;都能够知道这个类的所有属性和方法&#xff1b;对于任意一个对象&#xff0c;都能够调用它的任意一个方法和属性&#xff1b;这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制。Java反…

2023年度端侧transformer类分类力作SwiftFormer模型解读

写在前面&#xff1a;本篇直接结合代码来理解网络的笔记 paper: Swiftformer-paper code: https://github.com/Amshaker/SwiftFormer 文章目录 网络结构精析零、整体一、patch embed二、stage 网络结构精析 零、整体 可以看到结构中&#xff0c;整体就是&#xff1a; stem -&…

【C#】MathNet矩阵计算

文章目录 安装索引和计算逐点计算静态方法 MathNet系列&#xff1a;矩阵生成 安装 MathNet.Numerics中提供了线性代数、微积分、特殊函数、概率论、随机函数、插值、最优化等一系列功能&#xff0c;是.net技术中首选的数值计算包。 其中&#xff0c;线性代数包LinearAlgebra…

深度学习——第3章 Python程序设计语言(3.4 Python自定义函数)

3.4 Python自定义函数 目录 1. 函数基础知识 2. 函数的定义&#xff08;声明&#xff09;和调用 3. 函数参数传递 4. 函数的返回值 5. lambda函数 随着学习的日渐深入&#xff0c;编写的代码将会越来越复杂&#xff0c;所以我们需要找一种方法对这些复杂的代码进行分解、重…

iphone/安卓手机如何使用burp抓包

iphone 1. 电脑 ipconfig /all 获取电脑网卡ip&#xff1a; 192.168.31.10 2. 电脑burp上面打开设置&#xff0c;proxy&#xff0c;增加一条 192.168.31.10:8080 3. 4. 手机进入设置 -> Wi-Fi -> 找到HTTP代理选项&#xff0c;选择手动&#xff0c;192.168.31.10:8080 …

Windows/Linux 设置固定IP

Windows/Linux 设置固定IP 在开发过程中 会经常遇到要与前端进行本地的联调 过了两天 发现 不知道为什么 ip发生了改变 所以 就写一个 windows 与linux 固定ip的博客 记录一下 Windows 话不多说 看下图 上方输入 ipconfig/all 就会出来一堆信息 下面是一些有用的信息 默认…

超使用的十个JavaScript技巧

前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;前端面试题库 JavaScript 作为最流行的语言之一&#xff0c;其语法灵活且每年都在不断吸纳新特性&#xff0c;即使是一个从业多年的老手&#xff0c; 偶尔也会有一些被…

04武忠祥0基础

收敛数列的性质 唯一性&#xff1a; 反证法&#xff1a; 发散不一定无界 举个例子&#xff0c;考虑以下数列&#xff1a; a_n (-1)^n 这个数列的每一项交替地取正负值。当 n 是偶数时&#xff0c;a_n 1&#xff0c;当 n 是奇数时&#xff0c;a_n -1。这个数列明显是发…

编程实战:类C语法的编译型脚本解释器(八)编译概览

系列入口&#xff1a;编程实战&#xff1a;类C语法的编译型脚本解释器&#xff08;系列&#xff09;-CSDN博客 前面已经介绍了Token、变量、变量表、表达式和语句&#xff0c;现在进入深水区&#xff0c;介绍编译过程&#xff0c;相当于解释型脚本的解释过程。 编译的好处是提前…

GO学习之 单例模式 sync.Once

GO系列 1、GO学习之Hello World 2、GO学习之入门语法 3、GO学习之切片操作 4、GO学习之 Map 操作 5、GO学习之 结构体 操作 6、GO学习之 通道(Channel) 7、GO学习之 多线程(goroutine) 8、GO学习之 函数(Function) 9、GO学习之 接口(Interface) 10、GO学习之 网络通信(Net/Htt…

js占位符 ${} 使用

JavaScript 占位符 在 JavaScript 编程中&#xff0c;占位符是一种特殊的标记或符号&#xff0c;用于指示代码执行时应替换为实际值。占位符通常用于字符串拼接、格式化输出和动态生成代码等场景。本文将介绍 JavaScript 中常用的占位符&#xff0c;并提供相应的代码示例。 字…

在github中通过action自动化部署 hugo academic theme,实现上传md文件更新博客内容

在github中通过action自动化部署 hugo academic theme 一、GitHub Action自动化部署Hugo博客方法 主要参考&#xff1a;【Hugo网站搭建】GitHub Action自动化部署Hugo博客 次要参考&#xff1a;使用 Github Action 自动部署 Hugo 博客 二、部署过程中遇到的问题和解决办法 …

HarmonyOS鸿蒙操作系统架构

目录 1. 分布式架构&#xff1a; 2. 统一的开发平台&#xff1a; 3. 多内核共享&#xff1a; 4. 自适应界面&#xff1a; 5. AR、VR、MR支持&#xff1a; 6. 安全和隐私保护&#xff1a; 7. AI集成&#xff1a; 8. 应用生态系统&#xff1a; 9. 开源和开放&#xff1a…