amis百度前端框架,在js中使用用amis写的json页面
1.在项目中使用百度amis 的sdk做开发库。
2。加载sdk中的库:
amis = amisRequire('amis/embed');amisLib = amisRequire('amis');const match = amisRequire('path-to-regexp').match;let React = amisRequire('react'); react_dom = amisRequire('react-dom');
3.创建一个主页面(代码片段里面重要是创建了一个div元素, 这个不重要):
代码中主要用了custom组件,在这个组件中可以写js,通过js创建 一个div元素;
var addcontent= document.createElement("div")addcontent.id = "content";
{"type": "panel","title": "面板1",//"className": "Panel--danger","sm": 3,"body": [{name: 'menucustom',id: "menucustom",type: 'custom',inline:false, //默认使用 div 标签,如果 true 就使用 span 标签onMount: (dom, value, onChange,props) => {// if(ros==null){// props.onAction(// event,// {// type: 'action',// label: '弹个框',// actionType: 'dialog',//dialogtoast// dialog: {// title: '提示: ',// body: 'ros节点创建失败!'// }// },// {} // 这是 data// );//// return;// }var addcontent= document.createElement("div");addcontent.id = "content";dom.appendChild(addcontent);}}],},
给id=content 的 div元素下生成百度amis组件中的json配置出的页面
function createHtml(displays_index) {react_dom = amisRequire('react-dom');const schema = {type: 'page',title: 'Layout Example',body: [{type: 'tabs',tabs: [{title: 'Tab 1',body: 'This is the content of Tab 1.',},{title: 'Tab 2',body: 'This is the content of Tab 2.',},],},],};react_dom.render( amisLib.render(schema), document.getElementById('content'));}