Method, device, computer equipment and storage medium for displaying a guide page

Abstract

The present application relates to a method, device, computer equipment and storage medium for displaying a guide page, the method comprising: in response to a rendering instruction of a page, obtaining the guide identifiers and guide contents of all guide elements in the page; determining the target element to be displayed from the guide element according to the guide identifier; determining the first position information and the first size information of the target element in the page; using a cascading style sheet, the first position information and the first size information, setting a shadow for the area in the page except the target element and the guide contents of the target element, and rendering and displaying the guide page. Since the guide page is set using a cascading style sheet, the first position information and the first size information of the target element in the page, when the page layout changes, there is no need to redevelop the guide page, thereby reducing the development cost.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method, device, computer equipment and storage medium for displaying a guide page. Background Art

[0002] With the rapid development of Internet technology, the design level of websites has been continuously improved. Usually, the functions of corporate web pages are relatively complex, and developing a guide page that can guide users to use the web page has become a basic requirement for such web pages.

[0003] In the traditional technology, when the page layout of a web page changes, it is necessary to redevelop the guide page according to the changed page layout, which results in high development cost. Summary of the invention

[0004] Based on this, it is necessary to provide a method, device, computer equipment and storage medium for displaying a guide page that can reduce development costs in response to the above technical problems.

[0005] In a first aspect, the present application provides a method for displaying a guide page. The method comprises:

[0006] In response to a rendering instruction of a page, obtaining guide identifiers and guide contents of all guide elements in the page;

[0007] Determining a target element to be displayed from the guide elements according to the guide identifier;

[0008] Determine first position information and first size information of the target element in the page;

[0009] The cascading style sheet, the first position information, and the first size information are used to set a shadow for the area of ​​the page except the target element and the guide content of the target element, and the guide page is rendered and displayed.

[0010] In one embodiment, the step of using a cascading style sheet, the first position information, and the first size information to set a shadow on an area of ​​the page except the target element and the guide content of the target element includes:

[0011] Determine, according to the first position information and the first size information, second position information and second size information of the guide content of the target element in the page;

[0012] Assigning a shadow effect attribute of the cascading style sheet according to the first position information and the first size information, so as to set a shadow for an area in the page except the target element, to obtain a first shadow area;

[0013] Assigning a value to the shadow effect attribute according to the second position information and the second size information, so as to set a shadow for an area of ​​the page except for the guide content of the target element, to obtain a second shadow area;

[0014] An overlapping area between the first shadow area and the second shadow area is used as an area of ​​the page excluding the target element and the guide content of the target element.

[0015] In one of the embodiments, determining the target element to be displayed from the guide element according to the guide identifier includes:

[0016] Saving the guide identifier of the guide element displayed historically to the application cache of the application used to browse the page;

[0017] Sort all guide elements according to their guide identifiers;

[0018] The target element to be displayed is determined according to whether the guide identifiers of the sorted guide elements exist in the application cache.

[0019] In one embodiment, after saving the guide identifier of the historically displayed guide element to the application cache of the application used to browse the page, the method further includes:

[0020] In response to an access instruction of a non-home page, displaying a guide page of a guide element of the non-home page;

[0021] The guide identification of the guide element displayed on the guide page is saved in the application cache;

[0022] In response to a jump instruction from a non-home page to a home page, a guide page of a target element to be displayed in the home page that is not stored in the application cache is displayed.

[0023] In one embodiment, determining the first position information and the first size information of the target element in the page includes:

[0024] The first position information and the first size information of the target element in the page are determined by using an offset attribute of an application program used to browse the page.

[0025] In one embodiment, after rendering and displaying the guide page, the method further includes:

[0026] Listening to window change events of an application used to browse the page;

[0027] When the window change event is monitored, the first position information and the first size information are adjusted according to the window change information.

[0028] In a second aspect, the present application further provides a device for displaying a guide page, characterized in that the device comprises:

[0029] A data acquisition module, used for acquiring the guide identifiers and guide contents of all guide elements in the page in response to the rendering instruction of the page;

[0030] An element screening module, used for determining a target element to be displayed from the guide elements according to the guide identifier;

[0031] An element information determination module, used to determine first position information and first size information of the target element in the page;

[0032] The guide display module is used to use the cascading style sheet, the first position information and the first size information to set a shadow for the area of ​​the page except the target element and the guide content of the target element, and render and display the guide page.

[0033] In a third aspect, the present application further provides a computer device. The computer device includes a memory and a processor, the memory stores a computer program, and the processor implements the following steps when executing the computer program:

[0034] In response to a rendering instruction of a page, obtaining guide identifiers and guide contents of all guide elements in the page;

[0035] Determining a target element to be displayed from the guide elements according to the guide identifier;

[0036] Determine first position information and first size information of the target element in the page;

[0037] The cascading style sheet, the first position information, and the first size information are used to set a shadow for the area of ​​the page except the target element and the guide content of the target element, and the guide page is rendered and displayed.

[0038] In a fourth aspect, the present application further provides a computer-readable storage medium. The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the following steps are implemented:

[0039] In response to a rendering instruction of a page, obtaining guide identifiers and guide contents of all guide elements in the page;

[0040] Determining a target element to be displayed from the guide elements according to the guide identifier;

[0041] Determine first position information and first size information of the target element in the page;

[0042] The cascading style sheet, the first position information, and the first size information are used to set a shadow for the area of ​​the page except the target element and the guide content of the target element, and the guide page is rendered and displayed.

[0043] The above-mentioned method, device, computer equipment and storage medium for displaying a guide page obtain the guide identifiers and guide contents of all guide elements in the page by responding to the rendering instruction of the page; determine the target element to be displayed from the guide element according to the guide identifier; determine the first position information and the first size information of the target element in the page; use the cascading style sheet, the first position information and the first size information to set the shadow of the area in the page except the target element and the guide contents of the target element, and render and display the guide page. Since the guide page is set by using the cascading style sheet, the first position information and the first size information of the target element in the page, when the page layout changes, there is no need to redevelop the guide page, which reduces the development cost. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] Figure 1 A schematic diagram of a flow chart of a method for displaying a guide page in an embodiment;

[0045] Figure 2 is a flow chart of a method for displaying a guide page in another embodiment;

[0046] Figure 3 is a flow chart of a method for displaying a guide page in another embodiment;

[0047] Figure 4 is a structural block diagram of a display device for a guide page in an embodiment;

[0048] Figure 5 FIG. 4 is a diagram showing the internal structure of a computer device in one embodiment. DETAILED DESCRIPTION

[0049] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0050] In one embodiment, Figure 1As shown, a method for displaying a guide page is provided. This embodiment uses the method applied to a terminal as an example for illustration. It can be understood that the method can also be applied to a server, and can also be applied to a system including a terminal and a server, and is implemented through the interaction between the terminal and the server. In this embodiment, the method includes the following steps:

[0051] Step 102: In response to a rendering instruction of the page, obtain the guide identifiers and guide contents of all guide elements in the page.

[0052] The guide element refers to an element in the page that needs to display the guide page, which can be an element in the guide bar of the page, or other elements. The guide identifier is used to identify different guide elements. In an example, the guide identifier can identify the display order of the guide elements, which is the guide order identifier of the guide element, such as 1, 2, 3..., etc.

[0053] Specifically, the terminal may first add an identification bit to each guide element. For example, if there are three guide elements on a page, the following method may be used to add them:

[0054] <span data-step＝1 data-tip＝‘此处是第一个新手引导’>

[0055] <span data-step＝2 data-tip＝‘此处是第二个新手引导’>

[0056] <span data-step＝3 data-tip＝‘此处是第三个新手引导’>

[0057] Among them, data-step is the guide identifier, and data-tip is the guide content. After adding the identifier, the terminal can store the guide identifier and guide content of each guide element to the server or the terminal's memory. When the terminal receives the rendering instruction of the page, the terminal obtains the guide identifier and guide content of all guide elements in the page from the server or the memory.

[0058] Step 104: determine the target element to be displayed from the guide elements according to the guide identifier.

[0059] The target element refers to the guide element to be displayed on the page at the current moment.

[0060] Specifically, the terminal may determine the target element in a variety of ways. In one example, the terminal may determine the corresponding guide elements as target elements in sequence according to the size of the guide identifier. In another example, the terminal may also save the guide identifiers of the guide elements displayed historically to the application cache of the application used to browse the page; sort all the guide elements according to their guide identifiers; and determine the target element to be displayed according to whether the guide identifiers of the sorted guide elements exist in the application cache.

[0061] Step 106: Determine first position information and first size information of the target element in the page.

[0062] Specifically, the terminal may calculate the coordinate information of the target element in the page and the width and height information of the target element by calling relevant functions, and use the coordinate information as the first position information and the width and height information as the first size information.

[0063] Step 108: Use the cascading style sheet, the first position information, and the first size information to set a shadow for the area of ​​the page except the target element and the guide content of the target element, and render and display the guide page.

[0064] Among them, Cascading Style Sheets (CSS) is a computer language used to express the style of files such as HyperText Mark-up Language (HTML) or Extensible Markup Language (XML). CSS can not only modify web pages statically, but also dynamically format various elements of web pages in conjunction with various scripting languages.

[0065] Specifically, the terminal can add an effect frame for the target element and its guiding content together, or can add effect frames for the target element and its guiding content separately. The style of the effect frame can be customized, for example, the effect frame can be a rectangular frame, an elliptical frame, etc. After the effect frame is designed, a shadow is set for the area outside the effect frame in the page, and the page with the shadow set is rendered and displayed as a guiding page.

[0066] This embodiment obtains the guide identifiers and guide contents of all guide elements in the page in response to the rendering instruction of the page; determines the target element to be displayed from the guide element according to the guide identifier; determines the first position information and the first size information of the target element in the page; uses the cascading style sheet, the first position information and the first size information to set the shadow of the area in the page except the target element and the guide contents of the target element, and renders and displays the guide page. Since the guide page is set using the cascading style sheet, the first position information and the first size information of the target element in the page, when the page layout changes, there is no need to redevelop the guide page, which reduces the development cost.

[0067] In one embodiment, the step of setting a shadow for an area in a page excluding a target element and the guide content of the target element using a cascading style sheet, first position information, and first size information may include: determining the second position information and second size information of the guide content of the target element in the page according to the first position information and the first size information; assigning a shadow effect attribute of the cascading style sheet according to the first position information and the first size information to set a shadow for the area in the page excluding the target element to obtain a first shadow area; assigning a shadow effect attribute according to the second position information and the second size information to set a shadow for the area in the page excluding the guide content of the target element to obtain a second shadow area; and using the overlapping area between the first shadow area and the second shadow area as the area in the page excluding the target element and the guide content of the target element.

[0068] Among them, the shadow effect attribute can be a box-shadow attribute. The box-shadow attribute is used to add a shadow effect to the frame of the element. The values ​​that can be set for this attribute include the X-axis offset, Y-axis offset, blur radius, diffusion radius and color of the shadow.

[0069] Specifically, the CSS box-shadow property can be assigned a value according to the first position information and the first size information of the target element to implement the shadow setting of the area outside the target element, and then the CSS box-shadow property can be assigned a value according to the second position information and the second size information of the guide content corresponding to the target element to implement the shadow setting of the area outside the guide content. The shadow setting of the target element and the area outside the guide content of the target element can be achieved through two shadow settings.

[0070] It should be understood that in order to ensure that the user can clearly see the guidance content corresponding to the target element, the guidance content is usually set near the target element, for example, the guidance content is set at the lower left or lower right of the target element, etc. Therefore, the second position information and second size information of the guidance content can be determined based on the first position information and first size information of the target element.

[0071] This embodiment uses the shadow effect attribute of CSS to set the shadow so that the target element and its guide content are highlighted, thereby realizing the rapid setting of the style of the guide page.

[0072] In one embodiment, the step of determining the target element to be displayed from the guide element according to the guide identifier may include: saving the guide identifier of the guide element displayed historically to the application cache of the application used to browse the page; sorting all the guide elements according to their guide identifiers; and determining the target element to be displayed according to whether the guide identifier of the sorted guide element exists in the application cache.

[0073] The application cache may be the local storage of the browser, or other caches.

[0074] It should be understood that during the page rendering process, each time the terminal displays a boot page of a boot element, the boot identifier of the boot element is saved in the application cache. When a rendering instruction for a new page is received, the boot page of the boot element corresponding to the boot identifier in the application cache is no longer displayed to avoid repeated rendering of the page.

[0075] Specifically, the boot identifier of the boot element can be stored in any ordered storage sequence or linked list. In an example, the terminal can store all the boot elements in an array according to the boot identifier, and traverse the boot elements in the array in turn. For example, the boot elements are a1, a2 and a3, the boot identifier of a1 is 1, the boot identifier of a2 is 2, and the boot identifier of a3 is 3. A1, a2 and a3 are stored in the array in order, and the first boot element a1 is read from the array first, and it is determined whether the boot identifier 1 of a1 exists in the application cache. If so, it is determined that the boot page of the boot element has been displayed, and the boot element is skipped, and the next boot element a2 is read from the array. If not, the boot element a1 is used as the target element to be displayed, and the boot page of the target element is displayed.

[0076] This embodiment saves the guide identifier of the guide element that has displayed the guide page in the application cache of the application program used for browsing the page, thereby avoiding repeated rendering of the page and improving the display efficiency of the guide page.

[0077] In one embodiment, after the step of saving the guide identifier of the historically displayed guide element into the application cache of the application used to browse the page, the method may further include the following steps: in response to an access instruction to a non-home page, displaying the guide page of the guide element with the guide identifier of the non-home page; saving the guide identifier of the guide element after the guide page display is completed into the guide identifier application cache; in response to a jump instruction from the non-home page to the home page, displaying the guide page of the target element to be displayed in the home page that is not saved in the application cache.

[0078] Among them, the home page refers to the first page of the website, and the non-home page refers to the other pages of the website except the first page (i.e., the home page).

[0079] Specifically, when a user visits a non-home page of a website, the terminal renders and displays the guide page of the guide element of the non-home page, and saves the guide identifier of the displayed guide element in the application cache. When the user operates the page and jumps from the non-home page to the home page, it is determined whether the target element to be displayed in the home page is saved in the application cache. For the target element to be displayed saved in the application cache, since the guide page of the target element has been displayed on the non-home page, the terminal does not display the guide page of the target element; for the target element to be displayed that is not saved in the application cache, since the guide page of the target element has not been displayed on the non-home page, the terminal will display the guide page of the target element.

[0080] It should be understood that in the prior art, the guide page is usually only displayed on the home page. This embodiment does not display the guide page that has been displayed on the non-home page when the page jumps from the non-home page to the home page. This avoids repeated rendering of the guide page regardless of which page the user enters from the same domain name website, thereby improving display efficiency and user experience.

[0081] In one embodiment, the step of determining the first position information and the first size information of the target element in the page may include: determining the first position information and the first size information of the target element in the page using an offset attribute of an application program for browsing the page.

[0082] The offset attribute can be the offset attribute of the browser. In a specific implementation, the horizontal coordinate of the target element relative to the window can be determined by offsetLeft, and the vertical coordinate of the target element relative to the window can be determined by offsetTop, and the horizontal coordinate and the vertical coordinate are used as the first position information of the target element. The width of the target element can be determined by offsetWidth, and the height of the target element can be determined by offsetHeight, and the width and the height are used as the first size information of the target element.

[0083] It should be noted that in the prior art, page guidance usually requires different guidance plug-ins to be used according to different frameworks. For example, when developing with the react framework, the guidance page needs to be generated using a guidance tool specifically for the react language, and when developing with the vue framework, the guidance page needs to be generated using a guidance plug-in specifically for vue, which results in low adaptability of the page guidance tool. In this application, pure JS is used to generate the guidance page, which can be adapted in any front-end framework and can be applied to all browsers, and has good universality.

[0084] This embodiment determines the first position information and first size information of the target element in the page by utilizing the offset attribute of the application used to browse the page, and then generates a guide page according to the first position information and the first size information, thereby reducing the dependence on the page layout and avoiding the problem of the guide page not adapting when the page layout changes.

[0085] Figure 2 FIG. 1 is a flow chart of a method for displaying a guide page in another embodiment, referring to Figure 2 After the step of rendering and displaying the guide page, the method may further include:

[0086] Step 202, monitoring window change events of an application program for browsing pages;

[0087] Step 204: When a window change event is monitored, the first position information and the first size information are adjusted according to the window change information.

[0088] Specifically, the terminal may bind an event that is triggered when the window size is changed, and determine whether the window has changed by monitoring whether the event is triggered.

[0089] Taking the browser as an example, the terminal can use the browser's window object to bind a window change event (such as window.onresize) and monitor the window change event. When the window change event is monitored, the terminal calls the relevant function to adaptively adjust the position and size of the target element in the page.

[0090] Among them, the adaptive adjustment can be real-time monitoring and real-time adjustment, that is, when the user drags the scroll bar, the terminal monitors the window change event, and the terminal adjusts the first position information and the first size information in real time, but the position and size of the guide element seen by the user through the page will not change due to the window change. For example, when the guide element is an element in the guide bar at the top of the page, if the user drags the scroll bar down in the page, the guide element will not scroll up as the page slides down, resulting in a guide page full of shadows, but the guide element will still be displayed normally in the guide page when the page slides down, effectively improving the user's visual experience.

[0091] In a specific implementation, after the target element is adaptively adjusted, the position information and size information of the guide content may be re-determined according to the position information and size information of the adjusted target element, thereby achieving adaptive adjustment of the guide content.

[0092] Furthermore, the guiding element in the page is an element in the navigation bar of the page. When the terminal monitors the window change event, it can adjust the first position information and the first size information of the element in the navigation bar according to the window change information, and generate a guiding page according to the cascading style sheet and the adjusted first position information and the first size information. In this way, the guiding page will be automatically adjusted as the page layout changes, avoiding the need to redevelop the guiding page.

[0093] This embodiment monitors the window change event of the application used to browse the page, and when the window change event is monitored, the target element is adaptively adjusted. Therefore, no matter how the user changes the window size or drags the scroll bar, the position and size of the target element and the corresponding guide content can be adaptively adjusted as the window changes, thereby improving the user experience.

[0094] Figure 3 FIG. 1 is a flow chart of a method for displaying a guide page in another embodiment, referring to Figure 3 , the method for displaying the guide page may include the following steps:

[0095] Step 301, in response to a rendering instruction of a page, obtaining guide identifiers and guide contents of all guide elements in the page.

[0096] Step 302: Save the guide identifier of the guide element displayed historically into the application cache of the application program used for browsing the page.

[0097] Step 303: sort all the guide elements according to their guide identifiers.

[0098] Step 304: Determine the target element to be displayed according to whether the guide identifiers of the sorted guide elements exist in the application cache.

[0099] Step 305: Determine first position information and first size information of the target element in the page by using the offset attribute of the application program for browsing the page.

[0100] Step 306 , using the shadow effect attribute of the cascading style sheet, the first position information and the first size information, a shadow is set for the area of ​​the page except the target element and the guide content of the target element, and the guide page is rendered and displayed.

[0101] Step 307: monitor the window change event of the application program used for browsing the page.

[0102] Step 308: When a window change event is monitored, the first position information and the first size information are adjusted according to the window change information.

[0103] It should be understood that, although the steps in the flowcharts involved in the above embodiments are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear explanation in this article, the execution of these steps is not strictly limited in order, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above embodiments may include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily carried out in sequence, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.

[0104] Based on the same inventive concept, the embodiment of the present application also provides a guide page display device for implementing the guide page display method involved above. The implementation scheme for solving the problem provided by the device is similar to the implementation scheme recorded in the above method, so the specific limitations in the embodiments of one or more guide page display devices provided below can refer to the limitations of the guide page display method above, and will not be repeated here.

[0105] In one embodiment, Figure 4 As shown, a display device for a guide page is provided, including: a data acquisition module 402, an element screening module 404, an element information determination module 406 and a guide display module 408, wherein:

[0106] The data acquisition module 402 is used to obtain the guide identifiers and guide contents of all guide elements in the page in response to the rendering instruction of the page;

[0107] An element screening module 404, used to determine a target element to be displayed from the guide elements according to the guide identifier;

[0108] An element information determination module 406 is used to determine first position information and first size information of a target element in a page;

[0109] The guide display module 408 is used to set a shadow for the area of ​​the page except the target element and the guide content of the target element by using the cascading style sheet, the first position information and the first size information, and render and display the guide page.

[0110] In one embodiment, the guide display module 408 is also used to determine the second position information and the second size information of the guide content of the target element in the page based on the first position information and the first size information; assign a shadow effect attribute of the cascading style sheet based on the first position information and the first size information to set a shadow for the area in the page except the target element to obtain a first shadow area; assign a shadow effect attribute based on the second position information and the second size information to set a shadow for the area in the page except the guide content of the target element to obtain a second shadow area; and use the overlapping area between the first shadow area and the second shadow area as the area in the page except the target element and the guide content of the target element.

[0111] In one embodiment, the element filtering module 404 is also used to save the guide identifiers of the guide elements displayed historically into the application cache of the application used to browse the page; sort all the guide elements according to their guide identifiers; and determine the target element to be displayed based on whether the guide identifiers of the sorted guide elements exist in the application cache.

[0112] In one embodiment, the element screening module 404 is also used to respond to an access instruction from a non-home page, display a guide page of a guide element with a guide identifier other than the home page; save the guide identifier of the guide element whose guide page display is completed into the guide identifier application cache; and respond to a jump instruction from a non-home page to the home page, display the guide page of the target element to be displayed in the home page that is not saved in the application cache.

[0113] In one embodiment, the element information determination module 406 is further used to determine the first position information and the first size information of the target element in the page by using the offset attribute of the application program used to browse the page.

[0114] In one embodiment, the display device of the guide page also includes an event monitoring module (not shown) for monitoring window change events of an application used to browse the page; when a window change event is monitored, the first position information and the first size information are adjusted according to the window change information.

[0115] Each module in the above-mentioned display device of the guide page can be implemented in whole or in part by software, hardware or a combination thereof. Each module can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory in the computer device in the form of software, so that the processor can call and execute the operations corresponding to each module above.

[0116] In one embodiment, a computer device is provided. The computer device may be a terminal, and its internal structure diagram may be as follows: Figure 5As shown. The computer device includes a processor, a memory, a communication interface, a display screen and an input device connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner can be achieved through WIFI, a mobile cellular network, NFC (near field communication) or other technologies. When the computer program is executed by the processor, a method for displaying a guide page is implemented. The display screen of the computer device can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device can be a touch layer covered on the display screen, or a key, trackball or touchpad set on the computer device housing, or an external keyboard, touchpad or mouse, etc.

[0117] Those skilled in the art will understand that Figure 5 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0118] In one embodiment, a computer device is provided, including a memory and a processor, wherein a computer program is stored in the memory, and when the processor executes the computer program, the following steps are implemented:

[0119] In response to the rendering instruction of the page, obtaining the guide identifiers and guide contents of all guide elements in the page;

[0120] Determine a target element to be displayed from the guide elements according to the guide identifier;

[0121] Determine first position information and first size information of the target element in the page;

[0122] By using the cascading style sheet, the first position information and the first size information, a shadow is set for the area of ​​the page except the target element and the guide content of the target element, and the guide page is rendered and displayed.

[0123] In one embodiment, when the processor executes the computer program, the processor further implements the following steps:

[0124] According to the first position information and the first size information, the second position information and the second size information of the guide content of the target element in the page are determined; according to the first position information and the first size information, the shadow effect attribute of the cascading style sheet is assigned to set the shadow of the area in the page except the target element to obtain a first shadow area; according to the second position information and the second size information, the shadow effect attribute is assigned to set the shadow of the area in the page except the guide content of the target element to obtain a second shadow area; the overlapping area between the first shadow area and the second shadow area is used as the area in the page except the target element and the guide content of the target element.

[0125] In one embodiment, when the processor executes the computer program, the processor further implements the following steps:

[0126] The guide identifiers of the guide elements displayed historically are saved in the application cache of the application used to browse the page; all the guide elements are sorted according to their guide identifiers; and the target element to be displayed is determined according to whether the guide identifiers of the sorted guide elements exist in the application cache.

[0127] In one embodiment, when the processor executes the computer program, the processor further implements the following steps:

[0128] In response to an access instruction from a non-home page, a guide page of a guide element with a guide identifier other than the home page is displayed; the guide identifier of the guide element whose guide page display is completed is saved in the guide identifier application cache; in response to a jump instruction from a non-home page to the home page, a guide page of a target element to be displayed in the home page that is not saved in the application cache is displayed.

[0129] In one embodiment, when the processor executes the computer program, the processor further implements the following steps:

[0130] The first position information and the first size information of the target element in the page are determined by using the offset attribute of the application program for browsing the page.

[0131] In one embodiment, when the processor executes the computer program, the processor further implements the following steps:

[0132] A window change event of an application program for browsing pages is monitored; when the window change event is monitored, the first position information and the first size information are adjusted according to the window change information.

[0133] In one embodiment, a computer readable storage medium is provided, on which a computer program is stored, and when the computer program is executed by a processor, the following steps are implemented:

[0134] In response to the rendering instruction of the page, obtaining the guide identifiers and guide contents of all guide elements in the page;

[0135] Determine a target element to be displayed from the guide elements according to the guide identifier;

[0136] Determine first position information and first size information of the target element in the page;

[0137] By using the cascading style sheet, the first position information and the first size information, a shadow is set for the area of ​​the page except the target element and the guide content of the target element, and the guide page is rendered and displayed.

[0138] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:

[0139] According to the first position information and the first size information, the second position information and the second size information of the guide content of the target element in the page are determined; according to the first position information and the first size information, the shadow effect attribute of the cascading style sheet is assigned to set the shadow of the area in the page except the target element to obtain a first shadow area; according to the second position information and the second size information, the shadow effect attribute is assigned to set the shadow of the area in the page except the guide content of the target element to obtain a second shadow area; the overlapping area between the first shadow area and the second shadow area is used as the area in the page except the target element and the guide content of the target element.

[0140] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:

[0141] The guide identifiers of the guide elements displayed historically are saved in the application cache of the application used to browse the page; all the guide elements are sorted according to their guide identifiers; and the target element to be displayed is determined according to whether the guide identifiers of the sorted guide elements exist in the application cache.

[0142] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:

[0143] In response to an access instruction from a non-home page, a boot page of the boot element of the non-home page is displayed; the boot identifier of the boot element whose boot page display is completed is saved in the application cache; in response to a jump instruction from the non-home page to the home page, a boot page of the target element to be displayed in the home page that is not saved in the application cache is displayed.

[0144] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:

[0145] The first position information and the first size information of the target element in the page are determined by using the offset attribute of the application program for browsing the page.

[0146] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:

[0147] A window change event of an application program for browsing pages is monitored; when the window change event is monitored, the first position information and the first size information are adjusted according to the window change information.

[0148] In one embodiment, a computer program product is provided, comprising a computer program, which, when executed by a processor, implements the following steps:

[0149] In response to the rendering instruction of the page, obtaining the guide identifiers and guide contents of all guide elements in the page;

[0150] Determine a target element to be displayed from the guide elements according to the guide identifier;

[0151] Determine first position information and first size information of the target element in the page;

[0152] By using the cascading style sheet, the first position information and the first size information, a shadow is set for the area of ​​the page except the target element and the guide content of the target element, and the guide page is rendered and displayed.

[0153] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:

[0154] According to the first position information and the first size information, the second position information and the second size information of the guide content of the target element in the page are determined; according to the first position information and the first size information, the shadow effect attribute of the cascading style sheet is assigned to set the shadow of the area in the page except the target element to obtain a first shadow area; according to the second position information and the second size information, the shadow effect attribute is assigned to set the shadow of the area in the page except the guide content of the target element to obtain a second shadow area; the overlapping area between the first shadow area and the second shadow area is used as the area in the page except the target element and the guide content of the target element.

[0155] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:

[0156] The guide identifiers of the guide elements displayed historically are saved in the application cache of the application used to browse the page; all the guide elements are sorted according to their guide identifiers; and the target element to be displayed is determined according to whether the guide identifiers of the sorted guide elements exist in the application cache.

[0157] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:

[0158] In response to an access instruction from a non-home page, a guide page of a guide element with a guide identifier other than the home page is displayed; the guide identifier of the guide element whose guide page display is completed is saved in the guide identifier application cache; in response to a jump instruction from a non-home page to the home page, a guide page of a target element to be displayed in the home page that is not saved in the application cache is displayed.

[0159] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:

[0160] The first position information and the first size information of the target element in the page are determined by using the offset attribute of the application program for browsing the page.

[0161] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:

[0162] A window change event of an application program for browsing pages is monitored; when the window change event is monitored, the first position information and the first size information are adjusted according to the window change information.

[0163] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties.

[0164] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to the memory, database or other medium used in the embodiments provided in the present application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetoresistive random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. As an illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM). The database involved in each embodiment provided in this application may include at least one of a relational database and a non-relational database. Non-relational databases may include distributed databases based on blockchains, etc., but are not limited to this. The processor involved in each embodiment provided in this application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic device, a data processing logic device based on quantum computing, etc., but are not limited to this.

[0165] The technical features of the above embodiments may be arbitrarily combined. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0166] The above-described embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be construed as limiting the scope of the present application. It should be noted that, for a person of ordinary skill in the art, several modifications and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the attached claims.

Claims

1. A method for displaying a guide page, characterized in that: The method comprises: In response to a rendering instruction of a page, obtaining guide identifiers and guide contents of all guide elements in the page; Determining a target element to be displayed from the guide elements according to the guide identifier; Determine first position information and first size information of the target element in the page; Determine, according to the first position information and the first size information, second position information and second size information of the guide content of the target element in the page; Assigning a shadow effect attribute of a cascading style sheet according to the first position information and the first size information, so as to set a shadow for an area in the page except the target element, thereby obtaining a first shadow area; Assigning a value to the shadow effect attribute according to the second position information and the second size information, so as to set a shadow on an area of ​​the page except for the guide content of the target element, to obtain a second shadow area; The overlapping area between the first shadow area and the second shadow area is used as the area of ​​the page excluding the target element and the guide content of the target element, and the guide page is rendered and displayed.

2. The method according to claim 1, characterized in that The step of determining a target element to be displayed from the guide element according to the guide identifier includes: Saving the guide identifier of the guide element displayed historically to the application cache of the application used to browse the page; Sort all guide elements according to their guide identifiers; The target element to be displayed is determined according to whether the guide identifiers of the sorted guide elements exist in the application cache.

3. The method according to claim 2, characterized in that After the guide identifier of the guide element displayed historically is saved in the application cache of the application used to browse the page, the method further includes: In response to an access instruction of a non-home page, displaying a guide page of a guide element of the non-home page; The guide identification of the guide element displayed on the guide page is saved in the application cache; In response to a jump instruction from a non-home page to a home page, a guide page of a target element to be displayed in the home page that is not stored in the application cache is displayed.

4. The method according to claim 1, characterized in that: The determining the first position information and the first size information of the target element in the page includes: The first position information and the first size information of the target element in the page are determined by using an offset attribute of an application program used to browse the page.

5. The method according to claim 1, characterized in that After rendering and displaying the guide page, the method further includes: Listening to window change events of an application used to browse the page; When the window change event is monitored, the first position information and the first size information are adjusted according to the window change information.

6. A display device for a guide page, characterized in that: The device comprises: A data acquisition module, used for acquiring the guide identifiers and guide contents of all guide elements in the page in response to the rendering instruction of the page; An element screening module, used for determining a target element to be displayed from the guide elements according to the guide identifier; An element information determination module, used to determine first position information and first size information of the target element in the page; A guide display module is used to determine the second position information and the second size information of the guide content of the target element in the page according to the first position information and the first size information; assign a shadow effect attribute of the cascading style sheet according to the first position information and the first size information to set a shadow for the area of ​​the page except the target element to obtain a first shadow area; assign a shadow effect attribute according to the second position information and the second size information to set a shadow for the area of ​​the page except the guide content of the target element to obtain a second shadow area; use the overlapping area of ​​the first shadow area and the second shadow area as the area of ​​the page except the target element and the guide content of the target element, and render and display the guide page.

7. The device according to claim 6, characterized in that The element filtering module is also used to: Saving the guide identifier of the guide element displayed historically to the application cache of the application used to browse the page; Sort all guide elements according to their guide identifiers; The target element to be displayed is determined according to whether the guide identifiers of the sorted guide elements exist in the application cache.

8. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 5 are implemented.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 5 are implemented.

10. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 5 are implemented.

Images