提示

CabinX 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。同时支持本地化配置和多语言平台配置

本地化国际化配置示例

入口页设置默认语言

// 在入口页seajs相关代码中添加以下判断
// 一般入口页由前端团队维护
 seajs.use(
          [
            'cabinx/core/config',
            'kayak/core/kayak'
          ],
          function (coreConfig, kayak) {
            // 设置 CabinX Core UI 为 海外
            // coreConfig.setConfig({themeConfig: {theme: 'overseas', size: 'normal'}});

            /**
             * 设置系统语言，优先使用用户主动选择的语言
             */
            function setLanguage() {
              // 通过 SSO Cookie 获取商家语言列表和默认语言: "zh_CN,zh_HK,en_US;en_US"
              // “dmall-locale-list” 不同地区商家需要不同key
              const localeListStr = getCookie('dmall-locale-list') || '';
              // 用户主动选择的语言
              const customizedLocale = localStorage.getItem('dmall-locale-customized');
              const shouldSetCustomizedLocale = customizedLocale !== null && localeListStr.indexOf(customizedLocale) !== -1;

              // 如用户曾经主动选择语言 且语言存在于 支持语言列表
              // 则使用用户主动选择的语言
              if (shouldSetCustomizedLocale) {
                // kayak.setLocale(data:object, reload:boolean, isSecure:boolean)
                kayak.setLocale({locale: customizedLocale}, false, false);
                return;
              }

              // 设置为浏览器或商家默认语言
              setDefaultLanguage(localeListStr);
            }

            /**
             * 浏览器语言适配 场景例: en -> en_US, zh -> zh_CN, en-US -> en_US
             * @param {string} language 浏览器语言
             */
            function transformBrowserLanguage(language) {
              if (language === 'en') {
                return 'en_US';
              }
              if (language === 'zh') {
                return 'zh_CN';
              }
              return language.replace('-', '_');
            }

            /**
             * 设置为浏览器或商家默认语言
             * @parma {string} localeListStr 商家语言列表和默认语言 例: "zh_CN,zh_HK,en_US;en_US"
             */
            function setDefaultLanguage(localeListStr = '') {
              if (!localeListStr) {
                return;
              }

              // 商家语言列表和默认语言
              const localeListArray = localeListStr.split(';');
              const venderLocaleList = localeListArray[ 0 ].split(',') || [];
              const venderDefaultLocale = localeListArray[ 1 ] || '';

              // 获取浏览器语言，如：zh-CN, zh 需替换为 zh_CN
              const browserLocale = transformBrowserLanguage(window.navigator.language);
              // 浏览器语言是否在商家支持语言列表
              const shouldSetBrowserLocale = venderLocaleList.indexOf(browserLocale) !== -1;

              // 如浏览器默认语言在商家支持语言列表
              // 则设置为浏览器默认语言
              if (shouldSetBrowserLocale) {
                kayak.setLocale({locale: browserLocale}, false, false);
                return;
              }

              // 浏览器默认语言不在商家支持语言列表
              // 设置为商家默认语言
              kayak.setLocale({locale: venderDefaultLocale}, false, false);
            }

            // 设置系统语言
            setLanguage();

            // 加载 CabinX 等相关

          }
        )

//注意：建议项目只配置一个语言包！！！

项目名
  ├── 其他文件夹
  │
  └── language     //语言包文件夹，内部的语言包文件名必须与支持的语言的key一致
      ├── index.js //入口文件
      ├── zh_CN.js //中文语言包
      ├── zh_HK.js //繁体中文语言包
      └── en_US.js //英语语言包

语言包配置样例

语言包主入口

import en_US from './en_US.js'
import zh_CN from './zh_CN.js'
import zh_HK from './zh_HK.js'

export default CabinX.di18n.useLanguage( {
    'en_US': en_US,
    'zh_CN': zh_CN,
    'zh_HK': zh_HK
} )

en_US.js 单个语言包

// 支持差值表达式
export default {
    pageTitle:'page Title',
    user: {
        info: 'hello {name}，vip{level}'
    }
}

在项目中使用

//根据页面的相对位置引入语言包入口文件
 import translate from './language/index.js'

 //翻译语言包内的key
 translate.$d( 'pageTitle' ) //返回 page Title
 //支持差值表达式翻译
 translate.$d( 'user.info',{name:'Mr Zhang',level:1} ) //返回 hello Mr Zhang,vip1

//XPage设置翻译方法以便支持在dml中使用

export default XPage({
    data:{
        userInfo:{
            name:'Mr Zhang',
            level:1
        }
    } ,
    //设置page的dml 翻译方法
    $d(keyPath,option){
        return translate.$d(keyPath,option )
    }

})

在dml中

<!--翻译普通字符串-->
<components>{{$d(pageTitle)}}</components>
<!--翻译差值表达式-->
<components>{{$d( 'user.info',userInfo )}}</components>
<!--翻译props-->
<components :propKey="$d( 'user.info',userInfo )"> </components>

在普通模块中

//根据模块的相对位置引入语言包入口文件
 import translate from './language/index.js'

 //翻译语言包内的key
 translate.$d( 'pageTitle' ) //返回 page Title
 //支持差值表达式翻译
 translate.$d( 'user.info',{name:'Mr Zhang',level:1} ) //返回 hello Mr Zhang,vip1

切换语言包

注意

CabinX提供了设置语言包的方法，但实际运用中一般使用kayak.setLocale更具全面的兼容性，因为系统一般除了CabinX的项目，还有历史的cabin项目。

仅当单纯的CabinnX系统时，可以使用CabinX.di18n.setLocale方法。

  //切换按钮事件中调用
  CabinX.di18n.setLocale('zh_HK',true)

OSI项目通过多语言平台设置

多语言配置平台说明

API

方法

方法名	说明	参数	默认值
CabinX.di18n.useLanguage	返回一个国际化语言包实例（translate）	语言包合集对象（请参考语言包入口文件配置）	空对象{}
CabinX.di18n.getLocale	获取当前国际化语言包,返回值为{dmall-locale:'zh_CN',dmall-zone:null}	空	无
CabinX.di18n.setLocale	设置当前语言环境,两个参数,第一个为语言包名，第二个参数是否刷新，切换语言需要设置为true	locale,reload	zh_CN,false
kayak.setLocale	（考虑全面兼容性，入口页推荐使用该方式）设置当前语言环境,三个参数,第一个语言信息对象，第二个参数是否刷新，切换语言需要设置为true，第三个语言信息设置cookie是否secure，默认https为true	locale,reload，secure	zh_CN,false,默认https为true

语言包（translate）方法

translate.$d

语言包实例翻译方法

2个参数,keyPath,options,支持深属性的字符串翻译,options 为差值表达式翻译（请参考demo 里面的user.info翻译）

目前支持语言命名规范

语言	文件名
简体中文	zh_CN
繁体中文	zh_HK
英语（美式）	en_US
高棉语（柬埔寨语）	km_KH
波兰语	pl_PL