低代码平台该如何搭建?

低代码平台

目标

通过拖拽各种组件到容器框,在配置栏配置好数据,即可生成可运行的代码或需要的配置。操作大概和下图类似。我公司的业务需求是针对几个常用的页面(大概80%的常规页面),让非开发人员可以进行拖拽生成代码,减轻开发人员负担。

模块和功能拆分

如下图所示,可拆分成:

  • 左边: 组件选择栏
  • 中间: 可视化编辑器
  • 右边: 组件配置栏

需要做的功能:

  • 定义《组件选择栏》的组件数据,这个可参考阿里的组件数据定义
  • 定义低代码数据,这个可参考阿里百度的定义
  • 拖拽逻辑编写,拖拽框架,无论react还是vue,都是dnd
  • 可视化编辑器渲染,正常写页面即可

若是中小型公司,抄(学习)大厂方案是条好路,作者本人琢磨了很多,兜兜转转最后还是回到大厂的方案上。每个公司的需求不一样,大家需要自行适配,适配的核心是组件数据和低代码数据。公司要求灵活度高又有充足的研发时间,那基本上可照抄大厂方案,大厂方案兼容性很高。若不需要灵活度这么高,希望简单好用即可,那可以根据自身情况进行筛减。

低代码框架思路

各个低代码平台思路很多都是相似的,都是通过拖拽组件+配置组件配置栏生成类似AST 抽象语法树的低代码数据,然后通过这个数据生成代码或生成应用。而低代码平台核心难点是处理组件之间的交互,在这点上,各个平台差别很大。这个是要重点思考的。

方案1:百度低代码平台

百度低代码平台是比较简洁的,先以它为例。百度低代码交互方式采用的是一个组件绑定一个数据。一个组件想和另外一个组件交互,直接在自身事件属性中,选中另外一个组件抛出的方法即可。

流程图
百度低代码数据示例:

下面是一组低代码数据,百度低代码平台可通过此数据生成一个带有输入框的页面。使用者=》拖拽组件到编辑框=》配置组件配置栏的属性=》生成低代码数据。

上面步骤是大部分低代码平台都需要的步骤,核心差异点是如何配置交互数据。百度低代码的交互核心是组件中的《name》属性。一个组件绑定着一个数据,像vue的v-modal一样。而name属性,就是这个组件的id,如下面代码所示,其他组件需要调用此组件数据,直接${组件id}即可。

json 复制代码
{
  "type": "page",
  "body": [
      {
        "type": "input-text", // 一个基础输入框组件
        "name": "input1",
        "label": '我是一个输入框',
        "placeholder": "请输入",
      },
      {
      "type": "tpl",//一个展示数据的组件,类似html的<span>标签
      "text": ${input1} // 需要展示的数据,通过${}+其他组件的name,即可拿到其他组件数据
    },
      
  ]
}

想看详细的百度低代码,自己点进去看

操作页面示例
方案优缺点:

优点:交互操作容易,实现也容易。它的低代码数据主要是描述页面的,此数据容易转换成页面,但转换成代码,需要加一些功夫。它的数据和vue很搭。

缺点:复杂页面会比较麻烦。

方案2:阿里低代码平台

阿里低代码交互方式采用的是:把全部数据和交互逻辑汇总到一个JS文件中,然后组件再绑定js文件中的事件或数据,让js文件当中转站。

相对于百度的方式,阿里需要使用者多配置一个当中转站的js文件。

流程图
阿里低代码交互数据示例:

阿里低代码的交互方式更好懂一些,因为它更接近于代码本身。阿里首先配置好一个JS文件,把页面需要用到的数据和方法都汇总在上面。然后在组件配置栏上,将js文件的事件绑定到组件中。

说白了,这种方式就是将组件交互的内容独立隔离到一个js文件中,配置类配置组件属性即可,不用管交互。此方案灵活性极高,只不过需要写很多代码。一般还需要再套一层壳才能使用。

阿里低代码应用-钉钉宜搭

钉钉宜搭就是在上面框架基础上,套多了一层,使用者一开始,配置好自己需要的数据,钉钉宜搭自动生成整个页面的逻辑和内容(js文件+组件配置),这样用户就不用手写代码了。用户只需要再根据自己的需求进行额外的调整即可,添加组件也可以直接使用已配置好的交互数据和方法。

方案优缺点:

优势:操作很简单,即可生成配置多,功能多,前后端都齐全的页面。

劣势:1.页面功能是特定的,像宜搭的这个模板,就是为表单页面而生的。

2.对业务需求了解要非常深。

3.需要开发定制的配套页面。

总结

以上便是市面上有详细资料可以参考的两种低代码方案。

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui