六 新页面开发
title: 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 ---#### 六、新页面开发
1、PC端新页面开发：
ecodeSDK.rewriteRouteQueue.push(option)
ecology版本要求：1906及1906+
ecodeSDK.rewriteRouteQueue.push(option)
ecology版本要求：1906及1906+
（1）参数说明
| 参数 | 说明 | 类型 | 可选 | 默认 | 备注 |
|---|---|---|---|---|---|
| option | 复写配置 | object | 必填 | {} | |
| option.fn | 复写钩子函数 | function | 必填 | (params)=>{} | params 参数请看下一个表格 |
| option.order | 复写排序 | integer | 选填 | 0 | |
| option.desc | 复写说明 | string | 选填 | ‘’ | 无 |
参数 说明 类型 可选 默认 备注
参数 说明 类型 可选 默认 备注 参数说明类型可选默认备注
option 复写配置 object 必填 {}
option.fn 复写钩子函数 function 必填 (params)=>{} params 参数请看下一个表格
option.order 复写排序 integer 选填 0
option.desc 复写说明 string 选填 ‘’ 无
option 复写配置 object 必填 {}
option复写配置object必填{} option.fn 复写钩子函数 function 必填 (params)=>{} params 参数请看下一个表格 option.fn复写钩子函数function必填(params)=>{}params 参数请看下一个表格 option.order 复写排序 integer 选填 0
option.order复写排序integer选填0 option.desc 复写说明 string 选填 ‘’ 无 option.desc复写说明string选填‘’无
params 数据
params 数据
| 参数 | 说明 | 类型 | 备注 |
|---|---|---|---|
| Com | 路由组件 | react component | 路由定义时传入的compoent |
| Route | 路由参数 | object | |
| nextState | 路由参数 | object | 无 |
参数 说明 类型 备注
参数 说明 类型 备注 参数说明类型备注
Com 路由组件 react component 路由定义时传入的compoent
Route 路由参数 object
nextState 路由参数 object 无
Com 路由组件 react component 路由定义时传入的compoent Com路由组件react component路由定义时传入的compoent Route 路由参数 object
Route路由参数object nextState 路由参数 object 无 nextState路由参数object无
（2）基本例子
register.js：需要前置加载，注册了路由就会动态注入到react路由中 tState 路由参数 object 无 nextState路由参数object无
（2）基本例子
register.js：需要前置加载，注册了路由就会动态注入到react路由中register.js：需要前置加载，注册了路由就会动态注入到react路由中
ecodeSDK.rewriteRouteQueue.push({
fn:(params)=>{
const {Com,Route,nextState} = params;
const cpParams = {
path:'main/cs/app', //路由地址
appId:'${appId}',
name:'pageSimple', //具体页面应用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:10,
desc:'Demo简单页面'
});
`1. `ecodeSDK.rewriteRouteQueue.push({`
2. ` fn:(params)=>{`
3. ` const {Com,Route,nextState} = params;`
4. ` const cpParams = {`
5. ` path:'main/cs/app', //路由地址`
6. ` appId:'${appId}',`
7. ` name:'pageSimple', //具体页面应用id`
8. ` node:'app', //渲染的路由节点，这里渲染的是app这个节点`
9. ` Route,`
10. ` nextState`
11. ` }`
12. ` if(ecodeSDK.checkPath(cpParams)) { //判断地址是否是要注入的地址`
13. ` const acParams = {`
14. ` appId:cpParams.appId,`
15. ` name:cpParams.name, //模块名称`
16. ` props:params, //参数`
17. ` isPage:true, //是否是路由页面`
18. ` noCss:true //是否禁止单独加载css，通常为了减少css数量，css默认前置加载`
19. ` }`
20. ` //异步加载模块${appId}下的子模块pageSimple`
21. ` return ecodeSDK.getAsyncCom(acParams);`
22. ` }`
23. ` return null; //这里一定要返回空，不然会干扰到其它新页面`
24. ` },`
25. ` order:10,`
26. ` desc:'Demo简单页面'`
27. `});`
`ecodeSDK.rewriteRouteQueue.push({ecodeSDK.rewriteRouteQueue.push({ecodeSDK.rewriteRouteQueue.push({ fn:(params)=>{fn:(params)=>{` fn:(params)=>{` const {Com,Route,nextState} = params; const {Com,Route,nextState} = params;const {Com,Route,nextState} = params; const cpParams = {const cpParams = {` const cpParams = {` path:'main/cs/app', //路由地址 path:'main/cs/app', //路由地址path:'main/cs/app', //路由地址 appId:'${appId}',appId:'${appId}',` appId:'${appId}',` name:'pageSimple', //具体页面应用id name:'pageSimple', //具体页面应用idname:'pageSimple', //具体页面应用id node:'ap
mple', //具体页面应用idname:'pageSimple', //具体页面应用id` name:'pageSimple', //具体页面应用id` node:'apmple', //具体页面应用id name:'pageSimple', //具体页面应用idname:'pageSimple', //具体页面应用id node:'app', //渲染的路由节点，这里渲染的是app这个节点node:'app', //渲染的路由节点，这里渲染的是app这个节点` node:'app', //渲染的路由节点，这里渲染的是app这个节点` Route, Route,Route, nextStatenextState` nextState` } }} if(ecodeSDK.checkPath(cpParams)) { //判断地址是否是要注入的地址if(ecodeSDK.checkPath(cpParams)) { //判断地址是否是要注入的地址` if(ecodeSDK.checkPath(cpParams)) { //判断地址是否是要注入的地址` const acParams = { const acParams = {const acParams = { appId:cpParams.appId,appId:cpParams.appId,` appId:cpParams.appId,` name:cpParams.name, //模块名称 name:cpParams.name, //模块名称name:cpParams.name, //模块名称 props:params, //参数props:params, //参数` props:params, //参数` isPage:true, //是否是路由页面 isPage:true, //是否是路由页面isPage:true, //是否是路由页面 noCss:true //是否禁止单独加载css，通常为了减少css数量，css默认前置加载noCss:true //是否禁止单独加载css，通常为了减少css数量，css默认前置加载` noCss:true //是否禁止单独加载css，通常为了减少css数量，css默认前置加载` } }} //异步加载模块${appId}下的子模块pageSimple//异步加载模块${appId}下的子模块pageSimple` //异步加载模块${appId}下的子模块pageSimple` return ecodeSDK.getAsyncCom(acParams); return ecodeSDK.getAsyncCom(acParams);return ecodeSDK.getAsyncCom(acParams); }}` }` return null; //这里一定要返回空，不然会干扰到其它新页面 return null; //这里一定要返回空，不然会干扰到其它新页面return null; //这里一定要返回空，不然会干扰到其它新页面 },},` },` order:10, order:10,order:10, desc:'Demo简
return null; //这里一定要返回空，不然会干扰到其它新页面},`` }, },order:10,`` order:10, order:10,desc:'Demo简return null; //这里一定要返回空，不然会干扰到其它新页面 },},` },` order:10, order:10,order:10, desc:'Demo简单页面'desc:'Demo简单页面'` desc:'Demo简单页面'`});});});
order:10,`` order:10, order:10,desc:'Demo简单页面'`` desc:'Demo简单页面' desc:'Demo简单页面'});``});});> index.js：不需要前置加载，所有非前置加载js，会被发布成模块 /cloudstore/release/${appId}/index.js
index.js：不需要前置加载，所有非前置加载js，会被发布成模块 /cloudstore/release/${appId}/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);
//发布模块
ecodeSDK.setCom('${appId}','pageSimple',simpleRoot);
`1. `const { Provider } = mobxReact;`
2. `const SimpleStore = ecodeSDK.imp(SimpleStore);`
3. `const Simple = ecodeSDK.imp(Simple);`
4.
5. //实例化store，并通过provider注入所有组件中
6. const allSimpleStore = {
7. simpleStore:new SimpleStore()
8. }
9. 10. `class simpleRoot extends React.Component {`
11. ` render() {`
12. ` return (`
13. ` <Provider {...allSimpleStore}>`
14. ` <Simple {...this.props} />`
15. ` </Provider>`
16. ` )`
17. ` }`
18. `}`
19.
20. //发布模块
21. ecodeSDK.setCom('${appId}','pageSimple',simpleRoot);
const { Provider } = mobxReact;``const { Provider } = mobxReact;const { Provider } = mobxReact;const SimpleStore = ecodeSDK.imp(SimpleStore);``const SimpleStore = ecodeSDK.imp(SimpleStore);const SimpleStore = ecodeSDK.imp(SimpleStore);const Simple = ecodeSDK.imp(Simple);``const Simple = ecodeSDK.imp(Simple);const Simple = ecodeSDK.imp(Simple);//实例化store，并通过provider注入所有组件中``//实例化store，并通过provider注入所有组件中`//实例化store，并通过provider注入所有组件中`const allSimpleStore = {``const allSimpleStore = {`const allSimpleStore = {` simpleStore:new SimpleStore()`` simpleStore:new SimpleStore()` simpleStore:new SimpleStore()`}``}`}class simpleRoot extends React.Component {class simpleRoot extends React.Component {`class simpleRoot extends React.Component {` render() { render() {render() { return (return (` return (` <Provider {...allSimpleStore}> <Provider {...allSimpleStore}>
rovider {...allSimpleStore}><Provider {...allSimpleStore}>` <Provider {...allSimpleStore}>` rovider {...allSimpleStore}> <Provider {...allSimpleStore}> <Simple {...this.props} />` <Simple {...this.props} />` </Provider> </Provider> ))` )` } }}}}`}`````//发布模块//发布模块//发布模块ecodeSDK.setCom('${appId}','pageSimple',simpleRoot);`ecodeSDK.setCom('${appId}','pageSimple',simpleRoot);ecodeSDK.setCom('${appId}','pageSimple',simpleRoot);
SDK.setCom('${appId}','pageSimple',simpleRoot);`ecodeSDK.setCom('${appId}','pageSimple',simpleRoot);###### （3）如何配置和访问页面
获取appId，左上角点击已发布清单图标进入
获取appId，左上角点击已发布清单图标进入
假如appId是d7dce9fcf9d7430e9bdd7eddcb3bfc29，在门户菜单中配置路由地址：/main/cs/app/d7dce9fcf9d7430e9bdd7eddcb3bfc29_pageSimple
假如appId是d7dce9fcf9d7430e9bdd7eddcb3bfc29，在门户菜单中配置路由地址：/main/cs/app/d7dce9fcf9d7430e9bdd7eddcb3bfc29_pageSimple
门户主入口访问地址：/wui/index.html#/main/cs/app/d7dce9fcf9d7430e9bdd7eddcb3bfc29_pageSimple
门户主入口访问地址：/wui/index.html#/main/cs/app/d7dce9fcf9d7430e9bdd7eddcb3bfc29_pageSimple
单独访问地址：/spa/custom/static/index.html#/main/cs/app/d7dce9fcf9d7430e9bdd7eddcb3bfc29_pageSimple
单独访问地址：/spa/custom/static/index.html#/main/cs/app/d7dce9fcf9d7430e9bdd7eddcb3bfc29_pageSimple
2、MOBILE端新页面开发
ecodeSDK.rewriteMobileRouteQueue.push(option)
ecology版本要求：1906及1906+
ecodeSDK.rewriteMobileRouteQueue.push(option)
ecology版本要求：1906及1906+
（1）参数说明
906及1906+*
ecodeSDK.rewriteMobileRouteQueue.push(option)
ecology版本要求：1906及1906+
（1）参数说明| 参数 | 说明 | 类型 | 可选 | 默认 | 备注 |
| --- | --- | --- | --- | --- | --- | | option | 复写配置 | object | 必填 | {} | | | option.fn | 复写钩子函数 | function | 必填 | (params)=>{} | params 参数请看下一个表格 | | option.order | 复写排序 | integer | 选填 | 0 | | | option.desc | 复写说明 | string | 选填 | ‘’ | 无 |
参数 说明 类型 可选 默认 备注
参数 说明 类型 可选 默认 备注 参数说明类型可选默认备注
option 复写配置 object 必填 {}
option.fn 复写钩子函数 function 必填 (params)=>{} params 参数请看下一个表格
option.order 复写排序 integer 选填 0
option.desc 复写说明 string 选填 ‘’ 无
option 复写配置 object 必填 {}
option复写配置object必填{} option.fn 复写钩子函数 function 必填 (params)=>{} params 参数请看下一个表格 option.fn复写钩子函数function必填(params)=>{}params 参数请看下一个表格 option.order 复写排序 integer 选填 0
option.order复写排序integer选填0 option.desc 复写说明 string 选填 ‘’ 无 option.desc复写说明string选填‘’无
params 数据
params 数据
| 参数 | 说明 | 类型 | 备注 |
|---|---|---|---|
| Com | 路由组件 | react component | 路由定义时传入的compoent |
| props | 路由参数 | object | 在移动端中，有些路由节点不会传入Com，而是传入 props.render |
| state | 路由参数 | object | 无 |
| context | 路由参数 | object | 无 |
参数 说明 类型 备注
参数 说明 类型 备注 参数说明类型备注
Com 路由组件 react component 路由定义时传入的compoent
props 路由参数 object 在移动端中，有些路由节点不会传入Com，而是传入 props.render
state 路由参数 object 无
context 路由参数 object 无
Com 路由组件 react component 路由定义时传入的compoent Com路由组件react component路由定义时传入的compoent props 路由参数 object 在移动端中，有些路由节点不会传入Com，而是传入 props.render props路由参数object在移动端中，有些路由节点不会传入Com，而是传入 props.render state 路由参数 object 无 state路由参数object无 context 路由参数 object 无 context路由参数object无
（2）基本例子
render state 路由参数 object 无 state路由参数object无 context 路由参数 object 无 context路由参数object无
（2）基本例子> register.js：需要前置加载，注册了路由就会动态注入到react路由中
register.js：需要前置加载，注册了路由就会动态注入到react路由中
let _this = null;
const waitWmLoad = (props,params) => {
const acParams = {
appId:'${appId}',
name:'MobileSimplePage', //模块名称
params, //参数
isPage:true, //是否是路由页面
noCss:true //是否禁止单独加载css，通常为了减少css数量，css默认前置加载
}
//异步加载${appId}下的子模块MobilePage1
class WaitWeaverMobileLoad extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoad:false
}
_this = this;
}
setIsLoad(b) {
this.setState({
isLoad:b
});
}
render() {
if(!this.state.isLoad) return (<div />);
const NewCom = ecodeSDK.getAsyncCom(acParams);
return (<NewCom />);
}
}
return WaitWeaverMobileLoad;
}
ecodeSDK.onWeaverMobileLoadQueue.push(()=>{
_this&&_this.setIsLoad(true);
});
//注册和绑定新页面前端实现接口
ecodeSDK.rewriteMobileRouteQueue.push({
fn:(params)=>{
const {Com,props,state,context} = params;
const mpParams = {
path:'/cs/app/:uuid', //路由地址
appId:'${appId}',
name:'MobileSimplePage', //路由名称
props,
state
}
if(ecodeSDK.checkMobilePath(mpParams)) {
return waitWmLoad(props,params);
}
return null;
},
order:10,
desc:'Demo简单页面'
});
`1. `let _this = null;`
2.
3. const waitWmLoad = (props,params) => {
4. const acParams = {
5. appId:'${appId}',
6. name:'MobileSimplePage', //模块名称
7. params, //参数
8. isPage:true, //是否是路由页面
9. noCss:true //是否禁止单独加载css，通常为了减少css数量，css默认前置加载
10. }
11. //异步加载${appId}下的子模块MobilePage1
12. class WaitWeaverMobileLoad extends React.Component {
13. constructor(props) {
14. super(props);
15. this.state = {
16. isLoad:false
17. }
18. _this = this;
19. }
20. setIsLoad(b) {
21. this.setState({
22. isLoad:b
23. });
24. }
25. render() {
26. if(!this.state.isLoad) return (<div />);
27. const NewCom = ecodeSDK.getAsyncCom(acParams);
28. return (<NewCom />);
29. }
30. }
31. return WaitWeaverMobileLoad;
32. }
33. 34. `ecodeSDK.onWeaverMobileLoadQueue.push(()=>{`
35. ` _this&&_this.setIsLoad(true);`
36. `});`
37.
38. //注册和绑定新页面前端实现接口
39. ecodeSDK.rewriteMobileRouteQueue.push({
40. fn:(params)=>{
41. const {Com,props,state,context} = params;
42. const mpParams = {
43. path:'/cs/app/:uuid', //路由地址
44. appId:'${appId}',
45. name:'MobileSimplePage', //路由名称
46. props,
47. state
48. }
49. if(ecodeSDK.checkMobilePath(mpParams)) {
50.
props,
47. state
48. }
49. if(ecodeSDK.checkMobilePath(mpParams)) {
50. props,
47. state
48. }
49. if(ecodeSDK.checkMobilePath(mpParams)) {
50. return waitWmLoad(props,params);
51. }
52. return null;
53. },
54. order:10,
55. desc:'Demo简单页面'
56. });
let _this = null;``let _this = null;let _this = null;const waitWmLoad = (props,params) => {``const waitWmLoad = (props,params) => {`const waitWmLoad = (props,params) => {` const acParams = {`` const acParams = {` const acParams = {` appId:'${appId}',`` appId:'${appId}',` appId:'${appId}',` name:'MobileSimplePage', //模块名称`` name:'MobileSimplePage', //模块名称` name:'MobileSimplePage', //模块名称` params, //参数`` params, //参数` params, //参数` isPage:true, //是否是路由页面`` isPage:true, //是否是路由页面` isPage:true, //是否是路由页面` noCss:true //是否禁止单独加载css，通常为了减少css数量，css默认前置加载`` noCss:true //是否禁止单独加载css，通常为了减少css数量，css默认前置加载` noCss:true //是否禁止单独加载css，通常为了减少css数量，css默认前置加载` }`` }` }` //异步加载${appId}下的子模块MobilePage1`` //异步加载${appId}下的子模块MobilePage1` //异步加载${appId}下的子模块MobilePage1` class WaitWeaverMobileLoad extends React.Component {`` class WaitWeaverMobileLoad extends React.Component {` class WaitWeaverMobileLoad extends React.Component {` constructor(props) {`` constructor(props) {` constructor(props) {` super(props);`` super(props);` super(props);` this.state = {`` this.state = {` this.state = {` is
s);` super(props);` this.state = {`` this.state = {` this.state = {` iss);` super(props);` this.state = {`` this.state = {` this.state = {` isLoad:false`` isLoad:false` isLoad:false` }`` }` }` _this = this;`` _this = this;` _this = this;` }`` }` }` setIsLoad(b) {`` setIsLoad(b) {` setIsLoad(b) {` this.setState({`` this.setState({` this.setState({` isLoad:b`` isLoad:b` isLoad:b` });`` });` });` }`` }` }` render() {`` render() {` render() {` if(!this.state.isLoad) return (<div />);`` if(!this.state.isLoad) return (<div />);` if(!this.state.isLoad) return (<div />);` const NewCom = ecodeSDK.getAsyncCom(acParams);`` const NewCom = ecodeSDK.getAsyncCom(acParams);` const NewCom = ecodeSDK.getAsyncCom(acParams);` return (<NewCom />);`` return (<NewCom />);` return (<NewCom />);` }`` }` }` }`` }` }` return WaitWeaverMobileLoad;`` return WaitWeaverMobileLoad;` return WaitWeaverMobileLoad;`}``}`}ecodeSDK.onWeaverMobileLoadQueue.push(()=>{ecodeSDK.onWeaverMobileLoadQueue.push(()=>{`ecodeSDK.onWeaverMobileLoadQueue.push(()=>{` _this&&_this.setIsLoad(true); _this&&_this.setIsLoad(true);_this&&_this.setIsLoad(true);});});`});`````//注册和绑定新页面前端实现接口//注册和绑定新页面前端实现接口//注册和绑定新页面前端实现接口ecodeSDK.rewriteMobileRouteQueue.push({ecodeSDK.rewriteMobileRouteQueue.push({`ecodeSDK.r
页面前端实现接口`ecodeSDK.rewriteMobileRouteQueue.push({ecodeSDK.rewriteMobileRouteQueue.push({ecodeSDK.r页面前端实现接口ecodeSDK.rewriteMobileRouteQueue.push({ecodeSDK.rewriteMobileRouteQueue.push({`ecodeSDK.rewriteMobileRouteQueue.push({` fn:(params)=>{ fn:(params)=>{fn:(params)=>{ const {Com,props,state,context} = params;const {Com,props,state,context} = params;` const {Com,props,state,context} = params;` const mpParams = { const mpParams = {const mpParams = { path:'/cs/app/:uuid', //路由地址path:'/cs/app/:uuid', //路由地址` path:'/cs/app/:uuid', //路由地址` appId:'${appId}', appId:'${appId}',appId:'${appId}', name:'MobileSimplePage', //路由名称name:'MobileSimplePage', //路由名称` name:'MobileSimplePage', //路由名称` props, props,props, statestate` state` } }} if(ecodeSDK.checkMobilePath(mpParams)) {if(ecodeSDK.checkMobilePath(mpParams)) {` if(ecodeSDK.checkMobilePath(mpParams)) {` return waitWmLoad(props,params); return waitWmLoad(props,params);return waitWmLoad(props,params); }}` }` return null; return null;return null; },},` },` order:10, order:10,order:10, desc:'Demo简单页面'desc:'Demo简单页面'` desc:'Demo简单页面'`});});});
order:10,`` order:10, order:10,desc:'Demo简单页面'`` desc:'Demo简单页面' desc:'Demo简单页面'});``});});> index.js：不需要前置加载，所有非前置加载js，会被发布成模块 /cloudstore/release/${appId}/index.js
index.js：不需要前置加载，所有非前置加载js，会被发布成模块 /cloudstore/release/${appId}/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}','MobileSimplePage',simpleRoot);
//发布模块
ecodeSDK.setCom('${appId}','MobileSimplePage',simpleRoot);
`1. `const { Provider } = mobxReact;`
2. `const SimpleStore = ecodeSDK.imp(SimpleStore);`
3. `const Simple = ecodeSDK.imp(Simple);`
4.
5. //实例化store，并通过provider注入所有组件中
6. const allSimpleStore = {
7. simpleStore:new SimpleStore()
8. }
9. 10. `class simpleRoot extends React.Component {`
11. ` render() {`
12. ` return (`
13. ` <Provider {...allSimpleStore}>`
14. ` <Simple {...this.props} />`
15. ` </Provider>`
16. ` )`
17. ` }`
18. `}`
19.
20. //发布模块
21. ecodeSDK.setCom('${appId}','MobileSimplePage',simpleRoot);
const { Provider } = mobxReact;``const { Provider } = mobxReact;const { Provider } = mobxReact;const SimpleStore = ecodeSDK.imp(SimpleStore);``const SimpleStore = ecodeSDK.imp(SimpleStore);const SimpleStore = ecodeSDK.imp(SimpleStore);const Simple = ecodeSDK.imp(Simple);``const Simple = ecodeSDK.imp(Simple);const Simple = ecodeSDK.imp(Simple);//实例化store，并通过provider注入所有组件中``//实例化store，并通过provider注入所有组件中`//实例化store，并通过provider注入所有组件中`const allSimpleStore = {``const allSimpleStore = {`const allSimpleStore = {` simpleStore:new SimpleStore()`` simpleStore:new SimpleStore()` simpleStore:new SimpleStore()`}``}`}class simpleRoot extends React.Component {class simpleRoot extends React.Component {`class simpleRoot extends React.Component {` render() { render() {render() { return (return (` return (` <Provider {...allSimpleStore}> <Provider {...allSimpleSto
<Provider {...allSimpleStore}>`` <Provider {...allSimpleStore}> <Provider {...allSimpleSto <Provider {...allSimpleStore}>` <Provider {...allSimpleStore}>` <Simple {...this.props} /> <Simple {...this.props} /> </Provider>` </Provider>` ) )) }}` }`}}}`````//发布模块``//发布模块//发布模块ecodeSDK.setCom('${appId}','MobileSimplePage',simpleRoot);``ecodeSDK.setCom('${appId}','MobileSimplePage',simpleRoot);ecodeSDK.setCom('${appId}','MobileSimplePage',simpleRoot);
${appId}','MobileSimplePage',simpleRoot);`ecodeSDK.setCom('${appId}','MobileSimplePage',simpleRoot);###### （3）如何配置和访问页面
获取appId，左上角点击已发布清单图标进入
获取appId，左上角点击已发布清单图标进入
假如appId是2d7187049bbe4adfbc4bfe4a41e188f6，生成的访问地址为：/spa/custom/static4mobile/index.html#/cs/app/2d7187049bbe4adfbc4bfe4a41e188f6_MobileSimplePage
假如appId是2d7187049bbe4adfbc4bfe4a41e188f6，生成的访问地址为：/spa/custom/static4mobile/index.html#/cs/app/2d7187049bbe4adfbc4bfe4a41e188f6_MobileSimplePage
配置完成后进入移动门户设置新应用
配置完成后进入移动门户设置新应用
进入移动端入口访问 /spa/em/mobile.html
进入移动端入口访问 /spa/em/mobile.html
ℹ️ 对比提示: 本文档介绍的是动态注入路由页面（SPA 模式），如需开发门户主题/元素（CMS 模式），请参考 七-业务绑定.md。