-
组件布局 Layout视图 View导航 Navigation反馈 Feedback
国际化
国际化解决方案,包含了多语言(内容多语和数据多语)、多时区、多币种、多语言录入、国际化手机号录入、多语翻译平台、本地化等相关内容。
概述:组件库支持的多语言能力
组件库的多语工具组件:bee-locale
多语言录入组件:ac-input-locale
国际化手机号录入组件:ac-mobile-locale
项目级批量多语翻译工具:lanbuild
多语言切换和多语言构建
多语言切换,以及批量替换工具
对于项目的多语设置,我们推荐使用react-intl。 简要说明如下:假设项目的入口为 App 组件,需要根据cookie判断语言
1、配置语言包,en_US.json
,zh_CN.json
{
"Demo.content": "I am App"
}
{
"Demo.content": "我是App"
}
2、将本地语言包 en_US.json
与 tinper 语言包合并,并导出 en_US.js
,中文同理
// en_US.js
import en from 'tinper-bee/locale/en_US.js';
import appLocaleData from 'react-intl/locale-data/en';
import messages from 'en_US.json';
export default {
messages: {
...messages,
},
tinperLocale: en,
locale: 'en',
data: appLocaleData
};
// zh_CN.js
import zh from 'tinper-bee/locale/zh_CN.js';
import appLocaleData from 'react-intl/locale-data/zh';
import messages from 'zh_CN.json';
export default {
messages: {
...messages,
},
tinperLocale: zh,
locale: 'zh',
data: appLocaleData
};
3、将 App
组件包装,给tinper的 Locale
组件传入 locale
属性,给 react-intl
组件的 IntlProvider
传入 key
,locale
, messages
属性。
import cookie from 'react-cookie';
import { Locale } from 'tinper-bee';
import { IntlProvider } from 'react-intl';
import zh from 'zh_CN.js';
import en from 'en_US.js';
class Inter extends Component {
chooseLocale=()=>{
switch(cookie.load('u_locale')){
case 'zh-CN':
return zh
break;
case 'en-US':
return en;
break;
default:
return zh;
}
}
render() {
let { tinperLocale,locale,messages } = this.chooseLocale();
return (
<Locale locale={tinperLocale}>
<IntlProvider key={locale} locale={locale} messages={messages}>
<App/>
</IntlProvider>
</Locale>
)
}
}
4、在 App
设置默认语言,所用文字使用 FormattedMessage
包装
import { FormattedMessage, defineMessages } from 'react-intl';
const locales = defineMessages({
content: {
id: 'Demo.content',
defaultMessage: '我是App',
}
});
class App extends Component {
render() {
return (
<div>
<FormattedMessage {...locales.content}/>
</div>
)
}
}
注:使用 react-intl
,如果要兼容ie浏览器,需要单独引入 polyfill
。此 polyfill
cdn地址为动态地址,会根据浏览器不同使用不同的 polyfill
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
多语言构建
指通过工具将一份代码翻译成多份静态资源,如:webpack-plugin-i18n,以及自研的 lanbuild 工具。
lanbuild 示例 使用 lanbuild 组件产出多种语言版本代码。 目前只支持,中文,英文,繁体中文。 后续支持多种语言以及简化配置,开发正在努力中。。。
多语文件包 json格式示例
{
"js.sin.src.0003": "更新成功EN",
"js.com.Ind1.0001": "员工编号EN",
"js.com.Ind1.0002": "员工姓名EN",
"js.com.Ind1.0003": "员工性别EN",
"js.com.Ind1.0004": "所属部门EN",
"js.com.Ind1.0005": "职级EN",
"js.com.Ind1.0006": "工龄EN",
"js.com.Ind1.0007": "司龄EN",
"js.com.Ind1.0008": "年份EN",
"js.com.Ind1.0009": "月份EN",
"js.com.Ind1.0010": "补贴类别EN",
"js.com.Ind1.0011": "补贴标准EN",
"js.com.Ind1.0012": "实际补贴EN",
"js.com.Ind1.0013": "是否超标EN",
"js.com.Ind1.0014": "申请时间EN",
"js.com.Ind1.0015": "领取方式EN",
"js.com.Ind1.0016": "领取时间EN",
"js.com.Ind1.0017": "备注EN",
"js.com.Ind1.0018": "请勾选数据后再新增EN",
"js.com.Ind1.0019": "请勾选数据后再更新EN",
"js.com.Ind1.0020": "数据填写不完整EN",
"js.com.Ind1.0021": "请勾选数据后再删除EN",
"js.com.Ind1.0022": "A2单表行内编辑示例EN",
"js.com.Ind1.0023": "按钮权限加载完成EN",
"js.com.Ind1.0024": "新增EN",
"js.com.Ind1.0025": "修改EN",
"js.com.Ind1.0026": "删除EN",
"js.com.Ind1.0027": "导出EN",
"js.com.Ind1.0028": "保存EN",
"js.com.Ind1.0029": "取消EN",
"js.com.Ind1.0030": "数据未保存,确定离开 ?EN",
"js.com.Ind1.0031": "是否要删除 ?EN",
"js.com.Ind2.0001": "请选择EN",
"js.com.Ind2.0002": "男EN",
"js.com.Ind2.0003": "女EN",
"js.com.Ind2.0004": "一月EN",
"js.com.Ind2.0005": "二月EN",
"js.com.Ind2.0006": "三月EN",
"js.com.Ind2.0007": "四月EN",
}