最近發現自己在低程式碼的道路上越走越遠了,各種低程式碼平台層出不窮,學習成本也越來越高,可憐我的頭發在日漸稀少......[流淚]
話說回來,低程式碼一直用一直香!!!
什麽是 amis?
amis 是一個低程式碼前端框架,它使用 JSON 配置來生成頁面,可以減少頁面開發工作量,極大提升效率。 透過 JSON 配置就能生成各種後台頁面,極大減少開發成本,甚至可以不需要了解前端。
先簡單看一下
- 一個最簡單的 amis 配置看起來是這樣的:
{ "type": "page", "body": "Hello World!"}#這是一段 JSON,它的含義是:#type 是 amis 節點中最重要的欄位,它告訴 amis 當前節點需要渲染的是Page元件。#而 body 欄位會作為 Page 元件的內容,Page 元件根據這個值來渲染頁面內容。
Page是 amis 頁面配置中 必須也是唯一的頂級節點
2. 數據域與數據鏈
#添加初始化介面{ "type": "page", "initApi": "/amis/api/mock2/page/initData", "body": "date is ${date}"}#這個 api 介面返回的數據結構如下:{ "status": 0, "msg": "", "data": { "title": "Test Page Component", "date": "2017-10-13" }}# 渲染後結果: date is 2017-10-13
簡單列舉了兩個例子,是不是很簡單,so easy
好吧,快速開始
Amis 有兩種使用方法:
SDK 版本適合對前端或 React 不了解的開發者,它不依賴 npm 及 webpack,可以像 Vue/jQuery 那樣外鏈程式碼就能使用。
SDK:
下載方式:
- github 的 releases,檔是 sdk.tar.gz。
- 使用 npm i amis 來下載,在 node_modules\amis\sdk 目錄裏就能找到。
切換主題:
jssdk 版本預設使用 sdk.css 即雲舍主題,如果你想使用仿 Antd,請將 css 參照改成 antd.css。同時 js 渲染地方第四個參數傳入 theme 內容。如:
Vue:
可以基於 SDK 版本封裝成 component 供 vue 使用,具體請參考範例:https://github.com/aisuda/vue2-amis-demo
React:
初始計畫請參考 https://github.com/aisuda/amis-react-starter。
如果在已有計畫中,React 版本需要是 >=16.8.6,mobx 需要 ^4.5.0。
amis 1.6.5 及以上版本支持 React 17。
安裝:
npm i amis
元件介紹
1.Page 頁面
{ "type": "page", "body": { "type": "form", "api": "/amis/api/mock2/form/saveForm", "body": [ { "type": "input-text", "name": "name", "label": "姓名:" } ] }}
2.Container 容器
{ "type": "page", "body": { "type": "container", "body": "這裏是容器內容區" }}
3.Collapse 折疊器
{ "type": "page", "body": { "type": "collapse-group", "activeKey": [ "1" ], "body": [ { "type": "collapse", "key": "1", "header": "標題1", "body": "這裏是內容1" }, { "type": "collapse", "key": "2", "header": "標題2", "body": "這裏是內容2" }, { "type": "collapse", "key": "3", "header": "標題3", "body": "這裏是內容3" } ] }}
4.Flex 布局
{ "type": "page", "body": { "type": "flex", "items": [ { " style": { "backgroundColor": "#1A5CFF", "width": 100, "height": 50, "margin": 5 }, "type": "tpl", "tpl": "" } ] }}
5.Form 表單
{ "type": "page", "body": { "type": "form", "body": [ { "type": "input-text", "label": "文字域", "name": "text" }, { "type": "input-password", "label": "<a href='./password'>密碼</a>", "name": "password" } ] }}
6.CRUD 增刪改查
CRUD,即增刪改查元件,主要用來展現數據列表,並支持各類【增】【刪】【改】【查】等操作。
註意 CRUD 所需的數據必須放 items 中,因此如果只是想顯示表格型別的數據沒有分頁,請使用 Table。
程式設計師的CRUD
7.demo 範例
https://aisuda.bce.baidu.com/amis/examples/index
用 JSON 寫頁面有什麽好處
為了實作用最簡單方式來生成大部份頁面,amis 的解決方案是基於 JSON 來配置,它的獨特好處是:
其他亮點
amis 不適合做什麽?
使用 JSON 有優點但也有明顯缺點,在以下場合並不適合 amis:
總結
amis確實可以說是一個良心產品,對於一些簡單的功能,只要有api就能實作完整的系統,元件豐富,樣式也很好看,對於前端不是很擅長的人員來說非常的友好,對於高手也能提升效率!