uni-app 国际化（包括扩展组件）

参考

ccccuni-app官网

添加文件夹及路径

index.js

// 国际化 json 文件，文件内容详见下面的示例
import en from './en.json'
import zhHans from './zh-Hans.json' // 中文简体
import zhHant from './zh-Hant.json' // 中文繁体

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

 main.js

// 增加的内容
// 国际化
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
});

动态切换语言

lang.vue 

<template>
	<view class="body">

			<!-- <u-cell-item icon="setting-fill" title="个人设置"></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="中文" :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>

使用

vue 页面

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

#vue页面里

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


#page页面

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



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


// 1. vue组件模板的使用
<div>{{$t('message.zh')}}</div>

// 2. vue组件模板数据绑定的使用
<input :placeholder="$t('message.zh')"/>

// 3.vue组件data中赋值的使用
data:{
   msg:this.$t('message.zh');
}

// 4.在js代码里使用
this.$t('message.zh')

<text class="group-join-btn">{{group.is_join?($t('group.quit')):($t('group.join'))}}</text>

注意vue里的冒号，<input :placeholder="$t('message.zh')"/>，加了冒号后才能正确显示，原因：

加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串字面量！

例子：

<el-radio-group v-model="handle">

                    <el-radio :label="true">打开</el-radio>

                    <el-radio :label="false">关闭</el-radio>

</el-radio-group>

输出：true 或 false   值是Boolean类型

-----

<el-radio-group v-model="handle">

                    <el-radio label="true">打开</el-radio>

                    <el-radio label="false">关闭</el-radio>

</el-radio-group>

输出：”true" 或 “false”  值是String类型

nvue页面

nvue 页面引用i18n_Dai_代代的博客-CSDN博客

在app.vue里面

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

在nvue页面使用

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

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

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

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

扩展组件的国际化

import ProExpiredPopup from './index.vue'
import i18n from '@/locale/index.js';//国际化


ProExpiredPopup.i18n=i18n
const Profile = Vue.extend(ProExpiredPopup)