大家好，我是这个内容中人们的分享。我今天要谈论的主题是“在一百瓶的低代码页面上设置平台的实践。”接下来，我将向您展示为什么我们执行这样的系统以及如何成功完成该系统。
我们的低代码系统为我们公司的产品提供服务 - 一百瓶应用程序。这是一个专业的威士忌社区。如果您想分享饮酒的日常生活，可以转到我们的应用程序。
当我们满足C端用户的需求时，我们发现大量E -Commerce促销页面的逻辑复杂性和相互作用相对较低，但是我们需要消耗大量的开发资源。背景管理系统的开发过程，我们还发现，在不同情况下需要反复发展相同常规的某些页面。即使我们封装了盒子中使用的业务组件，也很难摆脱低成本的负担。
因此，在调查了市场上的一些解决方案之后，我们决定采用低代码高速导轨。
当我们设计系统时，我们不得与业务分开，而我们自己也不能带来真正的价值。因此，我们必须首先在执行此系统之前先知道我们的效率瓶颈在哪里。在传统模型中，无论是瀑布型开发还是敏捷开发，它都无法摆脱从操作或产品方面提出的需求，然后经过一系列开发并进行在线测试。
我们可以保存开发，测试以及操作和维护吗？
在开发移动电子商务促销页面时，我们必须达到快速交付和低维护成本的效果。这次，我们通常会在页面上制作完整的组件，例如图片组件，文本组件，产品列表组件，优惠券组件等等，但是即使我们这样做，我们也可能花费两到三个人力来开发页面。
此外，为了应对操作策略并随时调整页面布局，我们可能会在背景管理系统中添加许多配置，但即使如此，它仍然无法涵盖所有维护方案。
除了移动端页面外，我们在开发背景管理系统的页面时还具有许多痛点。我们都知道，后端管理系统实际上是一个视觉数据库。内部的内容无法离开其祖先。它不过是数据采集，数据显示，用户输入，控制验证和数据提交。这些页面中的大多数都是相同的形式。如果我们绘制大量业务组件以减少开发工作量，则不可避免地会发展这些业务组件的控制逻辑开发和内存负担。如果我们继续封装具有更强输出的组件，我们将不会易于自定义和维护自由度和更多组件属性。
既然我们已经决定朝着低的代码方向发展，我们必须在采取此步骤之前清楚地思考，是我们转换开源项目还是完全发展自己。我认为此问题需要基于实际情况。
如果您想做的项目更专注于显示，并且将来只会添加少量的个性化内容，那么我建议您找到一个出色的低代码开源项目进行转换。市场上有出色的移动低代码，例如H5-Dooring。该平台还具有不需要开发的PC低代码平台。
相反，自我研究会更好。
在研究之前，需要尽可能详细地进行自我研究的准备。毕竟，我们没有人想写下一半的计划。
磅的一百页的布局和操作形式模仿了布局和操作形式中的H5多功能项目。左侧是组件库，中间是一个画布，右侧是配置属性。此外，我们还需要计划组件库和组件相应的配置，设计数据结构，将整个封闭的主要模块分开循环，设计模块的详细信息等。
在不同的末端，页面布局的形式将有很大的差异。
在建议使用之前，请分享我们先进的坑。
首先，我们选择了地板的上下堆栈布局 - 级别的布局。原因是移动终端的移动很简单。操作只需要超越图片，文本，产品列表，超链接和其他组件即可实现一定的促销。尽管我们预计将来可能会有一个组件，我们不注意。比例E -Commerce平台，例如JD.com和TAOBAO给我们带来了沉重的打击。如果我们的施工系统无法做到这一点，我们将无法支持页面上的容器组件（例如标签列或导航栏）的存在。618，我们必须使用一种非常优雅的方法来解决组件嵌套的问题，并且维护和操作成本很高。
之后，当我们开发出开发的背景可视化系统时，我们发誓不要重复相同的错误。这段时间选择了更复杂的免费布局，并且使用组件之间的关系使用树结构来实现“免费布局。”
因此，请尝试被可视化，并给您一个建议：不要犹豫，直接进入免费布局！
除了针对不同设备的不同设计外，不同的用户还需要考虑系统要在多大程度上进行。
帕斯卡（Pascal）的著名父亲说了一个词：程序=数据结构 +算法，我认为数据结构应在算法中设计，并且数据结构将在很大程度上确定算法的方向。因此，当我开始编写设计时，计划，我选择从数据结构的设计开始。
设置页面后，实际导出结果大约两个方向。
描述文件的优点是：
但这也有一个明显的劣势：
除了源代码的便利性外，除了二级开发的便利性外，我认为这些缺点是最重要的：
我们选择DSL说明文件的第一个基础作为页面导出。为了解决自定义组件和自定义逻辑注入的问题，我们在一定程度上采用了自定义插槽组件和上下文逻辑呼叫。
完成数据结构的设计后，我们在模块上进行了一般拆分。整个系统由几个重要模块组成：
编辑器负责呈现组件库，自由布局的形式，组件的配置，虚拟数据中心的描述以及逻辑布置。
渲染设备负责组件渲染，安排逻辑的执行以及数据传输的调度。
数据中心是核心模块。它保留了运行时页面的数据状态。是否要读取在运行时显示或存储用户输入数据的数据，它是通过数据中心执行的。
行为的中心是对互动的重要依赖，因为我们的系统不仅需要支持页面布局结构的构建，而且还需要制定逻辑安排。编辑器的逻辑布置系统生成的行为描述文件将执行渲染器行为调度程序的特定逻辑。
整个闭环可能是这样的：
之前，我们专注于自由布局的好处。那么应该如何实现呢？
在编辑级别，如果有现成的解决方案，例如三方拖放处理库，它更适合其自己的产品表格，则强烈建议您直接使用它而不重复轮子。我们选择处理阻力并拖动事件以实现免费布局。要点是处理拖动事件的拦截和着陆点的位置。我们在编辑器中的自由布局上进行了这些操作：
在渲染设备级别上，很容易递归渲染组件，但是有必要处理每个组件的上下文信息。上下文信息非常重要。数据中心，例如表中的行数据！
在架构图中，更令人困惑的是数据中心和行为中心。什么是数据中心？
简而言之，这是一个响应对象。从中获取组件渲染时所需的数据，并在其中输入数据，例如用户输入也存储在其中。源也是如此。
白色的白色图片是从系统中图片显示组件的配置截获的。它配备了图片显示数据的来源和数据中心对象的字段。数据中心与行为的链字段名称，视图和数据绑定相关联。
左侧的大黑色图片是数据中心的简单实现。我们需要使数据中心成为响应，以确保可以顺利进行数据驱动的页面。
为什么要构建数据中心？因为通常我们的页面渲染和其他数据存储在页面状态或全局状态中，当我们要渲染页面和逻辑处理时，我们必须考虑数据循环。数据的主要来源是接口和用户输入。页面配置是静态的。接口和用户输入是运行时。两者应由两者组织，需要低耦合。进入数据中心并将其乘以组件本身。
这样，记忆和数据数据的两个操作的执行者是黑框。获取数据的人不知道数据存储的人，并且存储数据的人不知道我存储的数据是否库存。因此，这种设计方法已经很好地实现了静态配置和运行状态的有机组合。
我们始终需要一个控制数据中心的数据传输的地方。如果数据中心没有数据或数据的源我们可以在哪里定义组件行为。
在上图中，您可以看到左图是从按钮组件的配置中截取的，这意味着按钮的点击事件义务被称为“搜索”。此大图显示了界面。行为安排。左侧是行为库，中间是行为布置的行为，右侧是行为的配置。
在行为中心，我们更方便地控制逻辑。通过它，我们可以实现数据采集并显示页面初始化时，在单击按钮时收集表单数据并请求接口，依此类推。
在编辑级别，行为中心的逻辑布置使用ANTV G6引擎进行渲染。输出数据结构还指ANTV G6的输入数据结构。
在渲染设备级别，在收到行为组的信号后，行为中心将在此行为组中找到起始节点，然后执行不同类型的logogic，在执行完成后，该节点的下一个相关节点将继续要执行，直到完成整个链接的逻辑执行为止。
在三月/人员中开发每个系统之后，最终的施工系统支持了150多个操作页面的99％的施工需求，而管理背景施工系统可节省约50％的开发成本。
但是，我们的解决方案也有缺点。许多事情需要是常规的。尽管有文档，但存在不可避免的认知差异，而且由于系统略有巨大，因此第一个开发的成本将相对较高，但是必须在舒适之前退缩。
如果每个人的团队也都有尝试的想法，我强烈建议您考虑它是否可以真正为团队带来价值，可以真正解决大多数痛苦点，然后确保有可靠的人，足够的时间和完美的技术解决方案。
这是我们的管理背景的屏幕截图，以构建系统工作台。得益于自由布局，行为中心和数据中心的组合，可以轻松支持各种形式的背景管理页面，例如列表页面，表单页面和详细信息页面。在背景管理系统中，没有不同的显示组件和输入组件。
在屏幕截图中，设置了背景管理系统的搜索页面列表。列表页面中的搜索条件区域实际上是表单模块。每个输入组件将用户输入的数据发送到数据中心。单击搜索按钮时，您可以在单击搜索按钮时获取用户输入并从数据中心调用接口。接口调用成功成功。将接口行为存储到数据中心后，数据中心的响应使表零件同步并更新页面的表部分。
目前，我们仅到达低代码字段的主要阶段，我们需要逐步迭代到零代码甚至智能开发。
下一个计划是增加不同场景的常用模板组件和页面模板，以降低从头开始构建页面的成本。此外，我们将体验从实践中的施工系统的缺点，以提高其自动化程度和组件库丰富。
为了更令人兴奋，请注意我们的公共帐户“一百瓶技术”，有不规则的好处！原创：https：//juejin.cn/post/70956764448555401223