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