vue.js - 低代码(零代码)平台整体架构设计点？

Question

背景：目前公司想做一个低代码平台，大致功能包含表单设计、流程设计、报表设计、根据拖拽的形式生成PC端、App端、小程序端的页面。基于这个大致的背景需求点。我自己有以下几个问题想了解下：

1. 基于低代码平台根据拖拽生成前端页面，比如生成PC端页面，整体的页面数据结构大致是怎么样的？怎么样根据这样的数据结构渲染成整个对应的页面?；
2. 基于低代码平台根据拖拽的形式怎么能够生成整个APP、H5应用？(公司前端技术栈VueJs+UniAPP)

还望做过低代码平台研发的各位大佬能够给解答一下，谢谢。

Answer 1

1. 拖拽产物

拖拽生成的 json 是用来描述整个页面结构和对应取数逻辑，大概如下：

const schema = {    componentName: "Page",    id: "xxx",    props: {},    children: [        {            componentName: "xxx",            id: "xxx",            props: {},            children: null        }    ]}

2. 渲染页面

1. 运行时渲染

遍历页面 scheme 动态渲染页面

2. 编译渲染

搭建完页面后，有个出码逻辑，将 scheme 生成开发代码，然后编译发布

可以参考 https://lowcode-engine.cn/demo/demo-general/index.html

Answer 2

1. 拖拽构建页面，可以参考开源项目GoView；
   
   

2. 代码生成一般是服务端通过 模板引擎 完成，例如 NodeJS 的 plop、Java 的 FreeMaker 等。

   大致流程：编写代码基座 -> 编写代码模板 -> 模板引擎根据数据渲染模板生成代码 -> 将代码注入基座

Answer 3

可以参考下 这篇文章