---

title: ecode使用说明 created: 2026-04-18 updated: 2026-04-18 type: reference tags: [weaver]

---

ecode使用说明

泛微 Ecology 9 前端二次开发工具官方文档 来源：https://e-cloudstore.com/doc.html#ecode使用说明

ecode核心是解决EC所有界面无侵入定制和扩展二次开发，采用动态注册，不直接修改源码的方案解决开发需求。除了新开发页面的之外，它还支持所有标准页面的修改。ecode包含了整套前端编辑器、编译器，可以让用户无需搭建开发环境直接通过浏览器开始single page前端开发，同时采用ecode开发的内容都是插件化，支持一键共享、复用、二次封装。

使用ecode需要提前学习的内容： - PC端：js、css、es6、react16.x、react-router3、mobx - MOBILE端：js、css、es6、react16.x、react-router4、mobx

相关常用链接

• ecology后端开发文档
• 相关技术快速入门方法
• e9技术站：含所有e9技术文档，包括组件库及前后端sdk、api
• weaJs：pc和移动都可用的一套轻量sdk
• 表单代码块sdk：包含pc和移动sdk
• 建模代码块sdk：只包含pc
• ecode前端开发规范
• ecode常见问题及解决方法
• 全局数据读取
• 支持ecode复写的组件版本信息整理

注意事项（重要）

• 点击查看ecode注意事项
• 点击查看ecode应用导致后台页面白屏通用解决方案
• 点击查看系统登陆页/首页白屏相关问题及解决方案

权限维护

登录sysadmin之后，在组织权限中心-权限管理-角色设置中，添加一个新的角色（如ecode管理员），该角色添加权限项"前端在线开发权限"，在成员设置中添加用户即可。

如何安装

1. 目前仅支持的浏览器内核：谷歌chrome，国产环境请用360
2. 下载并覆盖ecology的ecode通用升级包（注意标准kb1907+ 默认包含ecode，但版本不是最新版）
3. 覆盖后到ecology访问地址进入ecode界面：ip:port/ecode
4. 只要左侧菜单正常加载系统配置、默认分类，并且无报错就代表安装成功

---

一、ecode功能概述

1、新建

目前支持新建分类、文件夹、js、css、md

2、文件夹发布

发布成功文件夹变成橙色。作用是发布下面代码到EC，只有文件夹支持发布，文件夹选择了发布，其下面的文件会自动进行构建发布。

• 位置：/cloudstore/release/${appId}
• 此文件默认是不加载的，都是利用sdk去触发加载

3、前置加载

js、css支持前置加载，选择了前置加载将会在系统和组件未加载前执行。

• js在前置加载时可以用来进行一些底层全局事件注册
• css在前置加载时可以用来做一些全局样式修改
• 前置加载的所有脚本将会被合并到 /cloudstore/dev/init.js 和 /cloudstore/dev/init.css 注册
• css在前置加载时可以用来做一些全局样式修改
• 前置加载的所有脚本将会被合并到 /cloudstore/dev/init.js 和 /cloudstore/dev/init.css### 4、在线编译语法与线下编译语法差异

react可以不用引入，全局默认存在

// import React from "react"; //ecode中不用写

ecode模块引入与nodejs不同，需要修改成解构赋值

// 改为：
const {Button} = antd; //antd全局存在
const {WeaInput} = ecCom; //ecCom全局存在

ecode本地模块引入

// 改为：
ecodeSDK.exp(NewCom); //ecode中导出
ecodeSDK.imp(NewCom); //ecode中导入，注意导入的模块必须在同一个橙色发布文件夹以内

ecode导出模块到全局

ecodeSDK.setCom('${appId}','NewBrowserForMeeting',NewBrowserForMeeting);

ecode导入全局模块

ecodeSDK.load({
  id:'${appId}',
  noCss:true,
  cb:function () {
    var Com = ecodeSDK.getCom('${appId}','NewBrowserForMeeting');
  }
});

ecode前置加载文件中异步引入组件

const acParams = {
    appId:'${appId}',
    name:'NewBrowserForMeeting',
    isPage:false,
    noCss:true,
    props:{}
}
const Com = ecodeSDK.getAsyncCom(acParams);

5、ecode中使用组件库及工具库名称

PC端相关库

const {Button} = antd;
const {WeaTop} = ecCom;
const {toJS} = mobx;
const {Provider} = mobxReact;

MOBILE端相关库

const { observer, inject } = mobxReact;
const { withRouter } = ReactRouterDom;
const { AtSomeone } = WeaverMobilePage;
const { Button,Tools,WingBlank } = WeaverMobile;

6、文件夹和文件剪切、复制、黏贴

• 文件夹剪切黏贴之后，appId将不会变化
• 文件夹复制黏贴之后，将会产生新的appId

---

二、如何创建ecode项目

1. 新建ecode分类以及文件夹
2. 右键新建选择类型为js，并填入名称点击保存
3. 选择根文件夹，点击右键并点击发布
4. 选择js文件，点击右键并点击前置加载

---

三、EC如何查看前端源代码

ode分类以及文件夹 2. 右键新建选择类型为js，并填入名称点击保存 3. 选择根文件夹，点击右键并点击发布 4. 选择js文件，点击右键并点击前置加载

---

三、EC如何查看前端源代码### 1、PC端源码如何查找

找到各模块的源码入口： - 前台：/pc4mobx/[模块名]/index.js - 后台：/pc4backstage/[模块名]/index.js

比如： - 流程表单 /pc4mobx/workflowForm/index.js - 流程 /pc4mobx/workflow/index.js - 流程后台 /pc4backstage/workflow/index.js

2、MOBILE端源码如何查找

找到各模块的源码入口：/mobile4mobx/[模块名]/index.js

比如： - 流程表单 /mobile4mobx/workflowForm/index.js - 流程 /mobile4mobx/workflow/index.js

---

四、组件参数复写

可以对EC全系统组件参数进行配置，支持组件站中大部分组件参数。 m/index.js- 流程/mobile4mobx/workflow/index.js`

---

四、组件参数复写

可以对EC全系统组件参数进行配置，支持组件站中大部分组件参数。### 1、PC端组件参数复写

ecodeSDK.overwritePropsFnQueueMapSet(name,option)

ecology版本要求：1906及1906+

参数说明

参数	说明	类型	可选	默认	备注
name	组件名	string	必填	''	包含组件站PC组件库ecCom、antd大部分组件
option	复写配置	object	必填	{}
option.fn	复写钩子函数	function	必填	(newProps)=>{}
option.order	复写排序	integer	选填	0
option.desc	复写说明	string	选填	''

基本例子

ecodeSDK.overwritePropsFnQueueMapSet('WeaTop',{
    fn:(newProps)=>{
        //进行位置判断
    },
    order:1,
    desc:'在这里写此复写的作用'
});

如何定位组件及其参数

在组件站PC组件库中的组件与所需要修改的组件进行对比，或通过日志确认：

ecodeSDK.overwritePropsFnQueueMapSet('WeaTop',{
    fn:(newProps)=>{
        console.log('WeaTop:',newProps);
    },
    order:1,
    desc:'在这里写此复写的作用'
});

如何开发调试

ecodeSDK.overwritePropsFnQueueMapSet('WeaTop',{
    fn:(newProps)=>{
        if(!ecodeSDK.checkLPath('/wui/index.html#/main/workflow/listDoing')) return;
        console.log('WeaTop:',newProps);
        const {Button} = antd;
        if(newProps.buttons.length>=1) newProps.buttons[0] = (<Button>测试</Button>);
        newProps.children = [newProps.children,(<div>我的自定义内容</div>)];
        newProps.className = 'my-new-class';
        newProps.style = { color:'red' };
        newProps.icon = (<i className="icon-coms-download2" />);
        return newProps;
    },
    order:1,
    desc:'修改顶部菜单按钮'
});

="icon-coms-download2" />); return newProps; }, order:1, desc:'修改顶部菜单按钮' }); ```### 2、MOBILE端组件参数复写

ecodeSDK.overwriteMobilePropsFnQueueMapSet(name,option)

ecology版本要求：1906及1906+

---

五、组件重写

可以对EC全系统组件进行重写，支持组件站中大部分组件。

1、PC端组件重写

ecodeSDK.overwriteClassFnQueueMapSet(name,option)

ecology版本要求：1906及1906+

基本例子

register.js（需要前置加载）：

let enable = true;
const NewWeaBrowser = (props)=>{
  const acParams = {
      appId:'${appId}',
      name:'NewWeaBrowserCom',
      isPage:false,
      noCss:true
  }
  const NewCom = props.Com;
  return window.comsMobx?ecodeSDK.getAsyncCom(acParams):(<NewCom {...props} />);
}
ecodeSDK.overwriteClassFnQueueMapSet('WeaBrowser',{
  fn:(Com,newProps)=>{
    if(!enable) return;
    const {hash} = window.location;
    if(!hash.startsWith('#/main/workflow/req')) return;
    const baseInfo = WfForm.getBaseInfo();
    if(baseInfo.workflowid!==44) return;
    if(newProps.fieldid!=="6318"||newProps._noOverwrite) return;
    newProps.Com = Com;
    return {
      com:NewWeaBrowser,
      props:newProps
    };
  }
});

index.js（不需要前置加载）：

const {WeaBrowser} = ecCom;
class NewWeaBrowserCom extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
  }
  render() {
    let newProps = {...this.props};
    return (<WeaBrowser {...newProps} _noOverwrite />)
  }
}
ecodeSDK.setCom('${appId}','NewWeaBrowserCom',NewWeaBrowserCom);

2、MOBILE端组件重写

ecodeSDK.overwriteMobileClassFnQueueMapSet(name,option)

---

六、新页面开发

;

### 2、MOBILE端组件重写

`ecodeSDK.overwriteMobileClassFnQueueMapSet(name,option)`

---

## 六、新页面开发### 1、PC端新页面开发

`ecodeSDK.rewriteRouteQueue.push(option)`

ecology版本要求：1906及1906+

**基本例子**

register.js（需要前置加载）：

```javascript
ecodeSDK.rewriteRouteQueue.push({
  fn:(params)=>{
    const {Com,Route,nextState} = params;
    const cpParams = {
      path:'main/cs/app',
      appId:'${appId}',
      name:'pageSimple',
      node:'app',
      Route,
      nextState
    }
    if(ecodeSDK.checkPath(cpParams)) {
      const acParams = {
        appId:cpParams.appId,
        name:cpParams.name,
        props:params,
        isPage:true,
        noCss:true
      }
      return ecodeSDK.getAsyncCom(acParams);
    }
    return null;
  },
  order:10,
  desc:'Demo简单页面'
});

如何配置和访问页面

假如appId是d7dce9fcf9d7430e9bdd7eddcb3bfc29： - 门户主入口访问地址：/wui/index.html#/main/cs/app/d7dce9fcf9d7430e9bdd7eddcb3bfc29_pageSimple - 单独访问地址：/spa/custom/static/index.html#/main/cs/app/d7dce9fcf9d7430e9bdd7eddcb3bfc29_pageSimple

2、MOBILE端新页面开发

ecodeSDK.rewriteMobileRouteQueue.push(option)

生成的访问地址：/spa/custom/static4mobile/index.html#/cs/app/2d7187049bbe4adfbc4bfe4a41e188f6_MobileSimplePage

---

七、业务绑定

1、PC门户主题注册

ecodeSDK.rewritePortalThemeQueue.push(option)

ecology版本要求：1906及1906+

2、PC门户元素注册

ecodeSDK.rewritePortalCusEleQueue.push(option)

ecology版本要求：1906及1906+

3、移动门户元素注册

ecology版本要求：1912及1912+

4、特色门户元素注册

ecology版本要求：2003及2003+

5、元素头注册

ecodeSDK.rewritePortalCusEleHeaderQueue.push(option)

ecology版本要求：2011及2011+ 3及2003+

5、元素头注册

ecodeSDK.rewritePortalCusEleHeaderQueue.push(option)

ecology版本要求：2011及2011+### 6、元素标签页注册

ecodeSDK.rewritePortalCusEleTabQueue.push(option)

ecology版本要求：2011及2011+

7、元素工具栏注册

ecodeSDK.rewritePortalCusEleToolbarQueue.push(option)

ecology版本要求：2011及2011+

8、PC门户登录页注册

ecodeSDK.rewritePortalLoginQueue.push(option)

ecology版本要求：1906及1906+

9、全局流程代码块整合

let enable = true;
let isRun = false;
const runScript = ()=>{
  isRun = true;
}

//PC端代码块
ecodeSDK.overwritePropsFnQueueMapSet('WeaReqTop',{
  fn:(newProps)=>{
    if(!enable) return;
    const {hash} = window.location;
    if(!hash.startsWith('#/main/workflow/req')) return;
    if(!ecCom.WeaTools.Base64) return;
    if(!WfForm) return;
    const baseInfo = WfForm.getBaseInfo();
    const {workflowid} = baseInfo;
    if(workflowid!==44) return;
    if(isRun) return;
    runScript();
  }
});

//移动端触发代码块
ecodeSDK.overwriteMobilePropsFnQueueMapSet('TabPage',{
  fn:(newProps)=>{
    if(!enable) return;
    const {hash} = window.location;
    if(!hash.startsWith('#/req')) return;
    if(!WfForm) return;
    const baseInfo = WfForm.getBaseInfo();
    const {workflowid} = baseInfo;
    if(workflowid!==44) return;
    if(isRun) return;
    runScript();
  }
});