全网泛微ecology二次开发最详细教程（后端+ecode前端，纯二开，不使用建模）

1.后端环境搭建

一、IDEA环境配置

  1.1 打开idea，创建一个新的Java项目File->New->Project

1.2 选择Java项目

1.3 下一步：编辑好项目名称，点击Finish

1.4 项目创建文件完成之后需要进行项目配置File-Project Structure，点击project，分别选择Project SDK为1.8、、Project language level为SDK default 8

1.5 因为创建项目后会自带一个src的文件夹，我们后续的代码开发在src文件下，src文件夹下的目录结构最好与泛微e9的目录结构一致；如：src.com.api.xxx; src.com.engine.xxx等；如果不存在src，可以在当前界面新加一个src文件夹，并指定为Sources；

1.6 指定代码编辑后的输出目录，注意这里的Output path：应该是为小伙伴你们自己下载下来，或者已有的ecology代码文件夹下，并且要指定输出到classbean文件下，那么后续我们代码编译后会自动输出到对应的ecology项目下。

1.7 引入依赖，我们这里需要引入三个特定的依赖，（我这里原有的泛微项目在D盘的Weaver文件夹下）分别是你原有的的泛微项目下的classbean文件夹，这里我们需要做一个操作，就是需要把这个classbean文件夹压缩成一个压缩包，然后将压缩包的后缀改成.jar，然后将这个classbean.jar直接引入即可；第二个依赖是小伙伴自己项目里面Resin文件夹下的lib文件夹进行引入；第三个依赖是小伙伴自己项目下ecology里面的WEB-INF/lib的文件夹进行引入即可。

1.8 设置项目的sdks，必须使用jdk1.8版本，最好用泛微提供的jdk1.8的版本，自己项目文件夹下一般都会有泛微提供的jdk包。

1.9 最后点击apply按钮即可完成我们环境的配置。

二、Resin的配置

 注意：如果小伙伴们想在idea中想配置Resin进行项目的启动，那目前只能使用2019版本及以下的idea，2020以上版本不支持Resin。

添加之后，配置项目自己所带的端口即可。然后就能正常启动啦！包括你dubug或者是run都是没问题的。

以上就是泛微后端环境的搭建的全部流程，希望能帮助到小伙伴们！

2.前端ecode的基本使用

      一、创建页面组件

      因为博主已经含有了泛微的项目，所以没有下载具体的ecode到本地，而是直接使用ecode进行代码编写；而且本地和线上也有一些差异，所以直接就在项目的ecode平台上进行 编码了。所以这里都是讲的在线上的ecode平台进行编码，线上和本地只是一些组件引入的差异，其他并无差异，可放心查阅。另外就是前端是需要申请许可的，这个大家自行找泛微的人申请即可。

2.1 进入ecode平台，后端将项目启动之后，http://localhost:8081/ecode，在你的ip：端口后面拼接/ecode即可进入。

2.2 进入页面之后，我们二开的话一般都是建立新的文件夹，然后进行开发，那么第一步就是新建一个根目录的文件夹，然后在我们新建好的分类下面新建一个文件夹即可。

文件夹创建成功后，就会自动出现一些配置文件夹，小伙伴们可按需引入。

后续就是新建页面、新建store、新建主页面等等。博主这里新建coms文件夹来存放页面组件，新建store文件夹来存放页面操作方法等；最重要的就是建立注册文件和主入口组件，分别建立register.js文件和index.js文件。这里注册组件写法基本一致，可查看泛微的ecode开发文档。

//注册文件 registe.js

//注册和绑定新页面前端实现接口
ecodeSDK.rewriteRouteQueue.push({
  fn:(params)=>{
    const {Com,Route,nextState} = params;
    const cpParams = {
      path:'main/cs/app', //路由地址
      appId:'${appId}',
      name:'testBank', //具体页面应用id
      node:'app', //渲染的路由节点，这里渲染的是app这个节点
      Route,
      nextState
    }
    if(ecodeSDK.checkPath(cpParams)) {
      const acParams = {
        appId:cpParams.appId,
        name:cpParams.name, //模块名称
        props:params, //参数
        isPage:true, //是否是路由页面
        noCss:true //是否禁止单独加载css，通常为了减少css数量，css默认前置加载
      }
      //异步加载模块${appId}下的子模块testBank
      return ecodeSDK.getAsyncCom(acParams);
    }
    return null;
  },
  order:10,
  desc:'testBank'
});

/*
版本要求：kb1906以上
门户后台配置路由地址：
/main/cs/app/9a9808af4ce54bb6a1688880a4dc96407_testBank
浏览器访问地址：
/wui/index.html#/main/cs/app/9a9808af4ce54888888c96407_testBank
*/

//主入口页面组件 index.js

const { Provider } = mobxReact;
const TestTable = ecodeSDK.imp(TestTable);
const TestStore = ecodeSDK.imp(TestStore);
//实例化store，并通过provider注入所有组件中
const allTestBanks = {
  testStore:new TestStore()
}
class testBankRoot extends React.Component {
  render() {
    return (
      <Provider {...alltTestBanks}>
      <TestTable {...this.props}/>
      </Provider>
    )
  }
}

//发布模块
ecodeSDK.setCom('${appId}','testBank',testBankRoot);

然后是 coms文件下的页面组件，这个文件夹下面的就是我们的页面展示

const { inject, observer } = mobxReact;
const { Button, Row, Col } = antd;
const { WeaTable, WeaInput, WeaDialog, WeaNewScroll, WeaSearchGroup, WeaInputSearch, WeaFormItem ,WeaError} = ecCom;

@inject("testStore") // 注入store
@observer // 观察状态的变化
class TestTable extends React.Component {

  constructor(props){
    super(props);
    this.state = {
    scrollHeight: 850, // 默认高度为850
  };
  }
  
  componentDidMount() {
    // 初始化时设置滚动条的高度
    this.setScrollHeight();

    // 监听窗口大小变化
    window.addEventListener("resize", this.setScrollHeight);
  }

  componentWillUnmount() {
    // 清理 resize 事件监听器
    window.removeEventListener("resize", this.setScrollHeight);
  }

  setScrollHeight = () => {
    const windowHeight = window.innerHeight;
    const calculatedHeight = windowHeight - 60; // 你可以根据需要调整减去的值
    this.setState({ scrollHeight: calculatedHeight });
  };

  render() {
    const { testStore } = this.props;
    const { scrollHeight } = this.state;

    const columns = [
      { title: "测试1", dataIndex: "test1" },
      { title: "测试2", dataIndex: "test2" },
      {
        title: "操作