多语加载 getMultiLang

多语是国际化的一部分。

1. 如何使用

这是一个适用于 NCC 的前端多语方案，可以解决大部分 UI 显示的文字多语问题。
那么，如何创建多语文件？如何使用多语？

2. 创建文件

项目目录的 public 下 新建 lang 文件夹 在当前 lang 文件夹下新建 standard 文件夹 industry 文件夹 customer 文件夹 在当前 standard 文件下建立语言环境文件如：english 文件夹(存放英文多语资源文件)或者 simpchn 文件夹(存放简体中文文件)或者 tradchn 文件夹(存放繁体中文文件)

• 文件后缀：json
• 文件编码：UTF-8(无 BOM)
• 文件路径：模块\public\lang\资产层级\语种编码，如：ampub\public\lang\standard\simpchn
• (standard 表示标准产品，simpchn 表示简体中文)
• 所有应用的多语文件 json 以应用编码为文件名称：应用编码.json，如：451012504A.json
• 模块的公共组件多语抽取一个 common.json 文件，所有的多语都放在这个文件中。如：ampub 下的公共组件都在 ampub\common 目录下，所以 ampub\public\lang\standard\simpchn\common.json 文件，当前目录下的所有多语都放在这一个 json 文件中。
• json 文件中是键值对，key 命名为应用编码-六位流水号，如：’451012504A-000000’: ‘资产变动’， ‘msgUtils-000000’: ‘删除’
• 公共提示语或者公共方法公共组件的多语数据可新建 common.json 然后放于该文件内部

json 文件下的对应的 key 和 value

{
 "20521030-0001": "财务",
 "20521030-0002": "选项-",
 "20521030-0003": "选项二",
 "20521030-0004": "选项三",
 "20521030-0005": "{hello}, {name}, 吃饭了吗",
}  //2052.json 命名规范 模块id应用id-流水号

3. 如何使用

3.1 组件级加载

3.1.1 主体组件

• 在 custructor 函数中定义 state

  constructor(props) {
   super(props);
   this.state = {
     json: {},
     inlt: null
   };
  }
  

• 在 componentWillMount 生命钩子中执行 getMultiLang 方法：必须传参 moduleId、callback：callback 中 setState 的自己定义的属性，例如 json ；domainName 为领域名，如需本地环境测试则需要传此参数

  componentWillMount() {
    let callback = (json, status, inlt) => { // json 多语json格式参数； status： 是否请求到json多语，可用来判断多语资源是否请求到并进行一些别的操作； inlt： 可用来进行占位符的一些操作
      if (status) {
          intemplate.call(this, this.props, json, inlt) // 如模板内也有多语处理，平台推荐模板加载操作放于此处， 在取到json多语资源后用传参的方式传入intemplate模板函数中
          this.setState({json, inlt})       // 保存json和inlt到页面state中并刷新页面
      } else {
          console.log('未加载到多语资源')   // 未请求到多语资源的后续操作
      }
  
    }
    this.props.MultiInit.getMultiLang({moduleId: 2052,domainName: '领域名',callback})
  }
  

• render 函数中通过对象的方法使用 json

  render() {
    return (
        <div>
            <div>{this.state.json['20521030-0004']}</div>
            <div>{inlt&&inlt.get('20521030-0005', {hello: '你好', name: '王五'})}</div> //可用来处理占位符的场景
        </div>
  
    );
  }
  

• 业务组模板函数中通过 getLangData 方法直接获取 json 和 intl 多语， 如下

  export function intemplate() {
    createUIDom(params, res => {
        let result = this.props.MultiInit.getLangData(moduleId); // result结果{json: ..., inlt: ...},result中对应得两个参数分别和上面getMultiLang中callback中的json和inlt一样， 业务组可console自己看看
        let a = result.json["20521030-0004"];
        let b =
            result.inlt &&
            result.inlt.get("20521030-0005", { name: "王柳", hello: "你好" });
    });
  }
  

  3.1.2 小组件

• 例如组件 ComponeontA 在页面 PageA 中，ComponeontA 需要多语处理, 如下 给 ComponeontA 组件通过 props 的方式将 json 和 inlt 传进小组件内部

  // PageA组件
  class PageA extends Component {
   componentWillMount() {
       let callback = (json, status, inlt) => { // json 多语json格式参数； status： 是否请求到json多语，可用来判断多语资源是否请求到并进行一些别的操作； inlt： 可用来进行占位符的一些操作
         if (status) {
             this.setState({json, inlt})       // 保存json和inlt到页面state中并刷新页面
         } else {
             console.log('未加载到多语资源')   // 未请求到多语资源的后续操作
         }
  
      }
      this.props.MultiInit.getMultiLang({moduleId: 2052,domainName: '领域名',callback})
   }
  
   render() {
      return (
       <div>
           <ComponeontA
               json: this.state.json
               inlt: this.state.inlt
           >
           </ComponeontA>
       </div>
  
   );
  }
  

  // ComponeontA组件
  class ComponeontA extends Component {
   render() {
       let {json, inlt} = this.props
       return (
       <div>
          <div>{json['20521030-0004']}</div>
           <div>{inlt&&inlt.get('20521030-0005', {hello: '你好', name: '王五'})}</div> //可用来处理占位符的场景
       </div>
   );
  }
  

  3.1.3 公共常量

• 例如常量 constA 在页面 PageA 中，constA 需要多语处理, 如下：

  // A.js
  A = {
     key1: '20521030-0005',
     key2: '20521030-0004'
  }
  export constA = A
  

  // PageA组件引入A.js 并在render中应用A变量
  import {constA} from './A.js'
  class PageA extends Component {
   componentWillMount() {
       let callback = (json, status, inlt) => { // json 多语json格式参数； status： 是否请求到json多语，可用来判断多语资源是否请求到并进行一些别的操作； inlt： 可用来进行占位符的一些操作
         if (status) {
             this.setState({json, inlt})       // 保存json和inlt到页面state中并刷新页面
         } else {
             console.log('未加载到多语资源')   // 未请求到多语资源的后续操作
         }
  
      }
      this.props.MultiInit.getMultiLang({moduleId: 2052,domainName: '领域名',callback})
   }
  
   render() {
      let {json, inlt} = this.state
      return (
       <div>
           {json[A.key4]}
           <div>
               {inlt&&inlt.get([A.key4], {name: '张三', hello: '你好'})}
           </div>
       </div>
  
   );
  }
  

  3.2 页面级预加载

  3.2.1 单页应用

• 在 main 的 index 中引入 initMultiLangByModule 方法初始化加载多语文件

  import { RenderRouter } from "nc-lightapp-front";
  import { initMultiLangByModule } from "nc-lightapp-front";
  import routes from "./router";
  (function main(routers, htmlTagid) {
    let moduleIds = { aum: ["452002536A"], ampub: ["common"] };
    initMultiLangByModule(moduleIds, () => {
        RenderRouter(routers, htmlTagid);
    });
  })(routes, "app");
  

  3.2.2 多页应用

  import { initMultiLangByModule } from "nc-lightapp-front";
  initMultiLangByModule({ aim: ["451012504A"] }, () => {
    ReactDOM.render(<EquipMap />, document.querySelector("#app"));
  });
  

  3.3 缓存多语加载

• 导入 getMultiLangByID, getAllMultiLangByModule 方法

  import { getMultiLangByID, getAllMultiLangByModule } from "nc-lightapp-front";
  const MultiLangData = getAllMultiLangByModule();
  

  3.3.1 方式一

  多语数据放于 this.state

constructor(props) {
        super(props);
        this.state = {
            intl: MultiLangData.intl || null,
            json:MultiLangData.json || {}
        };
    }
    render () {
        let {json, intl} = this.state
        <div>
            {json['452002536A-001']}
            <div>
                {intl&&intl.get('452002536A-002', {name: '张三', hello: '你好'})}
            </div>
        </div>
    }

3.3.2 方式二

多语数据放于 this

constructor(props) {
        super(props);
        this.intl = MultiLangData.intl || null;
        this.json = MultiLangData.json || {}
    }
    render () {
        let {json, intl} = this
        <div>
            {json['452002536A-001']}
            <div>
                {intl&&intl.get('452002536A-002', {name: '张三', hello: '你好'})}
            </div>
        </div>
    }

3.3.3 方式三

通过 getMultiLangByID 方法获取

 render () {
        <div>
            {getMultiLangByID('452002536A-001')}
            <div>
                {getMultiLangByID('452002536A-002', {name: '张三', hello: '你好'})}
            </div>
        </div>
    }

3.3.4 方式四

公共方法或者组件通过 getMultiLangByID(‘452002536A-001’)的方式获取多语

export default class EquipMap extends Component {
    render() {
        <div>
            {getMultiLangByID('452002536A-001')}
            <div>
                {getMultiLangByID('452002536A-002', {name: '张三', hello: '你好'})}
            </div>
        </div>
    }
  }
    export functin pub = () => {
        return getMultiLangByID('452002536A-001')
    }

}

4. 其他

4.1 获取语种

JS code

• 将方法 import 进来

  import { getLangCode } from "nc-lightapp-front"; // 外部门
  

• 调用方法

  let langCode = getLangCode();
  

  getLangCode 返回值说明

5. API

5.1 getMultiLang

调用样例 : getMultiLang({ getUrl, moduleId, callback, environment, domainName = ‘platform’, needInlt = true })
说明 : 获取多语
参数说明:

返回值说明 ： 返回 undefined

5.1.1 callback(json, status, inlt)

5.2 initMultiLangByModule

调用样例 : initMultiLangByModule(moduleIds, callback)
说明 : 页面级预初始化多语
参数说明:

返回值说明 ： 返回 undefined

5.3 getAllMultiLangByModule

调用样例 : getAllMultiLangByModule()
说明 : 获取缓存的数据
参数说明:
无
返回值说明 ： 返回值为一个对象，包含 json 和 intl 两个参数

5.4 getMultiLangByID

调用样例 : etMultiLangByID(key, variables)
说明 : 根据应用编码和 ID 获取具体的多语字段
参数说明:

返回值说明 ： 返回多语 json 键值

注意事项

暂无