【泛微Ecode小白入门-01】新手上路：新增一个页面

前言

因泛微业务需要新增一个页面，故通过ecode平台来新建一个页面；结合了网上大神们的文章，摸索出了一些方法，此文章针对新手小白，大神们手下留情。

一、登入ecode

不过多赘述。
使用管理员登入，OA地址/ecode

二、创建项目

1.新建分类

2.右键，新建文件夹

3.如图，右键新建register.js和index.js

4.加号之后给register.js右键点击变成前置加载


5.如法炮制：新增一个coms文件夹，以及在它下面增加一个index.js，代码如下：

const {Provider,inject,observer} = mobxReact;
const {Button,Row,Col,Tooltip,Input,Popover,Tag,Alert,Table ,Spin,DatePicker   } = antd ;
const { WeaTop,WeaTextarea,WeaFormItem,WeaSelect,WeaRangePicker  } = ecCom ;
const API = ecodeSDK.imp(API);
const { toJS } = mobx;
@inject("simpleStore") 
@observer
class Simple extends React.Component {
	constructor(props) { //初始化，固定语法
		super(props);
    this.state = {
    };
	}
	//生命周期
	componentDidMount() {}
	componentWillUnmount() { }
	render() { //渲染
  return (
  <div>
  <h2>测试页面</h2>
  </div>
  )
}
}
ecodeSDK.exp(Simple);

6.如法炮制：新增一个stores文件夹，以及在它下面增加一个index.js，代码如下：

const {observable,action,toJS} = mobx;
const {WeaTools} = ecCom;
const { Modal} = 'antd';
class SimpleStore { //store，用来定义和处理前端纯数据
  //@observable 定义固定值
  //@action     定义函数 
  @action
  doInit = () => {
  }
} 
ecodeSDK.exp(SimpleStore);

7.最后再在第一次新建的index.js加上代码：

 const { Provider } = mobxReact;
const SimpleStore = ecodeSDK.imp(SimpleStore);
const Simple = ecodeSDK.imp(Simple);
// 实例化store，并通过provider注入所有组件中
const allSimpleStore = {
  simpleStore:new SimpleStore()
}
class simpleRoot extends React.Component {
  render() {
    return (
      <Provider {...allSimpleStore}>
        <Simple {...this.props} />
      </Provider>
    )
  }
}
//发布模块
ecodeSDK.setCom('${appId}','pageSimple',simpleRoot);

8.再在第一次新建的register.js ，新增如下代码：

const routes = [
  {
    name: "pageSimple",
    desc: "页面1",
  },
  {
    name: "pageSimple2",
    desc: "页面2",
  },
];
routes.forEach((route) => {
  ecodeSDK.rewriteRouteQueue.push({
    fn:(params)=>{
      const {Com,Route,nextState} = params;
      const cpParams = {
        path:'main/cs/app', //路由地址
        appId:'${appId}',
        name: route.name, //具体页面应用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}下的子模块pageSimple
        return ecodeSDK.getAsyncCom(acParams);
      }
      return null; //这里一定要返回空，不然会干扰到其它新页面
    },
    order:1,
    desc: route.desc,
  });
});
  /*
  版本要求：kb1906以上
  配置路由地址：
  /spa/custom/static/index.html#/main/cs/app/xxxxxxxxxxxxxxxx_pageSimple
  */

三.发布项目及访问

*点击文件夹发布
*拿到发布的主键：46fxxxxxx0ebe87351
*登入地址：oa地址/spa/custom/static/index.html#/main/cs/app/46fxxxxxx0ebe87351_pageSimple

完