uniapp与i18n实现国际化
2019-04-02 本文已影响1人
瑟闻风倾
1. main.js
import Vue from 'vue'
import App from './App'
import i18n from './commons/i18n.js'
import en from './commons/language/en.js'
import zh_CN from './commons/language/zh_CN.js'
i18n.registerLocale({en,zh_CN})
Vue.config.productionTip = false
Vue.prototype._i18n = i18n
App.mpType = 'app'
const app = new Vue({
i18n,
...App
})
app.$mount()
备注
:main.js文件:定义全局函数和变量
(1)i18n.js
module.exports = {
locale: 'zh_CN',
locales: {},
registerLocale (locales) {
this.locales = locales
},
setLocale (code) {
this.locale = code
},
getLanguage(){
return this.locales[this.locale];
},
/**
* 返回带(或不带)参数的类型的翻译结果
* @param {string} key, /util/language/en.js 中的键名,如 "curslide"
* @param {object} data, 传入的参数,如 {num: 123}
* @returns {string}
*
* @desc 如:"activeno": "当前学生{activeno}位",
* activeno 为 key,可以输入data {activeno: 15}
* 返回:"当前学生15位"
*/
_ (key, data) {
let locale = this.locale
let locales = this.locales
if (locale && locales[locale] && locales[locale][key]) {
key = locales[locale][key]
}
return key
},
/**
* 返回二选一类型的翻译结果
* @param {string} key, /util/language/en.js 中的键名,如 "curslide"
* @param {object} data, 传入的参数,如 {first: true} 选择前面的
* @returns {string}
*
* @desc 如:"sendprob": "Send | Check",
* sendprob 为 key,可以输入data {first: true}
* 返回:"Send"
*/
_b (key, data) {
let locale = this.locale
let locales = this.locales
let hasKey = locale && locales[locale] && locales[locale][key]
if (hasKey) {
key = locales[locale][key]
let res = key.split('|')[data.first ? 0 : 1].trim()
return res
}
throw new Error(`语言处理错误${key}`)
}
}
(2)en.js
module.exports = {
//app.js
"appjs":{
'home': 'Home',
'my': 'My',
'loading': 'loading',
'error': 'The system is out of order, please try again later',
'failRequest': 'The request failed',
'submission': 'submitting',
'failUpload': 'upload failed',
},
//登录页面
"userbinding":{
"phoneNumber": "phone",
"password": "password",
"language": "language",
"enterCommonlyUsedPhoneNumber": "enter phone number",
"pleaseInputPassword": "enter password",
"bindPhoneNumber": "Binding Phone Number",
"bindPhoneNumberForFirstLogin": "Bind your cell phone number for the first login",
"signIn": "Sign in",
"clickAuthorization": "Clicking authorization",
"needAuthorization": "You need your authorization to use it",
"pleaseselectlanguage": "please select language",
"confirm": "confirm",
"cancel": "cancel",
},
//主页
"myhome":{
"keyword": "please input keyword",
"search": "search",
'staff': "Staff",
"service": "Service",
},
//我的首页
"myindex":{
"balance": "balance",
"yuan": "RMB",
'recharge': "Recharge",
"langSelect": "Language",
"signOut": "Sign out",
"confirm": "confirm",
"cancel": "cancel",
"pleaseSelect": "please select",
}
}
(3)zh_CN.js
module.exports = {
//app.js
"appjs": {
'home':'主页',
'my': '我的',
'loading': '加载中',
'error': '系统异常,请稍后再试',
'failRequest': '请求失败',
'submission': '提交中',
'failUpload': '上传失败',
},
//登录页面
"userbinding": {
"phoneNumber": "手机号",
"password": "密 码",
"language": "语 言",
"enterCommonlyUsedPhoneNumber": "请输入常用手机号",
"pleaseInputPassword": "请输入密码",
"bindPhoneNumber": "绑定手机号",
"bindPhoneNumberForFirstLogin": "首次登录请绑定手机号",
"signIn": "登录",
"clickAuthorization": "点击授权",
"needAuthorization": "需要您的授权才能使用哦",
"pleaseselectlanguage": "请选择语言",
"confirm": "确定",
"cancel": "取消",
},
//主页
"myhome": {
"keyword": "输入关键字",
"search": "搜索",
'staff': "员工",
"service": "服务",
},
//我的首页
"myindex":{
"balance": "余额",
"yuan": "元",
'recharge': "充值",
"langSelect": "语言选择",
"signOut": "退出",
"confirm": "确定",
"cancel": "取消",
"pleaseSelect": "请选择",
}
}
2. myhome.vue测试使用
<template>
<view class="uni-content">
<text>{{T_D.keyword}}</text>
</view>
</template>
<script>
export default {
data() {
return {
T_D : {},
};
},
onLoad:function(){
this.T_D = this._i18n.getLanguage().myhome;
}
}
</script>
<style>
</style>