Method and device for implementing h5 page loading by using vue directive

Abstract

The application discloses a method and device for realizing H5 page loading by using a Vue instruction. The method comprises the following steps: obtaining a custom Vue instruction, wherein the Vue instruction is bound to a target element in a target page; in response to an operation of inserting the target element into the target page, calling a first hook function contained in the Vue instruction, obtaining a default value of the target element from a local, displaying and occupying the default value in the target page; in response to response data returned by an interface, calling a second hook function contained in the Vue instruction, obtaining an actual value of the target element from the response data, and replacing the default value with the actual value. The application realizes that a default value is displayed and occupied on an H5 page before requested data is returned, so as to enhance user interactive experience.

Description

Technical Field

[0001] This application relates to the field of computer technology, and specifically to a method and apparatus for loading H5 pages using Vue directives. Background Technology

[0002] H5 (HTML5, Hypertext Markup Language 5) pages experience a waiting period before asynchronous data requests are received. During this time, the corresponding parts of the page are blank, impacting the user experience. Data shows that 47% of users expect apps or pages to load within 2 seconds. Users become bored when loading takes more than 4 seconds, and leave when it exceeds 8 seconds. In fact, for every extra second of loading time, 7% of users are lost.

[0003] Furthermore, when data is returned and loaded onto the page, it may cause changes in the page layout. For example, a link or button on the page might shift, further impacting the user experience. Imagine if a user wanted to click a link or button, but the link or button moved the instant their finger touched it, causing them to click something else! This is a terrible experience. Changes in page layout usually occur due to asynchronously loaded data or dynamically adding DOM (Document Object Model) elements on top of existing content. The culprit might be an image of unknown size, or a component or list that dynamically resizes or appears out of nowhere.

[0004] To improve the user experience, default values ​​(images or text, etc.) can be loaded on the page before the data is returned. This serves as a placeholder on the page and prevents the page from being blank for a long time or from changing the page layout.

[0005] One existing technique involves creating new components to handle default values. However, this approach is heavily coupled with business logic, requiring conditional logic within the business logic. For example, displaying default text or images before API request data is returned necessitates additional logic checks. This leads to increased variability in default value configurations and higher code maintenance costs.

[0006] Another existing technology is the skeleton screen solution. The skeleton screen solution is implemented before the front-end static resources are fully loaded. If the page rendering process involves long interface network requests, it is necessary to add default images or text before the data arrives. In this case, the timing of the skeleton screen is inappropriate and cannot meet the default value handling requirements when entering the business page. Summary of the Invention

[0007] The main purpose of this application is to propose a method and apparatus for loading H5 pages using Vue directives, so as to display default values ​​as placeholders on the H5 page before the requested data is returned, thereby enhancing the user interaction experience.

[0008] In a first aspect, this application provides a method for loading an H5 page using Vue directives, comprising: obtaining a custom Vue directive, wherein the Vue directive is bound to a target element in a target page; in response to the operation of inserting the target element into the target page, calling a first hook function contained in the Vue directive to obtain a default value of the target element from the local source, and displaying and placing the default value in the target page; in response to the return of response data from the interface, calling a second hook function contained in the Vue directive to obtain the actual value of the target element from the response data, and replacing the default value with the actual value.

[0009] In some optional implementations, displaying and placing the default value on the target page includes: 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 on the target page.

[0010] In some optional implementations, replacing the default value with the real value includes: assigning the real value to the target element; changing the DOM structure of the target element from hidden to visible; and removing the temporary DOM structure.

[0011] In some optional implementations, after generating the temporary DOM structure, the method further includes: setting a unique identifier for the temporary DOM structure; before removing the temporary DOM structure, the method further includes: finding the corresponding temporary DOM structure using the unique identifier.

[0012] In some optional implementations, the method further includes: obtaining the transmission parameters related to the target element from the Vue directive; integrating the obtained transmission parameters with the configuration parameters in the default configuration items to obtain overall parameters; and displaying the actual value of the target element on the target page based on the integrated overall parameters.

[0013] In some optional implementations, the overall parameters include the data type of the real value, which includes at least one of image, video, string, and number types; displaying the real value of the target element on the target page based on the integrated overall parameters includes: displaying the real value of the target element on the target page according to the display logic corresponding to the data type.

[0014] Secondly, this application provides an apparatus for loading an H5 page using Vue directives, comprising: an acquisition module configured to acquire a custom Vue directive, the Vue directive being bound to a target element in a target page; and an execution module configured to, in response to an operation where the target element is inserted into the target page, call a first hook function contained in the Vue directive to acquire a default value of the target element from the local source, and display and place the default value in the target page; and, in response to an interface returning response data, call a second hook function contained in the Vue directive to acquire the actual value of the target element from the response data, and replace the default value with the actual value.

[0015] In some optional implementations, the execution module is further configured to: after obtaining the default value of the target element, assign the default value to the target element, clone the DOM structure of the target element, generate a temporary DOM structure, hide the DOM structure of the target element, and display the temporary DOM structure on the target page; after obtaining the real value of the target element, change the DOM structure of the target element from hidden to displayed, and remove the temporary DOM structure.

[0016] Thirdly, this application provides a computer device, including: one or more processors; and a storage device storing one or more programs thereon, which, when executed by the one or more processors, cause the one or more processors to implement the method of loading H5 pages using Vue directives as described in the first aspect.

[0017] Fourthly, this application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by one or more processors, implements the method for loading H5 pages using Vue directives as described in the first aspect.

[0018] To enhance the user experience by displaying default values ​​on the H5 page before asynchronous data requests are returned, this application proposes a method and apparatus for loading H5 pages using Vue directives. The beneficial effects achieved by adopting the above technical solution include, but are not limited to:

[0019] 1. By using custom Vue directives, you can display the default value before the actual value of the asynchronous request is returned, and replace it with the actual value after the actual value is returned. This can enhance the page display effect, reduce user waiting time to some extent, and improve the user interaction experience.

[0020] 2. By using Vue directives to handle default values ​​and placing them on the page, the cumulative layout offset (CLS) score can be effectively reduced, preventing changes to the page layout of H5 pages and further improving the user interaction experience.

[0021] 3. Default value handling can be achieved through Vue directives, making it easy to configure different default effects;

[0022] 4. By using Vue directives to handle default values, the system is decoupled from business logic, which can quickly improve page stability without requiring excessive business logic checks. This reduces the variability of default value configurations and lowers code maintenance costs. Attached Figure Description

[0023] Other features, objects, and advantages of this application will become more apparent from the following detailed description of non-limiting embodiments with reference to the accompanying drawings. The drawings are for illustrative purposes only and are not intended to limit the invention. In the drawings:

[0024] Figure 1 This is an exemplary system architecture diagram of at least one embodiment of this application;

[0025] Figure 2 This is a timing diagram of an embodiment of the method for loading H5 pages using Vue directives according to this application;

[0026] Figures 3A-3E This is a schematic diagram illustrating the verification effect according to at least one embodiment of this application;

[0027] Figure 4 This is a flowchart of an embodiment of the method for loading H5 pages using Vue directives according to this application;

[0028] Figure 5 This is a structural diagram of an embodiment of the apparatus for loading H5 pages using Vue directives according to this application;

[0029] Figure 6 This is a schematic diagram of the hardware configuration of an embodiment of a computer device according to this application. Detailed Implementation

[0030] In order to gain a more detailed understanding of the features and technical content of the embodiments of this application, the implementation of the embodiments of this application will be described in detail below with reference to the accompanying drawings. The accompanying drawings are for reference and illustration only and are not intended to limit the embodiments of this application.

[0031] refer to Figure 1 , Figure 1An exemplary system architecture 100 is shown, illustrating at least one embodiment of the method and apparatus for loading H5 pages using Vue directives according to this application.

[0032] like Figure 1 As shown, system architecture 100 may include at least one terminal device 101, a server 102, and a network 103. Network 103 serves as a medium for providing a communication link between terminal device 101 and server 102. Network 103 may include various connection types, such as wired or wireless communication links or fiber optic cables. Users can use terminal device 101 to interact with server 102 through network 103.

[0033] The terminal device 101 can be equipped with various communication client applications, such as banking system applications, web browser applications, shopping applications, search applications, instant messaging tools, email clients, social media platform software, etc. The terminal device 101 can be hardware or software. When the terminal device 101 is hardware, it can be various electronic devices with a display screen, including but not limited to mobile phones, tablets, laptops, and desktop computers. When the terminal device 101 is software, it can be installed on the aforementioned electronic devices. It can be implemented as multiple software programs or software modules (e.g., to provide distributed services), or as a single software program or software module. No specific limitations are imposed here.

[0034] Server 102 can be a server providing various services, such as a backend server supporting banking system applications displayed on terminal device 101. Server 102 can be hardware or software. When server 102 is hardware, it can be implemented as a distributed server cluster consisting of multiple servers, or as a single server. When server 102 is software, it can be implemented as multiple software programs or software modules (e.g., used to provide distributed services), or as a single software program or software module. No specific limitations are made here.

[0035] It should be noted that the method for loading H5 pages using Vue directives provided in this application is generally executed by terminal device 101. Correspondingly, the device for loading H5 pages using Vue directives is generally located in terminal device 101. It should also be noted that in some cases, the H5 page recording method provided in this application can be executed by terminal device 101, by server 102, or by both terminal device 101 and server 102. Accordingly, the device for loading H5 pages using Vue directives can be located in server 102, in terminal device 101, or partially in server 102 and partially in terminal device 101. Furthermore, the system architecture 100 may include only server 102, only terminal device 101, or may include terminal device 101, network 103, and server 102. This application does not impose any limitations on this.

[0036] It should be understood that Figure 1 The number of terminal devices 101, network 103, and server 102 shown is merely illustrative. Depending on implementation needs, any number of terminal devices 101, network 103, and server 102 can be included.

[0037] refer to Figure 2 , Figure 2 This is a timing diagram of an embodiment of the method for loading an H5 page using Vue directives according to this application. Figure 2 As shown, the method for loading H5 pages using Vue directives in this application may include the following steps:

[0038] Step 21: Register a custom Vue directive.

[0039] Vue is a JavaScript framework for building user interfaces. This framework is designed to be applied layer by layer from the bottom up. In a page using Vue, Vue listens for changes in data and automatically re-renders the page structure. Changes in data structure drive automatic view updates. This embodiment utilizes Vue's custom directives to implement low-level manipulation and display logic for ordinary DOM elements when data is defaulted.

[0040] Here, you can register a globally custom Vue directive using the `Vue.directive(id, definition)` method. This method accepts two parameters: the directive's `id` (identifier) ​​and its definition object. The `id` is the directive's unique identifier, and the definition object is the custom Vue directive's hook function.

[0041] Example as follows:

[0042]

[0043] When registering a directive, a definition object can be passed in to assign special functions to the directive. The hook functions that a directive definition object can provide are shown in Table 1.

[0044] Table 1

[0045]

[0046] Next, we'll explain the parameters of the hook functions mentioned above (i.e., el, binding, VNode, and oldVNode). The hook functions of Vue directives are passed the following parameters:

[0047] el: The element to which the directive is bound, which can be used to directly manipulate the DOM.

[0048] binding: An object that contains the following properties.

[0049] VNode: Short for Virtual Node, generated by Vue. For an HTML5 page, whether it's components or elements, they are ultimately represented as VNodes in Vue. VNode is an abstraction of the DOM; essentially, it's a JavaScript object, providing a more lightweight description of the DOM.

[0050] oldVNode: The previous virtual node, available only in the update and componentUpdated hook functions.

[0051] The properties contained in the binding parameter object are shown in Table 2.

[0052] Table 2

[0053]

[0054] Custom Vue directives can bind values ​​that are not only properties in the data object, but also any valid JavaScript expression, such as numeric constants, string constants, object literals, etc.

[0055] Step 22: In response to the operation of inserting the target element into the target page, call the first hook function contained in the Vue directive.

[0056] This application leverages the features of Vue directives. The `inserted` hook is called when the bound element is inserted into its parent node, and the `componentUpdate` hook is called after all the VNodes (virtual nodes) and their child VNodes in the component have been updated. Before the data (actual value) from the asynchronous API request arrives during the initial page rendering, a default value (display text or loading image, etc.) is displayed as a placeholder. Once the actual data (real value) is obtained, the default value is replaced. This achieves a forward-looking display, allowing for subsequent data replacement without affecting the page layout.

[0057] Here, the first hook function can be `inserted`, and the target element is the element bound to the `inserted` hook function. In response to the operation of inserting the target element into the target page, the `inserted` hook function is called, retrieves the default value of the target element from local storage, and displays and places the default value in the target page. The specific process is as follows.

[0058] First, call `inserted(el, binding)`, which takes two arguments: `el` is the element to which the directive is bound, which can be used to directly manipulate the DOM; `binding` is an object containing many properties. Except for `el`, all other parameters should be read-only. By modifying `el`'s `innerHTML`, the displayed content can be changed. `innerHTML` is an attribute of the element; modifying this attribute allows you to modify the element's content.

[0059] Secondly, clone the DOM structure of the target element. If the innerHTML of the element `el` is invalid (i.e., the element `el` is not a static resource but a dynamic value), a copy of the DOM structure of `el` needs to be cloned. This is to ensure that the original data of `el` remains listenable and inherits all styles and DOM information of `el`, so that the `componentUpdate` hook function can listen for data changes. If the value is assigned directly without cloning, the `componentUpdate` hook function will not respond. The cloned data is called a temporary variable (temporary DOM structure). The temporary variable is added to `el` as a sibling element of `el`. A unique ID (identifier) ​​is set for this temporary DOM structure. The purpose of setting a unique ID is to ensure that the updated element is uniquely determined if there are multiple directives on the page. After setting it to the current form, two identical display elements will appear on the page. The original `el` needs to be hidden, and only the temporary DOM structure needs to be displayed. Thus, the default page will be displayed correctly, showing the default value.

[0060] The core logic is as follows:

[0061] if (!el.innerHTML){

[0062] const tempDiv=el.cloneNode();

[0063] tempDiv.innerHTML = "temporary data";

[0064] const eleName=`${tempEleID}_${(new Date()).getTime()}`;

[0065] tempDiv.id = eleName;

[0066] el.after(tempDiv);

[0067] el.brotherDivId = eleName;

[0068] el.style.oldDisplay=el.style.display;

[0069] el.style.display = "none";

[0070] }

[0071] Step 23: In response to the API returning response data, call the second hook function included in the Vue directive.

[0072] Here, the second hook function can be componentUpdate. When the API response data is returned, containing the actual value of the target element, the componentUpdate hook function is called when the actual value of the target element is obtained, replacing the default value on the page with the actual value.

[0073] If the corresponding data in the business logic changes after the API response, and the original `el` is not currently being manipulated in the `inserted` hook function, the `componentUpdate` hook function will be triggered after the data changes. The parameters `el` and `binding` in `componentUpdate` are the same as those in the `inserted` hook function. The value of `binding` is assigned to the `innerHTML` of the actual `el`, making `el` visible instead of hidden. A temporary DOM structure (the cloned DOM structure) is then retrieved using a unique ID and removed, ensuring that the actual data is correctly displayed after the data is returned.

[0074] The core processing logic is as follows:

[0075] componentUpdated(el, binding) {

[0076] el.innerHTML = "real data";

[0077] el.style.display=el.style.oldDisplay;

[0078] const brotherDivId=el.brotherDivId;

[0079] if(brotherDivId){

[0080] let tempElement=document.querySelector(`#${brotherDivId}`); tempElement? .remove();

[0081] }

[0082] }

[0083] The "real data" and temporary data in the code above require additional processing. In real-world business scenarios, a default loading image or text might be displayed. Therefore, the authenticity and validity of the transmitted data must be verified before assigning values.

[0084] Step 24: Integrate with the default configuration items.

[0085] The default data type of the response data (actual value) passed here could be an image object, a string, or a number, with different display logic for each data type. Optionally, default configuration options are pre-set locally. The display can be completed by combining the parameters passed from the caller with the configuration parameters in the default options.

[0086] For example, the default configuration sets an enumeration. For instance:

[0087] DvEnum = {

[0088] DV_DEFAULT:1,

[0089] / / Default fill type

[0090] FILL_TEXT:2,

[0091] / / Fill in the text

[0092] DV_IMG:3

[0093] / / Load image

[0094] }

[0095] / ****DvConfig

[0096] *@param{Object} default configuration

[0097] *@param{Number}type Fill type @see DvEnum

[0098] *@param{Number}num The number of characters to fill in, defaults to 6.

[0099] *@param{String}fillText is a custom external fill text value that defaults to *

[0100] *@param{content}content is the actual value passed in * /

[0101] DvConfig={type:DvEnum.FILL_TEXT,num:6,fillText:"*",content:""}

[0102] In this embodiment, different default display effects can be displayed by passing different data types. For example, if it's an image, the innerHtml will default to a loading image with an img tag. If it's a string, different display logic will be configured based on other parameters. If it's an object, passing objects is supported, and the object can have different keys such as type, num, and fillText to customize the display logic. num sets the number of times the default text needs to be displayed. For example, if fillText is * and num is 6, then passing {num:6, fillText:“*”} will display six *(******) on the page.

[0103] Additionally, unbinding is possible in Vue directives because this functionality lacks an event listener like addEventListener. Therefore, no logic needs to be handled in unbind.

[0104] The following is a test case for the caller:

[0105]

[0106] The above describes the method for loading H5 pages using Vue directives disclosed in the embodiments of this application.

[0107] The beneficial effects achieved by adopting the above technical solution include, but are not limited to:

[0108] 1. By using custom Vue directives, you can display the default value before the actual value of the asynchronous request is returned, and replace it with the actual value after the actual value is returned. This can enhance the page display effect, reduce user waiting time to some extent, and improve the user interaction experience.

[0109] 2. By using Vue directives to handle default values ​​and placing them on the page, the cumulative layout offset (CLS) score can be effectively reduced, preventing changes to the page layout of H5 pages and further improving the user interaction experience.

[0110] 3. Default value handling can be achieved through Vue directives, making it easy to configure different default effects;

[0111] 4. By using Vue directives to handle default values, the system is decoupled from business logic, which can quickly improve page stability without requiring excessive business logic checks. This reduces the variability of default value configurations and lowers code maintenance costs.

[0112] For ease of understanding, here is a brief introduction to Cumulative Layout Displacement (CLS).

[0113] Cumulative Layout Shift (CLS) is an important user-centric metric for measuring visual stability, as it helps quantify the frequency of page layout changes as a user opens the page. Currently, the official recommendation is that this metric should be less than 0.1, as a CLS helps ensure a good user experience. CLS measures the sum of the scores for every element's layout changes that occur throughout the entire lifecycle of a page. Layout shifts are defined by the Layout Instability API, which defines elements visible in the viewport as unstable if they change their starting position between two render frames. Note that a layout shift only occurs when an existing element changes its starting position. If a new element is added to the DOM or an existing element is resized, that element will not be counted as a layout shift as long as the change does not cause other visible elements to change their starting positions.

[0114] refer to Figures 3A-3E , Figures 3A-3E A schematic diagram illustrating the verification effect of at least one embodiment of this application is shown.

[0115] like Figure 3AAs shown, before using the technical solution of this application, the page renders a default page or a blank page before data is retrieved. Before the data arrives, there is no data, and the entire page is compressed. It's easy to understand that if the data arrives, it will directly fill the page height, as the data will enlarge the list items, increasing the impact on the CLS (Content List Size). This gives users the feeling of insufficient page stability, and the page frequently jumps downwards.

[0116] like Figure 3B-3D As shown, the effect of using the technical solution of this application is illustrated. Figure 3B and 3C As shown, the default is to display the overall page structure and placeholders, with corresponding elements such as title, interest rate, and term using default values ​​such as * or - instead. Figure 3D and 3E As shown, if data is returned, directly replace the corresponding * or - with the actual value. When filling in the actual value, the page does not jump.

[0117] refer to Figure 4 , Figure 4 This is a flowchart of an embodiment of the method for loading H5 pages using Vue directives according to this application. Figure 4 As shown, the method for loading H5 pages using Vue directives in this application includes:

[0118] Step 41: Obtain the custom Vue directive and bind the Vue directive to the target element in the target page;

[0119] Step 42: In response to the operation of inserting the target element into the target page, call the first hook function contained in the Vue directive to get the default value of the target element from the local source, and display and place the default value in the target page.

[0120] Step 43: In response to the API's response data, call the second hook function included in the Vue directive to obtain the actual value of the target element from the response data and replace the default value with the actual value.

[0121] In some optional implementations, displaying and placing the default value on the target page in step 42 includes:

[0122] Assign the default value to the target element;

[0123] Clone the DOM structure of the target element to generate a temporary DOM structure;

[0124] Hides the DOM structure of the target element and displays a temporary DOM structure on the target page.

[0125] In some alternative implementations, replacing the default value with the actual value in step 43 includes:

[0126] Assign the actual value to the target element;

[0127] Change the target element's DOM structure from hidden to visible;

[0128] Remove the temporary DOM structure.

[0129] In some alternative implementations, after generating the temporary DOM structure, the method further includes: setting a unique identifier for the temporary DOM structure; before removing the temporary DOM structure, the method further includes: finding the corresponding temporary DOM structure by the unique identifier.

[0130] In some alternative implementations, the method further includes:

[0131] Retrieve the passed parameters related to the target element from Vue directives;

[0132] The obtained parameters are combined with the configuration parameters in the default configuration items to obtain the overall parameters;

[0133] Based on the integrated overall parameters, the actual values ​​of the target elements are displayed on the target page accordingly.

[0134] In some optional implementations, the overall parameters include the data type of the real value, which includes at least one of image, video, string, and number types; displaying the real value of the target element on the target page based on the integrated overall parameters includes: displaying the real value of the target element on the target page according to the display logic corresponding to the data type.

[0135] It should be noted that the implementation details and technical effects of each step in the method of this embodiment can be found in the descriptions of other embodiments in this application, and will not be repeated here.

[0136] refer to Figure 5 , Figure 5 This is a structural diagram of one embodiment of the apparatus for loading H5 pages using Vue directives according to this application. Figure 5 As shown, the apparatus 500 for loading H5 pages using Vue directives in this application includes:

[0137] Module 51 is configured to retrieve custom Vue directives, which are bound to target elements on the target page.

[0138] Execution module 52 is configured to respond to the operation of inserting the target element into the target page by calling the first hook function contained in the Vue directive to obtain the default value of the target element from the local source and display and place the default value in the target page; and respond to the response data returned by the interface by calling the second hook function contained in the Vue directive to obtain the real value of the target element from the response data and replace the default value with the real value.

[0139] In some optional implementations, the execution module 52 is further configured to: after obtaining the default value of the target element, assign the default value to the target element, clone the DOM structure of the target element, generate a temporary DOM structure, hide the DOM structure of the target element, and display the temporary DOM structure on the target page; after obtaining the real value of the target element, change the DOM structure of the target element from hidden to displayed, and remove the temporary DOM structure.

[0140] It should be noted that the implementation details and technical effects of each module in the device of this embodiment can be found in the descriptions of other embodiments in this application, and will not be repeated here. The implementation schemes of each module of this device are diverse, as long as the purpose of the module can be achieved, and the actual deployment is not limited to the specific implementation scheme.

[0141] refer to Figure 6 , Figure 6 This is a schematic diagram of the structure of one embodiment of a computer device for implementing a server according to this application. Figure 6 As shown, the computer device 600 of this application may include:

[0142] One or more processors 601;

[0143] Memory 602, on which one or more programs 603 are stored;

[0144] Components such as processor 601 and memory 602 can be coupled together via bus system 604; bus system 604 is used to realize the connection and communication between these components.

[0145] When one or more programs 603 are executed by one or more processors 601, the one or more processors 601 implement the method of loading H5 pages using Vue directives as disclosed in the above method embodiments.

[0146] The bus system 604 may include a data bus, a power bus, a control bus, and a status signal bus. The memory 602 may be volatile or non-volatile, or both. The processor 601 may be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.

[0147] This application also provides a computer-readable storage medium storing a computer program thereon, which, when executed by one or more processors, implements the method for loading H5 pages using Vue directives as disclosed in the above method embodiments.

[0148] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create a machine for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0149] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0150] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0151] It should be understood that the terms "system" and "network" are often used interchangeably in this application. The term "and / or" in this application is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, or B existing alone. Furthermore, the character " / " in this application generally indicates that the preceding and following related objects have an "or" relationship.

[0152] The above description is merely a preferred embodiment of this application and is not intended to limit the scope of protection of this application. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this application should be included within the scope of protection of this application.

Claims

1. A method for loading H5 pages using Vue directives, characterized in that, include: Obtain a custom Vue directive, which is bound to a target element in the target page; In response to the operation of inserting the target element into the target page, the first hook function contained in the Vue directive is called to obtain the default value of the target element from the local source, and the default value is displayed and placed in the target page; In response to the API returning response data, the second hook function contained in the Vue directive is called to obtain the real value of the target element from the response data and replace the default value with the real value; The method further includes: Obtain the passed parameters related to the target element from the Vue directive; The obtained transmission parameters are integrated with the configuration parameters in the default configuration items to obtain the overall parameters; Based on the integrated overall parameters, the actual value of the target element is displayed on the target page accordingly; The step of displaying and placing the default value on the target page includes: Assign the default value to the target element; Clone the DOM structure of the target element to generate a temporary DOM structure; Hide the DOM structure of the target element and display the temporary DOM structure on the target page.

2. The method according to claim 1, characterized in that, Replacing the default value with the actual value includes: Assign the actual value to the target element; Change the DOM structure of the target element from hidden to visible; Remove the temporary DOM structure.

3. The method according to claim 2, characterized in that, After generating the temporary DOM structure, the method further includes: setting a unique identifier for the temporary DOM structure; before removing the temporary DOM structure, the method further includes: finding the corresponding temporary DOM structure using the unique identifier.

4. The method according to claim 1, characterized in that, The overall parameters include the data type of the actual value, which includes at least one of image, video, string, and number types; The step of displaying the actual value of the target element on the target page based on the integrated overall parameters includes: displaying the actual value of the target element on the target page according to the display logic corresponding to the data type.

5. A device for loading H5 pages using Vue directives, characterized in that, include: The module is configured to retrieve custom Vue directives, which are bound to target elements in the target page. The execution module is configured to respond to the operation of inserting the target element into the target page by calling the first hook function contained in the Vue directive, obtaining the default value of the target element from the local source, and displaying and placing the default value in the target page. In response to the API returning response data, the second hook function contained in the Vue directive is called to obtain the real value of the target element from the response data and replace the default value with the real value; The execution module is further configured to obtain the transmission parameters related to the target element from the Vue directive; and integrate the obtained transmission parameters with the configuration parameters in the default configuration items to obtain the overall parameters; Based on the integrated overall parameters, the actual value of the target element is displayed on the target page accordingly; The step of displaying and placing the default value on the target page includes: Assign the default value to the target element; Clone the DOM structure of the target element to generate a temporary DOM structure; Hide the DOM structure of the target element and display the temporary DOM structure on the target page.

6. The apparatus according to claim 5, characterized in that, The execution module is further configured to: after obtaining the real value of the target element, change the DOM structure of the target element from hidden to displayed, and remove the temporary DOM structure.

7. A computer device, characterized in that, include: One or more processors; Storage device, on which one or more programs are stored, When the one or more programs are executed by the one or more processors, the one or more processors implement the method of loading H5 pages using Vue directives as described in any one of claims 1-5.

8. A computer-readable storage medium, characterized in that, It stores a computer program that, when executed by one or more processors, implements the method for loading H5 pages using Vue directives as described in any one of claims 1-5.

Images