test.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>amis demo</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta
  8. name="viewport"
  9. content="width=device-width, initial-scale=1, maximum-scale=1"
  10. />
  11. <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  12. <link rel="stylesheet" href="amis/sdk.css" />
  13. <link rel="stylesheet" href="amis/helper.css" />
  14. <link rel="stylesheet" href="amis/iconfont.css" />
  15. <!-- 这是默认主题所需的,如果是其他主题则不需要 -->
  16. <!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11,如果要支持 IE11 请引用这个 css,并把前面那个删了 -->
  17. <!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
  18. <!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果,所以可能有细节功能用不了,如果发现请报 issue -->
  19. <style>
  20. html,
  21. body,
  22. .app-wrapper {
  23. position: relative;
  24. width: 100%;
  25. height: 100%;
  26. margin: 0;
  27. padding: 0;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <div id="root" class="app-wrapper"></div>
  33. <script src="amis/sdk.js"></script>
  34. <script type="text/javascript">
  35. (function () {
  36. let amis = amisRequire('amis/embed');
  37. // 通过替换下面这个配置来生成不同页面
  38. let amisJSON = {
  39. type: 'page',
  40. title: '表单页面',
  41. body: {
  42. type: 'form',
  43. mode: 'horizontal',
  44. api: '/saveForm',
  45. body: [
  46. {
  47. label: 'Name',
  48. type: 'input-text',
  49. name: 'name'
  50. },
  51. {
  52. label: 'Email',
  53. type: 'input-email',
  54. name: 'email'
  55. }
  56. ]
  57. }
  58. };
  59. let amisScoped = amis.embed('#root', amisJSON);
  60. })();
  61. </script>
  62. </body>
  63. </html>