CN-117171467-B - Method and device for realizing H5 page loading by utilizing Vue instruction

CN117171467BCN 117171467 BCN117171467 BCN 117171467BCN-117171467-B

Abstract

The application discloses a method and a device for realizing H5 page loading by utilizing a Vue instruction. The method comprises the steps of obtaining a custom Vue instruction, wherein the Vue instruction binds target elements in a target page, calling a first hook function contained in the Vue instruction in response to the operation of inserting the target elements into the target page, obtaining default values of the target elements from local, displaying and occupying the default values in the target page, calling a second hook function contained in the Vue instruction in response to interface return response data, obtaining the true values of the target elements from the response data, and replacing the default values with the true values. The application realizes that the default value is arranged on the H5 page to occupy the space before the request data is returned, thereby enhancing the user interaction experience.

Inventors

DONG XUDONG
ZHU BINBIN

Assignees

中信百信银行股份有限公司

Dates

Publication Date: 20260505
Application Date: 20230918

Claims (8)

1. A method for implementing H5 page loading using a Vue instruction, comprising: acquiring a custom Vue instruction, wherein the Vue instruction binds a target element in a target page; Responding to the operation of inserting the target element into the target page, calling a first hook function contained in the Vue instruction, locally acquiring a default value of the target element, and displaying and occupying the default value in the target page; Responding to response data returned by an interface, calling a second hook function contained in the Vue instruction, acquiring a true value of the target element from the response data, and replacing the default value with the true value; The method further comprises the steps of: Acquiring transfer parameters related to the target element from the Vue instruction; integrating the acquired transfer parameters with configuration parameters in a default configuration item to obtain overall parameters; Correspondingly displaying the true value of the target element on the target page based on the integrated overall parameters; The displaying and occupying the default value in the target page comprises: assigning the default value to the target element; cloning the DOM structure of the target element to generate a temporary DOM structure; Hiding the DOM structure of the target element, and displaying the temporary DOM structure in the target page.
2. The method of claim 1, wherein replacing the default value with the actual value comprises: Assigning the true value to the target element; changing the DOM structure of the target element from hidden to displayed; and removing the temporary DOM structure.
3. The method of claim 2, further comprising, after the generating the temporary DOM structure, setting a unique identification for the temporary DOM structure, and, before the removing the temporary DOM structure, searching for the corresponding temporary DOM structure by the unique identification.
4. The method of claim 1, wherein the overall parameter comprises a data type of the real value, the data type comprising at least one of a picture, a video, a string, and a digital type; The step of correspondingly displaying the real value of the target element on the target page based on the integrated overall parameters comprises the step of correspondingly displaying the real value of the target element on the target page according to display logic corresponding to the data type.
5. An apparatus for implementing H5 page loading using a Vue instruction, comprising: The acquisition module is configured to acquire a custom Vue instruction, wherein the Vue instruction binds target elements in a target page; The execution module is configured to respond to the operation of inserting the target element into the target page, call a first hook function contained in the Vue instruction, acquire a default value of the target element from local, display the default value in the target page and occupy the space; The execution module is further configured to acquire a transfer parameter related to the target element from the Vue instruction, integrate the acquired transfer parameter with a configuration parameter in a default configuration item to obtain an overall parameter, and correspondingly display the true value of the target element on the target page based on the integrated overall parameter; The displaying and occupying the default value in the target page comprises: assigning the default value to the target element; cloning the DOM structure of the target element to generate a temporary DOM structure; Hiding the DOM structure of the target element, and displaying the temporary DOM structure in the target page.
6. The apparatus of claim 5, wherein the device comprises a plurality of sensors, The execution module is further configured to change the DOM structure of the target element from hidden to displayed after the real value of the target element is acquired, and remove the temporary DOM structure.
7. A computer device, comprising: One or more processors; a storage device having one or more programs stored thereon, The one or more programs, when executed by the one or more processors, cause the one or more processors to implement the method of implementing H5 page loading with a Vue instruction as recited in any one of claims 1-5.
8. A computer readable storage medium having stored thereon a computer program which when executed by one or more processors implements a method of implementing H5 page loading with Vue instructions as claimed in any one of claims 1 to 5.

Description

Method and device for realizing H5 page loading by utilizing Vue instruction Technical Field The application relates to the technical field of computers, in particular to a method and a device for realizing H5 page loading by utilizing a Vue instruction. Background H5 (HTML 5, generation 5 of hypertext markup language) pages have a waiting period from access to asynchronous request data return, during which the corresponding portion of the page is blank, which can affect the user interaction experience. The data shows that 47% of users wish the APP (application) or page to complete loading within 2 seconds. When the loading time exceeds 4 seconds, the user gets boring. When the loading time exceeds 8 seconds, the user will choose to leave. In fact, every 1 second more loading time, 7% of the users will be lost. In addition, when data is loaded into a page after being returned, the layout of the page may be changed, for example, a certain link or a button on the page is shifted, which further affects the user interaction experience. It is contemplated that if the user wants to click on a link or button, but at the moment the finger is dropped, the link or button moves and the user eventually clicks on other east-west | experiences are poor. The variation in page layout typically occurs due to asynchronously loaded data or dynamically adding DOM (Document Object Model ) elements to the page above the existing content. A culprit may be an image of unknown size, or a component or list that dynamically resizes itself, from scratch, etc. In order to improve user interaction experience, default values (pictures or characters and the like) can be loaded on the page before data return, so that display space is occupied on the page, and the page is prevented from being blank for a long time or the page layout is prevented from being changed. One prior art technique is to do the default value processing by creating new components, in component form. However, the scheme is relatively coupled with service logic, and decision logic needs to be performed in the service, for example, a default document or picture is displayed before the interface request data is returned, and logic decision needs to be added. This results in increased variability in default configuration and increased code maintenance costs. Another prior art is a skeletal screen solution. The framework screen scheme is realized at the moment before the front-end static resource loading is completed, if the interface network request which needs a long time is time-consuming after the page rendering is completed, default pictures or characters and the like are added before the data does not arrive, and the moment of the framework screen is untimely and cannot meet the default value processing of entering the business page. Disclosure of Invention The application mainly aims to provide a method and a device for realizing H5 page loading by utilizing a Vue instruction, which realize that a default value exists on an H5 page for display occupation before request data return, so as to enhance user interaction experience. The method for realizing H5 page loading by utilizing the Vue instruction comprises the steps of obtaining a custom Vue instruction, binding a target element in a target page by the Vue instruction, calling a first hook function contained in the Vue instruction in response to the operation of inserting the target element into the target page, obtaining a default value of the target element from local, displaying the default value in the target page and occupying the space, calling a second hook function contained in the Vue instruction in response to interface return response data, obtaining a true value of the target element from the response data, and replacing the default value with the true value. In some alternative embodiments, the displaying and occupying the default value in the target page comprises assigning the default value to the target element, cloning the DOM structure of the target element to generate a temporary DOM structure, hiding the DOM structure of the target element, and displaying the temporary DOM structure in the target page. In some alternative embodiments, replacing the default value with the real value includes assigning the real value to the target element, changing a DOM structure of the target element from hidden to displayed, and removing the temporary DOM structure. In some optional embodiments, after the generating the temporary DOM structure, the method further comprises setting a unique identifier for the temporary DOM structure, and before the removing the temporary DOM structure, the method further comprises searching for the corresponding temporary DOM structure by the unique identifier. In some optional embodiments, the method further comprises the steps of obtaining a transfer parameter related to the target element from the Vue instruction, integrating the obtained transfer parameter with a configurat