低代码平台的远程组件适配方法、装置、设备及介质与流程

本发明涉及研发管理，尤其涉及一种低代码平台的远程组件适配方法、装置、设备及介质。

背景技术：

1、基于vue2前端框架的低代码平台通过组件拖拽大幅提升了页面搭建效率，在各种软件中已经被广泛使用。随着前端技术演进，团队内部积累了大量高性能的svelte组件。然而，将svelte组件作为远程资产接入现有的vue2平台面临以下问题：

2、一方面，跨框架机制差异导致适配困难。vue2基于虚拟dom（document objectmodel，文档对象模型）和响应式系统，而svelte采用编译时优化直接操作dom，两者的生命周期、数据流转及事件模型互不兼容，直接集成会导致渲染错误和通信阻断。

3、另一方面，现有方案往往需要针对每个svelte组件手动编写vue包装层或复杂的转换逻辑，缺乏通用适配层，导致接入成本高，无法满足低代码平台对组件资产“即插即用”的快速复用需求。

4、同时，vue与svelte组件的事件通信机制无法互通，低代码平台无法监听远程svelte组件交互事件，页面联动能力失效。

5、例如，在金融保险场景中，低代码平台拖拽搭建承保批单页面、风控指标监控大屏，页面内嵌高性能 svelte 大数据保单表格组件；直接接入时常出现表格数据更新停滞、滚动渲染错乱、组件销毁内存泄漏等问题。在医疗健康场景中，基于 vue2 低代码平台搭建门诊工作站、检验报告浏览页面，集成 svelte 开发的患者多时序检验趋势图组件，极易发生图表初始化失败、患者指标数据双向同步失效，严重影响业务操作连续性。

6、因此，如何能够屏蔽底层框架差异，提高平台与远程组件的适配性，成为亟待解决的问题。

技术实现思路

1、本发明提供低代码平台的远程组件适配方法、装置、设备及介质，其主要目的在于解决平台与远程组件之间适配性较差的问题。

2、第一方面，为实现上述目的，本发明提供的低代码平台的远程组件适配方法，包括：

3、获取外部业务组件源码，将所述外部业务组件源码编译为标准模块数据包；

4、构建所述标准模块数据包对应的在线远程链接，并根据预设的低代码平台生成组件标准元数据；

5、在所述低代码平台进行远程开发组件加载时，根据所述在线远程链接及所述组件标准元数据提取所述远程开发组件的组件构造函数；

6、利用预构建的适配中间层合并所述组件标准元数据中的组件参数，利用所述组件构造函数生成基于合并组件参数的可运行组件实例；

7、监测所述低代码平台的用户配置变更，根据所述用户配置变更对所述可运行组件实例进行参数更新，得到参数同步组件实例；

8、利用所述适配中间层监听所述参数同步组件实例的原生事件列表，根据所述原生事件列表对所述参数同步组件实例进行事件联动更新，生成目标组件实例。

9、第二方面，本发明还提供一种低代码平台的远程组件适配装置，包括：

10、源码编译模块，用于获取外部业务组件源码，将所述外部业务组件源码编译为标准模块数据包；

11、数据构建模块，用于构建所述标准模块数据包对应的在线远程链接，并根据预设的低代码平台生成组件标准元数据；

12、组件构造函数提取模块，用于在所述低代码平台进行远程开发组件加载时，根据所述在线远程链接及所述组件标准元数据提取所述远程开发组件的组件构造函数；

13、可运行组件实例生成模块，用于利用预构建的适配中间层合并所述组件标准元数据中的组件参数，利用所述组件构造函数生成基于合并组件参数的可运行组件实例；

14、参数更新模块，用于监测所述低代码平台的用户配置变更，根据所述用户配置变更对所述可运行组件实例进行参数更新，得到参数同步组件实例；

15、事件联动更新模块，用于利用所述适配中间层监听所述参数同步组件实例的原生事件列表，根据所述原生事件列表对所述参数同步组件实例进行事件联动更新，生成目标组件实例。

16、第三方面，本发明还提供一种电子设备，所述电子设备包括：

17、至少一个处理器；以及，

18、与所述至少一个处理器通信连接的存储器；其中，

19、所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述所述的低代码平台的远程组件适配方法。

20、第四方面，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一个计算机程序，所述至少一个计算机程序被电子设备中的处理器执行以实现上述所述的低代码平台的远程组件适配方法。

21、本发明实施例中，通过将外部业务组件源码编译为标准模块数据包，可以将远程组件无缝接入低代码平台，适配现有所有低代码业务项目，提高远程组件与平台之间的适配性；构建标准模块数据包对应的在线远程链接，并根据预设的低代码平台生成组件标准元数据，可以贴合多种适配场景；加载远程开发组件时，根据在线远程链接及组件标准元数据提取组件构造函数，可以根据组件标准元数据中的组件参数生成可运行组件实例；

22、再通过监测低代码平台的用户配置变更，解决远程组件参数缺失报错问题，参数自动同步，无需人工补全默认配置，有效提高远程开发组件的跨框架渲染稳定性；监听参数同步组件实例的原生事件列表，根据原生事件列表进行事件联动更新，生成目标组件实例，可以屏蔽双框架事件机制差异，大幅降低低代码平台组件库拓展成本的同时提高svelte远程组件的适配性。

1.一种低代码平台的远程组件适配方法，其特征在于，所述方法包括：

2.如权利要求1所述的低代码平台的远程组件适配方法，其特征在于，所述将所述外部业务组件源码编译为标准模块数据包，包括：

3.如权利要求1所述的低代码平台的远程组件适配方法，其特征在于，所述根据预设的低代码平台生成组件标准元数据，包括：

4.如权利要求1所述的低代码平台的远程组件适配方法，其特征在于，所述利用预构建的适配中间层合并所述组件标准元数据中的组件参数，包括：

5.如权利要求1所述的低代码平台的远程组件适配方法，其特征在于，所述利用所述组件构造函数生成基于合并组件参数的可运行组件实例，包括：

6.如权利要求1所述的低代码平台的远程组件适配方法，其特征在于，所述监测所述低代码平台的用户配置变更，包括：

7.如权利要求1所述的低代码平台的远程组件适配方法，其特征在于，所述根据所述原生事件列表对所述参数同步组件实例进行事件联动更新，生成目标组件实例，包括：

8.一种低代码平台的远程组件适配装置，其特征在于，所述装置包括：

9.一种电子设备，其特征在于，所述电子设备包括：

10.一种计算机可读存储介质，存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7中任意一项所述的低代码平台的远程组件适配方法。