「技术分享」amis低代码前端框架

查看原文:【技术分享】amis低代码前端框架

点击关注“八戒技术团队”,阅读更多技术干货

随着微服务诞生,前后端分析已成为常态,然而前端编程属于弱语言变更,使用场景广泛。随着前端大牛的增多,涉及到前端框架也不计其数,如果想开发一些高阶前端应用程序,你必须去掌握npm、webpack、react/vue、typescript等多种框架应用,同时还需要熟悉ES5、ES6语法定义。对于简单的项目入门还比较方便,涉及到一些数据状态管理情况下,需要解决的事情会变得更加复杂。

然而在我们开发过程中会遇到很多表格展示、表格筛选、表格排序,以及简单的增删查改的应用程序,利用现有的框架服务进行研发时我们会变得更负重,需要花费大量的时间成本以及掌握更丰富的框架应用。前端如此强大,难道都没有一款能解决这些同类型服务么。其实在13年百度FEX-TEAM团队都已经在开始构建低代码平台,在19年正式对外开放amis低代码框架,解决了我们无需掌握webpack、react/vue、typescript以及es6等这些高阶应用,只需要大家会写json字符串就可以开发出前端应用。

一、amis简介

amis 是一个低代码前端框架,它使用json配置来自动生成页面,可以减少页面的开发工作量以及维护成本,大大提升前端效率。

二、amis优势

amis绝大部分都可以采用简单的配置方式生成页面。

1. 技术难度1颗星

一个完全不懂前端的技术人也可以快速上手,并且还无需了解更多前端技术更新知识。

2.自动交互体验优化

对于数据量大,页面加载复杂已实现自动优化,页面流畅不卡顿。

3.可实现桌面编辑

可以快速包装实现可视化编辑,实现页面拖拽即可组装一个成熟的页面。

4.动态数据交互

框架自带数据交互功能,在组合页面可以实现数据获取、数据绑定、数据校验、数据提交等数据交互能力。

5.丰富的内置组件

拥有120多款行业不重复的内置组件使用,便于直接快速应用无需扩展开发。

6.支持扩展开发

除了框架的内置功能外,用户还可以通过扩展开发实现业务组件的适配,基本可以做到90%的低代码覆盖。


当然针对于amis依旧存在一些缺陷,它不能完全替代所有的前端过程,遇到存在大量的UI交互时amis的体验会极度下降,以及存在复杂的逻辑交互以及部分动画效果时需要独立开发,采用amis只会加大研发的难度也会让amis负重难行。

三、快速搭建amis

目前amis支持领域只包含了react、js两种,如果你是vue模式可以采用js的方式引入项目实现低代码研发。

1、先安装amis依赖包

npm i amis

2、此处讲解react的应用

「技术分享」amis低代码前端框架

目前amis支持两个主题:cxd(云舍UI)和 antd(仿antdUI)

  • amis样式表引入方式:

html引入样式表






js中引入

import './node_modules/amis/lib/helper.css';
import './node_modules/amis/sdk/iconfont.css';

import './node_modules/amis/lib/themes/cxd.css';

import './node_modules/amis/lib/themes/antd.css';
「技术分享」amis低代码前端框架

  • 使用渲染器配置主题
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: '

Hello world!! ${welcomeText}

' }; return (

react original ecological rendering。

{ renderAmis(renderJson, { welcomeText: 'welcome use amis ~' }, { theme: 'cxd' }); } ); } }

在使用amis时一定要掌握定语,他是规范amis在识别的基础建设,便于我们更好的设置页面内容以及加载的动态数据的规范。对于这些定语标准以及语义参数值规范需要着重注意。

四、amis标准定语

  • SchemaNode

SchemaNode 表示amis框架配置节点,当前支持的节点类型只有3种(模版[type=tpl]、配置对象[schema object]、配置数组[schema array])

1.模板定义

作为动态参数设置的识别机制,主要通过lodash template进行的渲染实现,使其amis在动态渲染可以实现复杂多样的渲染方式不仅限于单一的对象占位,还可以支持动态判断以及循环处理。

{
    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) => {%> <%= item %> <% }); %> <% } %>'
    }]
}

2.配置对象

schema 作为amis的json配置项,每一个json配置项必须包含一个type字段作为类型定义,仅当存在type值才表示schema类型。

{
    type: 'page',
    body: 'Hello world!!'
}

每一个schema对象定义的属性值接收都有标准,可以根据amis的组件表查看对应可以配置哪些参数值,针对于参数值支持哪些类型/属性。

当前针对于配置对象目前支持的120多种组件,可以配置我们常见的form表单、panel面板、tabs选型卡、table表格、chart图表、grid布局 等常见的组件支持。

amis 可以通过配置对象Schema,实现嵌套搭建,配置复杂的页面应用。比如布局、分割、面板等

除开针对配置对象type的定义外,还额外具备3种常见使用,className、style、visible/hidden常见必备技巧。

在amis配置参数支持简单的表达式判断,比如 === 、>、<等。

3.配置数组

schemaArray 为了实现一个组件下存在多个组件集合的解决方案,整个数组配置必须保持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: '用户状态'
                    }
                ]
            }
        }
    ]
}
  • ClassName

amis 中大部分的组件都支持配置className和「组件名」+ClassName,他主要通过配置组件dom上的css类名,可以结合本地加载的样式表进行部分样式覆盖。

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

amis 提供了远程请求接口方法,其中可以配置请求url、方式、数据体、数据格式等相关配置。

简单请求,如果你的请求是简单的请求数据可以直接通过如下格式拼装

[:]

然而针对于amis的api请求处理响应数据必须满足amis定义的返回数据标准格式,要求放回对象必须包含status、msg、data字段组合成的返回对象。其中data属于业务逻辑处理,必须要通过键值对方式呈现,比如返回结果是字符串、数组必须包装成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提交存在依赖关系,使其简单的请求模式无法完成动态数据封装,然而amis在构建时已经考虑过此功能服务,支持复杂的请求方式定义。

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

其中为了保持api具备异构形态,针对url、data都支持动态变量设置,${url} 的设置。特殊说明,复杂的请求data中如果存在key值定义存在"."路径结构,amis会自动提交时会拆解成json格式进行提交,如果你不想转化成json模式,需要在配置中添加“convertKeyToPath: false”。同样针对于复杂的请求设置处理简单的method、url、data、dataType外还支持headers的设置,为保障大多数应用都可以完成动态参数设置。

API缓存机制

amis在API模块中除了正常的ajax方式外,还支持接口缓存数据,对于低频的数据模型可以不重复请求,造成接口多次刷新问题。

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

返回结果关系映射

amis通过api加载数据结果时,在运用结果往往需要前端做简单的处理,比如tree格式数据{label: xx, value: xx}或者部分组件识别的数据格式,然而在此下需要针对于数据二次加工。考虑到简单的处理过程,无需每次进行js复杂脚本的编写,可以采用数据映射关系完成对应的结构转化。通过实现api中responseData属性,可以实现自动转化数据模型。

例如,下拉列表组织结构

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

除开常规的结果关系映射,那么针对请求时是否可以做请求前置处理,比如设置一些token值等特殊属性“requestAdaptor”适配器完成参数的组装。然而在适配器中可以篡改发送请求头、消息体等。同时需要将传入的api内容一并返回。

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

请求参数都可以完成适配,假设当前请求参数属于第三方固定api格式,我们应该如何接收处理呢,难道amis只能支持标准的返回结果参数么,目前amis返回结果参数要求必须为指定格式,无法变更。但是amis在映射数据源时暴露了返回结果适配方法“adaptor”,但是此方法必须是字符串的javascprit脚本语言。

目前adaptor暴露了三个数据对象给扩展使用,返回结果必须带有payload相关参数值。

function(payload, response, api) {
    // payload: 当前请求响应reponse.data
    // response: 当前请求的原始响应,其中包含了http status
    // api: api相关的配置内容,此处的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 当页面存在大量的重复性组件,比如状态选择器、地址选择器、组织结构等公共能力,然而需要针对每个级别都需要设置,多余复杂难以维护,为了提高重复利用优势,提供了当前页全局的配置参数。

{
    definitions: {
        citySelect: {
            type: 'nested-select',
            label: '省市区',
            searchable: true,
            name: 'cityCode',
            options: [
                {
                     label: '重庆',
                    value: 500000,
                    children: [
                        {
                            label: '重庆市',
                            value: 500100
                            children: [
                                {
                                    label: '渝北区',
                                    value: 500112
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    },
    type: 'page',
    title: '表单提交',
    body: [
        {
            type: 'form',
            body: [
                {
                    '$ref': 'citySelect'
                },
                {
                    type: 'static',
                    label: '选择的城市'
                    tpl: '
${cityCode|json}
' } ] } ] }

五、amis编辑器了解

如果你认为以上框架还是太难了,那我们可以在拓宽了解下amis-editor高阶篇,低代码平台雏形,可实现拖拽。当然也可以给予amis框架开发属于自己的低代码平台。

「技术分享」amis低代码前端框架

通过编辑器拖拽、配置最终可以实现一个简单的查询页面

「技术分享」amis低代码前端框架

还在为前端而烦恼么?还在为前端资源不足无法推动业务而苦恼么?还在为前端语法太难而找不到好的工作么?来了解下什么是amis框架,我们正在搭建高阶的amis可视化平【蝎子—低代码平台】,你有兴趣么,抓紧联系。


希望以上内容能对有需要的人有所帮助

欢迎大家留言写下自己希望了解的技术方向

欢迎大家一起探讨交流

发表评论
留言与评论(共有 0 条评论) “”
   
验证码:

相关文章

推荐文章