一、安装
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';
},