unipp实现多语言

1、安装

通过npm安装i18n插件：npm install vue-i18n --save

2、全局引入

在根目录下随便创建文件夹，我这里创建了utils文件夹，然后新建文件格式lang.js

建议将多语言的数据通过后端获取，方便后期维护

lang.js代码

import Vue from 'vue';
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

let lang=uni.getStorageSync('locale')||'zh-cn'
const i18n = new VueI18n({
	locale: lang, // 默认语言为中文
	fallbackLocale: 'zh-CN',
	messages:uni.getStorageSync('localeJson'),//语言数据
	silentTranslationWarn: true, // 去除国际化警告
})

export default i18n

在main.js引入lang.js即可

import Vue from 'vue'
import i18n from './utils/lang.js';
const app = new Vue({
	i18n
})
app.$mount()

3、在页面中切换语言

选择对应的语言调用此函数即可

// 设置多语言接口
setFrontLang() {
  const langVal=this.listDate[this.listIndex].value
  const params = {lang:langVal}
//获取语言数据的接口
  this.$httpObj.getLanguage(params).then((res) => {
    const data = res.data
    uni.setStorageSync('locale', langVal); //存储选择的语言标识，比如'zh-cn'
    uni.setStorageSync('localeJson', data); //存储选择的语言数据
    this.$i18n.setLocaleMessage(langVal,data[langVal]);
    this.$nextTick(e => {
      this.$i18n.locale = langVal;
    })
  })
},

其中数据返回的格式为：

中文：

{
  "zh-cn": {
    "首页": "首页",
    '我的': "我的"
  }
};

英文：

{
  "en-us": {
    "首页": "home",
    '我的': "my"
  },
}

至于中文/英文对应的字段不一定非要是zh-cn和en-us，可以和前端和后端共同商量自定义

4、页面中使用多语言

使用$t()字符即可

<view>{{$t('首页')}}</view>

在vue的js中前面加上this即可

methode:{
    test(){
        uni.showToast({
			title:this.$t('这是js里面')//注意：这里的内容“这是js里面”数据里面必须存在才会展示不同的语言
		})
    }
}