uniapp切换中英文

一、安装

npm install uni-i18n --save

二、创建中英文切换的文件

1.英文en.js文件

2.中文zh_CN.js文件

 三、 main.js中引用

// Vue i18n 国际化
import VueI18n from '@/common/vue-i18n.min.js';
Vue.use(VueI18n);

// i18n 部分的配置，引入语言包，注意路径
import lang_zh_CN from '@/common/locales/zh_CN.js';
import lang_en from '@/common/locales/en.js';

const i18n = new VueI18n({
	// 默认语言
	locale: 'zh_CN',
	// 引入语言文件
	messages: {
		'zh_CN': lang_zh_CN,
		'en': lang_en,
	}
});

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

四、App.vue中设置默认值

<script>
export default {
	onShow() {
		this.$i18n.locale = 'zh_CN';//启动默认中文
	}
}
</script>

五、页面使用

1.template中使用

  2.方法中使用

六、切换小程序中英文

1.按钮绑定事件

	<view class="btn" @tap="switchLang">
		<u-icon size="46" color="warning" :name="lang"></u-icon>
	</view>

 2.监听当前的语言并且返回名字

	computed: {
		lang() {
			return this.$i18n.locale == 'zh_CN' ? 'zh' : 'en';
		}
	},

3.切换项目的语言 

switchLang() {
			this.$i18n.locale = this.$i18n.locale == 'zh_CN' ? 'en' : 'zh_CN';
		},