我这篇教程是支持超过两种以上语言的,后期只需要自己添加就行,而且我也写了一个自动生成语言库代码的脚本,不过这个属于内部的东西,我就不公开了。
1.新建lang.js,根据不同的页面定义不同的对象,比如我以首页index.vue为例,同时还需要给底部tab留一个语言对象TabBarLang。
langList:["简体中文","English"],这里大概就明白了,以数组的指针来定义语言切换,第一位是中文,第二位是英文。所以下面先随便写个循环。
changeLang(index){varthat=this;that.langid=index;localStorage.setItem('langid',index);uni.reLaunch({url:'/pages/home/home'})//#ifdefAPP-PLUSplus.runtime.restart();//#endif}最后也别忘了引入插件和语言库文件,我的放在utils文件夹里,实际情况随便放。
import{localStorage}from'../../js_sdk/mp-storage/mp-storage/index.js'varLang=require('../../utils/lang');这里就实现了安卓的切换语言后重启,和其它平台的强制刷新到首页,这样就可以立刻变更语言,同时还通过localStorage存储了语言字段。
1.在每个页面文件上加入如下字段:
langid:0,langInfo:[],langid等于0就默认是中文,属于数组指针第一位,这里是可以全局定义再全局调用的(很简单,我就懒得再加文件和方法那些了)。然后以首页文件index.vue为例,再加入如下方法:
getLang(){varthat=this;if(localStorage.getItem('langid')){that.langid=localStorage.getItem('langid');}that.langInfo=Lang.indexLang();//这里获取到语言库里首页的indexLang对象that.getTabBar();},getTabBar(){varthat=this;varlangid=that.langid;varTabBarlang=Lang.TabBarLang();uni.setTabBarItem({index:1,text:TabBarlang.lang2[langid],})uni.setTabBarItem({index:2,text:TabBarlang.lang3[langid],})uni.setTabBarItem({index:3,text:TabBarlang.lang4[langid],})},getLang用于获取当前语言id,并通过id获取语言库里的对象,getTabBar用于强制修改底部tab的语言。其中getLang方法需要再onShow生命周期内触发。
onShow(){varthat=this;that.getLang();},之后每个页面就在getLang方法里修改那个获取语言库对象的名称就行了。之后在页面view里的调用方式如下: