[发明专利]一种通用引导组件的实现方法、装置、电子设备和介质

说明书

本申请公开了一种通用引导组件的实现方法、装置、电子设备和介质，包括：获取标记元素集合和标记元素集合中各个标记元素的顺序信息；判断各个标记元素和蒙层的祖先元素的布局方式是否为绝对定位或者固定定位；若是，则根据顺序信息，显示各个标记元素对应的预创建静态图片；若否，则设置各个标记元素的布局方式为相对定位，并设置各个标记元素的层级大于蒙层的层级；根据顺序信息，显示各个标记元素和对应的提示信息。该方法仅通过设置标记元素的布局方式和层级，或通过显示各个标记元素的预创建静态图片，就能使标记元素浮在最上层达到引导目的。降低重复工作量，提高引导组件复用率。

技术领域

本申请涉及计算机技术领域，特别涉及一种通用引导组件的实现方法、装置、电子设备和介质。

背景技术

在web应用中，无论是PC还是H5页面，在新增功能后，通常需要引导用户一步一步使用新功能，从而达到更好的用户体验，以及增加新功能的曝光。

相关技术中，通过CSS样式控制页面元素的层级，设置定位属性为fixed，并计算当前显示元素的位置信息，将位置值赋值给需要高亮的元素，加上蒙层，实现功能步骤在页面高亮显示，达到引导的目的。但是，由于改变页面元素的布局方式为Fixed，目标元素脱离文档流，会导致页面进行重排、重绘，增加资源成本，还会对低版本浏览器有一定的性能影响。

发明内容

本申请的目的是提供一种通用引导组件的实现方法，能够降低重复工作量，提高引导组件复用率。其具体方案如下：

第一方面，本申请公开了一种通用引导组件的实现方法，包括：

获取标记元素集合和所述标记元素集合中各个标记元素的顺序信息；

判断所述各个标记元素和蒙层的祖先元素的布局方式是否为绝对定位或者固定定位；

若是，则根据所述顺序信息，显示所述各个标记元素对应的预创建静态图片；

若否，则设置所述各个标记元素的布局方式为相对定位，并设置所述各个标记元素的层级大于所述蒙层的层级；根据所述顺序信息，显示所述各个标记元素和对应的提示信息。

可选的，判断所述各个标记元素和蒙层的祖先元素的布局方式是否为绝对定位或者固定定位之前，还包括：

获取所述各个标记元素的所有属性；

根据所述所有属性，创建所述各个标记元素对应的静态图片，并将所述静态图片作为所述预创建静态图片。

可选的，根据所述所有属性，创建所述各个标记元素对应的静态图片，并将所述静态图片作为所述预创建静态图片，包括：

根据所述所有属性，利用canvas创建所述各个标记元素对应的静态图片，并将所述静态图片作为所述预创建静态图片。

可选的，获取标记元素集合和所述标记元素集合中各个标记元素的顺序信息之前，还包括：

判断浏览记录表中是否存储有所述标记元素集合的历史浏览信息；

若否，则执行获取标记元素集合和所述标记元素集合中各个标记元素的顺序信息的步骤；

若是，则不执行获取标记元素集合和所述标记元素集合中各个标记元素的顺序信息的步骤。

可选的，根据所述顺序信息，显示所述各个标记元素对应的预创建静态图片之后，还包括：

移除所述蒙层和所述预创建静态图片；

根据所述顺序信息，显示所述各个标记元素和对应的所述提示信息之后，还包括：

移除所述蒙层和所述提示信息。

第二方面，本申请公开了一种通用引导组件的实现装置，包括：