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

點擊關注“八戒技術團隊”，閱讀更多技術干貨

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

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

一、amis簡介

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

二、amis優(yōu)勢

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

1. 技術難度1顆星

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

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

對于數(shù)據(jù)量大，頁面加載復雜已實現(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è)不重復的內(nèi)置組件使用，便于直接快速應用無需擴展開發(fā)。

6.支持擴展開發(fā)

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

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

三、快速搭建amis

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

1、先安裝amis依賴包

npm i amis

2、此處講解react的應用

目前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在識別的基礎建設，便于我們更好的設置頁面內(nèi)容以及加載的動態(tài)數(shù)據(jù)的規(guī)范。對于這些定語標準以及語義參數(shù)值規(guī)范需要著重注意。

四、amis標準定語

• SchemaNode

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

1.模板定義

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

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

2.配置對象

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

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

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

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

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

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

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

3.配置數(shù)組

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

{ 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類名，可以結合本地加載的樣式表進行部分樣式覆蓋。

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

• API

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

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

[<method>:]<url>

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

返回結果例如：

{ 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} ]}

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

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

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

API緩存機制

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

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

返回結果關系映射

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

例如，下拉列表組織結構

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

除開常規(guī)的結果關系映射，那么針對請求時是否可以做請求前置處理，比如設置一些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ù)屬于第三方固定api格式，我們應該如何接收處理呢，難道amis只能支持標準的返回結果參數(shù)么，目前amis返回結果參數(shù)要求必須為指定格式，無法變更。但是amis在映射數(shù)據(jù)源時暴露了返回結果適配方法“adaptor”，但是此方法必須是字符串的javascprit腳本語言。

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

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

詳細配置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 當頁面存在大量的重復性組件，比如狀態(tài)選擇器、地址選擇器、組織結構等公共能力，然而需要針對每個級別都需要設置，多余復雜難以維護，為了提高重復利用優(yōu)勢，提供了當前頁全局的配置參數(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編輯器了解

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

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

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

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

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

歡迎大家一起探討交流