解決問題：amis解決了從將json內(nèi)容解釋為html頁面的問題，通過json文件可以生成前端增刪改查的簡潔頁面。從amis文檔頁面入門示例可以找到hello world 示例，但json內(nèi)容內(nèi)置在html頁面中，本文擬外置json文件，實(shí)現(xiàn)動(dòng)態(tài)加載json頁面。
材料：
開始：
amis demo html, body, .app-wrapper { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }
完成之后，使用live server打開html就能看到示例頁面了。
2.修改上述html內(nèi)容，加入引用axios并將上述amisJSON內(nèi)容外置到單獨(dú)的json文件中，其中修改后的html內(nèi)容如下：
amis demo html, body, .app-wrapper { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }
3.將上面amisJSON中的內(nèi)容按json重寫，建議使用amis在線編輯器生成json，另存為hello.json。以下內(nèi)容由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.后續(xù)有至少有2種用法。其一使用amis在線編輯器可視化生成頁面，保存為json之后，可由html動(dòng)態(tài)加載。其二是使用后臺(tái)程序自動(dòng)生成json頁面和數(shù)據(jù)。
總結(jié)：使用amis可簡化前端頁面的編碼成本，對(duì)于簡單應(yīng)用會(huì)有很大的幫助。
后續(xù)：關(guān)注amis的多頁面應(yīng)用，學(xué)習(xí)官方amis-admin。
