uni-app的国际化，即多语言，分为应用部分和框架部分。
- 应用部分，即开发者自己的代码里涉及的界面部分
- 框架部分，即uni-app内置组件和API涉及界面的部分
框架部分国际化
1、安装插件vue-i18n
直接在hbuilder终端运行一下内容：（推荐使用vue-i18n@9.1.9固定版本）
$ npm install vue–i18n —save
2、添加语言包
在项目根目录添加 lang 文件夹，用于多语言管理
创建 /lang/zh.js（中文）
export default {
home:{
hello:’你好’,
name:’张三’,
},
login: {
username:’账号’,
password:’密码’,
},
}
可根据自身需要创建其他语言包
3、配置 main.js 引入vue-i18n
import App from ‘./App’;
// Api函数polyfill（目前为实验版本，如不需要，可删除！）’;
import Polyfill from ‘./polyfill/polyfill’;
Polyfill.init();
// 全局mixins，用于实现setData等功能，请勿删除！’;
import Mixin from ‘./polyfill/mixins’;
// 引入 多语言包
import VueI18n from ‘vue-i18n’
// 通过插件的形式挂载
Vue.use(VueI18n)
// 引入语言包，注意路径
import Chinese from ‘@/lang/zh.js’;
import English from ‘@/lang/en.js’;
let langList = {
// 这里的属性名是任意的，您也可以把zh设置为cn等，只是后续切换语言时
// 要标识这里的语言属性，如：this.$i18n.locale = zh|en|cn|xxx
‘zh’: Chinese,
‘en’: English,
};
// 获取已设置的语言
let nowLang = uni.getStorageSync(‘lang’);
if (nowLang != ” && nowLang != null || typeof nowLang != ‘undefined’) {
// 已设置语言
}
else {
nowLang = ‘zh’;
uni.setStorageSync(‘lang’, nowLang);
}
// 检查标识是否存在
let langKeys = Object.keys(langList);
if (langKeys.indexOf(nowLang) === -1) {
nowLang = ‘zh’;
uni.setStorageSync(‘lang’, nowLang);
}
// i18n配置
let i18nConfig = {
locale: nowLang,
// 引入语言文件
messages: langList
}
// #ifndef VUE3
import Vue from ‘vue’;
// 引入 多语言包
import VueI18n from ‘vue-i18n’
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
Vue.mixin(Mixin);
Vue.config.productionTip = false;
App.mpType = ‘app’;
const app = new Vue({
i18n,
…App
});
app.$mount();
// #endif
// #ifdef VUE3
import { createSSRApp } from ‘vue’;
import { createI18n } from ‘vue-i18n’// v9.x
export function createApp() {
const app = createSSRApp(App);
app.use(i18n)
app.mixin(Mixin);
return {
app
};
}
// #endif
4、在vue页面中使用语言变量
- template页面模板中使用 $t(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(){
uni.setNavigationBarTitle({
title: this.$t('home.name)
});
},
}
</script>
注意：页面中设置语言后需要调用 this.$i18n.locale = ‘UEY’ 后生效
5、pages.json 国际化
pages.json不属于vue页面，其中的原生tabbar和原生导航栏里也有文字内容。
这部分内容的国际化方案如下：
pages.json：
{
“pages”: [
{
“path”: “pages/index/index”,
“style”: {
“navigationBarTitleText”: “%index.title%”
// locale目录下 语言地区代码.json 文件中定义的 key，使用 %% 占位
}
}
],
“tabBar”: {
“list”: [{
“pagePath”: “pages/index/index”,
“text”: “%index.title%”
}
]
}
}
pages.json 支持以下属性配置国际化信息
- navigationBarTitleText
- titleNView->titleText
- titleNView->searchInput->placeholder
- tabBar->list->text
注：
小程序下不支持这种国际化方案，也可以使用设置tabbar和navigationbar的API来设置文字。
或者废弃原生tabbar和navigationbar，使用自定义方式。
6、小程序专有国际化
tabbar 页面
存储当前语言标识，如果更新了，就重新加载数据，以便刷新应用部分的多语言
{
data() {
return {
last_info: {
lang:”,
}
}
}
onShow: function(){
let nowLang = uni.getStorageSync(‘lang’);
if (this.last_info.lang != nowLang) {
// 更新 tabbar 栏目
uni.setTabBarItem({
index: 0,
text: that.$t(‘home.title’),
})
…
// 初始化数据
this.init();
this.last_info.lang = nowLang;
}
}
}
7、多语言切换页
<template>
<view>
<view v-if=”goods_list.length > 0″ class=”m-list”>
<view
class=”m-item”
v-for=”(item, index) in goods_list” :key=”index”
@tap=”choose” :data-key=”item.sign”
>
<view class=”info flex”>
<view class=”name”>{{ item.name }}</view>
<image v-if=”item.sign == lang_info.sign”
class=”ico ico-phone” src=”@/static/images/ico_actived.png”></image>
</view>
</view>
</view>
<block v-else>
<view v-if=”isload == 1″ class=”empty house”>
<view class=”text”>没有找到任何相关信息</view>
</view>
</block>
</view>
</template>
<script>
export default {
methods: {
choose: function (e) {
let key = e.currentTarget.dataset.key;
let that = this;
$.each(this.goods_list, function (v, i) {
if (v.sign == key) {
that.result.code = 1;
that.result.info = v;
that.setData({
lang_info:v
});
uni.setStorageSync(‘lang’, v.sign);
// 页面中设置语言后需要调用 this.$i18n.locale = xx
that._i18n.locale = v.sign
}
});
// 更新 tabbar 栏目
uni.setTabBarItem({
index: 0,
text: that.$t(‘home.title’),
})
setTimeout(function(){
dg.navigateBack();
}, 1000)
}
}
}
</script>