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

大家好，欢迎来到IT知识分享网。

前言

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

一、登入ecode

二、创建项目

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 */ 

三.发布项目及访问

完