一种前端步骤引导方法和系统

技术领域

本发明涉及互联网引导领域，特别涉及一种前端步骤引导方法和系统。

背景技术

现有技术中，前端引导方法和系统通常采用背景图片来指导用户执行相关的操作，但是只用背景图片无法定位需要引导的元素，只能通过屏幕中的高亮来模拟引导，由于不同前端的显示屏的尺寸不同，因此会存在定位误差或错乱的现象。

发明内容

本发明其中一个发明目的在于提供一种前端步骤引导方法和系统，所述方法和系统通过程序实现自动定位，无需考虑前段显示屏的大小，可以实现精准的定位和引导。

本发明另一个发明目的在于提供一种前端步骤引导方法和系统，所述方法和系统采用代码解耦的方式，只需要在html节点上设置标记即可使得程序自动根据标记按顺序执行引导展示操作。

本发明另一个发明目的在于提供一种前端步骤引导方法和系统，所述方法和系统可以通过程序设置边界条件，从而使得在引导展示过程中可以避免出现引导错乱的现象，实现精准引导。

为了实现至少一个上述发明目的，本发明进一步提供一种前端步骤引导方法，所述方法包括如下步骤：

配置引导步骤先后循序和引导信息；

标记需要被引导的元素；

根据标记获取被引导元素；

获取被引导元素的位置信息，并根据所述位置信息依次展示引导信息区域。

根据本发明其中一个较佳实施例，在html页面上对被引导元素标记id，并在所述html页面上自动获取具有标记id的元素。

根据本发明另一个较佳实施例，根据所述标记id获取被引导元素的位置信息，其中所述位置信息包括主位置信息和副位置信息，根据所述主位置信息和副位置信息展示引导信息区域。

根据本发明另一个较佳实施例，获取被引导元素的主位置信息后，若判断主位置信息属于被引导元素的上或下位置，进一步判断被引导元素的副位置信息是属于左、中或右位置，获取目标元素的位置信息，计算所述被引导元素元素主位置和副位置相对于目标元素的偏移量，定位主位置信息，并执行所述引导信息区域从当前被引导元素到目标元素的依次展示。

根据本发明另一个较佳实施例，获取被引导元素的主位置信息后，若判断主位置信息属于被引导元素的左或右位置，进一步判断被引导元素副位置信息是属于被引导元素上、中或下位置，获取目标元素的位置信息，计算所述被引导元素主位置和副位置相对于目标元素的偏移量，定位主位置信息，并执行所述引导信息区域从当前被引导元素到目标元素的依次展示。

根据本发明另一个较佳实施例，在获取到主位置信息和副位置的偏移量后，分别计算需要展示的引导信息区域的边界和屏幕边界之间的距离，用于判断展示引导信息是否超显示边界。

根据本发明另一个较佳实施例，若主位置对应的位置为上或下被引导元素，获取上或下被引导元素的纵坐标高度h1，获取引导信息区域的上下边界高度h2，屏幕上下边界高度为H，若h1+h2＞H，则表示引导信息区域的上或下边界已经超出屏幕显示范围，重新调整所述引导信息区域的上下边界宽度。

根据本发明另一个较佳实施例，若主位置对应的位置为左或右被引导元素，获取左或右被引导元素横坐标长度s

为了实现至少一个上述发明目的，本发明进一步提供一种前端步骤引导系统，所述系统采用上述一种前端步骤引导方法。

本发明进一步提供一种计算机可读存储介质，所述计算机可读存储介质用于保存并应用上述一种前端步骤引导系统。

附图说明

图1显示的是本发明一种前端步骤引导方法的一种流程示意图；

图2显示的是本发明一种前端步骤引导方法的引导操作过程示意图。

具体实施方式

以下描述用于揭露本发明以使本领域技术人员能够实现本发明。以下描述中的优选实施例只作为举例，本领域技术人员可以想到其他显而易见的变型。在以下描述中界定的本发明的基本原理可以应用于其他实施方案、变形方案、改进方案、等同方案以及没有背离本发明的精神和范围的其他技术方案。

可以理解的是，术语“一”应理解为“至少一”或“一个或多个”，即在一个实施例中，一个元件的数量可以为一个，而在另外的实施例中，该元件的数量可以为多个，术语“一”不能理解为对数量的限制。

请结合图1-2，本发明公开了一种前端步骤引导方法和系统，其中所述方法主要包括如下步骤：配置好需要引导的步骤顺序和引导信息，建立多个被引导元素，其中所述被引导元素包括12个方向，具体为：上(分为上左，上，上右)、下(分为下左，下，下右)、左(分为左上，左，左下)、右(右上，右、右下)，上述被引导元素构成一个环状结构。根据所述被引导元素的位置设置引导信息，用于展示引导信息。在本发明优先一个较佳实施例中，根据上述引导信息的主位置信息设置引导信息的展示框，上述主位置信息包括：上、下、左、右四个被引导元素对应的主方位，比如当前被引导元素主位置信息为上或下被引导元素对应的位置，则可以设置在所述上被引导元素的上方或下被引导元素的下方设置引导信息的展示框，或者在所述左被引导元素的左边或右被引导元素的右侧设置引导信息的展示框。

进一步对需要被引导的元素进行标记，比如根据需要对上被引导元素、上左被引导元素和上右被引导元素进行标记，标记的方式包括设置对需要被引导元素分别设置id，所述id可以被设定的程序识别，因此当所述需要的被引导元素标记id后可以自动识别其身份信息，需要说明的是，在本发明一个较佳实施例中，所述标记id包括位置信息，也就是说当所述被引导元素的id被识别后可以获得对应元素的位置信息。根据所述位置信息执行引导信息的展示，其中所述引导信息可以通过方框结构进行展示，并且在引导信息展示的过程中获取展示顺序信息，根据所述展示循序依次进行展示。

值得一提的是，本发明所述的步骤引导方法还考虑了边界问题，由于传统的引导展示框可能会因为太大而超出显示边界，本发明进一步提供如下方法调整引导信息展示框的调整：若当前被引导元素的主位置信息被定位后，获取当前被引导元素的位置信息，其中被引导元素的位置信息可以预先设置，在构建上述12个方向的被引导元素时就可以确定，需要说明的是，所述被引导位置信息是显示界面上的位置信息，系统中可以自动在显示界面以左下角为原点建立一个具有横坐标和纵坐标的坐标系，根据所述被引导元素在所述坐标系中的位置可以获取位置信息的具体数值，用于判断所述被引导元素的和显示界面的关系。若当前被引导元素的主位置信息属于上，还需要获取引导展示框的上下边界的高度，以及左右边界的宽度，其中上下边界的高度为h2，并获取当前被引导元素在坐标系中的高度为h1，同时计算显示界面上下边的高度H，若计算h1+h2＞H，则说明此时引导信息展示框的高度已经超过了显示界面的上边界，因此需要重新调整引导信息展示框的上下边界。当然在本发明另一可行实施例中，还可以重新调整所述被引导元素的位置信息，使得引导信息展示框在显示界面的上边界之内。在另一较佳实施例中，若当前被引导元素的主位置信为右侧，则需要考虑显示界面左右边界的范围，用于调整所述引导信息展示框的左右边界大小，具体而言：获取当前被引导元素的位置信息，获取当前被引导元素横坐标上的值s1，并获取当前被引导元素对应的引导信息展示框的左右边界宽度s2，计算显示界面左右边界的宽度S，其中若s1+s2＞S，则说明当前被引导元素对应的展示框超出了显示界面的右侧边界，从而需要调整所述展示框的左右边界的宽度。需要说明的是，上述两个实施例为举例说明，在其他较佳实施例中，可以根据被引导元素的位置分别判断对应的引导信息展示框和显示界面的下边界和左边界的位置关系。比如：若需要判断主位置信息为下的被引导元素的展示框上下边界是否超出显示界面的下边界。则需要判断h1-h2的值，若h1-h2＜0，则说明当前被引导元素对应的引导展示框下边界超出显示界面的下边界，需要进一步调整当前引导展示框上下边界的高度。

当程序获取被标记id的被引导元素后，分别计算每一被引导元素对应的引导信息展示框和显示界面的位置关系，若发生重叠，则需要根据上述方法调整引导信息展示框的边界。并根据预设的展示顺序从当前被引导元素向着的目标元素依次展示。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分从网络上被下载和安装，和/或从可拆卸介质被安装。在该计算机程序被中央处理单元(CPU)执行时，执行本申请的方法中限定的上述功能。需要说明的是，本申请上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是但不限于电、磁、光、电磁、红外线段、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线段的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线段、电线段、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

本领域的技术人员应理解，上述描述及附图中所示的本发明的实施例只作为举例而并不限制本发明，本发明的目的已经完整并有效地实现，本发明的功能及结构原理已在实施例中展示和说明，在没有背离所述原理下，本发明的实施方式可以有任何变形或修改。