Data Rendering Method, Device, Equipment and Storage Medium for Mini Programs

Abstract

The present application provides a method, apparatus, device, and storage medium for rendering data of a mini-program. In this method, according to the monitored operation event, the position identifier of the data to be rendered is determined, and then the data to be rendered corresponding to the position identifier is obtained from the data buffer pool, and the data to be rendered is copied to the rendering data buffer pool for rendering. In this method, by copying the data to be rendered in the data buffer pool to the rendering data buffer pool for rendering, it avoids the problem that when the amount of data obtained from the server increases, it is easy to cause the mini-program to freeze or crash.

Description

Technical Field

[0001] The embodiments of the present application relate to the technical field of data processing, and in particular, to a method, apparatus, device, and storage medium for rendering data of a small program. Background Art

[0002] A small program is a new open mode that can be easily obtained and spread, providing a better user experience for end users.

[0003] In the prior art, when a small program receives a user's usage request, the small program sends a request to the server to respond to the user's usage request. Then, the internal components of the small program receive data from the server and render the received data in the small program, providing data support for subsequent operations such as the user swiping up and down or turning pages on the terminal.

[0004] In the process of implementing the present invention, the inventors found that there are at least the following problems in the prior art: With the application of small programs, the amount of data requested from the server is increasing, which easily causes the small program to freeze or crash. Summary of the Invention

[0005] The present application provides a method, apparatus, device, and storage medium for rendering data of a small program to solve the problems such as freezing or crashing of the small program when receiving a large amount of data.

[0006] In a first aspect, an embodiment of the present application provides a method for rendering data of a small program, which is applied to a terminal device and includes:

[0007] Determine a position identifier of the data to be rendered according to the monitored operation event, where the position identifier is used to indicate the start and end positions of the data to be rendered in the data buffer pool;

[0008] Obtain the data to be rendered corresponding to the position identifier from the data buffer pool;

[0009] Copy the data to be rendered into the rendering data buffer pool for rendering; where the data buffer pool is a preset storage area for storing all data requested from the server of the small program, and the rendering data buffer pool is a preset storage area that the small program can directly call data for rendering.

[0010] In a possible design of the first aspect, the method further includes:

[0011] Calculate the amount of data per screen according to the page height of the small program and the rendering height of each data on the page of the small program, where the amount of data per screen is the amount of data that can be rendered per screen when the small program runs on the terminal device;

[0012] Determining a location identifier of data to be rendered according to the monitored operation event includes:

[0013] Determining a location identifier of data to be rendered according to the monitored operation event and the amount of single-screen data of the mini-program.

[0014] In this possible design, determining a location identifier of data to be rendered according to the monitored operation event and the amount of single-screen data of the mini-program includes:

[0015] If the operation event is the initial entry into the mini-program, determine whether twice the amount of single-screen data is greater than or equal to the amount of data in the data buffer pool;

[0016] If twice the amount of single-screen data is greater than or equal to the amount of data in the data buffer pool, use the first data in the buffer pool as the start position and the last data in the data buffer pool as the end position; wherein, the location identifier of the data to be rendered includes the start position and the end position.

[0017] Optionally, the method further includes:

[0018] If twice the amount of single-screen data is less than the amount of data in the data buffer pool, use the first data in the buffer pool as the start position and the Nth data in the data buffer pool as the end position, where N is equal to twice the amount of single-screen data.

[0019] In this possible design, determining a location identifier of data to be currently rendered according to the monitored operation event and the amount of single-screen data of the mini-program includes:

[0020] If the operation event is a swiping-up operation, determine whether the amount of data between the end position of the currently rendered data in the data buffer pool and the last data in the data buffer pool is greater than the amount of single-screen data;

[0021] If so, use the position after adding the amount of single-screen data to the end position of the currently rendered data as the end position of the data to be rendered;

[0022] Otherwise, use the position of the last data in the buffer data pool as the end position of the data to be rendered.

[0023] Optionally, the method further includes:

[0024] If the amount of data of a single screen multiplied by three is less than the amount of data between the end position of the data to be rendered and the start position of the currently rendered data, then use the position three single-screen data amounts before the end position of the data to be rendered as the new start position of the data to be rendered.

[0025] In this possible design, determining the position identifier of the data to be rendered currently according to the monitored operation event and the amount of data of a single screen of the applet includes:

[0026] If the operation event is a downward swipe operation, determine whether there is data at a position one single-screen data amount before the start position of the currently rendered data in the data buffer pool;

[0027] If there is no data at a position one single-screen data amount before the start position of the currently rendered data, then use the position of the first data in the buffer data pool as the start position of the data to be rendered;

[0028] If there is data at a position one single-screen data amount before the start position of the currently rendered data, then use the position one single-screen data amount before the start position of the currently rendered data as the start position of the data to be rendered.

[0029] Optionally, the method further includes:

[0030] If the amount of data of a single screen multiplied by three is less than the amount of data between the start position of the data to be rendered and the end position of the currently rendered data, then use the position three single-screen data amounts after the start position of the data to be rendered as the new end position of the data to be rendered.

[0031] In another possible design of the first aspect, the method further includes:

[0032] When a swipe operation is monitored, determine whether the swipe operation is an upward swipe operation or a downward swipe operation according to the start coordinate and the end coordinate of the swipe operation on the Y axis.

[0033] In this possible design, determining whether the swipe operation is an upward swipe operation or a downward swipe operation according to the start coordinate and the end coordinate of the swipe operation includes:

[0034] Calculate the difference between the end coordinate and the start coordinate of the swipe operation on the Y axis;

[0035] If the difference is greater than zero, then determine that the swipe operation is a downward swipe operation;

[0036] If the difference is less than zero, then determine that the swipe operation is an upward swipe operation.

[0037] In still another possible design of the first aspect, before determining the position identifier of the data to be rendered according to the monitored operation event, the method further includes:

[0038] Obtain data from the server of the applet through an asynchronous data acquisition method;

[0039] If there is data in the data buffer pool, append and store the data obtained from the server of the applet at the end of the data in the data buffer pool;

[0040] If the data buffer pool is empty, store the data obtained from the server of the applet in the data buffer pool.

[0041] In a second aspect, an embodiment of the present application provides a data rendering device for an applet, including: a determination module, an acquisition module, and a processing module;

[0042] The determination module is configured to determine the position identifier of the data to be rendered according to the monitored operation event, where the position identifier is used to indicate the start and end positions of the data to be rendered in the data buffer pool;

[0043] The acquisition module is configured to obtain the data to be rendered corresponding to the position identifier from the data buffer pool;

[0044] The processing module is configured to copy the data to be rendered into the rendering data buffer pool for rendering; wherein, the data buffer pool is a preset storage area for storing all the data requested from the server of the applet, and the rendering data buffer pool is a preset storage area where the applet can directly call data for rendering.

[0045] In a possible design of the second aspect, the processing module is further configured to calculate the single-screen data volume according to the page height of the applet and the rendering height of each data on the page of the applet, where the single-screen data volume is the amount of data that can be rendered per screen when the applet runs on the terminal device;

[0046] Determining the position identifier of the data to be rendered according to the monitored operation event includes:

[0047] Determine the position identifier of the data to be rendered according to the monitored operation event and the single-screen data volume of the applet.

[0048] In this possible design, the processing module is configured to determine the position identifier of the data to be rendered according to the monitored operation event and the single-screen data volume of the applet, specifically:

[0049] The processing module is specifically configured to:

[0050] If the operation event is initially entering the applet, determine whether the amount of data per screen multiplied by two is greater than or equal to the amount of data in the data buffer pool;

[0051] If the amount of data per screen multiplied by two is greater than or equal to the amount of data in the data buffer pool, then use the first data in the buffer pool as the starting position and the last data in the data buffer pool as the ending position; wherein, the position identifier of the data to be rendered includes the starting position and the ending position.

[0052] Optionally, the processing module is further configured to, if the amount of data per screen multiplied by two is less than the amount of data in the data buffer pool, use the first data in the buffer pool as the starting position and the Nth data in the data buffer pool as the ending position, where N is equal to the amount of data per screen multiplied by two.

[0053] In this possible design, the processing module is configured to determine the position identifier of the data to be rendered currently according to the monitored operation event and the amount of data per screen of the applet, specifically:

[0054] The processing module is specifically configured to:

[0055] If the operation event is a swiping up operation, determine whether the amount of data between the ending position of the data currently rendered in the data buffer pool and the last data in the data buffer pool is greater than the amount of data per screen;

[0056] If so, use the position after adding the amount of data per screen to the ending position of the currently rendered data as the ending position of the data to be rendered;

[0057] Otherwise, use the position of the last data in the buffer data pool as the ending position of the data to be rendered.

[0058] Optionally, the processing module is further configured to, if the amount of data per screen multiplied by three is less than the amount of data between the determined ending position of the data to be rendered and the starting position of the currently rendered data, use the position at three amounts of data per screen before the ending position of the data to be rendered as the new starting position of the data to be rendered.

[0059] In this possible design, the processing module is configured to determine the position identifier of the data to be rendered currently according to the monitored operation event and the amount of data per screen of the applet, specifically:

[0060] The processing module is specifically configured to:

[0061] If the operation event is a downward sliding operation, determine whether there is data at a position of one single-screen data volume before the starting position of the data currently rendered in the data buffer pool;

[0062] If there is no data at a position of one single-screen data volume before the starting position of the currently rendered data, use the position of the first data in the buffer data pool as the starting position of the data to be rendered;

[0063] If there is data at a position of one single-screen data volume before the starting position of the currently rendered data, use the position of one single-screen data volume before the starting position of the currently rendered data as the starting position of the data to be rendered.

[0064] Optionally, the processing module is further configured to, if the amount of data between the starting position of the data to be rendered determined and the ending position of the currently rendered data is less than three times the single-screen data volume, use the position at three single-screen data volumes after the starting position of the data to be rendered as the new ending position of the data to be rendered.

[0065] In another possible design of the second aspect, the processing module is further configured to, when a sliding operation is monitored, determine whether the sliding operation is an upward sliding operation or a downward sliding operation according to the starting coordinate and the ending coordinate of the sliding operation on the Y axis.

[0066] In this possible design, the processing module is configured to determine whether the sliding operation is an upward sliding operation or a downward sliding operation according to the starting coordinate and the ending coordinate of the sliding operation, specifically:

[0067] The processing module is specifically configured to:

[0068] Calculate the difference between the ending coordinate and the starting coordinate of the sliding operation on the Y axis;

[0069] If the difference is greater than zero, determine that the sliding operation is a downward sliding operation;

[0070] If the difference is less than zero, determine that the sliding operation is an upward sliding operation.

[0071] In another possible design of the second aspect, before the determining module determines the position identifier of the data to be rendered according to the monitored operation event, it is further configured to:

[0072] Obtain data from the server of the applet through an asynchronous data acquisition method;

[0073] If there is data in the data buffer pool, append and store the data obtained from the server of the applet at the end of the data in the data buffer pool;

[0074] If the data buffer pool is empty, the data obtained from the server of the applet is stored in the data buffer pool.

[0075] In a third aspect, an embodiment of the present application provides a terminal device, including: a processor, a memory, a display, and a computer program stored on the memory and executable on the processor;

[0076] The memory stores computer execution instructions;

[0077] When the processor executes the computer program instructions, the data rendering method of the applet provided by the first aspect and each possible design is implemented.

[0078] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, in which computer program instructions are stored, and when the computer program instructions are executed by a processor, the data rendering method of the applet provided by the first aspect and each possible design is implemented.

[0079] In a fifth aspect, an embodiment of the present application provides a computer program product, including a computer program, and when the computer program is executed by a processor, the data rendering method of the applet provided by the first aspect and each possible design is implemented.

[0080] The data rendering method, device, equipment, and storage medium of the applet provided by the embodiments of the present application determine the position identifier of the data to be rendered according to the monitored operation event, then obtain the data to be rendered corresponding to the position identifier from the data buffer pool, and copy the data to be rendered into the rendering data buffer pool for rendering. In this method, based on the position identifier, the data to be rendered in the data buffer pool is copied into the rendering data buffer pool for rendering, avoiding the problem that when the amount of data requested from the server becomes larger and larger, it is easy to cause the applet to freeze or crash. Description of the Drawings

[0081] The drawings here are incorporated into the specification and form a part of this specification, showing embodiments that conform to the present disclosure, and are used together with the specification to explain the principles of the present disclosure.

[0082] Figure 1 It is a schematic architecture diagram of the data rendering of the applet provided by the embodiments of the present application;

[0083] Figure 2 It is a flowchart of the first embodiment of the data rendering method of the applet provided by the embodiments of the present application;

[0084] Figure 3 It is a flowchart of the second embodiment of the data rendering method of the applet provided by the embodiments of the present application;

[0085] Figure 4 Flowchart of the third embodiment of the data rendering method for mini programs provided by the embodiments of the present application;

[0086] Figure 5 Flowchart of the fourth embodiment of the data rendering method for mini programs provided by the embodiments of the present application;

[0087] Figure 6 Flowchart of the fifth embodiment of the data rendering method for mini programs provided by the embodiments of the present application;

[0088] Figure 7 Schematic diagram of the working process of the event listener provided by the embodiments of the present application;

[0089] Figure 8 Schematic diagram of the working process of the data buffer pool provided by the embodiments of the present application;

[0090] Figure 9 Schematic diagram of the working process of the rendering calculation center provided by the embodiments of the present application;

[0091] Figure 10 Schematic diagram of the structure of the data rendering device for mini programs provided by the embodiments of the present application;

[0092] Figure 11 Schematic diagram of the structure of the terminal device provided by the embodiments of the present application.

[0093] Through the above-mentioned drawings, specific embodiments of the present disclosure have been shown, and there will be more detailed descriptions hereinafter. These drawings and written descriptions are not intended to limit the scope of the concept of the present disclosure in any way, but to illustrate the concept of the present disclosure to those skilled in the art by referring to specific embodiments. Detailed Embodiments

[0094] Here, exemplary embodiments will be described in detail, and their examples are shown in the drawings. When the following description refers to the drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present disclosure. On the contrary, they are merely examples of devices and methods consistent with some aspects of the present disclosure as detailed in the appended claims.

[0095] Before introducing the embodiments of the present application, the professional terms and background technology of the present application will be explained first.

[0096] Release Memory: When storing data in the cache, memory is continuously occupied. The cache limit of the mini program is 10M. When the occupied cache exceeds the limit, the mini program will become slow or encounter unpredictable problems. When the data is no longer in use, we need to clear the cache to release the previously occupied memory space for other pages to use, improving the performance of the mini program.

[0097] A mini program is an application that can be used without downloading and installation. It realizes the dream of making applications "within reach". Such an application only needs the user to open it by scanning or searching. Among them, the mini program can be a WeChat mini program or other mini programs.

[0098] The data rendering of the mini program mainly involves directly putting the data obtained from the server through the mini program interface into the data attribute of the mini program page or internal components after the data is requested from the server. If it is placed in the data attribute of the internal component, the values of the data attribute are looped for rendering, that is, the data attribute provides data support for the user's operations such as swiping up and down and turning pages on the terminal.

[0099] However, in actual applications, there are the following problems with the current solution:

[0100] 1. When the amount of data returned by the mini program interface is too large, too many page elements of the mini program are rendered at one time, which may cause the mini program to freeze.

[0101] 2. When loading more mini programs when pulling up to load the page, more and more data is obtained in the data attribute, and the elements rendered on the page also increase, resulting in the mini program page becoming more and more stuck.

[0102] 3. When the amount of data increases to a certain level, the page elements of the mini program will reach the bottleneck value, resulting in the mini program freezing or crashing.

[0103] 4. After pulling up to load the page multiple times and clicking the "Back to Top" option, the page will basically freeze. These problems seriously affect the user experience.

[0104] In view of the problems existing in the above-mentioned prior art, this application provides a data rendering solution for mini programs, which can realize that as the mini program is applied, when the amount of data requested from the server is increasing and more and more mini programs are loaded, the mini program page can still smoothly display the content required by the user without freezing or even crashing.

[0105] Figure 1 It is the schematic diagram of the architecture of the data rendering of the mini program provided by the embodiment of this application. As Figure 1As shown in the figure, the schematic architecture diagram of data rendering may include: applet window 10, configuration collection center 11, event listener 12, data buffer pool 13, rendering data buffer pool 14, rendering calculation center 15, and asynchronous data fetching device 16.

[0106] Among them, the applet window 10 may include multiple pieces of data to be rendered 100.

[0107] In a possible implementation, the asynchronous data fetching device 16 is used to obtain data through the server of the applet and cache the data in the data buffer pool 13. The event listener 12 is used to listen for operation events in the applet window 10. The configuration collection center 11 is used to collect the maximum number of data that can be rendered on each page in the applet page. The rendering calculation center 15 calculates how much data in the data buffer pool 13 needs to be placed in the rendering data buffer pool 14 for rendering based on the number of rendering data per page calculated by the configuration collection center 11 and the operation events calculated by the event listener 12.

[0108] Optionally, each part in the above architecture can be replaced by an entity device, virtual device, or software with the same or similar functions. The present application does not impose too many restrictions on this.

[0109] Figure 1 The schematic architecture diagram of data rendering shown in the figure is applied to the terminal device that is the execution subject of the technical solution provided in the embodiment of the present application. Among them, the terminal device can be a mobile phone, a tablet computer, a computer, or any other mobile device with human-computer interaction capabilities such as other intelligent terminals, or it can be the cloud, or a server or other processing function entities.

[0110] Based on Figure 1 the above, the technical concept process of the data rendering solution of the applet provided in the present application is as follows: In the process of implementing the applet, the inventor found that reducing the data placed in the data component of the applet at one time can solve the above problems. However, users need to request more data from the server during use. Based on this consideration, different data storage areas are set. The data obtained by the server request is first cached, and the data that needs to be rendered currently is placed in the data component inside the applet for caching according to the user's operation. Specifically, by listening to the user's operation events, the data in the large data buffer pool can be determined through the screen height, the height that the user estimates each data needs to be displayed, and the height and direction of the slide to determine the data of the current screen and the two adjacent screens in total three screens, and dynamic rendering can be performed to avoid the occurrence of the applet freezing phenomenon when the data volume is too large.

[0111] Next, taking Figure 1Schematic diagram of the architecture for data rendering. The technical solution of the data rendering method for applets provided in this application will be described in detail through specific embodiments. It should be noted that the following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments. The embodiments of this application will be described below with reference to the accompanying drawings.

[0112] Figure 2 This is the flowchart of the first embodiment of the data rendering method for applets provided in the embodiments of this application. As Figure 2 shown, this method is applied to a terminal device and may include the following steps:

[0113] Step 21: Determine the location identifier of the data to be rendered according to the monitored operation event.

[0114] In this solution, during the application of the applet, the user will operate the applet according to their own needs. For example, the user can click on the controls in the applet or perform a sliding operation to view the required content. For the terminal device, after detecting the user's operation event, it is necessary to respond to the user's operation event, that is, to render the corresponding data on the window of the applet.

[0115] Optionally, the operation events involved in this application can be operation events such as the user's sliding operation and screen pressing operation, etc., and this solution does not limit this.

[0116] In this step, the data obtained by the applet from the server is stored in the data buffer pool. In order to obtain the data to be rendered in the applet, that is, the data to be rendered, it is first necessary to determine the position of the data to be rendered in the data buffer pool according to the operation event, including the start position and the end position. In this solution, the start position and the end position of the data to be rendered in the data buffer pool can be indicated by the location identifier.

[0117] The terminal device needs to determine the start position and the end position of the data to be rendered in the data buffer pool according to different operation events, and at least the following methods can be included:

[0118] The first implementation method: If the operation event is the initial entry into the applet, it is necessary to determine whether twice the amount of data per screen is greater than or equal to the amount of data in the data buffer pool, so as to determine the start position and the end position of the data on the current screen and the next screen in the data buffer pool.

[0119] In the second implementation method, if the operation event is a swiping-up operation, it is necessary to determine whether the amount of data between the end position of the currently rendered data in the data buffer pool and the last data in the data buffer pool is greater than the single-screen data amount, so as to determine the new end position of the data of the current screen, the previous screen and the next screen in total three screens in the data buffer pool, and further determine whether three times the single-screen data amount is less than the amount of data between the new end position and the start position of the currently rendered data, so as to determine the new start position.

[0120] In the third implementation method, if the operation event is a swiping-down operation, it is necessary to determine whether there is data at the position of one single-screen data amount before the start position of the currently rendered data in the data buffer pool, so as to determine the new start position of the data of the current screen, the previous screen and the next screen in total three screens in the data buffer pool, and further determine whether three times the single-screen data amount is less than the amount of data between the new start position and the end position of the currently rendered data, so as to determine the new end position.

[0121] Optionally, in a possible implementation, the single-screen data amount is calculated according to the page height of the applet and the rendering height of each data on the page of the applet. The single-screen data amount is the amount of data that can be rendered per screen when the applet runs on the terminal device.

[0122] Determine the position identifier of the data to be rendered according to the monitored operation event, including: determining the position identifier of the data to be rendered according to the monitored operation event and the single-screen data amount of the applet.

[0123] Among them, the position identifier of the data to be rendered includes the start position and the end position.

[0124] Optionally, using the component definition rule of the applet, the entire data rendering is defined as a component Component, and the input parameters of the component are defined using the properties object of the component, so as to collect the dynamic configuration of the user.

[0125] Specifically, obtain the height clientHeight of the applet window (i.e., the page height of the applet) through the applet interface wx.getSystemInfo, and calculate the amount of data that can be rendered per screen (i.e., the single-screen data amount) num = clientHeight / height by collecting the rendering height height (including the outer margin) of each data estimated by the user on the page of the applet. Then, according to the operation event, determine the start and end positions of the data to be rendered in the data buffer pool in the applet window.

[0126] Optionally, the calculation process of the single-screen data volume is fixed on each terminal device. When rendering data on each terminal device, the single-screen data volume can be determined by calculating only once, which improves the efficiency of the rendering calculation center.

[0127] Step 22: Obtain the data to be rendered corresponding to the position identifier from the data buffer pool.

[0128] In this solution, after the applet interface requests the server data, the terminal device will sequentially place the obtained data in the data buffer pool according to the request order.

[0129] In this step, based on the position identifier determined in the data buffer pool in the above step, the terminal device obtains the data between the start position and the end position from the data buffer pool as the data to be rendered.

[0130] Optionally, the data to be rendered is the data directly rendered by the window of the applet, that is, the data that responds to the user operation event.

[0131] Step 23: Copy the data to be rendered into the rendering data buffer pool for rendering.

[0132] In this step, the data to be rendered obtained from the data buffer pool is copied into the rendering data buffer pool and directly rendered through the applet page to respond to the user's operation event.

[0133] Optionally, the data buffer pool can be the data attribute of the applet Components component. Controlling the data in the rendering data buffer pool can control the size of the applet page rendering and the number of rendered data.

[0134] Among them, the data buffer pool is a preset storage area for storing all the data requested from the server of the applet, and the rendering data buffer pool is a preset storage area that the applet can directly call data for rendering.

[0135] Optionally, as the user operation event occurs, in the rendering data buffer pool, if some data is not needed, the terminal device discards this part of the data, that is, releases the memory to maintain the efficiency of data rendering. However, in order to keep the sliding position normal, an empty placeholder view can be reserved at the top of the applet page to support the height of the storage area discarded in the rendering data buffer pool.

[0136] The data rendering method of the applet provided by the embodiment of the present application determines the position identifier of the data to be rendered according to the monitored operation event, then obtains the data to be rendered corresponding to the position identifier from the data buffer pool, and copies the data to be rendered into the rendering data buffer pool for rendering. In this method, by copying the data to be rendered in the data buffer pool into the rendering data buffer pool for rendering, it avoids the phenomenon that too many page elements of the rendered applet cause the applet to freeze or crash under a large amount of data, and improves the user experience.

[0137] Before the above embodiment, Figure 3 It is a flowchart of the second embodiment of the data rendering method of the applet provided by the embodiment of the present application. As Figure 3 shown, before determining the position identifier of the data to be rendered according to the monitored operation event in step 21, the method further includes the following steps:

[0138] Step 31: Obtain data from the server of the applet through an asynchronous data acquisition method.

[0139] In this solution, during the application of the applet, when the user clicks on a control in the applet or can perform a sliding operation to view the required content, the terminal device will send a data request to the applet server according to the user's operation. Then the applet interface obtains the data sent by the applet server, providing data support for the user to view the required content.

[0140] In this step, when the applet interface obtains the data sent by the applet server, the acquisition method adopted can be asynchronous data acquisition, that is, as the user operates, the local data of the applet page is loaded or refreshed. For example, when the user swipes up the screen, the data after the next screen is continuously loaded or refreshed. And it will not affect the rendering of the current page.

[0141] Step 32: If there is data in the data buffer pool, append and store the data obtained from the server of the applet at the end of the data in the data buffer pool.

[0142] In this solution, in order to ensure that the content viewed by the user corresponds to the data provided by the applet server, the obtained data needs to be stored in the data buffer pool in sequence. This not only ensures the accuracy of the position identifier of the subsequent data to be rendered, but also makes it conform to the order of page data rendering when calling the data between the end position and the start position subsequently.

[0143] In this step, if there is data in the data buffer pool, the terminal device adds the data obtained from the server of the applet to the back of the original data in the data buffer pool.

[0144] Step 33: If the data buffer pool is empty, store the data obtained from the applet's server in the data buffer pool.

[0145] In this step, if there is no data in the data buffer pool, the terminal device directly adds the data obtained from the applet's server to the data buffer pool.

[0146] The data rendering method of the applet provided by the embodiments of the present application obtains data from the applet's server through an asynchronous data acquisition method. If there is data in the data buffer pool, append and store the data obtained from the applet's server at the end of the data in the data buffer pool; if the data buffer pool is empty, store the data obtained from the applet's server in the data buffer pool. In this method, data is obtained from the applet's server through an asynchronous data acquisition method, and the obtained data is stored in the data buffer pool, providing a basis for accurately determining the position identifier of the data to be rendered subsequently.

[0147] Based on the above embodiments, Figure 4 is a flowchart of the third embodiment of the data rendering method of the applet provided by the embodiments of the present application. As Figure 4 shown, when the operation event is initially entering the applet, the step of determining the position identifier of the data to be rendered according to the monitored operation event in the above step 21 can be implemented through the following steps:

[0148] Step 41: If the operation event is initially entering the applet, determine whether the single-screen data volume multiplied by two is greater than or equal to the data volume in the data buffer pool.

[0149] In this solution, when the user just opens the applet page, that is, when there is no rendered data on the previous screen of the applet page, it can be determined that the operation event is initially entering the applet.

[0150] Among them, in a possible implementation, for the user's operation event, the listening identifier (listenFlag) can be set to the working state, that is, when listenFlag is true, listen to the user's operation; in addition, when listenFlag is false, stop listening to the user's operation.

[0151] In this step, when the monitored user operation event is initially entering the applet, that is, when there is no rendered data on the previous screen of the applet page, it only needs to ensure that the data on the current screen and the next screen can be dynamically rendered to meet the user's needs. At this time, the terminal device will default to rendering the data on the current screen and the next screen.

[0152] Optionally, determine the relationship between the amount of data in the data buffer pool and twice the amount of data per screen to determine how much data in the data buffer pool needs to be placed in the rendering data buffer pool for direct invocation by the applet.

[0153] Optionally, if twice the amount of data per screen is greater than or equal to the amount of data in the data buffer pool, then execute step 42; if twice the amount of data per screen is less than the amount of data in the data buffer pool, then execute step 43.

[0154] Step 42: If twice the amount of data per screen is greater than or equal to the amount of data in the data buffer pool, then use the first data in the buffer pool as the starting position and the last data in the data buffer pool as the ending position.

[0155] In this step, if the amount of data that the operation event needs to render is less than or equal to the amount of data on the current screen and the next screen, it means that the amount of data that the user needs to view is less than or equal to the amount of data on the current screen and the next screen. That is, the current screen and the next screen can accommodate all the data that the user needs to view.

[0156] In a possible implementation, when num * 2 is greater than or equal to the amount of data in the data buffer pool, set the first data in the data buffer pool as the starting position (startFlag) and the last data as the ending position (endFlag).

[0157] Optionally, at this time, the listenFlag for listening to the operation event can be set to the offline state, that is, listenFlag is false, and the listening to the user operation is turned off.

[0158] Step 43: If twice the amount of data per screen is less than the amount of data in the data buffer pool, then use the first data in the buffer pool as the starting position and the Nth data in the data buffer pool as the ending position.

[0159] Wherein, N is equal to twice the amount of data per screen.

[0160] In this step, if the amount of data that the operation event needs to render is greater than the amount of data on the current screen and the next screen, it means that the amount of data that the user needs to view is greater than the amount of data on the current screen and the next screen. At this time, as long as it is ensured that there is data to be rendered on the current screen and the next screen, the normal operation of the user can be ensured.

[0161] In a possible implementation, when num * 2 is less than the amount of data in the data buffer pool, set the first data in the data buffer pool as startFlag and the Nth data as endFlag. So that the data between startFlag and endFlag meets the amount of data that the current screen and the next screen need to render.

[0162] For the data rendering method of the applet provided in this embodiment, if the operation event is the initial entry into the applet, it is determined whether the amount of data per screen multiplied by two is greater than or equal to the amount of data in the data buffer pool. If the amount of data per screen multiplied by two is greater than or equal to the amount of data in the data buffer pool, the first data in the buffer pool is used as the starting position, and the last data in the data buffer pool is used as the ending position; if the amount of data per screen multiplied by two is less than the amount of data in the data buffer pool, the first data in the buffer pool is used as the starting position, and the Nth data in the data buffer pool is used as the ending position. In this method, by judging the relationship between the amount of data per screen and the amount of data in the data buffer pool, when the operation event is the initial entry into the applet, the position identifier of the data to be rendered is determined, providing a basis for subsequent data rendering.

[0163] Based on the above embodiment, Figure 5 This is the flowchart of the fourth embodiment of the data rendering method of the applet provided in the embodiments of the present application. As Figure 5 shown, when the operation event is a swipe up operation, the step of determining the position identifier of the data to be rendered currently according to the monitored operation event in step 21 above can also be implemented through the following steps:

[0164] Step 51: If the operation event is a swipe up operation, determine whether the amount of data between the ending position of the currently rendered data in the data buffer pool and the last data in the data buffer pool is greater than the amount of data per screen.

[0165] In this solution, when the event listener monitors that the operation event is a swipe operation, it is determined whether the swipe operation is a swipe up operation or a swipe down operation according to the starting coordinate and the ending coordinate of the swipe operation on the Y axis.

[0166] Optionally, calculate the difference between the ending coordinate and the starting coordinate of the swipe operation on the Y axis. If the difference is greater than zero, it is determined that the swipe operation is a swipe down operation; if the difference is less than zero, it is determined that the swipe operation is a swipe up operation.

[0167] Among them, the up and down sliding of the screen can be regarded as sliding on the Y axis of the coordinate axis. The sliding direction identifier of the swipe operation can be represented by flag, and the sliding distance can be represented by offsetY.

[0168] Specifically, in a possible implementation, offsetY is obtained by subtracting the original Y-axis coordinate startY when pressing from the coordinate endY during the sliding process. If offsetY is greater than zero, it means sliding down and the page is rendered upward; if offsetY is less than zero, it means sliding up and the page is rendered downward; if offsetY is equal to zero, it may be a misoperation, a screen press operation, etc.

[0169] Optionally, if the user does not trigger a sliding operation, the default offsetY is 0, and the default sliding direction is upward. The page is rendered downward so that the asynchronous data fetching device can perform the first rendering calculation after fetching the data.

[0170] It should be noted that the trigger of the sliding operation requires the size of offsetY to exceed half of the screen distance. Specifically, if the size of offsetY is greater than 0, it means the user is sliding the screen. At this time, it is judged whether the sliding distance of the user is greater than clientHeight / 2. If it is greater, the rendering calculation center performs the calculation of data rendering. If it is less, the calculation is directly ended.

[0171] In addition, a timer timer is set to call the rendering calculation center during sliding, and at the same time, a delayed execution is set, that is, after the timer timer reaches the preset timing duration, the rendering calculation center performs the calculation to determine the start position and end position of the data to be rendered obtained from the data buffer pool. Calculation is not performed before the timer reaches the timing duration to prevent frequent calculations during sliding, reduce the number of calculations, and improve the smoothness of sliding.

[0172] Among them, the calculation starts to be responded to only after no sliding occurs for a period of time after the sliding ends. This period of time can be 0.1s.

[0173] In this step, if flag is upward sliding, it means the user performs an upward sliding operation and the page is rendered downward. At this time, it is necessary to ensure that there is rendered data on the next screen of the page. Therefore, it is necessary to judge whether the amount of data between the end position of the currently rendered data in the data buffer pool and the last data in the data buffer pool can meet the data rendering of the next screen, that is, whether it is greater than the single-screen data volume. At this time, a new endFlag is determined.

[0174] In a possible implementation, it is judged whether the data volume in the data buffer pool is greater than the endFlag of the currently rendered data in the data buffer pool plus num. If it is greater, step 52 is executed; if it is not greater, step 53 is executed.

[0175] Step 52: If so, the position after adding a single-screen data volume to the end position of the currently rendered data is used as the end position of the data to be rendered.

[0176] In this step, if the data volume in the data buffer pool is greater than the endFlag of the currently rendered data in the data buffer pool plus num, it means there is more data in the data buffer pool that needs to be rendered. At this time, a single-screen data volume can be added, and the position after the single-screen data volume is used as the new endFlag of the data to be rendered to ensure that there is complete content for browsing on the next screen when the user performs an upward sliding operation.

[0177] Step 53: Otherwise, use the position of the last data in the buffer data pool as the end position of the data to be rendered.

[0178] In this step, if the amount of data in the data buffer pool is not greater than the endFlag of the currently rendered data in the data buffer pool plus num, it means that adding a num, there is no more data in the data buffer pool, which means that the user has not performed an operation to make the applet interface obtain more data. Only need to use the position of the last data in the data buffer pool as the new endFlag of the data to be rendered.

[0179] In addition, the method may further include Step 54: If three times the single-screen data volume is less than the data volume between the determined end position of the data to be rendered and the start position of the currently rendered data, use the position at three single-screen data volumes before the end position of the data to be rendered as the new start position of the data to be rendered.

[0180] In this step, since the data that can be stored in the rendering data buffer pool can be directly used for page rendering, in order to ensure that there is data in the previous screen, the current screen, and the next screen that can be rendered, it is necessary to determine a new startFlag by judging whether the data volume from the new endFlag to the current startFlag in the data buffer pool is greater than or equal to the data volume that can be rendered by three screens, so that the data between the new startFlag and the new endFlag can support the data that can be rendered by three screens.

[0181] In a possible implementation, if the new endFlag minus the startFlag is greater than num * 3, use the position at three num before the new endFlag as the new startFlag of the data to be rendered, that is, keep the data in the previous screen, the current screen, and the next screen in the rendering state.

[0182] Further, judge whether the new endFlag plus num is greater than the amount of data in the data buffer pool. If it is greater, it means that there is no more data in the data buffer pool. Directly set the new startFlag to startFlag + (data buffer pool - new endFlag), and at the same time set the height of the view to height * (amount of data in the data buffer pool - num * 3); if it is less, set the new startFlag to the current startFlag + num, and set the height of the view to its own height plus height * num. At this time, the data between the new startFlag and the new endFlag can be determined as the data to be rendered.

[0183] In another possible implementation, if the new endFlag minus the startFlag is not greater than num * 3, it indicates that the user has not scrolled the screen down beyond three screens. At this time, the data between the startFlag and the new endFlag in the data buffer pool can be directly determined as the data to be rendered.

[0184] For the data rendering method of the applet provided by the embodiments of the present application, if the operation event is an upward swipe operation, it is determined whether the amount of data between the end position of the currently rendered data in the data buffer pool and the last data in the data buffer pool is greater than the amount of data per screen. If so, the position after adding the amount of data per screen to the end position of the currently rendered data is used as the end position of the data to be rendered; otherwise, the position of the last data in the buffer data pool is used as the end position of the data to be rendered. If the amount of data per screen multiplied by three is less than the amount of data between the determined end position of the data to be rendered and the start position of the currently rendered data, the position at three times the amount of data per screen before the end position of the data to be rendered is used as the new start position of the data to be rendered. In this method, by determining whether the amount of data between the end position of the currently rendered data in the data buffer pool and the last data in the data buffer pool is greater than the amount of data per screen, the new end position and the new start position of the data to be rendered are determined, ensuring the rendering of three-screen data during the upward swipe operation.

[0185] Based on the above embodiments, Figure 6 is a flowchart of Embodiment 5 of the data rendering method of the applet provided by the embodiments of the present application. As Figure 6 shown, when the operation event is a downward swipe operation, the position identifier of the data to be rendered currently determined according to the monitored operation event in step 21 above can also be implemented through the following steps:

[0186] Step 61: If the operation event is a downward swipe operation, determine whether there is data at a position one screen data amount before the start position of the currently rendered data in the data buffer pool.

[0187] In this step, if the sliding identifier flag is a downward swipe, the page is rendered upward. To ensure that the user does not experience lag during the downward swipe operation, it is necessary to ensure that the data of the previous screen can be rendered in the rendering data buffer pool. At this time, it is necessary to determine whether there is data at a position one screen data amount before the start position of the currently rendered data in the data buffer pool.

[0188] In a possible implementation, if there is data at a position one num before the startFlag of the currently rendered data in the data buffer pool, step 63 is executed; if there is no data, step 62 is executed.

[0189] Step 62: If there is no data at the position of one single-screen data volume before the starting position of the currently rendered data, then use the position of the first data in the buffer data pool as the starting position of the data to be rendered.

[0190] Optionally, if there is no data at the position of num before the startFlag of the currently rendered data in the data buffer pool, then use the position of the first data in the buffer data pool as the startFlag of the data to be rendered.

[0191] Specifically, determine whether the value of startFlag minus num is less than 0. If so, directly set startFlag to the initial state of 0, that is, use the position of the first data in the buffer data pool as the startFlag of the data to be rendered.

[0192] Step 63: If there is data at the position of one single-screen data volume before the starting position of the currently rendered data, then use the position of one single-screen data volume before the starting position of the currently rendered data as the starting position of the data to be rendered.

[0193] Optionally, if there is data at the position of num before the startFlag of the currently rendered data in the data buffer pool, then use the position of num before the startFlag of the currently rendered data as the startFlag of the data to be rendered.

[0194] Specifically, if the value of startFlag minus num is not less than 0, then the new startFlag is equal to the current startFlag minus num.

[0195] Optionally, after swiping up, the placeholder height needs to be subtracted, that is, the rendered data is used to replace the placeholder part. At this time, set the height of the view to the maximum value of its own height minus height multiplied by num and 0.

[0196] In addition, the method further includes Step 64: If the amount of data between the starting position of the determined data to be rendered and the ending position of the currently rendered data is less than three times the single-screen data volume, then use the position at three single-screen data volumes after the starting position of the data to be rendered as the new ending position of the data to be rendered.

[0197] In this step, since the data that can be stored in the rendering data buffer pool can be directly used for page rendering, in order to ensure that the data of the previous screen, the current screen, and the next screen can be rendered, it is necessary to determine a new endFlag by judging whether the amount of data from the current endFlag to the new startFlag in the data buffer pool is greater than or equal to the amount of data that can be rendered by three screens, so that the data between the new startFlag and the new endFlag can support the data that can be rendered by three screens.

[0198] In a possible implementation, after the above steps 62 and 63, it is determined whether num * 3 is not greater than endFlag minus the new startFlag. If so, it means that some rendering data of the next screen needs to be removed to ensure that the amount of rendered data always remains within the range of three screens, thereby ensuring the performance of data rendering. That is, the new endFlag is set to endFlag minus num. Further, the data between the new endFlag and the new startFlag in the data buffer pool is determined as the data to be rendered;

[0199] In addition, if num * 3 is greater than endFlag minus the new startFlag, it means that the user has not scrolled the screen beyond three screens. At this time, the data between endFlag and the new startFlag in the data buffer pool can be directly determined as the data to be rendered.

[0200] For the data rendering method of the applet provided in the embodiments of the present application, if the operation event is a scroll-down operation, it is determined whether there is data at the position of one single-screen data volume before the starting position of the data currently being rendered in the data buffer pool. If there is no data at the position of one single-screen data volume before the starting position of the data currently being rendered, the position of the first data in the buffer data pool is used as the starting position of the data to be rendered; if there is data at the position of one single-screen data volume before the starting position of the data currently being rendered, the position of one single-screen data volume before the starting position of the data currently being rendered is used as the starting position of the data to be rendered. If the amount of data between the determined starting position of the data to be rendered and the ending position of the data currently being rendered is less than the single-screen data volume multiplied by three, the position at three single-screen data volumes after the starting position of the data to be rendered is used as the new ending position of the data to be rendered. In this method, by determining whether there is data at the position of one single-screen data volume before the starting position of the data currently being rendered in the data buffer pool, the new starting position and the new ending position of the data to be rendered are determined, ensuring the rendering of three-screen data during the scroll-down operation.

[0201] Based on the above embodiments, Figure 7 is a schematic diagram of the working process of the event listener provided in the embodiments of the present application. As Figure 7 shown, the working flow chart includes the following steps:

[0202] Step 1, start;

[0203] Step 2, is the monitoring flag in the working state? If so, execute Step 3; if not, execute Step 11;

[0204] Step 3, monitor the screen press event and record the pressed Y-axis position;

[0205] Step 4: Monitor the screen sliding event and determine the Y-axis position of the sliding end point;

[0206] Step 5: Determine whether the Y-axis position of the sliding end point minus the pressed Y-axis position is greater than 0? If so, execute Step 6; if not, execute Step 7;

[0207] Step 6: Obtain the sliding identifier as a downward slide and the sliding distance, and execute Step 8;

[0208] Step 7: Obtain the sliding identifier as an upward slide and the sliding distance;

[0209] Step 8: Is there a timer? If so, execute Step 9; if not, execute Step 10;

[0210] Step 9: Clear the previous timer;

[0211] Step 10: Put the sliding identifier and the sliding distance plus the amount of single-screen data collected by the configuration collection center into the timer and call the rendering calculation center for rendering calculation;

[0212] Step 11: End.

[0213] Based on the above embodiments, Figure 8 is a schematic diagram of the working process of the data buffer pool provided by the embodiment of the present application. As Figure 8 shown, the working flow chart includes the following steps:

[0214] Step 1: Start;

[0215] Step 2: Obtain the data pulled by the asynchronous data pulling device;

[0216] Step 3: Determine whether there is data in the data buffer pool? If so, execute Step 4; if not, execute Step 7;

[0217] Step 4: Add the obtained data to the end of the data in the data buffer pool;

[0218] Step 5: Set the monitoring identifier to working;

[0219] Step 6: Call the rendering calculation center, enter the calculation logic, and execute Step 8;

[0220] Step 7: Put the obtained data into the data buffer pool and execute Step 5;

[0221] Step 8: End.

[0222] Based on the above embodiments, Figure 9 is a schematic diagram of the working process of the rendering calculation center provided by the embodiment of the present application. As Figure 9 shown, the working flow chart includes the following steps:

[0223] Step 1, Start;

[0224] Step 2, Obtain the sliding direction and sliding distance obtained by the event listener;

[0225] Step 3, Obtain the rendering height, single-screen data volume, and screen height of each piece of data in the configuration collection center;

[0226] Step 4, The starting position in the data buffer pool is defaulted to 0, and the ending position is defaulted to twice the single-screen data volume;

[0227] Step 5, Invoke the rendering calculation center and enter the calculation logic;

[0228] Step 6, Determine whether twice the single-screen data volume is greater than the data volume in the data buffer pool? If so, execute Step 7; if not, execute Step 10;

[0229] Step 7, Set the ending position to the data volume in the data buffer pool;

[0230] Step 8, Place the data in the entire data buffer pool into the rendering data buffer pool for rendering;

[0231] Step 9, Set the listening flag to offline and execute Step 30;

[0232] Step 10, Determine whether the sliding distance is greater than 0? If so, execute Step 12; if not, execute Step 11;

[0233] Step 11, Place the data from 0 to twice the single-screen data volume in the data buffer pool into the rendering data buffer pool and execute Step 30;

[0234] Step 12, Determine whether the sliding distance is greater than half of the screen height multiplied by two? If so, execute Step 13; if not, execute Step 30;

[0235] Step 13, Determine whether the sliding flag is a upward slide? If so, execute Step 23; if not, execute Step 14;

[0236] Step 14, Determine whether the ending position plus the single-screen data volume is greater than the data volume in the data buffer pool? If so, execute Step 16; if not, execute Step 15;

[0237] Step 15, Set the ending position to the current ending position plus the single-screen data volume and execute Step 17;

[0238] Step 16, Set the ending position to the data volume in the data buffer pool;

[0239] Step 17: Determine whether the end position minus the start position is greater than three times the single-screen data volume. If so, execute Step 18; if not, execute Step 29;

[0240] Step 18: Determine whether the end position plus the single-screen data volume is greater than the data volume in the data buffer pool. If so, execute Step 19; if not, execute Step 21;

[0241] Step 19: Set the start position to the current start position plus the data volume in the data buffer pool minus the end position;

[0242] Step 20: Set the height of the placeholder to the rendering height of each piece of data multiplied by (the total amount of data in the data buffer pool minus three times the single-screen data volume), and execute Step 29;

[0243] Step 21: Set the start position to the current start position plus the single-screen data volume;

[0244] Step 22: Set the height of the placeholder to its own height plus the rendering height of each piece of data multiplied by the single-screen data volume, and execute Step 29;

[0245] Step 23: Determine whether the start position minus the single-screen data volume is less than 0. If so, execute Step 24; if not, execute Step 25;

[0246] Step 24: Set the start position to 0, and execute Step 27;

[0247] Step 25: Set the start position to the current start position minus the single-screen data volume;

[0248] Step 26: Set the height of the placeholder to its height minus the rendering height multiplied by the maximum value of the single-screen data volume and 0;

[0249] Step 27: Determine whether the end position minus the start position is greater than three times the single-screen data volume. If so, execute Step 28; if not, execute Step 29;

[0250] Step 28: Set the end position to the current end position minus the single-screen data volume;

[0251] Step 29: Render the data from the start position to the end position in the data buffer pool in the rendering data buffer pool;

[0252] Step 30: End.

[0253] The above Figure 7 、 Figure 8 and Figure 9The provided data rendering method determines the listening identifier as the working state, obtains the sliding direction and sliding distance of the sliding event, and enters the calculation logic based on the determined single-screen data volume. Among them, when the operation event is initially entering the applet, it is necessary to determine whether the data volume after multiplying the single-screen data volume by two is greater than or equal to the data volume in the data buffer pool, so as to determine the start position and end position of the data of the current screen and the next screen in the data buffer pool; when the operation event is a swiping up operation, it is necessary to determine whether the data volume between the end position of the currently rendered data in the data buffer pool and the last data in the data buffer pool is greater than the single-screen data volume, so as to determine the new end position of the data of the current screen, the front and back two screens, a total of three screens in the data buffer pool, and further determine whether the single-screen data volume multiplied by three is less than the data volume between the new end position and the start position of the currently rendered data, so as to determine the new start position; when the operation event is a swiping down operation, it is necessary to determine whether there is data at the position of a single-screen data volume before the start position of the currently rendered data in the data buffer pool, so as to determine the new start position of the data of the current screen, the front and back two screens, a total of three screens in the data buffer pool, and further determine whether the single-screen data volume multiplied by three is less than the data volume between the new start position and the end position of the currently rendered data, so as to determine the new end position. Then, based on the determined start position and end position, the data between the start position and the end position is obtained from the data buffer pool, and the data is placed in the rendering data buffer pool for rendering. This method enables the applet page to still smoothly display the content required by the user when a large amount of data is sent from the server, without jamming or even crashing.

[0254] Figure 10 The following is a schematic structural diagram of a data rendering device for an applet provided by an embodiment of the present application. As Figure 10 shown, the device includes: a determination module 101, an acquisition module 102, and a processing module 103.

[0255] The determination module 101 is configured to determine the position identifier of the data to be rendered according to the monitored operation event, and the position identifier is used to indicate the start and end positions of the data to be rendered in the data buffer pool;

[0256] The acquisition module 102 is configured to acquire the data to be rendered corresponding to the position identifier from the data buffer pool;

[0257] The processing module 103 is configured to copy the data to be rendered into the rendering data buffer pool for rendering; wherein, the data buffer pool is a preset storage area for storing all data requested from the server of the applet, and the rendering data buffer pool is a preset storage area that the applet can directly call data for rendering.

[0258] In a possible design of an embodiment of the present application, the processing module 103 is further configured to calculate the single-screen data volume according to the page height of the mini-program and the rendering height of each data on the page of the mini-program, where the single-screen data volume is the amount of data that can be rendered per screen when the mini-program runs on the terminal device;

[0259] Determine the position identifier of the data to be rendered according to the monitored operation event, including:

[0260] Determine the position identifier of the data to be rendered according to the monitored operation event and the single-screen data volume of the mini-program.

[0261] In this possible design, the processing module 103 is configured to determine the position identifier of the data to be rendered according to the monitored operation event and the single-screen data volume of the mini-program. Specifically:

[0262] The processing module 103 is specifically configured to:

[0263] If the operation event is initially entering the mini-program, determine whether the data volume in the data buffer pool is less than twice the single-screen data volume;

[0264] If the data volume in the data buffer pool is less than or equal to twice the single-screen data volume, use the first data in the buffer pool as the starting position and the last data in the data buffer pool as the ending position; wherein, the position identifier of the data to be rendered includes the starting position and the ending position.

[0265] Optionally, the processing module 103 is further configured to, if the data volume in the data buffer pool is greater than twice the single-screen data volume, use the first data in the buffer pool as the starting position and the Nth data in the data buffer pool as the ending position, where N is equal to twice the single-screen data volume.

[0266] In this possible design, the processing module 103 is configured to determine the position identifier of the data to be rendered currently according to the monitored operation event and the single-screen data volume of the mini-program. Specifically:

[0267] The processing module 103 is specifically configured to:

[0268] If the operation event is a swipe-up operation, determine whether the data volume between the ending position of the data currently being rendered in the data buffer pool and the last data in the data buffer pool is greater than the single-screen data volume;

[0269] If so, use the position after adding one single-screen data volume to the ending position of the currently rendered data as the ending position of the data to be rendered;

[0270] Otherwise, use the position of the last data in the buffer data pool as the ending position of the data to be rendered.

[0271] Optionally, the processing module 103 is further configured to, if the amount of data per single screen multiplied by three is less than the amount of data between the end position of the to-be-rendered data determined and the start position of the currently rendered data, use the position three single-screen data amounts before the end position of the to-be-rendered data as the new start position of the to-be-rendered data.

[0272] In this possible design, the processing module 103 is configured to determine the position identifier of the currently required to-be-rendered data according to the monitored operation event and the amount of data per single screen of the applet, specifically:

[0273] The processing module 103 is specifically configured to:

[0274] If the operation event is a downward slide operation, determine whether there is data at a position one single-screen data amount before the start position of the currently rendered data in the data buffer pool;

[0275] If there is no data at a position one single-screen data amount before the start position of the currently rendered data, use the position of the first data in the buffer data pool as the start position of the to-be-rendered data;

[0276] If there is data at a position one single-screen data amount before the start position of the currently rendered data, use the position one single-screen data amount before the start position of the currently rendered data as the start position of the to-be-rendered data.

[0277] Optionally, the processing module 103 is further configured to, if the amount of data per single screen multiplied by three is less than the amount of data between the start position of the to-be-rendered data determined and the end position of the currently rendered data, use the position three single-screen data amounts after the start position of the to-be-rendered data as the new end position of the to-be-rendered data.

[0278] In another possible design of the embodiment of the present application, the processing module 103 is further configured to, when a slide operation is monitored, determine whether the slide operation is an upward slide operation or a downward slide operation according to the start coordinate and the end coordinate of the slide operation on the Y axis.

[0279] In this possible design, the processing module 103 is configured to determine whether the slide operation is an upward slide operation or a downward slide operation according to the start coordinate and the end coordinate of the slide operation, specifically:

[0280] The processing module 103 is specifically configured to:

[0281] Calculate the difference between the end coordinate and the start coordinate of the slide operation on the Y axis;

[0282] If the difference is greater than zero, determine that the slide operation is a downward slide operation;

[0283] If the difference is less than zero, determine that the slide operation is an upward slide operation.

[0284] In another possible design of the embodiment of the present application, before the determining module 101 determines the position identifier of the data to be rendered according to the monitored operation event, it is further configured to:

[0285] Obtain data from the server of the mini-program through an asynchronous data acquisition method;

[0286] If there is data in the data buffer pool, append and store the data obtained from the server of the mini-program at the end of the data in the data buffer pool;

[0287] If the data buffer pool is empty, store the data obtained from the server of the mini-program in the data buffer pool.

[0288] The data rendering device provided in this embodiment can be used to execute the solutions in the above embodiments, and its implementation principle and technical effects are similar, so they will not be elaborated here.

[0289] It should be noted that it should be understood that the division of each module of the above device is only a division of logical functions. In actual implementation, it can be fully or partially integrated into a physical entity, or physically separated. And these modules can all be implemented in the form of software called by a processing element; they can also all be implemented in the form of hardware; they can also be implemented in the form of some modules called by a processing element through software and some modules in the form of hardware. For example, the determining module can be a separately established processing element, or can be integrated in a certain chip of the above device. In addition, it can also be stored in the memory of the above device in the form of program code, and called and executed by a certain processing element of the above device to perform the functions of the above determining module. The implementation of other modules is similar. In addition, these modules can be fully or partially integrated together or can be independently implemented. Here, the processing element can be an integrated circuit with signal processing capabilities. In the implementation process, each step of the above method or each of the above modules can be completed through the integrated logic circuit in the processor element or the instruction in the form of software.

[0290] Figure 11 It is a schematic structural diagram of the terminal device provided in the embodiment of the present application. As Figure 11 shown, the terminal device may include: a processor 111, a memory 112, and a display 113.

[0291] The processor 111 executes the computer-executable instructions stored in the memory, enabling the processor 111 to execute the solutions in the above embodiments. The processor 111 can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components.

[0292] The memory 112 and the display 113 are connected to the processor 111 via the system bus and communicate with each other. The memory 112 is used to store computer program instructions. The memory 112 may include a random access memory (RAM), and may also include a non-volatile memory, such as at least one disk memory.

[0293] The display 113 is used to display the processing results of the processor 111 and for human-computer interaction. Optionally, the display 113 can be a user interface, which can include graphics, text, icons, videos, and any combination thereof. In some embodiments, the display 113 can be the front panel of the terminal device; in other embodiments, the display 113 can be a flexible display screen, disposed on the curved surface or the folding surface of the terminal device. Even, the display 113 can also be set as a display screen with an irregular non-rectangular shape, that is, a special-shaped screen. The display 113 can be prepared using materials such as a liquid crystal display (LCD), an organic light-emitting diode (OLED), etc.

[0294] The system bus can be a peripheral component interconnect (PCI) bus, an extended industry standard architecture (EISA) bus, etc. The system bus can be divided into an address bus, a data bus, a control bus, etc. For the sake of simplicity, only a thick line is shown in the figure, but it does not mean that there is only one bus or one type of bus.

[0295] The terminal device provided in the embodiments of the present application can be used to execute the solutions in the above embodiments, and its implementation principle and technical effects are similar, which will not be elaborated here.

[0296] The embodiments of the present application also provide a chip for running instructions, and the chip is used to execute the solutions in the above embodiments.

[0297] The embodiment of the present application further provides a computer-readable storage medium, in which computer instructions are stored. When the computer instructions run on a computer, the computer is caused to execute the solution of the above embodiment.

[0298] The embodiment of the present application further provides a computer program product, which includes a computer program stored in a computer-readable storage medium. At least one processor can read the computer program from the computer-readable storage medium, and when the at least one processor executes the computer program, the solution in the above embodiment can be implemented.

[0299] It should be understood that the present disclosure is not limited to the exact structure already described and shown in the drawings, and various modifications and changes can be made without departing from its scope. The scope of the present disclosure is only limited by the appended claims.

Claims

1. A data rendering method for a mini program, characterized in that Applied to a terminal device, including: Determine the position identifier of the data to be rendered according to the monitored operation event, where the position identifier is used to indicate the start and end positions of the data to be rendered in the data buffer pool; Obtain the data to be rendered corresponding to the position identifier from the data buffer pool; Copy the data to be rendered into the rendering data buffer pool and directly render it through the applet page; where the data buffer pool is a preset storage area for storing all the data requested from the server of the applet, and the rendering data buffer pool is a preset storage area where the applet can directly call data for rendering; The determining the position identifier of the data to be rendered according to the monitored operation event includes: Determine the position identifier of the data to be rendered in the data buffer pool according to the monitored operation event and the single-screen data volume of the applet, where the operation event is an event triggered by the user on the applet.

2. The method according to claim 1, wherein, The method further includes: Calculate the single-screen data volume according to the page height of the applet and the rendering height of each data on the page of the applet, and the single-screen data volume is the data volume that can be rendered per screen when the applet runs on the terminal device.

3. The method according to claim 2, characterized in that, The determining the position identifier of the data to be rendered in the data buffer pool according to the monitored operation event and the single-screen data volume of the applet includes: If the operation event is the initial entry into the applet, determine whether twice the single-screen data volume is greater than or equal to the data volume in the data buffer pool; If twice the single-screen data volume is greater than or equal to the data volume in the data buffer pool, then use the first data in the buffer pool as the start position and the last data in the data buffer pool as the end position; where the position identifier of the data to be rendered includes the start position and the end position.

4. The method according to claim 3, wherein The method further includes: If twice the single-screen data volume is less than the data volume in the data buffer pool, then use the first data in the buffer pool as the start position and the Nth data in the data buffer pool as the end position, where N is equal to twice the single-screen data volume.

5. The method according to claim 2, characterized in that The determining the position identifier of the currently required data to be rendered according to the monitored operation event and the single-screen data volume of the applet includes: If the operation event is a swiping-up operation, determine whether the data volume between the end position of the currently rendered data in the data buffer pool and the last data in the data buffer pool is greater than the single-screen data volume; If so, use the position after adding a single-screen data volume to the end position of the currently rendered data as the end position of the data to be rendered; Otherwise, use the position of the last data in the data buffer pool as the end position of the data to be rendered.

6. The method according to claim 5, wherein The method further includes: If three times the single-screen data volume is less than the data volume between the determined end position of the data to be rendered and the start position of the currently rendered data, then use the position at three single-screen data volumes before the end position of the data to be rendered as the new start position of the data to be rendered.

7. The method according to claim 2, characterized in that Determining a position identifier of data to be rendered currently according to the monitored operation event and the single-screen data volume of the mini program, includes: If the operation event is a downward slide operation, determining whether there is data at a position of one single-screen data volume before the start position of the data currently rendered in the data buffer pool; If there is no data at a position of one single-screen data volume before the start position of the data currently rendered, taking the position of the first data in the data buffer pool as the start position of the data to be rendered; If there is data at a position of one single-screen data volume before the start position of the data currently rendered, taking the position of one single-screen data volume before the start position of the data currently rendered as the start position of the data to be rendered.

8. The method according to claim 7, wherein The method further includes: If three times the single-screen data volume is less than the data volume between the determined start position of the data to be rendered and the end position of the data currently rendered, taking the position at three single-screen data volumes after the start position of the data to be rendered as the new end position of the data to be rendered.

9. The method according to any one of claims 5 to 8, characterized in that, The method further includes: When a slide operation is monitored, determining whether the slide operation is an upward slide operation or a downward slide operation according to the start coordinate and the end coordinate of the slide operation on the Y axis.

10. The method according to claim 9, wherein Determining whether the slide operation is an upward slide operation or a downward slide operation according to the start coordinate and the end coordinate of the slide operation, includes: Calculating a difference between the end coordinate and the start coordinate of the slide operation on the Y axis; If the difference is greater than zero, determining that the slide operation is a downward slide operation; If the difference is less than zero, determining that the slide operation is an upward slide operation.

11. The method according to any one of claims 1 to 8, characterized in that, Before determining the position identifier of the data to be rendered according to the monitored operation event, the method further includes: Obtaining data from the server of the mini program through an asynchronous data acquisition method; If there is data in the data buffer pool, appending and storing the data obtained from the server of the mini program at the end of the data in the data buffer pool; If the data buffer pool is empty, storing the data obtained from the server of the mini program in the data buffer pool.

12. A data rendering device for a mini-program, characterized in that, Includes: A determination module, an acquisition module, and a processing module; The determination module is configured to determine a position identifier of the data to be rendered according to the monitored operation event, where the position identifier is used to indicate the start and end positions of the data to be rendered in the data buffer pool; The acquisition module is configured to acquire the data to be rendered corresponding to the position identifier from the data buffer pool; The processing module is configured to copy the data to be rendered into a rendering data buffer pool and directly render it through the mini program page; where the data buffer pool is a preset storage area for storing all data requested from the server of the mini program, and the rendering data buffer pool is a preset storage area that the mini program can directly call data for rendering; The determination module is specifically configured to determine the position identifier of the data to be rendered in the data buffer pool according to the monitored operation event and the single-screen data volume of the mini program, where the operation event is an event triggered by a user on the mini program.

13. A terminal device, characterized in that, It includes a processor, a memory, a display, and a computer program stored on the memory and executable on the processor. It is characterized in that when the processor executes the program, it implements the method described in any one of claims 1-11 above.

14. A computer-readable storage medium, characterized in that, Computer-executable instructions are stored in the computer-readable storage medium, and when the computer-executable instructions are executed by a processor, they are used to implement the method described in any one of claims 1-11.

15. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it is used to implement the method described in any one of claims 1 to 11.

Images