uni-app的国际化，即多语言，分为应用部分和框架部分。
- 应用部分，即开发者自己的代码里涉及的界面部分
- 框架部分，即uni-app内置组件和API涉及界面的部分
1、安装插件
推荐使用vue-i18n@9.1.9固定版本
$ npm install vue–i18n —save
2、配置 main.js
// 引入 多语言包
import VueI18n from ‘vue-i18n’
// 通过插件的形式挂载
Vue.use(VueI18n)
// 引入语言包，注意路径
import Chinese from ‘@/lang/zh.js’; //简体中文
import Uyghur from ‘@/lang/uey.js’; //维吾尔语
// 构造i18n对象
const i18n = new VueI18n({
// 默认语言，这里的local属性，对应message中的cn、en属性
locale: uni.getStorageSync(‘locale’) || ‘zh-Hans’,
// 引入语言文件
messages: {
// 这里的属性名是任意的，您也可以把zh设置为cn等，只是后续切换语言时
// 要标识这里的语言属性，如：this.$i18n.locale = zh|en|cn|xxx
‘zh-Hans’: Chinese,
‘UEY’: Uyghur,
}
})
Vue.prototype._i18n = i18n;
3、创建语言文件
/lang/zh.js
/lang/uey.js
//语言文件写法
export default {
home:{
hello:’你好’,
name:’张三’,
},
login: {
username:’账号’,
password:’密码’,
},
}
4、使用语言变量
页面模板中使用 $t() 获取，并传递国际化json文件中定义的key，js中使用 this.$t(”)
<template>
<view class=”container”>
<view class=”title” :name=”$t(‘home.name’)”>{{$t(‘home.hello’)}}{{$t(‘home.name’)}}</view>
</view>
</template>
<script>
export default {
data() {
return {
},
onLoad(){},
}
}
</script>
注意：页面中设置语言后需要调用 this.$i18n.locale = ‘UEY’ 后生效
5、pages.json 国际化
pages.json不属于vue页面，其中的原生tabbar和原生导航栏里也有文字内容。
这部分内容的国际化方案如下：
语言文件示例：
{
“app.name”: “Hello”,
“index.title”: “首页”
}
pages.json：
{
“pages”: [
{
“path”: “pages/index/index”,
“style”: {
“navigationBarTitleText”: “%index.title%” // locale目录下 语言地区代码.json 文件中定义的 key，使用 %% 占位
}
}
],
“tabBar”: {
“list”: [{
“pagePath”: “pages/index/index”,
“text”: “%index.home%”
}
]
}
}
pages.json 支持以下属性配置国际化信息
- navigationBarTitleText
- titleNView->titleText
- titleNView->searchInput->placeholder
- tabBar->list->text
注：小程序下不支持这种国际化方案，也可以使用设置tabbar和navigationbar的API来设置文字。或者废弃原生tabbar和navigationbar，使用自定义方式。