amis百度前端框架，在js中使用用amis写的json页面

1.在项目中使用百度 amis 的sdk做开发库。

javascript 复制代码

<script src="./sdk/sdk/sdk.js"></script>

2。加载sdk中的库：

javascript 复制代码

            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元素；

javascript 复制代码

var addcontent= document.createElement("div")

addcontent.id = "content";

javascript 复制代码

{
						"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',//dialog  toast
									// 			dialog: {
									// 				title: '提示: ',
									// 				body: 'ros节点创建失败!'
									// 			}
									// 		},
									// 		{} // 这是 data
									// 	);
									//
									// 	return;
									// }


							
									var addcontent= document.createElement("div");
									addcontent.id = "content";
									
									dom.appendChild(addcontent);

						
					
								}
							}


						],

					},

给id=content 的 div元素下生成百度amis组件中的json配置出的页面

javascript 复制代码

 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'));

  }