[JavaScript知识库]uniapp多语言的使用

lang文件夹下的index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import English from './en'
import Portuguese from './Portuguese'
import Indonesian from './Indonesian'
import Korea from './Korea'
import German from './German'
import Japanese from './Japanese'
import French from './French'
import Arab from './Arab'
import Turki from './Turki'
import Spanyol from './Spanyol'

Vue.use(VueI18n)

let currentLang = uni.getStorageSync('CURRENT_LANG')
if (!currentLang) {
	// 获取设备信息
	// uni.getSystemInfo({
	// 	success: function (res) {
	// 		uni.setStorageSync('CURRENT_LANG', res.language)
	// 		currentLang = res.language
	// 	}
	// })
	uni.setStorageSync('CURRENT_LANG', 'English')
	currentLang = 'English'
}
const i18n = new VueI18n({
	// 默认选择的语言
	locale: currentLang,
	messages: {
		'English': English,
		'Portuguese': Portuguese,
		'Indonesian': Indonesian,
		'Korea': Korea,
		'German': German,
		'Japanese': Japanese,
		'French': French,
		'Arab': Arab,
		'Turki': Turki,
		'Spanyol': Spanyol,
	}
})
export default i18n

main.js

import App from './App'

import uView from 'uview-ui';
Vue.use(uView);

// 引入请求封装
require('./util/request/index')(app)

// #ifndef VUE3
import Vue from 'vue'
import i18n from './lang/index'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	i18n,
    ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

app.vue

<script>
	export default {
		globalData: {
		  $i18n: {
			locale: 'English'
		  },
		  $t: {}
		},
		onLaunch: function() {
			this.globalData.$i18n = this.$i18n
			this.globalData.$t = str => this.$t(str)
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import '/static/iconfont/iconfont.css';
	@import "uview-ui/index.scss";
</style>

text.vue

<view class="tab-item" @click="clickItem('English'){{$t('header.language1')}}</view>
const globalData = getApp().globalData
clickItem(language){
	this.tabShow = false;
	globalData.$i18n.locale = language;
	uni.setStorageSync('CURRENT_LANG', language);
}