在uniapp中实现中英文切换的方法
作者：掘金归海一刀
最近使用uniapp做了个APP,由于客户是巴西的,所以使用中文已经满足不了客户需求了,本打算直接使用英文开发算了,老板非要做成可以中英文切换的,没办法只能开干,需要的朋友可以参考下
具体实现步骤
- 1.安装插件：首先，需要安装用于管理多语言的插件。我们可以选择 vue-i18n插件，它是一款比较流行的国际化插件，重要的是它可以在uniApp 中使用。直接在终端中执行以下命令即可：
npm install vue-i18n
安装成功我们可以看到项目下多了个node_modules目录，里面有vue-i18n插件了。
- 2.创建两个js文件
zh.js和en.js，用户保存翻译的中英文内容，这也没办法，这样自己翻译的比较准确。我这里是放到了common/util目录下，这需要你自己看放哪里合适了。
zh.js实例如下：
export default {
common:{
switch:'切换语言',
setting:'设置中心',
back:'返回',
account:'账号',
login:'登录',
password:'密码'
}
}
en.js实例如下：
export default {
common:{
switch:'Switch language',
setting:'Setting',
back:'Back',
account:'Account',
login:'Login',
password:'Password'
}
}
- 3.在入口文件
main.js中初始化vue-i18n插件，并配置多语言支持，即加入以下代码：
import VueI18n from 'vue-i18n'
import zh from './common/util/zh.js'
import en from './common/util/en.js'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'en', // 默认语言为英文
messages: {
en,
zh
}
})
在最后挂载到app的地方加入上面定义的i18n
new Vue({
i18n,
// 其他配置...
}).$mount('#app')
- 4.下面就是在设置页面做个切换语言的功能了，我在个人中心的设置页面写了一下样式：
- [注] 代码逻辑很简单，就是写了个语言切换样式，切换时触发
checkChange事件，从而达到切换语言的目的，代码如下：
<template>
<view>
<scroll-view scroll-y class="page">
<cu-custom bgColor="bg-gradual-pink" :isBack="true">
<block slot="backText">{{$t('common.back')}}</block>
<block slot="content">{{$t('common.setting')}}</block>
<!-- <view slot="right" @tap="rightClick">编辑</view> -->
</cu-custom>
<uni-section :title="$t('common.switch')" type="line">
<view class="uni-px-5 uni-pb-5">
<uni-data-checkbox v-model="lang" :localdata="items" @change="checkChange"></uni-data-checkbox>
</view>
</uni-section>
</scroll-view>
</view>
</template>
<script>
import api from '@/api/api.js'
export default {
data() {
return {
items: [{
value: 'en',
text: 'English'
},
{
value: 'zh',
text: '中文简体'
}
],
lang: 'en'
};
},
onLoad() {},
methods: {
checkChange: function(evt) {
this.$i18n.locale = evt.detail.value;
},
}
}
</script>
- 5.从上面代码我们可以看出，在组件模板中使用$t方法获取对应的语言文本：
<template>
<view>
<text>{{ $t('common.switch') }}</text> <!-- 使用 $t 方法获取对应语言的文本 -->
</view>
</template>
- 6.如果是js中需要设置多语言，我们可以使用this.$t()方式获取对应的语言文本，如：
this.loginText = this.$t('common.login')
- 7.到此我们需要的功能基本就实现了，剩下的就是需要翻译什么往js里面写，需要的地方获取就行，来看下效果：
总结
好了，通过以上步骤我们已经知道怎么实现多语言切换了，如果需要增加其他语言，我们可以继续增加js语言翻译文件，按照上面的方法引入即可；这种方式跟我之前用elementUI做的后台语言切换实现方式一模一样，可见平时多积累，后面再碰到相同的问题就很容易解决了。
以上就是在uniapp中实现中英文切换的方法的详细内容，更多关于uniapp中英文切换的资料请关注脚本之家其它相关文章！