在今年四月的官方更新中,uniapp的内部控件已经支持五种语言,会自动跟随系统变化,所以如果要自己做app的话,可能开启一个国际化也是很好的装逼和走向远方的策略。正好,之前做的一个项目里就有个实现国际化的需求,当时我思来想去,还是很快的做了出来,于是就有了这篇文章。
我这篇教程是支持超过两种以上语言的,后期只需要自己添加就行,而且我也写了一个自动生成语言库代码的脚本,不过这个属于内部的东西,我就不公开了。
第一步:创建相关文件
1.新建lang.js,根据不同的页面定义不同的对象,比如我以首页index.vue为例,同时还需要给底部tab留一个语言对象TabBarLang。
module.exports = {
TabBarLang:function(){
var langtext = {
lang1:["首页","Home"],
lang2:["新闻","News"],
lang3:["个人","User"],
}
return langtext;
},
//首页
indexLang:function(){
var langtext = {
lang1:["行业热点","Industry hotspot"],
lang2:["今日头条","Today's headlines"],
lang3:["撰写文章","Write an article"],
}
return langtext;
}
}
上面的代码就是一个用于底部tab,一个用于app首页,每个页面都新建一个对象用作区分。
2.新建一个页面用来定义语言切换,同时使用localStorage用于存储语言id字段,这里我推荐一个全平台兼容的插件mp-storage,先在data里定义如下字段:
langList:["简体中文","English"],
这里大概就明白了,以数组的指针来定义语言切换,第一位是中文,第二位是英文。所以下面先随便写个循环。
<view class="whiteLine" v-for="(item,index) in langList" :key="index" @tap="changeLang(index)">
<view>
<text>{{item}}</text>
<image v-if="index==langid" class="lineIcon" src="../../static/img/confirm/assets_transfer_select.png" mode="widthFix"></image>
</view>
</view>
上面的代码定义了changeLang方法,它的代码如下:
changeLang(index){
var that = this;
that.langid = index;
localStorage.setItem('langid', index);
uni.reLaunch({
url: '/pages/home/home'
})
// #ifdef APP-PLUS
plus.runtime.restart();
// #endif
}
最后也别忘了引入插件和语言库文件,我的放在utils文件夹里,实际情况随便放。
import { localStorage } from '../../js_sdk/mp-storage/mp-storage/index.js'
var Lang = require('../../utils/lang');
这里就实现了安卓的切换语言后重启,和其它平台的强制刷新到首页,这样就可以立刻变更语言,同时还通过localStorage存储了语言字段。
第二步:页面实现
1.在每个页面文件上加入如下字段:
langid:0,
langInfo:[],
langid等于0就默认是中文,属于数组指针第一位,这里是可以全局定义再全局调用的(很简单,我就懒得再加文件和方法那些了)。然后以首页文件index.vue为例,再加入如下方法:
getLang(){
var that = this;
if(localStorage.getItem('langid')){
that.langid = localStorage.getItem('langid');
}
that.langInfo = Lang.indexLang(); //这里获取到语言库里首页的indexLang对象
that.getTabBar();
},
getTabBar(){
var that = this;
var langid = that.langid;
var TabBarlang = 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(){
var that = this;
that.getLang();
},
之后每个页面就在getLang方法里修改那个获取语言库对象的名称就行了。之后在页面view里的调用方式如下:
{{langInfo.lang1[langid]}}
在js方法里面的调用如下:
this.langInfo.lang9[this.langid]
就这样,语言切换实现了,而且不会有什么延迟,几乎完美。
牛逼