uni-app交流圈uin-appuni-app

uniapp与i18n实现国际化

2019-04-02  本文已影响1人  瑟闻风倾

参考:uniapp与vue-i18n实现国际化多语言

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>
上一篇下一篇

猜你喜欢

热点阅读