解决问题：amis解决了从将json内容解释为html页面的问题，通过json文件可以生成前端增删改查的简洁页面。从amis文档页面入门示例可以找到hello world 示例，但json内容内置在html页面中，本文拟外置json文件，实现动态加载json页面。

材料：

开始：

amis demo html, body, .app-wrapper { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }

完成之后，使用live server打开html就能看到示例页面了。

2.修改上述html内容，加入引用axios并将上述amisJSON内容外置到单独的json文件中，其中修改后的html内容如下：

amis demo html, body, .app-wrapper { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }

3.将上面amisJSON中的内容按json重写，建议使用amis在线编辑器生成json，另存为hello.json。以下内容由amis在线编辑器生成：

{ “type”: “page”, “body”: [ { “type”: “form”, “body”: [ { “type”: “input-text”, “label”: “Name”, “name”: “name” }, { “type”: “input-text”, “label”: “Email”, “name”: “email” } ], “id”: “u:7320b53cd05d”, “mode”: “horizontal”, “api”: “/saveForm” } ], “messages”: {}, “style”: {}, “title”: “表单页面”, “regions”: [ “body” ]}

和html页面放在同一目录下，开启Live Server模式，浏览即可。

4.后续有至少有2种用法。其一使用amis在线编辑器可视化生成页面，保存为json之后，可由html动态加载。其二是使用后台程序自动生成json页面和数据。

总结：使用amis可简化前端页面的编码成本，对于简单应用会有很大的帮助。

后续：关注amis的多页面应用，学习官方amis-admin。