如何设计一个低代码小程序开发平台

865 阅读6分钟

背景

时间回到2022年12月中旬,此时新冠刚放开不久,公司由于不可控原因需要转型,高层准备押注低代码小程序开发平台自救。一开始领导还只是叫我研究一下,后面开会才知道公司后续能不能活下去就靠这个平台了,这时候我才意识到大环境是真的不行了。

刚接到需求时其实有想过用大厂的库,但是研究了一圈发现基本上都是pc端的低代码开发库,最后脑子一热拍板决定自研。

Demo animation.gif

低代码开发平台的概念和意义

低代码平台就是利用可视化开发界面和组件库,通过拖拽和配置等方式,快速构建应用程序的开发环境。其意义在于提高开发效率、降低开发门槛、提升用户体验,使得非专业开发者也能参与应用开发。

废话不多说开始整活

设计思路

决定开工后就开始界面的设计了,下图是低代码设计器的骨架结构,而设计器的扩展能力就是围绕以上的四大区域来进行的。可以通过左侧操作区(组件、控件)和右侧数据操作区的扩展能力来对主内容区域进行定制,项目的结构也由此而来。

用户通过拖拽左侧操作区的组件到主内容区生成对应组件dom和初始数据,右侧操作区的原子配置项则由用户单击选择编辑组件后动态生成,然后用户在右侧数据操作区配置组件数据,再由平台生成页面JSON数据,服务端负责存取JSON数据,渲染时从服务端获取JSON数据再还原成小程序,这样一个整体的流程就结束了。

image.png

项目架构

lowCode.png 从上图的结构中可以看出,我们是由左侧组件单线分解到操作区,然后由各种原子配置项多线向上汇总收集数据,再集中保存。

我们考虑到许多组件的配置项都是大同小异的,像文本、图片、状态、选择等,所以我们就把每个配置项都单独组件封装,刚开始可能会比较麻烦,开发一个页面组件要写多个原子配置组件,但是到了后面我们会发现,我们新开发一个组件,几乎可以不用新写原子配置组件了。所以只要对的事情坚持做后续必有好处。

实现过程

  • 服务器架构设计,API 设计,数据模型设计(省略)

经过商讨我们定义好json数据结构,也完成了基本的页面搭建之后就开始功能的实现。 由于低代码平台是非常注重交互体验的,在这一点上,Vue的双向绑定和数据依赖收集模式使其默认的数据响应和渲染效率都要比 React 高一些,所以前端技术方面我们使用的 vue

有过经验的小伙伴应该知道在当前场景下,主视图区和右侧操作区的组件是需要动态渲染的,否则项目的dom将又臭又长,所以这里我们用到了vue 内置的特殊 Attributes | :is 来绑定动态组件和动态原子配置项。

<!-- 组件会根据 item.component 动态改变 -->
<component :is="getRef(item.component)" ></component>

在数据层面由于数据的高度统一性,所以在lowCode内部我们没有使用 Vue Router 而是使用了组合式 API:依赖注入 ,这样我们就不用频繁的去存取数据,而专注于逻辑本身。

拖拽技术我们用的是Vue.Draggable其内置的方法也让我们省了许多逻辑操作。

并且由于我们的小程序开发平台只是内嵌于大项目中的其中一个模块,我司在开发低代码平台前,就已经开发好了诸多平台基础内容,这也让我们数据收集能更方便。

模块设计

我们从一开始4个组件到目前的24+组件,后续还会根据用户需求的不同陆续新增。

  • 组件

模块图例.png 有常见基础组件(轮播图、功能面板、搜索栏等),后续可能还会有定制化组件

  • 超级组件 Snipaste_2023-08-29_11-08-10.png 就是组件内能放其它组件的复合组件(2.0版本大更新内容,从以前的单一组件线性排列,到现在的多组件堆叠组合排列,扩充了小程序的更多可能)
  • 控件 浮标图示.png 包含自定义功能的浮标、悬浮图(首屏展示)、chatGpt、人工客服等。
  • 配置项 Snipaste_2023-08-25_14-20-17.png 图文导航组件数据配置示例,可配置组件的基本数据与样式。
  • 模板海 模板海图示.png 可选择海量线上模板一键套用线上成熟小程序。
  • 页面海 页面海.png 也可单独勾选喜欢的页面进行精准复制,使自己的小程序更丰富。

展望

后续我们还会不断完善组件库,优化操作流程以便让用户更低成本地快速搭建自己的小程序,随着AI、云计算等技术的不断成熟,以后肯定会有更多的自动化智能化的工具出现,助力开发效率的提升,而低代码平台也会面临更多的挑战,比如如何确保代码质量,如何处理复杂的业务逻辑,如何保证程序性能等。不过我还是乐观的相信随着技术的进步我们都会找到合适的解决方案。

感想

低代码平台的优势我就不再赘述了,有人说这是我们程序员自己革自己的命,而我想说的是时代在发展文明在进化,3次工业革命就足矣说明,就算你自己不做也会有其他人来做,在当前Ai大模型的加持下,在可预见的未来写更少的代码是毋庸置疑的,与其担心程序员有没有自己革自己的命,还不如多学习些新技术,以便在未来有更多的话语权。淘汰部分人是肯定,现在的门槛太低了提高一点也好。总的来说我认为低代码开发平台是一项前景非常广阔的技术,并有可能改变我们的开发方式。

低代码平台从当初的一片空白到如今的初具雏形,中途遇到了许多难点和问题。 现在回过头来看我都佩服当时的勇气,和一路走来的坚持。 真的轻舟已过万重山...

最后若有错误之处,请评论区批评指正,感谢。

1693277898395.jpeg