在今年四月的官方更新中，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]
就这样，语言切换实现了，而且不会有什么延迟，几乎完美。
牛逼