CN112487328A

CN112487328A - 一种通用引导组件的实现方法、装置、电子设备和介质

Info

Publication number: CN112487328A
Application number: CN202011453256.XA
Authority: CN
Inventors: 王洋洋
Original assignee: Zhengcaiyun Co ltd
Current assignee: Zhengcaiyun Co ltd
Priority date: 2020-12-11
Filing date: 2020-12-11
Publication date: 2021-03-12
Anticipated expiration: 2040-12-11
Also published as: CN112487328B

Abstract

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

Description

一种通用引导组件的实现方法、装置、电子设备和介质

技术领域

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

背景技术

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

可选的，还包括：

获取所有属性模块，用于获取所述各个标记元素的所有属性；

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

可选的，所述创建模块，包括：

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

第三方面，本申请公开了一种电子设备，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现如上述通用引导组件的实现方法的步骤。

第四方面，本申请公开了一种介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上述通用引导组件的实现方法的步骤。

本申请提供一种通用引导组件的实现方法，包括：获取标记元素集合和所述标记元素集合中各个标记元素的顺序信息；判断所述各个标记元素和蒙层的祖先元素的布局方式是否为绝对定位或者固定定位；若是，则根据所述顺序信息，显示所述各个标记元素对应的预创建静态图片；若否，则设置所述各个标记元素的布局方式为相对定位，并设置所述各个标记元素的层级大于所述蒙层的层级；根据所述顺序信息，显示所述各个标记元素和对应的提示信息。

可见，本申请当各个标记元素和蒙层的祖先元素的布局方式是绝对定位或者固定定位时，根据各个标记元素的顺序信息，显示各个标记元素对应的预创建静态图片；当各个标记元素和蒙层的祖先元素的布局方式不是绝对定位或者固定定位时，设置各个标记元素的布局方式为相对定位，并设置各个标记元素的层级大于蒙层的层级，再根据各个标记元素的顺序信息，显示各个标记元素和对应的提示信息，即仅通过设置标记元素的布局方式和层级，或通过显示各个标记元素的预创建静态图片，就能够使标记元素浮在最上层，实现标记元素高亮显示，达到引导目的，避免了相关技术中需要对页面进行重排、重绘，导致资源成本浪费的缺陷，降低了重复工作量，提高了引导组件复用率，改善用户体验。本申请同时还提供了一种通用引导组件的实现装置、一种电子设备和计算机可读存储介质，具有上述有益效果，在此不再赘述。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1为本申请实施例所提供的一种通用引导组件的实现方法的流程图；

图2为本申请实施例所提供的另一种通用引导组件的实现方法的流程图；

图3为本申请实施例提供的一种通用引导组件的实现装置的结构示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

在web应用中，当新增功能后，如果只通过客服引导或者其他方式，效率低下，且用户感知不强。当前的方案就是做一个界面引导用户进行操作；当用户进入页面后，页面自动唤起引导功能，提示用户操作流程，当引导结束后，下次再进入页面，引导功能不会再唤起。这样既减少了客服咨询量，又大大增强了新功能的感知度。相关技术中，通过图片的方式引导，将页面上需要引导的步骤，使它们在页面上的展现形式做成一张张图片，然后通过js脚本，控制图片显示，当用户点击下一步的时候进行图片切换。但是该方案的最大弊端是定制化开发，无法做到通用，每次类似需求，视觉需要重新做引导图，人力成本较高。还有通过CSS样式，控制页面元素的层级和定位方式为fixed并计算当前显示元素的位置信息，将位置值赋值给需要高亮的元素，加上蒙层，实现功能步骤在页面高亮显示，达到引导的目的，但是这种方式页面元素的布局为固定定位方式，目标元素脱离文档流，会导致页面进行重排、重绘，需要通过占位填充或者其他方式来避免重排导致的页面布局问题，浪费不必要的成本资源。

基于上述技术问题，本实施例提供一种通用引导组件的实现方法，能够降低重复工作量，提高引导组件复用率，具体请参考图1，图1为本申请实施例所提供的一种通用引导组件的实现方法的流程图，具体包括：

S101、获取标记元素集合和标记元素集合中各个标记元素的顺序信息。

本实施例中的标记元素集合，也就是需要被引导的元素集合。可以理解的是，通用引导组件需要知道被引导的元素，被引导元素的顺序即各个标记元素的顺序信息，也就是按照什么顺序显示被引导元素，以及提示的引导信息。还可以理解的是，页面接入通用引导组件流程可以是，加载组件js文件，将通用引导组件代码打包成一个公共的js文件供业务方加载，若要使用引导组件，在对应的页面加载该文件；然后，当通用引导组件获取到被引导元素后，还需要对被引导元素或被关注元素进行标记，得到标记元素集合，为了最小代价侵入业务代码，可以在对应的元素上进行标记，通过html的data-[attr]属性，标识引导的顺序，以及引导提示信息等。

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

可以理解的是，蒙层就是在当前页面罩上一层黑色半透明图层，但是引导的内容除外，图层上写有引导说明，有些还有相关按钮设计。蒙层的祖先元素即为文档本身。还可以理解的是，绝对定位和固定定位的布局方式为元素在网页中的位置属性，绝对定位使元素的位置与文档流无关，不占用空间，固定定位指元素的位置相对于浏览器窗口是固定位置，也会使元素的位置与文档流无关，不占用空间，且会和其他元素发生重叠。本实施例中判断各个标记元素和蒙层的祖先元素的布局方式是否为绝对定位或者固定定位，若是，则执行步骤S103，若否，则执行步骤S104。

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

当各个标记元素和蒙层的祖先元素的布局方式是绝对定位或者固定定位时，则根据各个标记元素的顺序信息，依次显示各自对应的预创建静态图片。需要说明的是，本实施例并不限定预创建静态图片的创建时间，可以是判断各个标记元素和蒙层的祖先元素的布局方式是否为绝对定位或者固定定位之前，创建各个标记元素对应的静态图片，得到预创建静态图片，也可以是上述判断过程之后，当是固定定位或绝对定位时，创建静态图片，得到预创建静态图片。

在一种具体的实施例中，为了提高引导效率，判断各个标记元素和蒙层的祖先元素的布局方式是否为绝对定位或者固定定位之前，还可以包括：

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

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

即，在判断各个标记元素和蒙层的祖先元素的布局方式是否为绝对定位或者固定定位之前，创建各个标记元素的静态图片。创建过程可以是首先获取各个标记元素的所有属性，然后根据各个标记元素的所有属性，创建对应的静态图片，即得到各个标记元素的预创建静态图片。由于创建各个标记元素的静态图片耗时相对较长，本实施例选取执行判断过程之前创建静态图片，可以提高引导效率，节省引导时间。

本实施例别并不限定创建各个标记元素的静态图片的具体方式，可以是人工定制化绘制，可以自动绘制，例如利用canvas绘制。在一种具体的实施例中，根据所有属性，创建各个标记元素对应的静态图片，并将静态图片作为预创建静态图片，可以包括：

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

即，本实施例采用自动化绘制，利用canvas技术，根据各个标记元素的所有属性，创建各个标记元素对应的静态图片，得到预创建静态图片。无需人工绘制，可实现自动化根据所有属性进行绘制，减少人工成本，绘制速度有效提高。

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

当各个标记元素和蒙层的祖先元素的布局方式不是绝对定位或者固定定位时，则设置各个标记元素的布局方式为相对定位，不会使元素脱离文档流，元素扔占据它原来的位置。设置各个标记元素的布局方式为相对定位后，还需要设置各个标记元素的层级大于蒙层的层级，使标记元素高亮显示，达到引导目的。再根据各个标记元素的顺序信息，显示各个标记元素和对应的提示信息。本实施例并不限定提示信息的具体内容，可根据实际情况而定。

需要注意的是，根据顺序信息，显示各个标记元素对应的预创建静态图片之后，还可以包括：

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

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

移除蒙层和提示信息。

即，当各个标记元素和蒙层的祖先元素的布局方式是绝对定位或者固定定位时，则根据各个标记元素的顺序信息，依次显示完各自对应的预创建静态图片之后，移除蒙层和预创建静态图片；当各个标记元素和蒙层的祖先元素的布局方式不是绝对定位或者固定定位时，设置各个标记元素的布局方式和层级，并根据各个标记元素的顺序信息，显示各个标记元素和对应的提示信息之后，移除蒙层和提示信息。可以理解的是，当各个标记元素按照顺序信息，被引导结束后，将蒙层和预创建静态图片或提示信息移除后，页面正常显示，供用户使用，防止出现新增功能被引导结束后，也就是用户学习使用过后，还出现蒙层等信息，影响用户使用。

基于上述技术方案，本实施例仅通过设置标记元素的布局方式和层级，或通过显示各个标记元素的预创建静态图片，就能够使标记元素浮在最上层，实现标记元素高亮显示，达到引导目的，降低了重复工作量，提高了引导组件复用率，改善用户体验。

基于上述实施例，为了能够提高使用效率，改善用户体验，本实施例提供一种通用引导组件的实现方法，具体请参考图2，图2为本申请实施例所提供的另一种通用引导组件的实现方法的流程图，包括：

S201、判断浏览记录表中是否存储有标记元素集合的历史浏览信息。

即，本实施例通过判断浏览记录表中是否存储有标记元素集合的历史浏览信息，若没有，则代表用户未浏览该页面或使用过该页面的新增功能，需要通用引导组件进行引导，则执行以下步骤。若浏览记录表中储存有标记元素集合的历史浏览记录，那么说明用户已经被引导，无需再次引导，也就不执行以下步骤。

S202、若浏览记录表中未存储有标记元素集合的历史浏览信息，则获取标记元素集合和标记元素集合中各个标记元素的顺序信息。

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

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

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

以下为本实施例提供的一种通用引导组件的具体工作流程。

1、用户进入页面；

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

即判断用户是否已经走完引导流程，若用户已经走完流程，此时不再进行引导，避免重复引导带来的用户体验问题。若无引导记录，则唤起引导流程。

3、创建蒙层；

为了区分其他元素，需要在页面做一层半透明的蒙层，使被关注元素即标记元素集合在区域内呈高亮显示。

4、获取标记元素集合，进行初始化；

获取标记元素集合和标记元素集合中各个标记元素的顺序信息，即系统需要获取到需要执行的引导步骤，并预先创建各个标记元素的静态图片即预创建静态图片。

5、判断各个标记元素和蒙层平级的祖先元素的布局方式；

判断要高亮显示的元素即各个标记元素和蒙层平级的祖先元素是不是绝对定位或者固定定位，若不是，则需要将各个标记元素的定位通过js操作改成相对定位即通过改变position属性值，同时设置z-index值(层级)比蒙层的z-index大。即通过对CSS的简单操作，无需计算各个标记元素在页面的位置，以及填充补位，就能使各个标记元素浮在蒙层上面，造成高亮显示的效果。若是绝对定位或者固定定位,则需要进行兼容，因为这种情况下单纯的设置布局方式和层级，无法使各个标记元素显示在蒙层上方，因此需要获取各个标记元素的所有属性，使用canvas，根据获取的所有属性值绘制各个标记元素的静态图片，得到预创建静态图片。最后动态的将各个标记元素的静态图片创建在蒙层上面，造成视觉上的高亮。

6、创建文案提示框；

除了各个标记元素的高亮，还伴随着提示文案也就是提示信息，和下一步操作，需要根据各个标记元素的位置动态的创建提示气泡弹框，方便用户理解和进行下一步操作。

7、进入下一步；

判断当前标记元素是否是最后一个需要引导的元素，若是，则结束引导，移除蒙层和弹框；若不是，则重复步骤4。

基于上述技术方案，本实施例单纯通过操作标记元素CSS属性值position和z-index，不用计算标记元素宽高和位置等属性值，就能使元素浮动在最上层，配合在body标签下创建的透明蒙层，实现内容高亮显示，达到引导目的；或者通过CSS属性值position和z-index的方式，在祖先元素为绝对定位或固定定位下无效的问题，引入canvas方案，自动绘制需要引导内容的图片，然后动态创建图片元素，将图片显示在蒙层上方，实现内容高亮显示，达到引导目的。能够使通用引导组件覆盖各种场景，达到最大程度的能力复用，降低重复工作量。进一步，通过判断浏览记录表中是否存储有标记元素集合的历史浏览信息，若未存储，则说明需要被引导，若有浏览记录，说明已经被引导，无需再次被引导使用新增功能，能够避免再次引导，提高使用效率，改善用户体验。

下面对本申请实施例提供的一种通用引导组件的实现装置进行介绍，下文描述的通用引导组件的实现装置与上文描述的通用引导组件的实现方法可相互对应参照，相关模块均设置于中，参考图3，图3为本申请实施例所提供的一种通用引导组件的实现装置的结构示意图，包括：

在一些具体的实施例中，具体包括：

获取模块301，用于获取标记元素集合和标记元素集合中各个标记元素的顺序信息；

判断模块302，用于判断各个标记元素和蒙层的祖先元素的布局方式是否为绝对定位或者固定定位；

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

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

在一些具体的实施例中，还包括：

获取所有属性模块，用于获取各个标记元素的所有属性；

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

在一些具体的实施例中，创建模块，包括：

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

在一些具体的实施例中，还包括：

判断浏览记录模块，用于判断浏览记录表中是否存储有标记元素集合的历史浏览信息。

在一些具体的实施例中，还包括：

第一移除模块，用于移除蒙层和预创建静态图片；

第二移除模块，用于移除蒙层和提示信息。

由于通用引导组件的实现装置部分的实施例与通用引导组件的实现方法部分的实施例相互对应，因此通用引导组件的实现装置部分的实施例请参见通用引导组件的实现方法部分的实施例的描述，这里暂不赘述。

下面对本申请实施例提供的一种电子设备进行介绍，下文描述的电子设备与上文描述的方法可相互对应参照。

本申请提供一种电子设备，包括：

存储器，用于存储计算机程序；

处理器，用于执行计算机程序时实现如上述通用引导组件的实现方法的步骤。

由于电子设备部分的实施例与通用引导组件的实现方法部分的实施例相互对应，因此电子设备部分的实施例请参见通用引导组件的实现方法部分的实施例的描述，这里暂不赘述。

下面对本申请实施例提供的一种计算机可读存储介质进行介绍，下文描述的计算机可读存储介质与上文描述的方法可相互对应参照。

本申请提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时实现如上述通用引导组件的实现方法的步骤。

由于计算机可读存储介质部分的实施例与通用引导组件的实现方法部分的实施例相互对应，因此计算机可读存储介质部分的实施例请参见通用引导组件的实现方法部分的实施例的描述，这里暂不赘述。

说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

以上对本申请所提供的一种通用引导组件的实现方法、装置、电子设备及计算机可读存储介质进行了详细介绍。本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以对本申请进行若干改进和修饰，这些改进和修饰也落入本申请权利要求的保护范围内。

Claims

1.一种通用引导组件的实现方法，其特征在于，包括：

2.根据权利要求1所述的通用引导组件的实现方法，其特征在于，判断所述各个标记元素和蒙层的祖先元素的布局方式是否为绝对定位或者固定定位之前，还包括：

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

3.根据权利要求2所述的通用引导组件的实现方法，其特征在于，根据所述所有属性，创建所述各个标记元素对应的静态图片，并将所述静态图片作为所述预创建静态图片，包括：

4.根据权利要求1所述的通用引导组件的实现方法，其特征在于，获取标记元素集合和所述标记元素集合中各个标记元素的顺序信息之前，还包括：

5.根据权利要求1所述的通用引导组件的实现方法，其特征在于，根据所述顺序信息，显示所述各个标记元素对应的预创建静态图片之后，还包括：

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

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

6.一种通用引导组件的实现装置，其特征在于，包括：

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

7.根据权利要求6所述的通用引导组件的实现装置，其特征在于，还包括：

8.根据权利要求6所述的通用引导组件的实现装置，其特征在于，所述创建模块，包括：

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

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现如权利要求1至5任一项所述通用引导组件的实现方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至5任一项所述通用引导组件的实现方法的步骤。