uni-app的国际化，即多语言，分为应用部分和框架部分。
- 应用部分，即开发者自己的代码里涉及的界面部分
- 框架部分，即uni-app内置组件和API涉及界面的部分
在uni-app里有内置i18n多语言的配置，并且uni-app里的组件可是可以支持跟随设置语言进行变换的，i18n的主要功能是可以做到实时切换语言。
示例工程：https://ext.dcloud.net.cn/plugin?id=6462
1、将i18n插件引入到项目中，插件结构：
2、在main.js 引入并初始化 VueI18n
// 国际化 json 文件，文件内容详见下面说明
import messages from ‘./locale/index.js’
let i18nConfig = {
// 获取已设置的语言
locale: uni.getLocale(),
messages
}
// VUE2
// #ifndef VUE3
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()
// #endif
// VUE3
// #ifdef VUE3
import { createSSRApp } from ‘vue’
import { createI18n } from ‘vue-i18n’// v9.x
const i18n = createI18n(i18nConfig)
export function createApp() {
const app = createSSRApp(App)
app.use(i18n)
return {
app
}
}
// #endif
3、在项目根目录创建local文件夹以及对应的语言文件和index.js
index.js文件内容如下:
import en from ‘./en.json’
import zhHans from ‘./zh-Hans.json’
export default {
en,
‘zh-Hans’: zhHans,
}
国际化json文件内容格式如下:
en.json:
{
“index.title”: “Hello i18n”
}
zh-Hans.json:
{
“index.title”: “你好 i18n”
}
4、页面国际化
页面模板中使用$t()获取，并传递国际化json文件中定义的key，js中使用this.$t('')
<template>
<view class=”container”>
<!– 模板中使用$t() –>
<view class=”title”>{{$t(‘index.title’)}}</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onReady() {
uni.setNavigationBarTitle({
// js中使用this.$t(”)
title: this.$t(‘customerService.navigationBarTitle’)
})
}
}
</script>
注意 ：页面中设置语言后需要调用this.$i18n.locale = ‘zh-Hans’后生效
// 切换语言
handleChangeLanguage() {
if (this.lang === ‘zh-Hans’) {
this.lang = ‘en’
this.$i18n.locale = this.lang
uni.setStorageSync(‘lang’, this.lang)
} else {
this.lang = ‘zh-Hans’
this.$i18n.locale = this.lang
uni.setStorageSync(‘lang’, this.lang)
}
},
5、pages.json 国际化
pages.json不属于vue页面，其中的原生tabbar和原生导航栏里也有文字内容。
这部分内容的国际化方案如下：
{
“pages”: [
{
“path”: “pages/index/index”,
“style”: {
// locale目录下 语言地区代码.json 文件中定义的 key，使用 %% 占位
“navigationBarTitleText”: “%index.title%”
}
}
],
“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，使用自定义方式。
设置tabbar:
通过uni.setTabBarItem()进行设置：
setTabbarLang() {
const tabbar = {
“首页”: “Home”,
“客服”: “Customer Service”,
“地图”: “Maps”,
“我的”: “My”
}
const array = Object.entries(tabbar).map(([key, value]) => {
if (this.lang === ‘zh-Hans’) {
return key
} else {
return value
}
})
array.forEach((text, index) => {
uni.setTabBarItem({
index,
text
})
})
},
设置navigationbar:
uni.setNavigationBarTitle({
// js中使用this.$t(”)
title: this.$t(‘customerService.navigationBarTitle’)
})
6、框架内置组件国际化
自 3.1.5 版本起，App和H5平台内置的基础组件和接口相关的文字内容支持国际化。
这部分国际化，提供了2种策略：
自动策略：自动适配手机或浏览器语言
自定义方案：
在指定目录创建指定文件，用同名词条来替换，语言地区代码请遵循 BCP47 规范。
├── locale
│ ├── uni-app.en.json
│ ├── uni-app.zh-Hans.json
│ └── uni-app.zh-Hant.json
如:uni-app.ja.json 文件：
{
“common”: {
“uni.app.quit”: “もう一度押すと、アプリケーションが終了します”,
“uni.async.error”: “サーバーへの接続がタイムアウトしました。画面をクリックして再試行してください”,
“uni.showActionSheet.cancel”: “キャンセル”,
“uni.showToast.unpaired”: “使用するには、showToastとhideToastをペアにする必要があることに注意してください”,
“uni.showLoading.unpaired”: “使用するには、showLoadingとhideLoadingをペアにする必要があることに注意してください”,
“uni.showModal.cancel”: “キャンセル”,
“uni.showModal.confirm”: “OK”,
“uni.chooseImage.cancel”: “キャンセル”,
“uni.chooseImage.sourceType.album”: “アルバムから選択”,
“uni.chooseImage.sourceType.camera”: “カメラ”,
“uni.chooseVideo.cancel”: “キャンセル”,
“uni.chooseVideo.sourceType.album”: “アルバムから選択”,
“uni.chooseVideo.sourceType.camera”: “カメラ”,
“uni.previewImage.cancel”: “キャンセル”,
“uni.previewImage.button.save”: “画像を保存”,
“uni.previewImage.save.success”: “画像をアルバムに正常に保存します”,
“uni.previewImage.save.fail”: “画像をアルバムに保存できませんでした”,
“uni.setClipboardData.success”: “コンテンツがコピーされました”,
“uni.scanCode.title”: “スキャンコード”,
“uni.scanCode.album”: “アルバム”,
“uni.scanCode.fail”: “認識に失敗しました”,
“uni.scanCode.flash.on”: “タッチして点灯”,
“uni.scanCode.flash.off”: “タップして閉じる”,
“uni.startSoterAuthentication.authContent”: “指紋認識…”,
“uni.picker.done”: “完了”,
“uni.picker.cancel”: “キャンセル”,
“uni.video.danmu”: “「弾幕」”,
“uni.video.volume”: “ボリューム”,
“uni.button.feedback.title”: “質問のフィードバック”,
“uni.button.feedback.send”: “送信”
},
“ios”: {},
“android”: {}
}
6、API接口
后台接口返回的内容也需要做多语言,需要根据当前语言切换,我这里实现的方法是在在headers添加language属性,后端根据属性值判断当前语言：
header: {
‘language’: uni.getStorageSync(‘lang’)
},