H5 page interaction method, readable storage medium and electronic equipment

Abstract

The invention discloses an H5 page interaction method, a readable storage medium and electronic equipment, and the method comprises the following steps: maintaining an operation stack of a page in the page, so as to record each step of operation in the page through the operation stack; when a return request is obtained, the operation stack returns the operation of the page step by step according to the return request; obtaining a page switching request, taking the page as an old page, and loading a new page; obtaining a loading process of the new page, destroying the old page and an operation stack of the old page when the loading process of the new page meets a preset condition, and maintaining the operation stack of the new page in the new page. According to the H5 page interaction method, the accuracy of the return operation can be effectively improved, the page switching fluency is improved, and the interaction experience feeling between a user and the H5 page is remarkably improved.

Description

Technical Field

[0001] The present invention relates to the technical field of page processing, and in particular, to an H5 page interaction method, a readable storage medium, and an electronic device. Background Art

[0002] Currently, in application program pages developed based on H5, page jump and return operations are implemented in the following two ways: The first way is page return based on the history management of the browser. When the user clicks the return button of the browser, the browser records the history of the page in a stack manner and gradually returns to the previous page. The return operation is usually carried out in units of pages. In complex processes, the user cannot return according to the operation steps but directly jumps to the previous-level page, resulting in the loss of complex operations and affecting the user's interaction experience; The second way is to adopt a single-page application (SPA) framework and implement the switching between pages through route management. Without reloading the page, the content of the page is updated through JavaScript. Although the single-page application framework can implement custom route management, the return operation still depends on the browser's history stack and cannot achieve fine-grained step-level return; in addition, when the H5 page adopting the single-page application framework switches pages, the old page is usually immediately destroyed and a new page is created, and it lacks a synchronization mechanism, resulting in uneven page switching and prone to problems such as page flickering or incoherence. Summary of the Invention

[0003] The technical problem to be solved by the present invention is: to provide an H5 page interaction method, a readable storage medium, and an electronic device to solve the problem of poor interaction experience in existing H5 page jump and return operations.

[0004] To solve the above technical problem, the technical solution adopted by the present invention is: an H5 page interaction method, including the following steps: maintaining an operation stack of the page in the page to record each operation in the page through the operation stack; when a return request is obtained, the operation stack gradually returns the operations of the page according to the return request; obtaining a page switching request, taking the page as the old page and loading a new page; obtaining the loading process of the new page, and when the loading process of the new page meets a preset condition, destroying the old page and the operation stack of the old page, and maintaining an operation stack of the new page in the new page.

[0005] Further, the operation stack is a last-in, first-out stack.

[0006] Further, maintaining an operation stack of the page in the page includes: when an operation request is obtained, pushing the operation into the operation stack; When a return request is obtained, the operation stack gradually returns the operations in the page according to the return request, including: the operation stack pops the last operation pushed into the operation stack, and obtains the page to be rolled back or the step to be rolled back according to the popped operation.

[0007] Further, the loading of the new page includes: using the old page as the background for loading the new page.

[0008] Further, the loading of the new page includes: loading and displaying the new page through an animation effect.

[0009] Further, the loading process includes the progress display of the animation effect and the progress of loading the new page.

[0010] Further, synchronous control is performed on the progress display of the animation effect and the destruction of the old page.

[0011] Further, when the loading process of the new page meets a preset condition, the old page and the operation stack of the old page are destroyed. Specifically, when the progress display of the animation effect is 100% and the progress of loading the new page is 100%, the destruction of the old page and the operation stack of the old page starts.

[0012] Another object of the present invention is to provide a computer-readable storage medium, including a memory, a processor, and a computer program stored on the memory and executable on the processor; wherein, when the processor executes the computer program, the above-mentioned H5 page interaction method is implemented.

[0013] Another object of the present invention is to provide an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the computer program, the above-mentioned H5 page interaction method is implemented.

[0014] The beneficial effects of the present invention are as follows: The H5 page interaction method provided by the present invention records each step of the page by maintaining an operation stack. This H5 page interaction method can perform step-by-step and gradual rollback on complex processes to effectively improve the user's interaction experience with complex process pages; this H5 page interaction method will only destroy the old page and the operation stack of the old page after meeting the preset conditions when switching pages. This H5 page interaction method can ensure a smooth transition during the page switching process and prevent page flickering and incoherence problems when switching pages. This H5 page interaction method can effectively improve the accuracy of the return operation and the fluency of page switching, and significantly improve the user's interaction experience with the H5 page. Description of the Drawings

[0015] Figure 1It is a flowchart of the steps of an H5 page interaction method according to the present invention. Detailed implementation manners

[0016] To describe in detail the technical content, achieved objectives and effects of the present invention, the following is described in conjunction with the implementation manners and with reference to the accompanying drawings.

[0017] Please refer to Figure 1 , an H5 page interaction method, including the following steps: maintaining an operation stack of the page in the page to record each operation in the page through the operation stack; when a return request is obtained, the operation stack gradually returns the operations in the page according to the return request; obtaining a page switching request, taking the page as the old page and loading a new page; obtaining the loading process of the new page, and when the loading process of the new page meets a preset condition, destroying the old page and the operation stack of the old page, and maintaining an operation stack of the new page in the new page.

[0018] It can be seen from the above description that the beneficial effects of the present invention are as follows: This H5 page interaction method provided by the present invention records each operation of the page by maintaining an operation stack. This H5 page interaction method can perform step-by-step and gradual rollback on complex processes to effectively improve the user's interaction experience with complex process pages; this H5 page interaction method will only destroy the old page and the operation stack of the old page after meeting the preset conditions when switching pages. This H5 page interaction method can ensure a smooth transition during the page switching process and prevent page flickering and incoherence problems when switching pages. This H5 page interaction method can effectively improve the accuracy of the return operation and the smoothness of page switching, and significantly improve the user's interaction experience with the H5 page.

[0019] Further, the operation stack is a last-in-first-out stack.

[0020] It can be seen from the above description that the last-in-first-out stack can make the step-by-step recording or rollback of operations of this H5 page interaction method have a clear logical order, ensure the accuracy of the return operation of this H5 page interaction method, and be beneficial to improving the stability of the H5 page.

[0021] Further, maintaining the operation stack of the page in the page includes: when an operation request is obtained, pushing the operation into the operation stack; When a return request is obtained, the operation stack gradually returns the operations in the page according to the return request, including: the operation stack pops the last operation pushed into the operation stack, and obtains the rolled-back page or rolled-back step according to the popped operation.

[0022] It can be seen from the above description that this H5 page interaction method can achieve a step-by-step return operation with high accuracy.

[0023] Further, the loading of the new page includes using the old page as the background for loading the new page.

[0024] As can be seen from the above description, when loading the new page, this H5 page interaction method uses the old page as the background for loading the new page to avoid the blank flashing during page switching and improve the coherence of the user's visual perception of the switched page.

[0025] Further, the loading of the new page includes loading and displaying the new page through an animation effect.

[0026] As can be seen from the above description, this H5 page interaction method loads and displays the new page through an animation effect, which can make the page switching more vivid and intuitive and improve the visual experience of page switching.

[0027] Further, the loading process includes the display progress of the animation effect and the loading progress of the new page.

[0028] As can be seen from the above description, this H5 page switching method can ensure the integrity and smoothness of the page switching process.

[0029] Further, synchronous control is performed on the display progress of the animation effect and the destruction of the old page.

[0030] As can be seen from the above description, this H5 page interaction method can solve the problem of poor page switching coherence caused by the destruction of the old page before the new page is fully loaded and displayed, avoid the inconsistency between the visual effect and the actual state of the page, and further improve the stability and reliability of page switching.

[0031] Further, when the loading process of the new page meets the preset conditions, the old page and the operation stack of the old page are destroyed. Specifically, when the display progress of the animation effect is 100% and the loading progress of the new page is 100%, the destruction of the old page and the operation stack of the old page starts.

[0032] As can be seen from the above description, this H5 page interaction method can ensure the full loading and stable display of the page and the complete presentation of the animation effect to avoid abnormal situations that may occur during page switching and improve the stability of the system and the user experience.

[0033] Another object of the present invention is to provide a computer-readable storage medium, including a memory, a processor, and a computer program stored on the memory and executable on the processor; wherein, when the processor executes the computer program, the above-mentioned H5 page interaction method is implemented.

[0034] As described above, the computer-readable storage medium of the present invention at least includes all the beneficial effects of the above H5 page interaction method.

[0035] Another object of the present invention is to provide an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the computer program, the above-mentioned H5 page interaction method is implemented.

[0036] As described above, the electronic device of the present invention at least includes all the beneficial effects of the above H5 page interaction method.

[0037] Embodiment 1 Please refer to Figure 1 , Embodiment 1 of the present invention is: providing an H5 page interaction method, which includes the following steps: maintaining an operation stack of the page in the page to record each operation in the page through the operation stack; when a return request is obtained, the operation stack gradually returns the operations of the page according to the return request; obtaining a page switching request, taking the page as the old page and loading a new page; obtaining the loading process of the new page, and when the loading process of the new page meets a preset condition, destroying the old page and the operation stack of the old page, and maintaining an operation stack of the new page in the new page.

[0038] In the H5 page interaction method provided in this embodiment, each operation of the user in the page is recorded through the operation stack. When the user enters a new page or performs an operation in the page, the operation stack will record each operation. When the user obtains a return request, the system can gradually roll back each operation according to the records in the operation stack instead of returning to the previous page, so that the H5 page interaction method can provide more precise return control interaction for the user, enabling the user to gradually return to the desired operation step or page.

[0039] In addition, the H5 page interaction method provided in this embodiment rewrites the routing mechanism of H5. When switching pages, the old page will not be immediately destroyed during the process of switching from the old page to the new page, but the old page will be kept in the background until the new page is completely loaded and the animation is completed, and then the old page is destroyed. This H5 page interaction method can ensure the smooth transition of page switching and avoid the problem of abrupt interface changes during the process of switching pages.

[0040] Optionally, the operation stack is a last-in-first-out (LIFO) stack.

[0041] Maintaining the operation stack of the page in the page as described above includes: when an operation request is obtained, pushing the operation into the operation stack; When a return request is obtained, the operation stack gradually returns the operations in the page according to the return request, including: the operation stack pops the last operation pushed into the operation stack, and obtains the page to be rolled back or the step to be rolled back according to the popped operation.

[0042] The return operation of the traditional H5 page depends on the browser's history stack. When the user performs a return operation on the page, they can only do so in units of pages, and cannot gradually roll back multiple historical steps. However, using the H5 page interaction method described in this embodiment, when the user performs a return operation on the page, they will not simply return to the previous page, but can gradually return to each specific operation step, thereby improving the accuracy of the user's page operations.

[0043] In some preferred embodiments, the operation stack can also sequentially number the operations according to the operation order to identify the sequence of operations through the numbers; when a return request is obtained, the steps are returned in reverse order according to the numbers.

[0044] The loading of a new page described in this embodiment includes: using the old page as the background for loading the new page.

[0045] When switching pages in a traditional H5 page, users often feel that the page loading is too abrupt and lacks a visual sense of smoothness. In the H5 page interaction method designed in this embodiment, during the page switching process, the old page will first stay in the background, and the destruction operation will only be executed when the loading process of the new page meets the preset conditions. This can avoid the sense of abruptness caused by too fast page switching and ensure a natural transition between the new and old pages.

[0046] Specifically, the loading of the new page includes: loading and displaying the new page through an animation effect. Among them, the animation effect can be controlled by JavaScript or CSS to ensure that the new page can smoothly appear during page switching, while the old page gradually fades out or transitions through animation effects such as sliding. The H5 page interaction method provided in this embodiment can reduce the "instant disappearance" feeling generated by the user when switching pages, provide a smooth transition, and ensure the smoothness of the visual effect.

[0047] Considering that the animation of page switching in a traditional H5 page is not synchronized with the page life cycle (such as page destruction and loading), resulting in the animation effect being interrupted midway or the page being destroyed prematurely, which gives users a bad impression of page switching. To solve the above technical problems, in this embodiment, the loading process includes the display progress of the animation effect and the loading progress of the new page, so that the H5 page interaction method provided in this embodiment can synchronously control the display progress of the animation effect and the destruction of the old page.

[0048] Specifically, when the loading process of the new page meets the preset conditions, the old page and the operation stack of the old page are destroyed. Specifically, when the display progress of the animation effect is 100% and the loading progress of the new page is 100%, the destruction of the old page and the operation stack of the old page begins.

[0049] The H5 page interaction method described in this embodiment monitors the loading of the new page, the destruction of the old page, and the display of the animation effect, and controls the execution order of the animation within the life cycle of the page. Among them, when the new page is loaded, the display of the animation effect will be started simultaneously, and the destruction of the old page will occur with a delay until the display progress of the animation effect and the loading progress of the new page are both 100%. This method in this embodiment ensures that the animation and the life cycle of the page are always in sync through precise time control, ensures the complete display of the animation effect, and avoids the situation of the animation terminating prematurely or the page state being disordered. This method can ensure a coherent visual effect when switching pages.

[0050] In summary, the H5 page interaction method provided by the present invention records every step of the page operation by maintaining an operation stack. This H5 page interaction method can step by step and gradually roll back complex processes to effectively improve the user's interaction experience with complex process pages. This H5 page interaction method will only destroy the old page and the operation stack of the old page after meeting the preset conditions when switching pages. This H5 page interaction method can ensure a smooth transition during the page switching process and prevent page flickering and incoherence when switching pages. This H5 page interaction method can effectively improve the accuracy of the return operation and the fluency of page switching, and significantly improve the user's interaction experience with the H5 page.

[0051] The above are only embodiments of the present invention, and do not limit the patent scope of the present invention accordingly. Any equivalent transformation made using the content of the specification and drawings of the present invention, or directly or indirectly applied in related technical fields, shall be equally included in the patent protection scope of the present invention.

Claims

1. A method for H5 page interaction, characterized in that, It includes the following steps: Maintain an operation stack of the page in the page to record each operation in the page through the operation stack; When a return request is obtained, the operation stack gradually returns the operations of the page according to the return request; when a page switching request is obtained, use the page as the old page and load a new page; Obtain the loading process of the new page. When the loading process of the new page meets a preset condition, destroy the old page and the operation stack of the old page, and maintain an operation stack of the new page in the new page.

2. The H5 page interaction method according to claim 1, wherein, The operation stack is a last-in, first-out stack.

3. The H5 page interaction method according to claim 2, wherein Maintaining the operation stack of the page in the page includes: when an operation request is obtained, push the operation into the operation stack; When a return request is obtained, the operation stack gradually returns the operations in the page according to the return request, including: the operation stack pops the operation that was last pushed into the operation stack, and obtains the page to be rolled back or the step to be rolled back according to the popped operation.

4. The H5 page interaction method according to claim 1, wherein The loading of the new page includes: using the old page as the background for loading the new page.

5. The H5 page interaction method according to claim 1, wherein, The loading of the new page includes: loading and displaying the new page through an animation effect.

6. The H5 page interaction method according to claim 5, wherein The loading process includes an animation effect display progress and a new page loading progress.

7. The H5 page interaction method according to claim 6, wherein Synchronously control the animation effect display progress and the destruction of the old page.

8. The H5 page interaction method according to claim 7, wherein When the loading process of the new page meets the preset condition, destroying the old page and the operation stack of the old page specifically means: when the animation effect display progress is 100% and the new page loading progress is 100%, start to destroy the old page and the operation stack of the old page.

9. A computer-readable storage medium, characterized in that, It includes a memory, a processor, and a computer program stored on the memory and executable on the processor; wherein, when the processor executes the computer program, it implements an H5 page interaction method according to any one of claims 1 to 8.

10. An electronic device, characterized in that, It includes a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the computer program, it implements an H5 page interaction method according to any one of claims 1 to 8.

Images