浅谈低代码平台实现（一）

目前做低代码平台的大厂非常多，涉及实现的技术路线大致分为两类，有通过配置文件生成方向、有云原生低代码打包生成方向，目前这两大阵营涉及的低码产品主要有以下：

低码产品

百度：爱速搭 aisuda.baidu.com 腾讯：微搭 cloud.tencent.com/product/wed... 阿里：宜搭 www.aliwork.com 华为：Astro www.huaweicloud.com/special/ast... 金蝶：苍穹 www.kingdee.com/products/co... 用友：YonBuilder developer.yonyou.com/product/app... 轻流：qingflow.com 得帆：DeCodewww.definesys.com/product_apa... 帆软：简道云www.jiandaoyun.com

2020 年开始参与主导公司低代码平台的设计和实现，目前该平台已经承载表单类应用系统、后端管理类系统、流程业务类页面，成功案例约 100 个，在做整个低代码平台的过程中，也总结了一些实现思路和实现路径，同时也通过该方案完成了论证。

重难点

复制代码

低代码平台大部分都是通过拖拉拽已有内置组件进行布局，利用组件钩子进行触发相关的业务，完成交互。

所主导的低码平台主要是通过配置文件生成方式，采用 Java+Vue2 进行前后端分离进行平台建设，涉及的主要重难点包括：

组件拖拉拽
组件内无限层级嵌套
组件间联动交互
组件回调钩子
上下文参数传递
无限层级弹窗
自定义组件加载
自定义函数加载
自定义样式加载
JS 代码在线执行

以上内容也是大部分低代码平台所涉及的重难点，下面我将结合 Vue 2 作为主要的技术栈，分别浅谈一下上述内容的实现思路，以供参考。

组件拖拉拽

组件从列表面板拖拉拽至低码设计器面板，主要是通过数据驱动，利用 Vue 异步组件和动态组件原理进行渲染

ruby 复制代码

// 拖拉拽三方库 [Vue.Draggable](https://github.com/SortableJS/Vue.Draggable)
<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

javascript 复制代码

// 注册异步组件
Vue.component('asyncComponentName', function (resolve) {
  require(['./my-async-component'], resolve)
})

csharp 复制代码

// 动态组件
<component v-bind:is="componentName"></component>

组件内无限层级嵌套

要实现组件内的无限嵌套，主要是通过具备嵌套能力的容器组件利用递归循环的方式进行 Vue 动态组件渲染，

xml 复制代码

// 这个动态组件是一个容器组件，可以无限递归循环嵌套
<template v-for=(item,index) in list>
  <component v-bind:is="item.componentName"></component>
</template>

上下文参数传递

上下文参数传递，主要是用于解决页面与页面之间，页面与弹窗之间的参数传递，方便查询条件参数使用。在实现本低码平台时，通过封装方法对应用上下文参数对象存入数据，获取数据、删除数据，其中对象Key为页面唯一ID，同时在页面关闭时，平台会自动删除了该页面传递数据。

csharp 复制代码

  // 设置页面上下文
  setPageContextTransferParams (obj = {}) {
      const { pageId = '' } = obj
      let params = obj?.params || {} 
      // 页面上下文对象
      const contextParams = this.pageContextTransferParams[pageId]
      if (!_.isEmpty(contextParams) && !_.isEmpty(contextParams.params)) {
        // 对象合并
        params = {
          ...contextParams.params,
          ...params
        }
      }
      // 利用 lodash 进行对象属性赋值 
      _.set(obj, 'params', params)
      //  存储上下文参数
      this.pageContextTransferParams[pageId] = obj
    }

kotlin 复制代码

    // 获取页面传递参数
    getPageContextTransferParams (pageId = '') {
      if (this.pageContextTransferParams[pageId]) {
        return this.pageContextTransferParams[pageId]
      } else {
        return { pageId, fromPageId: '', params: {} }
      }
    }

javascript 复制代码

    // 清空页面传递参数
    deletePageContextTransferParams (pageIds = []) {
      pageIds.forEach((id) => {
        delete this.pageContextTransferParams[id]
      })
    },

kotlin 复制代码

// 清空所有页面参数
    deletePagesContextTransferParams () {
      this.pageContextTransferParams = {}
    },

JS代码在线执行

JS代码执行主要是利用Vue组件生命周期钩子调用相应的JS代码进行执行，处理相关的业务逻辑，JS脚本代码是存储的纯文本，因此需要把JS文本转函数用于执行，本平台通过原型对象的方式进行实现，具备同步和异步能力。

javascript 复制代码

// 执行匿名函数
function execAnonymous (paramObject = {}, async = true) {
  const { paramsText, params, execObject } = paramObject
  let jsText = paramObject.jsText
  let ExecFunction = Object.getPrototypeOf(() => {}).constructor
  if (async) {
    ExecFunction = Object.getPrototypeOf(async () => {}).constructor
  }
  let jsCode = null
  try {
   // 构造成执行函数
    jsCode = new ExecFunction(paramsText, jsText)
    if (execObject === null || execObject === undefined) {
      // 函数执行
      return jsCode(...params)
    } else {
      return jsCode.call(execObject, ...params)
    }
  } catch (error) {
    // 捕获异常打印
    throw new Error(error)
  } finally {
    ExecFunction = null
    jsCode = null
  }
}