[發明專利]一種前端步驟引導方法和系統

在審

• 申請號: 202110578598.2
• 申請日: 2021-05-26
• 公開（公告）號: CN113282848A
• 公開（公告）日: 2021-08-20
• 發明（設計）人: 石瑤
• 申請（專利權）人: 杭州每刻科技有限公司
• 主分類號: G06F16/954
• 分類號: G06F16/954
• 代理公司: 杭州裕陽聯合專利代理有限公司 33289
• 代理人: 田金霞

本發明公開了一種前端步驟引導方法和系統，所述方法包括如下步驟：配置引導步驟先后循序和引導信息；標記需要被引導的元素；根據標記獲取被引導元素；獲取被引導元素的位置信息，并根據所述位置信息展示引導信息區域。所述方法和系統通過程序實現自動定位，無需考慮前段顯示屏的大小，可以實現精準的定位和引導。

技術領域

本發明涉及互聯網引導領域，特別涉及一種前端步驟引導方法和系統。

背景技術

現有技術中，前端引導方法和系統通常采用背景圖片來指導用戶執行相關的操作，但是只用背景圖片無法定位需要引導的元素，只能通過屏幕中的高亮來模擬引導，由于不同前端的顯示屏的尺寸不同，因此會存在定位誤差或錯亂的現象。

發明內容

本發明其中一個發明目的在于提供一種前端步驟引導方法和系統，所述方法和系統通過程序實現自動定位，無需考慮前段顯示屏的大小，可以實現精準的定位和引導。

本發明另一個發明目的在于提供一種前端步驟引導方法和系統，所述方法和系統采用代碼解耦的方式，只需要在html節點上設置標記即可使得程序自動根據標記按順序執行引導展示操作。

本發明另一個發明目的在于提供一種前端步驟引導方法和系統，所述方法和系統可以通過程序設置邊界條件，從而使得在引導展示過程中可以避免出現引導錯亂的現象，實現精準引導。

為了實現至少一個上述發明目的，本發明進一步提供一種前端步驟引導方法，所述方法包括如下步驟：

配置引導步驟先后循序和引導信息；

標記需要被引導的元素；

根據標記獲取被引導元素；

獲取被引導元素的位置信息，并根據所述位置信息依次展示引導信息區域。

根據本發明其中一個較佳實施例，在html頁面上對被引導元素標記id，并在所述html頁面上自動獲取具有標記id的元素。

根據本發明另一個較佳實施例，根據所述標記id獲取被引導元素的位置信息，其中所述位置信息包括主位置信息和副位置信息，根據所述主位置信息和副位置信息展示引導信息區域。

根據本發明另一個較佳實施例，獲取被引導元素的主位置信息后，若判斷主位置信息屬于被引導元素的上或下位置，進一步判斷被引導元素的副位置信息是屬于左、中或右位置，獲取目標元素的位置信息，計算所述被引導元素元素主位置和副位置相對于目標元素的偏移量，定位主位置信息，并執行所述引導信息區域從當前被引導元素到目標元素的依次展示。

根據本發明另一個較佳實施例，獲取被引導元素的主位置信息后，若判斷主位置信息屬于被引導元素的左或右位置，進一步判斷被引導元素副位置信息是屬于被引導元素上、中或下位置，獲取目標元素的位置信息，計算所述被引導元素主位置和副位置相對于目標元素的偏移量，定位主位置信息，并執行所述引導信息區域從當前被引導元素到目標元素的依次展示。

根據本發明另一個較佳實施例，在獲取到主位置信息和副位置的偏移量后，分別計算需要展示的引導信息區域的邊界和屏幕邊界之間的距離，用于判斷展示引導信息是否超顯示邊界。

根據本發明另一個較佳實施例，若主位置對應的位置為上或下被引導元素，獲取上或下被引導元素的縱坐標高度h1，獲取引導信息區域的上下邊界高度h2，屏幕上下邊界高度為H，若h1+h2＞H，則表示引導信息區域的上或下邊界已經超出屏幕顯示范圍，重新調整所述引導信息區域的上下邊界寬度。