一 Ecode功能概述
title: ecode文档 - 一、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功能概述
1、新建
产生新数据
产生新数据
目前支持新建分类、文件夹、js、css、md
2、文件夹发布
发布成功文件夹变成橙色
发布成功文件夹变成橙色
作用是发布下面代码到EC,只有文件夹支持发布,文件夹选择了发布,其下面的文件会自动进行构建发布,开发者只需要编写代码,文件夹下的js和css就会分别被自动编译合并打包到一个js和css下,位置位于/cloudstore/release/${appId}，此文件默认是不加载的，都是利用sdk去触发加载
3、前置加载
文件图标出现p标志
文件图标出现p标志
js、css支持前置加载,选择了前置加载将会在系统和组件未加载前执行,js在前置加载时可以用来进行一些底层全局事件注册,css在前置加载时可以用来做一些全局样式修改,当然也可以通过代码判断去区分作用范围,前置加载的所有脚本将会被合并到/cloudstore/dev/init.js和/cloudstore/dev/init.css
4、在线编译语法与线下编译语法差异
react可以不用引入，全局默认存在
react可以不用引入，全局默认存在
import React from "react"; //ecode中不用写import React from "react"; //ecode中不用写``import React from "react"; //ecode中不用写import React from "react"; //ecode中不用写
ecode模块引入与nodejs模块化中的import、export不同，需要修改成解构赋值
ecode模块引入与nodejs模块化中的import、export不同，需要修改成解构赋值
import {Button} from 'antd';import {WeaInput} from 'ecCom';import {Button} from 'antd';``import {Button} from 'antd';import {Button} from 'antd';import {WeaInput} from 'ecCom';``import {WeaInput} from 'ecCom';import {WeaInput} from 'ecCom';
改为
Com';改为
const {Button} = antd; //antd全局存在
const {WeaInput} = ecCom; //ecCom全局存在
```1. `const {Button} = antd; //antd全局存在`
2. `const {WeaInput} = ecCom; //ecCom全局存在`
`const {Button} = antd; //antd全局存在``const {Button} = antd; //antd全局存在`const {Button} = antd; //antd全局存在`const {WeaInput} = ecCom; //ecCom全局存在``const {WeaInput} = ecCom; //ecCom全局存在`const {WeaInput} = ecCom; //ecCom全局存在
> ecode本地模块引入与nodejs本地模块化中的import、export不同，需要改成ecode imp、exp
ecode本地模块引入与nodejs本地模块化中的import、export不同，需要改成ecode imp、exp
```javascript
export default NewCom; //模块化导出
export default NewCom; //模块化导出export default NewCom; //模块化导出``export default NewCom; //模块化导出export default NewCom; //模块化导出
import NewCom from './NewCom'; //模块化导入import NewCom from './NewCom'; //模块化导入``import NewCom from './NewCom'; //模块化导入import NewCom from './NewCom'; //模块化导入
改为
ecodeSDK.exp(NewCom); //ecode中导出ecodeSDK.exp(NewCom); //ecode中导出``ecodeSDK.exp(NewCom); //ecode中导出ecodeSDK.exp(NewCom); //ecode中导出
ecodeSDK.imp(NewCom); //ecode中导入，注意导入的模块必须在同一个橙色发布文件夹以内ecodeSDK.imp(NewCom); //ecode中导入，注意导入的模块必须在同一个橙色发布文件夹以内``ecodeSDK.imp(NewCom); //ecode中导入，注意导入的模块必须在同一个橙色发布文件夹以内ecodeSDK.imp(NewCom); //ecode中导入，注意导入的模块必须在同一个橙色发布文件夹以内
ecode导出模块到全局的方式，这个在nodejs中是脚手架处理成umd导出，在ecode中我们封装了对应sdk，此方案可以有效管理全局组件
ecode导出模块到全局的方式，这个在nodejs中是脚手架处理成umd导出，在ecode中我们封装了对应sdk，此方案可以有效管理全局组件 ode中我们封装了对应sdk，此方案可以有效管理全局组件
ecode导出模块到全局的方式，这个在nodejs中是脚手架处理成umd导出，在ecode中我们封装了对应sdk，此方案可以有效管理全局组件javascript
//NewBrowserForMeeting是对应组件名
ecodeSDK.setCom('${appId}','NewBrowserForMeeting',NewBrowserForMeeting);
1. 1. `//NewBrowserForMeeting是对应组件名`
2. `ecodeSDK.setCom('${appId}','NewBrowserForMeeting',NewBrowserForMeeting);`
`//NewBrowserForMeeting是对应组件名``//NewBrowserForMeeting是对应组件名`//NewBrowserForMeeting是对应组件名`ecodeSDK.setCom('${appId}','NewBrowserForMeeting',NewBrowserForMeeting);``ecodeSDK.setCom('${appId}','NewBrowserForMeeting',NewBrowserForMeeting);`ecodeSDK.setCom('${appId}','NewBrowserForMeeting',NewBrowserForMeeting);
> ecode导入全局模块需要使用异步的方法一，通常用于表单和建模的代码块扩展
ecode导入全局模块需要使用异步的方法一，通常用于表单和建模的代码块扩展
```javascript
ecodeSDK.load({
id:'${appId}', //如果在ecode外部（比如表单）使用，${appId}需要自行获取字符串
noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载
cb:function () {
//回调的时候可以获取组件
var Com = ecodeSDK.getCom('${appId}','NewBrowserForMeeting ');
//将组件通过ReactDOM渲染到指定位置或者绑定到具体业务
}
});
ecodeSDK.load({
2. id:'${appId}', //如果在ecode外部（比如表单）使用，${appId}需要自行获取字符串
3. noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载
4. cb:function () {
5. //回调的时候可以获取组件
6. var Com = ecodeSDK.getCom('${appId}','NewBrowserForMeeting ');
7. //将组件通过ReactDOM渲染到指定位置或者绑定到具体业务
8. }
9. });
ecodeSDK.load({``ecodeSDK.load({ecodeSDK.load({id:'${appId}', //如果在ecode外部（比如表单）使用，${appId}需要自行获取字符串`` id:'${appId}', //如果在ecode外部（比如表单）使用，${appId}需要自行获取字符串 id:'${appId}', //如果在ecode外部（比如表单）使用，${appId}需要自行获取字符串noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载`` noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载 noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载cb:function () {`` cb:function () { cb:function () {//回调的时候可以获取组件`` //回调的时候可以获取组件 //回调的时候可以获取组件var Com = ecodeSDK.getCom('${appId}','NewBrowserForMeeting ');`` var Com = ecodeSDK.getCom('${appId}','NewBrowserForMeeting '); var Com = ecodeSDK.getCom('${appId}','NewBrowserForMeeting ');//将组件通过ReactDOM渲染到指定位置或者绑定到具体业务`` //将组件通过ReactDOM渲染到指定位置或者绑定到具体业务 //将组件通过ReactDOM渲染到指定位置或者绑定到具体业务}`` } }});``});});
ecode前置加载文件中异步引入组件的方法，通常用于前置加载时扩展组件以及新页面开发
ecode前置加载文件中异步引入组件的方法，通常用于前置加载时扩展组件以及新页面开发
const acParams = {
appId:'${appId}',
name:'NewBrowserForMeeting', //模块名称
isPage:false, //是否是路由页面
noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载
props:{} //组件参数
}
const Com = ecodeSDK.getAsyncCom(acParams);
`1. `const acParams = {`
2. ` appId:'${appId}',`
3. ` name:'NewBrowserForMeeting', //模块名称`
4. ` isPage:false, //是否是路由页面`
5. ` noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载`
6. ` props:{} //组件参数`
7. `}`
8. `const Com = ecodeSDK.getAsyncCom(acParams);`
`const acParams = {const acParams = {const acParams = { appId:'${appId}',appId:'${appId}',` appId:'${appId}',` name:'NewBrowserForMeeting', //模块名称 name:'NewBrowserForMeeting', //模块名称name:'NewBrowserForMeeting', //模块名称 isPage:false, //是否是路由页面isPage:false, //是否是路由页面` isPage:false, //是否是路由页面` noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载 noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载 props:{} //组件参数props:{} //组件参数` props:{} //组件参数`}}}const Com = ecodeSDK.getAsyncCom(acParams);`const Com = ecodeSDK.getAsyncCom(acParams);const Com = ecodeSDK.getAsyncCom(acParams);
5、ecode中使用组件库及工具库名称
PC端相关库
PC端相关库
onst {Button} = antd; const {WeaTop} = ecCom; const {toJS} = mobx; const {Provider} = mobxReact;`1. `const {Button} = antd;`
2. `const {WeaTop} = ecCom;`
3. `const {toJS} = mobx;`
4. `const {Provider} = mobxReact;`
`const {Button} = antd;const {Button} = antd;const {Button} = antd;const {WeaTop} = ecCom;const {WeaTop} = ecCom;`const {WeaTop} = ecCom;`const {toJS} = mobx;const {toJS} = mobx;const {toJS} = mobx;const {Provider} = mobxReact;`const {Provider} = mobxReact;const {Provider} = mobxReact;
MOBILE端相关库
MOBILE端相关库
const { observer, inject } = mobxReact;
const { withRouter } = ReactRouterDom;
const { AtSomeone } = WeaverMobilePage;
const { Button,Tools,WingBlank } = WeaverMobile;
const { observer, inject } = mobxReact;const { withRouter } = ReactRouterDom;const { AtSomeone } = WeaverMobilePage;const { Button,Tools,WingBlank } = WeaverMobile;const { observer, inject } = mobxReact;``const { observer, inject } = mobxReact;const { observer, inject } = mobxReact;const { withRouter } = ReactRouterDom;``const { withRouter } = ReactRouterDom;const { withRouter } = ReactRouterDom;const { AtSomeone } = WeaverMobilePage;``const { AtSomeone } = WeaverMobilePage;const { AtSomeone } = WeaverMobilePage;const { Button,Tools,WingBlank } = WeaverMobile;``const { Button,Tools,WingBlank } = WeaverMobile;const { Button,Tools,WingBlank } = WeaverMobile;
6、文件夹和文件剪切、复制、黏贴
用来方便的对已有方案进行二次修改
用来方便的对已有方案进行二次修改
文件夹剪切黏贴之后，appId将不会变化，而文件夹复制黏贴之后，将会产生新的appId
7、灰度发布功能
查看 之后，appId将不会变化，而文件夹复制黏贴之后，将会产生新的appId
7、灰度发布功能
💡 相关章节对比: 本文档主要介绍功能原理，具体操作步骤请参考 二-如何创建ecode项目.md。