七 业务绑定

---

title: ecode文档 - 七、业务绑定 created: 2026-04-19 updated: 2026-04-19 type: reference tags: [oa, ecode, weaver, frontend] related: [oa/ecode-guide.md] source: https://e-cloudstore.com/doc.html

---

ecode, weaver, frontend] related: [oa/ecode-guide.md] source: https://e-cloudstore.com/doc.html ---#### 七、业务绑定

ecode除了可以在针对所有界面动态复写和动态注入组件之外，我们还提供了针对特殊业务绑定的sdk

ecode除了可以在针对所有界面动态复写和动态注入组件之外，我们还提供了针对特殊业务绑定的sdk

1、PC门户主题注册

ecodeSDK.rewritePortalThemeQueue.push(option) ecology版本要求：1906及1906+

ecodeSDK.rewritePortalThemeQueue.push(option) ecology版本要求：1906及1906+

ecode的主题开发方案，解决传统主题开发的几大问题：主题通常都需要二次修改，用了ecode只需复制一下即可开始二次修改，不用安装配置脚手架，甚至一些小修改项目人员即可处理；主题的复用问题，使用ecode开发的主题完全无侵入，可拔插方便的在不同环境之间共享；解决以往难以让客户维护主题源码的问题，主题交付客户之后，可让客户自行维护；此方案开发进行标准页面跳转，直接支持single page模式，可以用react-router进行路由快速切换

ecode的主题开发方案，解决传统主题开发的几大问题：主题通常都需要二次修改，用了ecode只需复制一下即可开始二次修改，不用安装配置脚手架，甚至一些小修改项目人员即可处理；主题的复用问题，使用ecode开发的主题完全无侵入，可拔插方便的在不同环境之间共享；解决以往难以让客户维护主题源码的问题，主题交付客户之后，可让客户自行维护；此方案开发进行标准页面跳转，直接支持single page模式，可以用react-router进行路由快速切换

（1）参数说明

参数	说明	类型	可选	默认	备注
option	复写配置	object	必填	{}
option.fn	复写钩子函数	function	必填	(params)=>{}	params 参数请看下一个表格
option.order	复写排序	integer	选填	0
option.desc	复写说明	string	选填	‘’	无

参数 说明 类型 可选 默认 备注

参数 说明 类型 可选 默认 备注 参数说明类型可选默认备注

option 复写配置 object 必填 {}

option.fn 复写钩子函数 function 必填 (params)=>{} params 参数请看下一个表格

option.order 复写排序 integer 选填 0

option.desc 复写说明 string 选填 ‘’ 无

option 复写配置 object 必填 {}

option复写配置object必填{} option.fn 复写钩子函数 function 必填 (params)=>{} params 参数请看下一个表格 option.fn复写钩子函数function必填(params)=>{}params 参数请看下一个表格 option.order 复写排序 integer 选填 0

option.order复写排序integer选填0 option.desc 复写说明 string 选填 ‘’ 无 option.desc复写说明string选填‘’无

integer 选填 0

option.order复写排序integer选填0 option.desc 复写说明 string 选填 ‘’ 无 option.desc复写说明string选填‘’无> params 数据

params 数据

参数	说明	类型	备注
props	主题父组件参数	object
options	业务信息	object	无
options.id	主题ID	string	主题定义完成后生成的ID

参数 说明 类型 备注

参数 说明 类型 备注 参数说明类型备注

props 主题父组件参数 object

options 业务信息 object 无

options.id 主题ID string 主题定义完成后生成的ID

props 主题父组件参数 object

props主题父组件参数object options 业务信息 object 无 options业务信息object无 options.id 主题ID string 主题定义完成后生成的ID options.id主题IDstring主题定义完成后生成的ID

（2）基本例子

register.js：需要前置加载，注册了主题即可关联到标准

//注册和绑定门户主题前端实现接口
ecodeSDK.rewritePortalThemeQueue.push({
  fn:(params)=>{
    const {props,options} = params;
    //异步加载模块${appId}下的子模块NewTheme
    if(options&&options.id==='d89d986c812a4f038740e3f824999de1') {
      const acParams = {
        appId:'${appId}',
        name:'NewTheme', //模块名称
        props:props,
        isPage:false, //是否是路由页面
        noCss:true //是否禁止单独加载css，通常为了减少css数量，css默认前置加载
      }
      return ecodeSDK.getAsyncCom(acParams);
    }
    return null;
  },
  order:1,
  desc:'这是一个主题界面的参考案例'
});

index.js：不需要前置加载，用来实现主题代码，也可以使用mobx开发

register.js：需要前置加载，注册了主题即可关联到标准 题界面的参考案例'

}); ```

index.js：不需要前置加载，用来实现主题代码，也可以使用mobx开发

register.js：需要前置加载，注册了主题即可关联到标准```javascript //注册和绑定门户主题前端实现接口 ecodeSDK.rewritePortalThemeQueue.push({ fn:(params)=>{ const {props,options} = params; //异步加载模块${appId}下的子模块NewTheme if(options&&options.id==='d89d986c812a4f038740e3f824999de1') { const acParams = { appId:'${appId}', name:'NewTheme', //模块名称 props:props, isPage:false, //是否是路由页面 noCss:true //是否禁止单独加载css，通常为了减少css数量，css默认前置加载 } return ecodeSDK.getAsyncCom(acParams); } return null; }, order:1, desc:'这是一个主题界面的参考案例' });

codeSDK.getAsyncCom(acParams);
    }
    return null;
  },
  order:1,
  desc:'这是一个主题界面的参考案例'
});
```1. `//注册和绑定门户主题前端实现接口`
2. `ecodeSDK.rewritePortalThemeQueue.push({`
3. `  fn:(params)=>{`
4. `    const {props,options} = params;`
5. `    //异步加载模块${appId}下的子模块NewTheme`
6. `    if(options&&options.id==='d89d986c812a4f038740e3f824999de1') {`
7. `      const acParams = {`
8. `        appId:'${appId}',`
9. `        name:'NewTheme', //模块名称`
10. `        props:props,`
11. `        isPage:false, //是否是路由页面`
12. `        noCss:true //是否禁止单独加载css，通常为了减少css数量，css默认前置加载`
13. `      }`
14. `      return ecodeSDK.getAsyncCom(acParams);`
15. `    }`
16. `    return null;`
17. `  },`
18. `  order:1,`
19. `  desc:'这是一个主题界面的参考案例'`
20. `});`
`//注册和绑定门户主题前端实现接口``//注册和绑定门户主题前端实现接口`//注册和绑定门户主题前端实现接口`ecodeSDK.rewritePortalThemeQueue.push({``ecodeSDK.rewritePortalThemeQueue.push({`ecodeSDK.rewritePortalThemeQueue.push({`  fn:(params)=>{``  fn:(params)=>{` fn:(params)=>{`    const {props,options} = params;``    const {props,options} = params;` const {props,options} = params;`    //异步加载模块${appId}下的子模块NewTheme``    //异步加载模块${appId}下的子模块NewTheme` //异步加载模块${appId}下的子模块NewTheme`    if(options&&options.id==='d89d986c812a4f038740e3f824999de1') {``    if(options&&options.id==='d89d986c812a4f038740e3f824999de1') {` if(options&&options.id==='d89d986c812a4f038740e3f824999de1') {`      const acParams = {``      const acParams = {` const acParams = {`        appId:'${appId}',``        appId:'${appId}',` appId:'${appId}',`        name:'NewTheme', //模块名称``        name:'NewTheme', //模块名称` name:'NewTheme', //模块名称` 
appId}',`        name:'NewTheme', //模块名称``        name:'NewTheme', //模块名称` name:'NewTheme', //模块名称` appId}',`        name:'NewTheme', //模块名称``        name:'NewTheme', //模块名称` name:'NewTheme', //模块名称`        props:props,``        props:props,` props:props,`        isPage:false, //是否是路由页面``        isPage:false, //是否是路由页面` isPage:false, //是否是路由页面`        noCss:true //是否禁止单独加载css，通常为了减少css数量，css默认前置加载``        noCss:true //是否禁止单独加载css，通常为了减少css数量，css默认前置加载` noCss:true //是否禁止单独加载css，通常为了减少css数量，css默认前置加载`      }``      }` }`      return ecodeSDK.getAsyncCom(acParams);``      return ecodeSDK.getAsyncCom(acParams);` return ecodeSDK.getAsyncCom(acParams);`    }``    }` }`    return null;``    return null;` return null;`  },``  },` },`  order:1,``  order:1,` order:1,`  desc:'这是一个主题界面的参考案例'``  desc:'这是一个主题界面的参考案例'` desc:'这是一个主题界面的参考案例'`});``});`});
order:1,` order:1,`  desc:'这是一个主题界面的参考案例'``  desc:'这是一个主题界面的参考案例'` desc:'这是一个主题界面的参考案例'`});``});`});index.js：不需要前置加载，用来实现主题代码，也可以使用mobx开发

```javascript
const Top = ecodeSDK.imp(Top);

const {WeaPopoverHrm} = ecCom;

class NewTheme extends React.Component {
  render() {
    return (
      <div className="newtheme">
        {!window.pointerXY && (<WeaPopoverHrm />)}
        <Top {...this.props} />
        <div className='newtheme-container'>{this.props.children}</div>
      </div>
    )
  }
}

//发布模块NewTheme，作为模块${appId}的子模块
ecodeSDK.setCom('${appId}','NewTheme',NewTheme);

v> ) } }

//发布模块NewTheme，作为模块${appId}的子模块 ecodeSDK.setCom('${appId}','NewTheme',NewTheme); `1. `const Top = ecodeSDK.imp(Top);` 2. 3. const {WeaPopoverHrm} = ecCom; 4. 5. `class NewTheme extends React.Component {` 6. ` render() {` 7. ` return (` 8. ` <div className="newtheme">` 9. ` {!window.pointerXY && (<WeaPopoverHrm />)}` 10. ` <Top {...this.props} />` 11. ` <div className='newtheme-container'>{this.props.children}</div>` 12. ` </div>` 13. ` )` 14. ` }` 15. `}` 16. 17. //发布模块NewTheme，作为模块${appId}的子模块 18. ecodeSDK.setCom('${appId}','NewTheme',NewTheme); const Top = ecodeSDK.imp(Top);``const Top = ecodeSDK.imp(Top);const Top = ecodeSDK.imp(Top);const {WeaPopoverHrm} = ecCom;``const {WeaPopoverHrm} = ecCom;`const {WeaPopoverHrm} = ecCom;class NewTheme extends React.Component {class NewTheme extends React.Component {`class NewTheme extends React.Component {` render() { render() {render() { return (return (` return (` <div className="newtheme">

<div className="newtheme"> {!window.pointerXY && ()}{!window.pointerXY && (<WeaPopoverHrm />)}` {!window.pointerXY && (<WeaPopoverHrm />)}` <Top {...this.props} /> <Top {...this.props} />

{this.props.children}

<div className='newtheme-container'>{this.props.children}</div>` <div className='newtheme-container'>{this.props.children}</div>` </div>

</div>

{this.props.children}

</div>`` </div>