UniApp自我学习之多语言(一)

时间:2024-03-14 19:02:54

UniAPP实现多语言,只要是使用vue-i18n来实现,也是拜读了各位大神的帖子之后,才得以实现功能,因为总有一些各种各样的问题或错误出现,前前后后的摸索了一天的时间,所以记录下来,下面进入正题;

当然本文只针对内容而言,TitleBar和TabBar原生组件的修改,正在进一步研究中;

1、导入vue-i18n

我是使用HBuilder进行开发的,一条命令“npm install vue-i18n --save”即可进行安装,在HBuilder的“文件-使用命令行窗口打开所在目录”,然后执行上面的指令,完成后,即可在项目里多出node-modules模块来,然后在main.js中引用,main.js具体代码,如下图的红框中:

UniApp自我学习之多语言(一)    UniApp自我学习之多语言(一)

2、编写多语言js文件

具体文件如下图,文件通过import en from './api/lang_en.js'和import zh from './api/lang_zh.js',在main.js中引入

UniApp自我学习之多语言(一)   UniApp自我学习之多语言(一)

3、vue文件中调用

用法相对来说比较简单

 UniApp自我学习之多语言(一)

UniApp自我学习之多语言(一)

切换语言,只需要修改this.$_i18n.locale的值即可