基于网页的组件布局方法、装置、设备及存储介质制造方法及图纸

本发明专利技术实施例公开了一种基于网页的组件布局方法、装置、设备及存储介质。所述方法包括：当检测到针对目标网页中的目标组件的布局操作时，根据所述布局操作获取布局区域的关键确定信息，其中，所述布局区域具有预设形状；根据所述布局区域的关键确定信息，绘制预设形状的所述布局区域；在所述布局区域中插入并显示所述目标组件。通过本发明专利技术的技术方案，能够实现组件的个性化布局，提升用户体验。

Webpage based component layout method, device, device and storage medium

The embodiment of the invention discloses a webpage based component layout method, device, device and storage medium. The method includes: when the layout operation of the target component in the target page is detected, key determination information of the layout area is obtained according to the layout operation, in which the layout area has a preset shape; the layout area of the preset shape is drawn according to the key determination information of the layout area; The target assembly is inserted and displayed in the layout area. Through the technical proposal of the invention, the personalized layout of the component can be realized and the user experience can be enhanced.

【技术实现步骤摘要】
基于网页的组件布局方法、装置、设备及存储介质
本专利技术实施例涉及网页前端技术，尤其涉及一种基于网页的组件布局方法、装置、设备及存储介质。
技术介绍
随着网页前端技术的快速发展，越来越多的web界面能够显示一些功能块，这些功能块既可以帮助人们实现类似对话框式的交流，又可以使人们实现实时的帮助，获取到想要了解的内容。现有技术中由于这些功能块在web界面中的网页代码都是固定编写的，若想要改变这些功能块的布局，必须由网页开发者重新编写相应的功能代码，因此，这些功能块的布局方式无法由用户来随意改变，导致用户体验差。
技术实现思路
本专利技术实施例提供一种基于网页的组件布局方法、装置、设备及存储介质，以实现组件的个性化布局，提升用户体验。第一方面，本专利技术实施例提供了一种基于网页的组件布局方法，包括：当检测到针对目标网页中的目标组件的布局操作时，根据所述布局操作获取布局区域的关键确定信息，其中，所述布局区域具有预设形状；根据所述布局区域的关键确定信息，绘制预设形状的所述布局区域；在所述布局区域中插入并显示所述目标组件。第二方面，本专利技术实施例还提供了一种基于网页的组件布局装置，该装置包括：信息本文档来自技高网...

【技术保护点】
一种基于网页的组件布局方法，其特征在于，包括：当检测到针对目标网页中的目标组件的布局操作时，根据所述布局操作获取布局区域的关键确定信息，其中，所述布局区域具有预设形状；根据所述布局区域的关键确定信息，绘制预设形状的所述布局区域；在所述布局区域中插入并显示所述目标组件。

【技术特征摘要】
1.一种基于网页的组件布局方法，其特征在于，包括：当检测到针对目标网页中的目标组件的布局操作时，根据所述布局操作获取布局区域的关键确定信息，其中，所述布局区域具有预设形状；根据所述布局区域的关键确定信息，绘制预设形状的所述布局区域；在所述布局区域中插入并显示所述目标组件。2.根据权利要求1所述的方法，其特征在于，所述布局区域的所述预设形状包括矩形，所述布局区域的关键确定信息包括：与矩形的一条对角线对应的第一对角顶点坐标以及第二对角顶点坐标。3.根据权利要求2所述的方法，其特征在于，所述根据所述布局操作获取布局区域的关键确定信息，包括：根据所述布局操作，确定至少一个布局参考坐标；根据所述至少一个布局参考坐标以及与所述目标组件匹配的最小布局范围，获取所述布局区域的关键确定信息。4.根据权利要求3所述的方法，其特征在于，所述布局操作包括：点击操作；所述根据所述布局操作，确定至少一个布局参考坐标包括：按照所述点击操作的点击顺序记录各点的坐标。5.根据权利要求4所述的方法，其特征在于，所述根据所述至少一个布局参考坐标以及与所述目标组件匹配的最小布局范围，获取所述布局区域的关键确定信息，包括：若记录的点的数量为1，则确定所述点的坐标为第一对角顶点坐标；将所述第一对角顶点坐标中的横坐标和纵坐标分别按照与所述目标组件匹配的最小布局范围对应的边界长度进行移动；将经移动后得到的目标点的坐标确定为第二对角顶点坐标。6.根据权利要求5所述的方法，其特征在于，在将所述第一对角顶点坐标中的横坐标和纵坐标分别按照与所述目标组件匹配的最小布局范围对应的边界长度进行移动之后，还包括：若经移动后得到的目标点的坐标在所述目标网页的显示边界之外，则改变移动方向，直至所述目标点的坐标在所述显示边界之内。7.根据权利要求4所述的方法，其特征在于，所述根据所述至少一个布局参考坐标以及与所述目标组件匹配的最小布局范围，获取所述布局区域的关键确定信息，包括：若记录的点的数量大于1，则根据所述各点的分布信息确定第一对角顶点坐标和第二对角顶点参考坐标；根据所述第一对角顶点坐标与所述第二对角顶点参考坐标之间的距离，以及与所述目标组件匹配的最小布局范围对应的边界长度，确定第二对角顶点坐标。8.根据权利要求7所述的方法，其特征在于，所述根据所述各点的分布信息确定第一对角顶点坐标和第二对角顶点参考坐标，包括：根据所述各点的坐标判断所述各点是否均排列在一条直线上；若是，则获取所述各点组成的直线段的两个端点坐标，并根据所述两个端点坐标之间的位置关系确定第一对角顶点坐标和第二对角顶点参考坐标；若否，则分别获取所述各点中横坐标的最大值点和最小值点对应的极值横坐标，以及纵坐标的最大值点和最小值点对应的极值纵坐标，根据所述极值横坐标以及所述极值纵坐标确定第一对角顶点坐标和第二对角顶点参考坐标。9.根据权利要求4-8任一项所述的方法，其特征在于，在所述按照所述点击操作的点击顺序记录各点的坐标之后，还包括：按照预设顺序依次遍历各点的坐标；删除与上一记录点的距离小于预设距离阈值的点的记录。10.根据权利要求3所述的方法，其特征在于，所述布局操作包括：拖拽操作；所述根据所述布局操作，确定至少一个布局参考坐标包括：根据所述拖拽操作获取拖拽轨迹的起点坐标和终点坐标。11.根据权利要求10所述的方法，其特征在于，所述根据所述至少一个布局参考坐标以及与所述目标组件匹配的最小布局范围，获取所述布局区域的关键确定信息，包括：根据所述起点坐标和所述终点坐标之间的位置关系确定第一对角顶点坐标和第二对角顶点参考坐标；根据所述第一对角顶点坐标与所述第二对角顶点参考坐标之间的距离，以及与所述目标组件匹配的最小布局范围对应的边界长度，确定第二对角顶点坐标。12.根据权利要求7或11所述的方法，其特征在于，所述与所述目标组件匹配的最小布局范围对应的边界长度包括横向最小边界长度和纵向最小边界长度；所述根据所述第一对角顶点坐标与所述第二对角顶点参考坐标之间的距离，以及与所述目标组件匹配的最小布局范围对应的边界长度，确定第二对角顶点坐标，包括：确定所述第一对角顶点坐标与所述第二对角顶点参考坐标之间的横向距离和纵向距离；若所述横向距离大于所述横向最小边界长度，则将所述第二对角顶点参考坐标的横坐标值确定为第二对角顶点坐标的横坐标值；否则，将所述第一对角顶点坐标的横坐标移动所述横向最小边界长度后的值确定为第二对角顶点坐标的横坐标值；若所述纵向距离大于所述纵向最小边界长度，则将所述第二对角顶点参考坐标的纵坐标值确定为第二对角顶点坐标的纵坐标值；否则，将所述第一对角顶点坐标的纵坐标移动所述纵向最小边界长度后的值确定为第二对角顶点坐标的纵坐标值。13.根据权利要求1所述的方法，其特征在于，所述目标组件包括会话组件。14.根据权利要求13所述的方法，其特征在于，在当检测到针对目标网页中的目标组件的布局操作时，根据所述布局操作获取布局区域的关键确定信息之前，还包括：封装会话传入接口和数据获取接口；将所述会话传入接口...

【专利技术属性】
技术研发人员：侯丽丽，刘鸣，
申请(专利权)人：上海器魂智能科技有限公司，
类型：发明
国别省市：上海,31