查看原文：【技術(shù)分享】amis低代碼前端框架

點擊關(guān)注“八戒技術(shù)團(tuán)隊”，閱讀更多技術(shù)干貨

隨著微服務(wù)誕生，前后端分析已成為常態(tài)，然而前端編程屬于弱語言變更，使用場景廣泛。隨著前端大牛的增多，涉及到前端框架也不計其數(shù)，如果想開發(fā)一些高階前端應(yīng)用程序，你必須去掌握npm、webpack、React/vue、typescript等多種框架應(yīng)用，同時還需要熟悉ES5、es6語法定義。對于簡單的項目入門還比較方便，涉及到一些數(shù)據(jù)狀態(tài)管理情況下，需要解決的事情會變得更加復(fù)雜。

然而在我們開發(fā)過程中會遇到很多表格展示、表格篩選、表格排序，以及簡單的增刪查改的應(yīng)用程序，利用現(xiàn)有的框架服務(wù)進(jìn)行研發(fā)時我們會變得更負(fù)重，需要花費(fèi)大量的時間成本以及掌握更豐富的框架應(yīng)用。前端如此強(qiáng)大，難道都沒有一款能解決這些同類型服務(wù)么。其實在13年百度FEX-TEAM團(tuán)隊都已經(jīng)在開始構(gòu)建低代碼平臺，在19年正式對外開放amis低代碼框架，解決了我們無需掌握webpack、react/vue、typescript以及es6等這些高階應(yīng)用，只需要大家會寫json字符串就可以開發(fā)出前端應(yīng)用。

一、amis簡介

amis 是一個低代碼前端框架，它使用json配置來自動生成頁面，可以減少頁面的開發(fā)工作量以及維護(hù)成本，大大提升前端效率。

二、amis優(yōu)勢

amis絕大部分都可以采用簡單的配置方式生成頁面。

1. 技術(shù)難度1顆星

一個完全不懂前端的技術(shù)人也可以快速上手，并且還無需了解更多前端技術(shù)更新知識。

2.自動交互體驗優(yōu)化

對于數(shù)據(jù)量大，頁面加載復(fù)雜已實現(xiàn)自動優(yōu)化，頁面流暢不卡頓。

3.可實現(xiàn)桌面編輯

可以快速包裝實現(xiàn)可視化編輯，實現(xiàn)頁面拖拽即可組裝一個成熟的頁面。

4.動態(tài)數(shù)據(jù)交互

框架自帶數(shù)據(jù)交互功能，在組合頁面可以實現(xiàn)數(shù)據(jù)獲取、數(shù)據(jù)綁定、數(shù)據(jù)校驗、數(shù)據(jù)提交等數(shù)據(jù)交互能力。

5.豐富的內(nèi)置組件

擁有120多款行業(yè)不重復(fù)的內(nèi)置組件使用，便于直接快速應(yīng)用無需擴(kuò)展開發(fā)。

6.支持?jǐn)U展開發(fā)

除了框架的內(nèi)置功能外，用戶還可以通過擴(kuò)展開發(fā)實現(xiàn)業(yè)務(wù)組件的適配，基本可以做到90%的低代碼覆蓋。

當(dāng)然針對于amis依舊存在一些缺陷，它不能完全替代所有的前端過程，遇到存在大量的UI交互時amis的體驗會極度下降，以及存在復(fù)雜的邏輯交互以及部分動畫效果時需要獨(dú)立開發(fā)，采用amis只會加大研發(fā)的難度也會讓amis負(fù)重難行。

三、快速搭建amis

目前amis支持領(lǐng)域只包含了react、js兩種，如果你是vue模式可以采用js的方式引入項目實現(xiàn)低代碼研發(fā)。

1、先安裝amis依賴包

npm i amis

2、此處講解react的應(yīng)用

目前amis支持兩個主題：cxd（云舍UI）和 antd（仿antdUI）

• amis樣式表引入方式：

html引入樣式表

<link href="./node_modules/amis/lib/helper.css" /><link href="./node_modules/amis/sdk/iconfont.css" /><!-- cxd主題 --><link href="./node_modules/amis/lib/themes/cxd.css" /><!-- antd主題 --><link href="./node_modules/amis/lib/themes/antd.css" />

js中引入

import './node_modules/amis/lib/helper.css';import './node_modules/amis/sdk/iconfont.css';<!-- cxd主題 -->import './node_modules/amis/lib/themes/cxd.css';<!-- antd主題 -->import './node_modules/amis/lib/themes/antd.css';

• 使用渲染器配置主題

import React, {Component, Fragment} from 'react';import PropTypes from 'prop-types';import {render as renderAmis} from 'amis';class DemoPage extends React.Component { render() { const renderJson = { type: 'page', title: 'amis-demo', body: '<h1>Hello world!! ${welcomeText}</h1>' }; return ( <div className="demo-page"> <h1>react original ecological rendering。</h1> { renderAmis(renderJson, { welcomeText: 'welcome use amis ~' }, { theme: 'cxd' }); } </div> ); }}

在使用amis時一定要掌握定語，他是規(guī)范amis在識別的基礎(chǔ)建設(shè)，便于我們更好的設(shè)置頁面內(nèi)容以及加載的動態(tài)數(shù)據(jù)的規(guī)范。對于這些定語標(biāo)準(zhǔn)以及語義參數(shù)值規(guī)范需要著重注意。

四、amis標(biāo)準(zhǔn)定語

• SchemaNode

SchemaNode 表示amis框架配置節(jié)點，當(dāng)前支持的節(jié)點類型只有3種（模版[type=tpl]、配置對象[schema object]、配置數(shù)組[schema array]）

1.模板定義

作為動態(tài)參數(shù)設(shè)置的識別機(jī)制，主要通過lodash template進(jìn)行的渲染實現(xiàn)，使其amis在動態(tài)渲染可以實現(xiàn)復(fù)雜多樣的渲染方式不僅限于單一的對象占位，還可以支持動態(tài)判斷以及循環(huán)處理。

{ type: 'page', data: { userName: 'amis demo', tags: ['前端技術(shù)','高科技','大牛'] }, body: [{ type: 'tpl', tpl: '用戶名：${userName}' }, { type: 'divider' }, { type: 'tpl', tpl: '<% if (data.tags && data.tags.length) { %> 標(biāo)簽：<% data.tags.forEach((tag) => {%> <span><%= item %></span> <% }); %> <% } %>' }]}

2.配置對象

schema 作為amis的json配置項，每一個json配置項必須包含一個type字段作為類型定義，僅當(dāng)存在type值才表示schema類型。

{ type: 'page', body: 'Hello world?。?#039;}

每一個schema對象定義的屬性值接收都有標(biāo)準(zhǔn)，可以根據(jù)amis的組件表查看對應(yīng)可以配置哪些參數(shù)值，針對于參數(shù)值支持哪些類型/屬性。

當(dāng)前針對于配置對象目前支持的120多種組件，可以配置我們常見的form表單、panel面板、tabs選型卡、table表格、chart圖表、grid布局 等常見的組件支持。

amis 可以通過配置對象Schema，實現(xiàn)嵌套搭建，配置復(fù)雜的頁面應(yīng)用。比如布局、分割、面板等

除開針對配置對象type的定義外，還額外具備3種常見使用，className、style、visible/hidden常見必備技巧。

在amis配置參數(shù)支持簡單的表達(dá)式判斷，比如 === 、>、<等。

3.配置數(shù)組

schemaArray 為了實現(xiàn)一個組件下存在多個組件集合的解決方案，整個數(shù)組配置必須保持schema的標(biāo)準(zhǔn)定義。

{ type: 'page', body: [ { type: 'form', body: [ { type: 'input-text', name: 'name', label: '條件1' }, { type: 'input-text', name: 'email', label: '條件2' } ] }, { type: "service", body: { type: 'table', title: '用戶中心', source: '$userStore', columns: [ { name: 'name', label: '用戶名稱' }, { name: 'email', label: '用戶郵箱' }, { name: 'status', label: '用戶狀態(tài)' } ] } } ]}

• ClassName

amis 中大部分的組件都支持配置className和「組件名」 ClassName，他主要通過配置組件dom上的css類名，可以結(jié)合本地加載的樣式表進(jìn)行部分樣式覆蓋。

{ type: 'page', title: 'self style', body: [{ type: 'container', className: 'amis-continer', style: { backgroundColor: '#40bb91' } }]}

• API

amis 提供了遠(yuǎn)程請求接口方法，其中可以配置請求url、方式、數(shù)據(jù)體、數(shù)據(jù)格式等相關(guān)配置。

簡單請求，如果你的請求是簡單的請求數(shù)據(jù)可以直接通過如下格式拼裝

[<method>:]<url>

然而針對于amis的api請求處理響應(yīng)數(shù)據(jù)必須滿足amis定義的返回數(shù)據(jù)標(biāo)準(zhǔn)格式，要求放回對象必須包含status、msg、data字段組合成的返回對象。其中data屬于業(yè)務(wù)邏輯處理，必須要通過鍵值對方式呈現(xiàn)，比如返回結(jié)果是字符串、數(shù)組必須包裝成object設(shè)置在data中，方才能識別。并且在status定義時，要求status必須為0才表示接口處理成功，反之處理失敗。

返回結(jié)果例如：

{ status: 0, msg: '查詢成功', data: { content: [ {name: 'bruce', email: 'bruce@zbj.com', status: 1}, {name: '鬼谷子', email: 'guiguzi@zbj.com', status: 1} ] }}

異常格式

{ status: 0, msg: '查詢成功', data: [ {name: 'bruce', email: 'bruce@zbj.com', status: 1}, {name: '鬼谷子', email: 'guiguzi@zbj.com', status: 1} ]}

復(fù)雜請求，針對很多場景條件的多變以及form提交存在依賴關(guān)系，使其簡單的請求模式無法完成動態(tài)數(shù)據(jù)封裝，然而amis在構(gòu)建時已經(jīng)考慮過此功能服務(wù)，支持復(fù)雜的請求方式定義。

{ data: { userId: 18 }, api: { method: 'get', url: '/api/get-user/', dataType: 'application/json', data: { userId: '${userId}' }, ... // 其他配置 }}

其中為了保持api具備異構(gòu)形態(tài)，針對url、data都支持動態(tài)變量設(shè)置，${url} 的設(shè)置。特殊說明，復(fù)雜的請求data中如果存在key值定義存在"."路徑結(jié)構(gòu)，amis會自動提交時會拆解成json格式進(jìn)行提交，如果你不想轉(zhuǎn)化成json模式，需要在配置中添加“convertKeyToPath: false”。同樣針對于復(fù)雜的請求設(shè)置處理簡單的method、url、data、dataType外還支持headers的設(shè)置，為保障大多數(shù)應(yīng)用都可以完成動態(tài)參數(shù)設(shè)置。

API緩存機(jī)制

amis在API模塊中除了正常的ajax方式外，還支持接口緩存數(shù)據(jù)，對于低頻的數(shù)據(jù)模型可以不重復(fù)請求，造成接口多次刷新問題。

{ type: 'service', data: { userId: 18 }, api: { method: 'get', url: '/api/get-user/', dataType: 'application/json', data: { userId: '${userId}' }, cache: 2000 ... // 其他配置 }}

返回結(jié)果關(guān)系映射

amis通過api加載數(shù)據(jù)結(jié)果時，在運(yùn)用結(jié)果往往需要前端做簡單的處理，比如tree格式數(shù)據(jù){label: xx, value: xx}或者部分組件識別的數(shù)據(jù)格式，然而在此下需要針對于數(shù)據(jù)二次加工。考慮到簡單的處理過程，無需每次進(jìn)行js復(fù)雜腳本的編寫，可以采用數(shù)據(jù)映射關(guān)系完成對應(yīng)的結(jié)構(gòu)轉(zhuǎn)化。通過實現(xiàn)api中responseData屬性，可以實現(xiàn)自動轉(zhuǎn)化數(shù)據(jù)模型。

例如，下拉列表組織結(jié)構(gòu)

{ type: 'select', source: { url: '/api/get-manager-dept/', responeData: { options: '${items|pick:label~deptName,value~deptId}' } }}

除開常規(guī)的結(jié)果關(guān)系映射，那么針對請求時是否可以做請求前置處理，比如設(shè)置一些token值等特殊屬性“requestAdaptor”適配器完成參數(shù)的組裝。然而在適配器中可以篡改發(fā)送請求頭、消息體等。同時需要將傳入的api內(nèi)容一并返回。

{ api: { method: 'get', url: '/api/get-manager-dept/', requestAdaptor: (api) => { return { ...api, headers: { 'csrf-token': '${csrfToken}' } }; } }}

請求參數(shù)都可以完成適配，假設(shè)當(dāng)前請求參數(shù)屬于第三方固定api格式，我們應(yīng)該如何接收處理呢，難道amis只能支持標(biāo)準(zhǔn)的返回結(jié)果參數(shù)么，目前amis返回結(jié)果參數(shù)要求必須為指定格式，無法變更。但是amis在映射數(shù)據(jù)源時暴露了返回結(jié)果適配方法“adaptor”，但是此方法必須是字符串的javascprit腳本語言。

目前adaptor暴露了三個數(shù)據(jù)對象給擴(kuò)展使用，返回結(jié)果必須帶有payload相關(guān)參數(shù)值。

function(payload, response, api) { // payload: 當(dāng)前請求響應(yīng)reponse.data // response: 當(dāng)前請求的原始響應(yīng)，其中包含了http status // api: api相關(guān)的配置內(nèi)容，此處的api可以作為擴(kuò)展字段輸入判斷 return { ...payload, status: payload.status === 200 ? 0 : payload.status };}

詳細(xì)配置api格式模型為

{ api: { method: 'get', url: '/api/get-manager-dept/', adaptor: 'return {...payload, status: payload.status === 200 ? 0 : payload.status}' responeData: { options: '${items|pick:label~deptName,value~deptId}' } }}

• Definitions

Definitions 當(dāng)頁面存在大量的重復(fù)性組件，比如狀態(tài)選擇器、地址選擇器、組織結(jié)構(gòu)等公共能力，然而需要針對每個級別都需要設(shè)置，多余復(fù)雜難以維護(hù)，為了提高重復(fù)利用優(yōu)勢，提供了當(dāng)前頁全局的配置參數(shù)。

{ definitions: { citySelect: { type: 'nested-select', label: '省市區(qū)', searchable: true, name: 'cityCode', options: [ { label: '重慶', value: 500000, children: [ { label: '重慶市', value: 500100 children: [ { label: '渝北區(qū)', value: 500112 } ] } ] } ] } }, type: 'page', title: '表單提交', body: [ { type: 'form', body: [ { '$ref': 'citySelect' }, { type: 'static', label: '選擇的城市' tpl: '<pre>${cityCode|json}</pre>' } ] } ]}

五、amis編輯器了解

如果你認(rèn)為以上框架還是太難了，那我們可以在拓寬了解下amis-editor高階篇，低代碼平臺雛形，可實現(xiàn)拖拽。當(dāng)然也可以給予amis框架開發(fā)屬于自己的低代碼平臺。

通過編輯器拖拽、配置最終可以實現(xiàn)一個簡單的查詢頁面

還在為前端而煩惱么？還在為前端資源不足無法推動業(yè)務(wù)而苦惱么？還在為前端語法太難而找不到好的工作么？來了解下什么是amis框架，我們正在搭建高階的amis可視化平【蝎子—低代碼平臺】，你有興趣么，抓緊聯(lián)系。

希望以上內(nèi)容能對有需要的人有所幫助

歡迎大家留言寫下自己希望了解的技術(shù)方向

歡迎大家一起探討交流