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

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

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

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

一、amis簡介

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

二、amis優(yōu)勢(shì)

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

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

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

2.自動(dòng)交互體驗(yàn)優(yōu)化

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

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

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

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

框架自帶數(shù)據(jù)交互功能，在組合頁面可以實(shí)現(xiàn)數(shù)據(jù)獲取、數(shù)據(jù)綁定、數(shù)據(jù)校驗(yàn)、數(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ā)實(shí)現(xiàn)業(yè)務(wù)組件的適配，基本可以做到90%的低代碼覆蓋。

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

三、快速搭建amis

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

1、先安裝amis依賴包

npm i amis

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

目前amis支持兩個(gè)主題：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時(shí)一定要掌握定語，他是規(guī)范amis在識(shí)別的基礎(chǔ)建設(shè)，便于我們更好的設(shè)置頁面內(nèi)容以及加載的動(dòng)態(tài)數(shù)據(jù)的規(guī)范。對(duì)于這些定語標(biāo)準(zhǔn)以及語義參數(shù)值規(guī)范需要著重注意。

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

• SchemaNode

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

1.模板定義

作為動(dòng)態(tài)參數(shù)設(shè)置的識(shí)別機(jī)制，主要通過lodash template進(jìn)行的渲染實(shí)現(xiàn)，使其amis在動(dòng)態(tài)渲染可以實(shí)現(xiàn)復(fù)雜多樣的渲染方式不僅限于單一的對(duì)象占位，還可以支持動(dòng)態(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.配置對(duì)象

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

{ type: 'page', body: 'Hello world??！'}

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

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

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

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

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

3.配置數(shù)組

schemaArray 為了實(shí)現(xiàn)一個(gè)組件下存在多個(gè)組件集合的解決方案，整個(gè)數(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)程請(qǐng)求接口方法，其中可以配置請(qǐng)求url、方式、數(shù)據(jù)體、數(shù)據(jù)格式等相關(guān)配置。

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

[<method>:]<url>

然而針對(duì)于amis的api請(qǐng)求處理響應(yīng)數(shù)據(jù)必須滿足amis定義的返回?cái)?shù)據(jù)標(biāo)準(zhǔn)格式，要求放回對(duì)象必須包含status、msg、data字段組合成的返回對(duì)象。其中data屬于業(yè)務(wù)邏輯處理，必須要通過鍵值對(duì)方式呈現(xiàn)，比如返回結(jié)果是字符串、數(shù)組必須包裝成object設(shè)置在data中，方才能識(shí)別。并且在status定義時(shí)，要求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ù)雜請(qǐng)求，針對(duì)很多場(chǎng)景條件的多變以及form提交存在依賴關(guān)系，使其簡單的請(qǐng)求模式無法完成動(dòng)態(tài)數(shù)據(jù)封裝，然而amis在構(gòu)建時(shí)已經(jīng)考慮過此功能服務(wù)，支持復(fù)雜的請(qǐng)求方式定義。

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

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

API緩存機(jī)制

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

{ 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é)果時(shí)，在運(yùn)用結(jié)果往往需要前端做簡單的處理，比如tree格式數(shù)據(jù){label: xx, value: xx}或者部分組件識(shí)別的數(shù)據(jù)格式，然而在此下需要針對(duì)于數(shù)據(jù)二次加工?？紤]到簡單的處理過程，無需每次進(jìn)行js復(fù)雜腳本的編寫，可以采用數(shù)據(jù)映射關(guān)系完成對(duì)應(yīng)的結(jié)構(gòu)轉(zhuǎn)化。通過實(shí)現(xiàn)api中responseData屬性，可以實(shí)現(xiàn)自動(dòng)轉(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)系映射，那么針對(duì)請(qǐng)求時(shí)是否可以做請(qǐng)求前置處理，比如設(shè)置一些token值等特殊屬性“requestAdaptor”適配器完成參數(shù)的組裝。然而在適配器中可以篡改發(fā)送請(qǐng)求頭、消息體等。同時(shí)需要將傳入的api內(nèi)容一并返回。

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

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

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

function(payload, response, api) { // payload: 當(dāng)前請(qǐng)求響應(yīng)reponse.data // response: 當(dāng)前請(qǐ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)等公共能力，然而需要針對(duì)每個(gè)級(jí)別都需要設(shè)置，多余復(fù)雜難以維護(hù)，為了提高重復(fù)利用優(yōu)勢(shì)，提供了當(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高階篇，低代碼平臺(tái)雛形，可實(shí)現(xiàn)拖拽。當(dāng)然也可以給予amis框架開發(fā)屬于自己的低代碼平臺(tái)。

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

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

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

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

歡迎大家一起探討交流