一种界面处理方法及相关装置与流程

本申请涉及计算机，尤其涉及一种界面处理方法及相关装置。

背景技术：

1、在可视化的界面编辑器中，开发者能够通过丰富的图形组件，以及布局图形组件的交互操作，快速地在画布编辑区中搭建起专业、美观的应用界面。传统的界面编辑器是将交互事件绑定到画布视图层的图形组件上，导致存在交互视图跟随不流畅与图层遮挡等一系列问题，且为了满足灵活交互能力，容易引发交互回调问题，开发维护成本高，不利于提高界面开发效率。

技术实现思路

1、本申请实施例提供了一种界面处理方法及相关装置，有利于提高界面开发效率。

2、第一方面，本申请实施例提供了一种界面处理方法，所述方法包括：

3、获取画布编辑区的画布视图层收到的第一交互操作，所述第一交互操作是针对待编辑的应用界面中的目标组件输入的；

4、响应于所述第一交互操作，在所述画布编辑区的画布交互层中创建所述目标组件的替代对象；

5、响应于针对所述替代对象的第二交互操作，在所述画布交互层中显示所述替代对象的布局变化画面，并在所述第二交互操作完成时确定所述替代对象的布局数据；

6、根据所述替代对象的布局数据在所述画布视图层中重新渲染所述目标组件，以展示编辑后的应用界面。

7、第二方面，本申请实施例提供了一种界面处理装置，所述装置包括：

8、获取单元，用于获取画布编辑区的画布视图层收到的第一交互操作，所述第一交互操作是针对待编辑的应用界面中的目标组件输入的；

9、处理单元，用于响应于所述第一交互操作，在所述画布编辑区的画布交互层中创建所述目标组件的替代对象；

10、所述处理单元，还用于响应于针对所述替代对象的第二交互操作，在所述画布交互层中显示所述替代对象的布局变化画面，并在所述第二交互操作完成时确定所述替代对象的布局数据；

11、所述处理单元，还用于根据所述替代对象的布局数据在所述画布视图层中重新渲染所述目标组件，以展示编辑后的应用界面。

12、在一实施例中，所述替代对象是由多条参考线描述的，所述处理单元具体用于：在针对所述替代对象进行第二交互操作的过程中，根据所述替代对象的布局变化方式，从所述替代对象的多条参考线中确定出第一参考线；根据预设选择策略和所述第一参考线，从参考线集合中确定出第二参考线，所述参考线集合是由所述画布视图层中除所述目标组件以外的其它组件的多条参考线构成的；根据所述第一参考线和所述第二参考线之间的位置关系，显示所述替代对象的目标辅助线，所述目标辅助线用于辅助所述第二交互操作。

13、在一实施例中，所述处理单元具体用于：若所述第一参考线与所述第二参考线之间的距离小于预设阈值，则确定所述替代对象的目标辅助线为吸附辅助线，并显示所述吸附辅助线；若所述第一参考线与所述第二参考线之间的距离大于或者等于所述预设阈值，则确定所述替代对象的目标辅助线为间距辅助线，并显示所述间距辅助线；若所述第一参考线与所述第二参考线满足对齐条件，则确定所述替代对象的目标辅助线为对齐辅助线，并显示所述对齐辅助线。

14、在一实施例中，所述处理单元具体用于：若所述第一参考线与所述第二参考线之间的距离小于所述预设阈值，则根据所述第二参考线的位置信息，调整所述替代对象的布局数据，以使所述替代对象吸附至所述第二参考线。

15、在一实施例中，所述获取单元具体用于：根据所述目标组件的组件标识从所述目标组件的组件列表配置数据中获取所述目标组件的边框配置数据；所述处理单元具体用于：根据所述目标组件的边框配置数据，在所述画布编辑区的画布交互层中创建所述目标组件的替代对象。

16、在一实施例中，所述处理单元具体用于：显示组件选择区域，所述组件选择区域包括组件库中的多个组件；响应于针对所述组件选择区域中的所述目标组件的添加操作，获取所述目标组件的渲染数据，所述渲染数据包括渲染逻辑代码和属性配置文件；根据所述目标组件的渲染逻辑代码，在所述画布编辑区的画布视图层中渲染所述目标组件；根据所述目标组件的属性配置文件显示属性配置区域，所述属性配置区域用于调整所述目标组件的属性，并更新所述属性配置文件。

17、在一实施例中，所述获取单元具体用于：获取目标组件的待测试数据，并利用开发者工具对所述待测试数据进行处理，生成所述目标组件的测试界面，所述待测试数据包括渲染逻辑代码和属性配置文件；

18、所述处理单元具体用于：在所述测试界面中对所述目标组件进行测试处理，得到所述目标组件的测试结果；当所述测试结果指示测试通过时，将所述目标组件的待测试数据确定为所述目标组件的渲染数据，并将所述目标组件添加到所述组件库中。

19、在一实施例中，所述处理单元具体用于：响应于页面预览指令，根据所述画布视图层包括的各个组件的特征数据展示编辑完成的应用界面，所述特征数据包括渲染数据和对应的替代对象的布局数据中的一种或多种；响应于针对所述编辑完成的应用界面的数据导出指令，根据所述画布视图层包括的各个组件的特征数据生成所述编辑完成的应用界面的工程代码文件。

20、第三方面，本申请实施例提供了一种计算机设备，该计算机设备包括处理器、通信接口和存储器，该处理器、通信接口和存储器相互连接，其中，该存储器存储有计算机程序，该处理器用于调用该计算机程序，执行上述任一可能实现方式的界面处理方法。

21、第四方面，本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序被处理器执行时实现该任一可能实现方式的界面处理方法。

22、第五方面，本申请实施例还提供了一种计算机程序产品，上述计算机程序产品包括计算机程序或计算机指令，上述计算机程序或计算机指令被处理器执行实现本申请实施例提供的界面处理方法的步骤。

23、第六方面，本申请实施例还提供了一种计算机程序，上述计算机程序包括计算机指令，上述计算机指令存储在计算机可读存储介质中，计算机设备的处理器从上述计算机可读存储介质读取上述计算机指令，上述处理器执行上述计算机指令，使得上述计算机设备执行本申请实施例提供的界面处理方法。

24、在本申请实施例中，通过引入分层架构，实现了画布交互层和画布视图层的解耦分离，同时通过画布交互层和画布视图层之间的状态消息同步，使得画布视图层能够利用画布交互层中的替代对象的布局数据重新渲染目标组件，提升了可扩展的画布交互能力，降低了交互的开发与维护成本，有利于提高界面开发效率。

技术特征：

1.一种界面处理方法，其特征在于，所述方法包括：

2.根据权利要求1所述的方法，其特征在于，所述替代对象是由多条参考线描述的，所述方法还包括：

3.根据权利要求2所述的方法，其特征在于，所述根据所述第一参考线和所述第二参考线之间的位置关系，显示所述替代对象的目标辅助线，包括：

4.根据权利要求3所述的方法，其特征在于，所述方法还包括：

5.根据权利要求1-4中任一项所述的方法，其特征在于，所述在所述画布编辑区的画布交互层中创建所述目标组件的替代对象，包括：

6.根据权利要求1-4中任一项所述的方法，其特征在于，所述方法还包括：

7.根据权利要求6所述的方法，其特征在于，所述方法还包括：

8.根据权利要求1-4中任一项所述的方法，其特征在于，所述方法还包括：

9.一种界面处理装置，其特征在于，所述装置包括：

10.一种计算机设备，其特征在于，所述计算机设备包括存储器、通信接口以及处理器，所述存储器、所述通信接口和所述处理器相互连接；所述存储器存储有计算机程序，所述处理器调用所述存储器中存储的计算机程序，用于实现如权利要求1-8中任一项所述的界面处理方法。

11.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1-8中任一项所述的界面处理方法。

12.一种计算机程序产品，其特征在于，所述计算机程序产品包括计算机程序或计算机指令，所述计算机程序或计算机指令被处理器执行时实现如权利要求1-8中任一项所述的界面处理方法。

技术总结
一种界面处理方法及相关装置，可以应用于云技术、人工智能、区块链、车联网、智慧交通、智能家居等各种领域或场景，该方法包括：获取画布编辑区的画布视图层收到的第一交互操作，第一交互操作是针对待编辑的应用界面中的目标组件输入的；响应于第一交互操作，在画布编辑区的画布交互层中创建目标组件的替代对象；响应于针对替代对象的第二交互操作，在画布交互层中显示替代对象的布局变化画面，并在第二交互操作完成时确定替代对象的布局数据；根据替代对象的布局数据在画布视图层中重新渲染目标组件，以展示编辑后的应用界面。采用本申请的方法，有利于提高界面开发效率。

技术研发人员：詹海亮
受保护的技术使用者：腾讯科技（深圳）有限公司
技术研发日：
技术公布日：2024/4/22