Uni app internationalization

Reference resources

ccccuni-app Official website

Add folder and path

index.js

//  internationalization  json  file , See the following example for the contents of the file 
import en from './en.json'
import zhHans from './zh-Hans.json' //  Chinese simplified 
import zhHant from './zh-Hant.json' //  Chinese traditional 

export default {
    en,
    'zh-Hans': zhHans,
    'zh-Hant': zhHant,
}

 main.js

//  Added content 
//  internationalization 
import messages from './locale/index'
import {getLang} from "./utils/lang";

let i18nConfig = {
    locale: getLang(),
    messages
}


import VueI18n from 'vue-i18n'

Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)


const app = new Vue({
    i18n,
    store,
    ...App
});

Dynamic language switching

lang.vue 

<template>
	<view class="body">

			<!-- <u-cell-item icon="setting-fill" title=" Personal settings "></u-cell-item> -->
			<u-cell-item title="English" :arrow="false" @click="changeLang('en')">
				<u-icon slot="right-icon" size="32" name="checkmark" v-if="isEn"></u-icon>
			</u-cell-item>
			<u-cell-item title=" chinese " :arrow="false" @click="changeLang('zh-Hans')">
				<u-icon slot="right-icon" size="32" name="checkmark" v-if="isZh"></u-icon>
			</u-cell-item>

	</view>
</template>

<script>
import {getLang, setLang} from "@/utils/lang.js";

	export default {
		data() {
			return {
				isEn: false,
				isZh: false
				
			};
		},
		onLoad() {
			console.log(getLang())
			let lang=getLang()
			this.updateLang(lang)
		},
		methods: {
			updateLang(srcLang){
				if(srcLang == "zh-Hans"){
					this.isEn=false
					this.isZh=true
				}else if(srcLang == "en"){
					this.isEn=true
					this.isZh=false
				}
			},
			changeLang(srcLange){
				setLang(srcLange)
				console.log("change language:" + srcLange)
				this.updateLang(srcLange)
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>

Use

vue page

	import {initVueI18n} from '@dcloudio/uni-i18n'
	import messages from '../../locale/index';
	const { t } = initVueI18n(messages)

#vue In the page 

{
   {$t('index.title')}}


#page page 

 "navigationBarTitleText": "%index.language%",



#page page , label <>
<u-input v-model="content" type="textarea" height="250" auto-height :placeholder="$t('wit.publish_tip')"/>


// 1. vue Use of component templates 
<div>{
   {$t('message.zh')}}</div>

// 2. vue Use of component template data binding 
<input :placeholder="$t('message.zh')"/>

// 3.vue Components data The use of assignment in 
data:{
   msg:this.$t('message.zh');
}

nvue page

nvue Page references i18n_Dai_ Generations of blogs -CSDN Blog

stay app.vue Inside

globalData: {
		$t: ''
	},
onLaunch(){
	this.globalData.$t = val => {
			return this.$t(val);
		};
},

stay nvue Page using

<view>{
   { $t('conn.phone') }}</view>

# stay script
let app = getApp().globalData;

methods:{
	$t(text) {
			return app.$t(text);
		},
}

#nvue Text 
{
   {$t('tab.friend')}