飞码LowCode前端技术：如何便捷配置出页面

简介

飞码是京东科技平台研发部研发的低代码产品，可使营销运营域下web页面快速搭建。本文将从三个方面来讲解如何便捷配置出页面，第一部分从数据、事件、业务支持三个方面进行分析，第二部分从模板与页面收藏与升级、页面UI结构、画布功能三个方面进行分析，第三部分从监控、页面配置、页面数据导入导出以及其他能力四个方面进行分析。

一、第一部分：数据、事件、业务支持

1、数据设计

飞码LowCode前端技术（一）种对数据结构进行了分析，飞码是数据驱动+事件驱动，在编辑态配置区域需要页面中各种数据（接口出参、组件出参、页面入参、业务逻辑数据）。该部分仅说明飞码如何实现配置逻辑与规则的，如何实现数据驱动会在后续小节说明。

数据复用：一个组件的入参是固定值，例如select1组件list是一个固定值1，select2组件list也是一个固定值1，这个就需要数据的复用能力。飞码解决方案详见图1

图1

数据配置：数据配置包含了数据A与数据B之间是赋值关系、逻辑判断关系，还是组合关系。结合业务实际情况，飞码归纳常见的数据配置情况。详见图2

图2

对任何一个可配置的组件属性值，均可以通过全局数据视角进行配置。数据源是出参，设置数据是给某个组件或Api，弹框等设置数据。当我们需要处理复杂的业绩时，可以通过处理函数进行快速处理。飞码中的函数是常见的js函数，飞码也内置了form表单的校验函数，form校验规则也可以进行复用。该部分在事件小节说明。飞码支持用全局视角看页面的所有数据情况以及流转情况。

数据导入：页面配置过程需要看到页面中所有数据字段及数据层级结构，飞码认为有四种方案可以选择。一是对组件进行一一配置；二是先配置页面之后在组件中进行选择；三是通过组件id自动生成组件关联属性，之后与接口进行一一配对；四是组件与页面均可以配置，配置之后具有一致性。飞码使用方案四，可以组件层面进行关联字段配置，也可以页面进行配置。在实际搭建页面的情况下，发现页面级别的导入数据更为便捷。飞码目前也支持j-api、bff与组件关联之后进行导入能力。页面级别的数据字段导入详见图3

图3

结合j-api可以通过接口数据直接生成页面的一部分，并实现组件字段与页面字段一致性。详见图4

图4

2、事件设计

飞码对事件进行了分类，分为导航、组件显示&隐藏&禁用、数据、弹框&toast、操作、form操作、其他。如图5所示为事件编排区域。飞码中事件也支持配置，图5右侧区域为单事件节点的实例配置。每一个事件通过JSON配置实现（飞码lite版配置），支持动态加载额外新增事件。

图5

飞码对常见事件进行提取归类，枚举如图5中左侧区域。通过编排方式进行业务配置。

事件配置：组件、页面生命周期、其他事件调用情况会使用事件。创建事件之后飞码会在缓存中记录事件id以及事件名称与相关的事件编排。研发可以在组件事件、页面事件、其他事件中进行配置。飞码编辑态事件流程如图6所示。

图6

事件与数据打通：如图2所示，飞码支持在事件中进行数据的配置，例如messag中（如图7），点击js编辑器会唤醒图2，之后可以配置messag的提示语，提示语来自接口，飞码使用$api开头，接口id为其属性值，之后一级一级找错误信息即可。

图7

事件的复用：飞码支持事件A，调用事件B，事件B调用事件C。也支持事件A根据配置的逻辑规则调用自己。

事件的串行与并行：飞码事件编排中任何一个节点的输出点支持作为多个事件节点的输入点。遇到多个事件同时触发的时候，可以实现事件的并行与串行执行。
问题：事件编排错误会导致事件死循环怎么解？

事件死循环一般是由于条件逻辑书写错误导致的，ProCode开发过程中也会遇到类似情况，方法A调用了方法B，方法B又调用了方法A，一直循环调用。常规配置导致的死循环飞码FMHelper会帮助监测到，当研发书写js导致的死循环飞码运行态FMHelper会最大能力监测，由于运行态数据未知性，部分死循环监测不到。该部分后续会加强逻辑处理。

3、业务支持设计

飞码的业务支持中，有权限与埋点。为了便捷研发搭建页面飞码增加了常见函数支持。
权限设计：已组件与页面维度，权限可以分为不可见与不可交互两种情况。A用户没有权限看到a组件（或者页面），B用户没有权限对a组件（或者页面）进行交互，C用户可以看到a组件（或者页面）并可以交互。
飞码权限依赖京东科技统一权限系统，实现流程如图8所示。

图8

考虑安全节省带宽，对隐藏页面或者组件，飞码服务不会下发相应的DSL到飞码的运行态。
埋点设计：接入公司内部奇点平台，飞码对埋点进行分类。分为组件类型埋点（含曝光），与事件类型埋点。流程详见图9

图9

飞码对组件，页面，事件的埋点方案，是通过配置化实现的。大大降低了理解成本与跨平台配置成本。

函数便捷配置能力：上一个章节中提到飞码官方提供的常见函数，常见函数处理枚举情况。该部分主要便捷研发书写js函数。

问题：函数是不是具备动态扩展能力？

函数与组件不太一样，常见的函数已全部枚举到飞码。飞码之前思考过通过飞码后管动态下发函数能力，发现实际使用场景并不多。目前飞码不支持动态扩展函数能力。后续依据情况是否增加函数动态扩展能力。

小结

本小节分析了飞码如何便捷配置出页面，分别对数据、事件、业务支持方面进行了详细介绍。数据配置、事件配置均可以通过全局视角看到整个页面相关数据结构与逻辑结构。业务支持方面最大限度的实现配置化，同时也支持函数配置，大大减少了研发书写js时间成本。

第二部分：模板与页面收藏与升级、页面UI结构、画布功能

1、模板与页面收藏升级设计

模板收藏与升级：在飞码LowCode前端技术（二）章节中对模板的收藏进行了说明。飞码模板（包括官方模板）可以进行升级，编辑。飞码对模板分类以及升级流程方案详见图10

图10

当用户收藏模板之后，可以在飞码管理端进行编辑，编辑之后飞码服务端会更新对应的模板DSL。飞码没有对模板的版本进行管理，模板的使用是一个快照，当研发用户拖动模板到编辑页面的时候，会对模板中组件id进行更新。飞码的模板DSL与飞码页面DSL保持一致，详见飞码LowCode前端技术（一）。

页面收藏与升级：飞码的页面收藏能力在飞码后管进行操作，飞码页面的收藏是一个快照。搭建页面期间会遇到很多类似的页面，这样就可以通过页面收藏，之后在进行编辑。页面收藏逻辑详见图2

图11

页面收藏之后在使用页面的时候会创建一个页面快照，生成一个新页面id。页面收藏，个人页面收藏同时也是快手的收藏。当官方页面、个人页面变化的时候，之前收藏的页面不会发生变化。

问题：是不是对模板与页面增加版本号？之后根据版本号进行选择性配置。

飞码之前考虑过模板与官方页面都有版本号进行控制，在使用阶段发现版本号的选择与理解会增加用户心智负担。在web页面中复用的模板与页面并不太多，飞码暂时没有模板与页面模板版本号，后续业务根据情况考虑是否增加。

2、页面UI结构设计

页面UI结构，飞码用树的形式实时展示。当画布是页面级编排的时候，UI结构是页面级别的。当画布是局部视图（开启另外一个视图，实现局部放大能力，实现视图的便捷配置）时候，UI结构是局部视图级别的。可以理解为UI结构与当前画布中组件结构一一对应。如图12

图12

页面UI数据结构在[飞码LowCode前端技术（一）]中对数据结构进行了分析。飞码在编辑态中数据结构进行了区分，分为页面数据结构、局部视图数据结构。局部视图数据结构数据是缓存数据，使用detailViewCanvas进行缓存（如何与页面数据结构结合，在画布小节说明）。UI数据结构整体设计详见图13

图13

编辑态的页面UI数据结构与运行态（投产）是一致的。

3、画布设计

画布的详细设计与技术实现详见之后的章节，该小节侧重描述画布功能以及局部视图如何与主视图结合的能力。

支持精准拖拽：详见图14

图14

飞码组件在布局的时候对于目标组件进行上、右、下、左四个区域区分。实时监控鼠标位置，之后对目标组件进行判断。若支持子组件的组件中没有组件，例如div，放入第一个组件的时候会显示“里”。详见图15所示

图15

组件的拖拽会实时监控目标组件（包括是不是支持内部增加组件），鼠标位置。具体算法逻辑会在后续章节中进行说明。

上下移动复制删除：

图15可以看出，飞码画布会对选中组件实时监控父级与兄弟组件，进而确定是否支持上下移动。飞码组件复制是对组件以及子组件完全复制，包括子组件中配置的事件或者数据。

特定组件扩展特定能力：

飞码认为form组件，table组件，为复杂类型组件。飞码认为复杂组件的配置便捷性需要挨着组件区域最近的地方，最大能力提升便捷性。

对form组件，经常配置内部组件布局。详见图16

图16

对table组件，经常配置内部组件布局。详见图17

图17

飞码对table中的组件进行了列的拖拽排序，prop与labe的快速设置，快速增加一列能力。同时飞码对table组件与右侧配置表单进行了绑定，实现快速定位能力。

问题：飞码对组件便捷区3个点(…)是否支持远程组件下发的时候一起下发对应能力？

飞码对该部分能力还没有开放，目前仅支持官方组件的能力扩展。后续根据实际业务场景考虑是否开放该部分能力。

复杂区域配置应支持局部画布：

图16中el-table-column区域配置多个按钮的时候，点击该区域内的小方块，会唤起局部视图。局部视图中与页面画布功能完全一致。可以随意对组件进行组合。在[飞码LowCode前端技术（一）]中介绍了飞码弹框是通过一个数组进行管理的。通过弹框的数据结构可以看出，每一个弹框是一个局部视图，通过事件唤起弹框。

局部视图如何与主视图结合：

飞码将局部视图划分为两种：一是弹框类（包含Dialog，drawer），二是组件类（目前包含table、tabs）

第一类：弹框是通过事件触发的，于是飞码事件编排中选择对应的弹框即可。在数据结构中弹框与事件有关，与页面无关。

第二类：该部分在页面或者弹框内，与常规数据结构一样，通过children字段表示。

小结

本小节分析了飞码如何便捷配置出页面-3，分别对模板与页面收藏与升级、页面UI结构、画布功能三个方面进行了详细介绍。飞码的UI结构设计、画布设计符合常规设计模式，对弹框进行了统一管理。

第三部分：监控、页面配置、页面数据导入导出以及其他能力

1、监控（FMHelper）设计

飞码监控需要做两件事情，一是编辑态怎么帮助搭建人员快速定位问题并给出可能出现的问题点，二是在运行态最大能力定位问题（该部分还在研发中）。本节仅讲述编辑态中如何设计与定位问题的。飞码对FMHelper划分四部分分别是页面、弹框、事件、API。详见图18

图18

FMHelper在编辑态时会对整个页面的DSL进行监测，依据搭建中常见错误信息进行汇总分类，并形成配置表。配置表部分会在下一章节进行说明。飞码将问题分为error与warn两个级别。详见图19

图19

飞码依据页面中所有配置项以及事件链路关系，对于大部分问题都可以定位到错误配置位置，点击查看即可。

2、页面配置设计

飞码页面配置分为样式、事件、数据、配置共4部分组成。详见图20所示。

图20

事件：页面事件与vue页面生命周期函数一一对应，飞码同时支持在一个生命周期函数中配置多个事件。选择相关的事件，即可在运行态的时候调用相关事件。

数据：数据分为入参配置，出参配置。入参配置的时候配置一个schema或者配置一些键值对，页面在运行态的时候会实时监控入参参数的变化，同时页面中的其他组件存在依赖关系的也会发生先关变化。出参配置这部分能力已转移到事件编排，在页面配置区域目前禁用状态，后续飞码会对其隐藏。详见图21。

图21

飞码页面入参有2种情况，一是通过飞码对外提供的sdk，标签引入之后对inData进行设置。二是会取投放出去页面的url中的参数。详见图22

图22

配置：该区域是页面业务型配置，包含整个页面API的host，API返回正确的code码，埋点与权限。详见图23所示

图23

页面在环境切换情况下，只需要在页面配置->配置 进行相关配置即可。

3、页面数据导入导出设计

测试环境、预发环境、线上环境对应的服务是不一样的。测试环境的数据无法同步到预发环境。测试环境调试好的页面，如何在预发环境上快速上线？飞码通过导出、导入能力实现页面的快速复制能力。如图24

图24

导出：会对页面整个数据结构进行数据加工，去掉空字段，删除事件编排中无用字段。

导入：与导出相反，会对整个导入的DSL数据结构进行加工，增加必备字段，增加事件编排中必备字段。

4、其他能力设计

回退上一步：在实践中发现画布拖拽（组件移动、兄弟组件之间的布局等）之后并不是想要的效果，飞码提供了一键回退能力，如图7所示“画布 上一步（4）“，飞码仅支持回退5步操作。详见图25

图25

问题：为什么仅支持5步回退？

搭建页面期间画布误操作情况一般是1-2步，飞码设计5步并没有考虑回退太多步骤的情况，其中5也是配置的一个数字。可以修改，支持更多步。

历史记录：操作保存、预览按钮的时候，飞码会记录当前页面DSL信息，记录在服务服务器。效果图见图26

图26

点击放大按钮可以看到点击保存、预览按钮时候的截图。点击“应用到当前页面“，可以切换到之前的历史版本。点击”复制DSL“，可以复制历史版本的DSL，之后开发其他页面使用或者对DSL进行对比。

预览：点击“预览“按钮之后，即可对当前页面进行预览，会跳转到飞码运行态页面。目前飞码FMHelper还没有对不合格（配置有问题）的页面进行拦截，飞码对FMHelper定位是一个提示工具。随着FMHelper能力变强，在智能监测与校验方面给页面搭建赋能。

问题：飞码测试环境预、发环境与线上环境在存量页面中怎么对比DSL的区别？

测试环境服务器无法与预发、线上打通。飞码目前支持预发环境与线上环境DSL的对比以及页面配置对比，在预发环境调试好的页面，在线上环境只需要同步即可。也可对同步的内容进行编辑。

本小节分析了飞码如何便捷配置出页面-4，分别对监控、页面配置、页面数据导入导出以及其他能力四个方面进行了详细介绍。FMHelper是飞码的一个辅助工具，帮助搭建人员快速定位问题、页面配置目的是在运行环境不一致的情况下对变量参数进行快速设置，数据导入导出解决了环境数据不同步问题以及提供页面快速复制能力。下章节介绍飞码LowCode前端技术：如何便捷快速验证实现投产及飞码探索。

作者：京东科技 王光辉

来源：京东云开发者社区 转载请注明来源