在做uni-app的时候有一个多语言的功能，就稍微研究了一波，我自己用的还行，不知道能适应你们；最烦的就是需要把项目里涉及到的文字文本转成动态的修改，意味着要写好多的多语言文字，所以最好是先把接口对完了，再把所有中文的先搞出来，然后直接谷歌翻译，把中文直接翻译了；一个个对
废话不多说，码起
如果我没猜错的话这个好像vue也可以用的，可以试试，这里是用在uni-app下使用的
1.首先先npm下vue-i18n，也可以下载文件用script导入
npm install vue-i18n
2.配置
//多语言
import VueI18n from 'vue-i18n'
import enLang from './base/lang/en-us.js'
import cnLang from './base/lang/zh-cn.js'
import ruLang from './base/lang/ru-hg.js'
Vue.use(VueI18n);
Vue.prototype._i18n = i18n;
//语言切换，你可以在这里提前默认是当前有没有语言，没有就这样默认即可
if(['zh-cn', 'en-us', 'ko'].indexOf(uni.getStorageSync('locale')) == -1){
uni.setStorageSync('locale', 'zh-cn')
}
const i18n = new VueI18n({
//直接读取缓存中的当前语言是什么，首次加载就是这个语言
locale: uni.getStorageSync('locale'),
messages: {
'zh-cn': cnLang,
'en-us': enLang,
'ko': ruLang,
},
})
//在这里我写了一个全局的切换语言的方法，感觉还不错，为什么要写，不仅仅是为了切换我前端的语言，我还要在切换后重新加载一次接口，因为接口需要我传入这个变量，如果仅仅是改变前端的，接口的数据还是原来的状态，所以就在这里加了一个回调
//这个方法是uni-app的下面出现的选择组件，这里用下，也可以自己写一个选择的方法
function toggleLang (fn){
return new Promise(function(resolve, reject){
uni.showActionSheet({
itemList: ['中文简体', 'English', '한국어'],
// itemList: ['中文简体', 'English'],
success: (e)=> {
let lang = 'zh-cn'
switch (e.tapIndex){
case 0: lang = 'zh-cn'
break;
case 1: lang = 'en-us'
break;
case 2: lang = 'ko'
break;
default: lang = 'zh-cn'
break;
}
//切换后直接修改他的语言，并且别忘了注册到缓存中
i18n.locale = lang
uni.setStorageSync('locale', lang);
resolve({code:1})
}
})
})
}
Vue.prototype.$toggleLang = toggleLang;
//这个需要注入到实例中
const app = new Vue({
i18n,
...App
})
3.先看看语言里面是怎么写的，基本上都是一样的，这里只写一个，其他国家的语言跟这个一样
export default{
lang: 'zh-cn',//最好做一个标记，还有一点，别忘了修改当前的语言名字
nav:{
TZincome:'投资总收益',
test:'测试页面'
}，
....
}
4.切换按钮使用
//这是绑定了一个点击事件，点击就切换
toggleLang(){
this.$toggleLang().then((res)=>{
//因为方法是uni-app的，直接调用了就切换成功了，然后这里成功后的回调，重新发下请求，最好给个提示
this.getPlanList()
this.$toast(this.i18n.changeLang)
})
},
5.在页面上和方法里的使用
//页面上
<view class="plan-text">{{$t('nav.test')}}</view>
//方法里也可以这样用
fun（）{
this.$toast(this.$t('nav.test'))
}
//你也可以这样写，用计算属性，并且uni-app还需要用这个来操作
computed: {
i18n (){
return this.$t('nav')
},
},
<view class="plan-text">{{i18n .test}}</view>
fun（）{
this.$toast(this.i18n .test)
}
PS:我也是自己查阅后，然后自己总结的一点东西，不知道写的全不全，会不会出现其他问题，也需要根据需求加东西，如果有不对的地方，还望指点，谢谢！！！
网友评论