uniapp vue2切换语言
uniapp vue2切换语言
·
注意:
h5、安卓可以;ios、微信小程序存在问题参考最下面官网解决
1、下载插件hello-i18n 地址:hello-i18n 示例工程 - DCloud 插件市场 uni-app 国际化演示https://ext.dcloud.net.cn/plugin?id=6462
2.在与pages目录同级新建locale目录放置语言json文件。
如:uni-app.en.json,uni-app.zh-Hans.json,uni-app.zh-Hant.json
3.配置main.js
// 国际化 json 文件,文件内容详见下面的示例
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
const messages = {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}
let i18nConfig = {
locale: uni.getLocale(),// 获取已设置的语言
messages
}
import Vue from 'vue'
import VueI18n from 'vue-i18n'// v8.x
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
i18n,
...App
})
app.$mount()
4.index.vue中进行切换
<template>
<view class="container">
<view class="locale-item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">
<text class="text">{{item.text}}</text>
<text class="icon-check" v-if="item.code == applicationLocale"></text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
applicationLocale: '', // 应用设置的语言
// 语言类型数组
locales:[{
text: this.$t('locale.en'),
code: 'en'
},
{
text: this.$t('locale.zh-hans'),
code: 'zh-Hans'
},
{
text: this.$t('locale.zh-hant'),
code: 'zh-Hant'
},
{
text: this.$t('locale.ja'),
code: 'ja'
}
]
}
},
onLoad() {
let systemInfo = uni.getSystemInfoSync();
this.applicationLocale = uni.getLocale(); // 获取当前设置的语言
this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
uni.onLocaleChange((e) => { // 用于监听应用语言切换
this.applicationLocale = e.locale;
})
},
methods: {
onLocaleChange(e) {
if (this.isAndroid) {
uni.showModal({
content: this.$t('index.language-change-confirm'),
success: (res) => {
if (res.confirm) {
uni.setLocale(e.code); // 设置当前语言
}
}
})
} else {
uni.setLocale(e.code); // 设置当前语言
}
}
}
}
</script>
<style>
</style>
5.参考
uni-app官网https://uniapp.dcloud.net.cn/tutorial/i18n.html#uni-frameworkuni.getLocale() | uni-app官网https://uniapp.dcloud.net.cn/api/ui/locale.html#setlocale
更多推荐
已为社区贡献5条内容
所有评论(0)