[發明專利]一種通用引導組件的實現方法、裝置、電子設備和介質

有效

• 申請號: 202011453256.X
• 申請日: 2020-12-11
• 公開（公告）號: CN112487328B
• 公開（公告）日: 2023-02-07
• 發明（設計）人: 王洋洋
• 申請（專利權）人: 政采云有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F9/451
• 代理公司: 北京集佳知識產權代理有限公司 11227
• 代理人: 劉新雷

本申請公開了一種通用引導組件的實現方法、裝置、電子設備和介質，包括：獲取標記元素集合和標記元素集合中各個標記元素的順序信息；判斷各個標記元素和蒙層的祖先元素的布局方式是否為絕對定位或者固定定位；若是，則根據順序信息，顯示各個標記元素對應的預創建靜態圖片；若否，則設置各個標記元素的布局方式為相對定位，并設置各個標記元素的層級大于蒙層的層級；根據順序信息，顯示各個標記元素和對應的提示信息。該方法僅通過設置標記元素的布局方式和層級，或通過顯示各個標記元素的預創建靜態圖片，就能使標記元素浮在最上層達到引導目的。降低重復工作量，提高引導組件復用率。

技術領域

本申請涉及計算機技術領域，特別涉及一種通用引導組件的實現方法、裝置、電子設備和介質。

背景技術

在web應用中，無論是PC還是H5頁面，在新增功能后，通常需要引導用戶一步一步使用新功能，從而達到更好的用戶體驗，以及增加新功能的曝光。

相關技術中，通過CSS樣式控制頁面元素的層級，設置定位屬性為fixed，并計算當前顯示元素的位置信息，將位置值賦值給需要高亮的元素，加上蒙層，實現功能步驟在頁面高亮顯示，達到引導的目的。但是，由于改變頁面元素的布局方式為Fixed，目標元素脫離文檔流，會導致頁面進行重排、重繪，增加資源成本，還會對低版本瀏覽器有一定的性能影響。

發明內容

本申請的目的是提供一種通用引導組件的實現方法，能夠降低重復工作量，提高引導組件復用率。其具體方案如下：

第一方面，本申請公開了一種通用引導組件的實現方法，包括：

獲取標記元素集合和所述標記元素集合中各個標記元素的順序信息；

判斷所述各個標記元素和蒙層的祖先元素的布局方式是否為絕對定位或者固定定位；

若是，則根據所述順序信息，顯示所述各個標記元素對應的預創建靜態圖片；

若否，則設置所述各個標記元素的布局方式為相對定位，并設置所述各個標記元素的層級大于所述蒙層的層級；根據所述順序信息，顯示所述各個標記元素和對應的提示信息。

可選的，判斷所述各個標記元素和蒙層的祖先元素的布局方式是否為絕對定位或者固定定位之前，還包括：

獲取所述各個標記元素的所有屬性；

根據所述所有屬性，創建所述各個標記元素對應的靜態圖片，并將所述靜態圖片作為所述預創建靜態圖片。

可選的，根據所述所有屬性，創建所述各個標記元素對應的靜態圖片，并將所述靜態圖片作為所述預創建靜態圖片，包括：

根據所述所有屬性，利用canvas創建所述各個標記元素對應的靜態圖片，并將所述靜態圖片作為所述預創建靜態圖片。

可選的，獲取標記元素集合和所述標記元素集合中各個標記元素的順序信息之前，還包括：

判斷瀏覽記錄表中是否存儲有所述標記元素集合的歷史瀏覽信息；

若否，則執行獲取標記元素集合和所述標記元素集合中各個標記元素的順序信息的步驟；

若是，則不執行獲取標記元素集合和所述標記元素集合中各個標記元素的順序信息的步驟。

可選的，根據所述順序信息，顯示所述各個標記元素對應的預創建靜態圖片之后，還包括：

移除所述蒙層和所述預創建靜態圖片；

根據所述順序信息，顯示所述各個標記元素和對應的所述提示信息之后，還包括：

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

第二方面，本申請公開了一種通用引導組件的實現裝置，包括：