Component adjustment method and device, terminal, storage medium and computer program product

Abstract

The embodiment of the invention relates to a component adjustment method and device, a terminal, a storage medium and a computer program product. The method comprises the steps of obtaining first size information of a terminal display area and second size information of a preset first buffer area when it is detected that a scrolling component of the applet is in a target scene; the scrolling component is used for controlling scrolling information of a display interface of the applet; according to the first size information, the second size information and the target scene, determining an adjustment strategy of a sub-assembly corresponding to the rolling assembly; and adjusting the sub-assembly corresponding to the rolling assembly according to the adjustment strategy. By adopting the method, the problem that a white screen appears in the scrolling process of the display interface of the applet can be improved.

Description

Technical Field

[0001] Embodiments of the present disclosure relate to the technical field of mini-programs, and in particular, to a method, apparatus, terminal, storage medium, and computer program product for component adjustment. Background Art

[0002] With the wide application of mini-programs in terminals, mini-programs not only need to meet the basic application needs of users, but also need to have a more user-friendly interaction method.

[0003] In the traditional technology, a mini-program can provide an infinitely refreshed list to users through a scrolling component to enrich the interaction between the terminal and the user. However, the traditional technology may cause the problem of a white screen appearing in the display interface of the mini-program during the scrolling process. Summary of the Invention

[0004] Embodiments of the present disclosure provide a method, apparatus, terminal, storage medium, and computer program product for component adjustment, which can be used to improve the problem of a white screen appearing in the display interface of a mini-program during the scrolling process.

[0005] In a first aspect, embodiments of the present disclosure provide a method for component adjustment, the method comprising:

[0006] When it is detected that the scrolling component of the mini-program is in a target scenario, obtaining first size information of the terminal display area and second size information of a preset first buffer area; the scrolling component is used to control the scrolling information of the display interface of the mini-program;

[0007] Determining an adjustment strategy for a sub-component corresponding to the scrolling component according to the first size information, the second size information, and the target scenario;

[0008] Adjusting the sub-component corresponding to the scrolling component according to the adjustment strategy.

[0009] In a second aspect, embodiments of the present disclosure provide a component adjustment apparatus, the apparatus comprising:

[0010] An obtaining module, configured to obtain first size information of the terminal display area and second size information of a preset first buffer area when it is detected that the scrolling component of the mini-program is in a target scenario; the scrolling component is used to control the scrolling information of the display interface of the mini-program;

[0011] A first determining module, configured to determine an adjustment strategy for a sub-component corresponding to the scrolling component according to the first size information, the second size information, and the target scenario;

[0012] An adjustment module, configured to adjust the sub-component corresponding to the scrolling component according to the adjustment strategy.

[0013] In a third aspect, an embodiment of the present disclosure provides a terminal, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the computer program, the method described in the first aspect above is implemented.

[0014] In a fourth aspect, an embodiment of the present disclosure provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the method described in the first aspect above is implemented.

[0015] In a fifth aspect, an embodiment of the present disclosure provides a computer program product, including a computer program. When the computer program is executed by a processor, the method described in the first aspect above is implemented.

[0016] For the component adjustment method, device, terminal, storage medium, and computer program product provided by the embodiments of the present disclosure, when the terminal detects that the scrolling component of the applet is in the target scenario, by obtaining the first size information of the terminal display area and the second size information of the preset first buffer area, it is possible to determine the adjustment strategy for the sub-components corresponding to the scrolling component according to the first size information, the second size information, and the target scenario, and adjust the sub-components corresponding to the scrolling component according to the adjustment strategy. Since the scrolling component can control the scrolling information of the display interface of the applet, by adjusting the sub-components corresponding to the scrolling component according to the adjustment strategy, it is possible to adjust the display content of the display interface of the applet to control the number of sub-components corresponding to the scrolling component, thereby controlling the size of the terminal memory occupied by the applet, and further avoiding the problem that the applet occupies too much memory and triggers the terminal to forcibly clean the memory, resulting in a white screen during the scrolling process of the display interface of the applet. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] Figure 1 It is an application environment diagram of the component adjustment method in one embodiment;

[0018] Figure 2 It is a flowchart of the component adjustment method in one embodiment;

[0019] Figure 3 It is a flowchart of the component adjustment method in another embodiment;

[0020] Figure 4 It is a flowchart of the component adjustment method in another embodiment;

[0021] Figure 5 It is a flowchart of the component adjustment method in another embodiment;

[0022] Figure 6 It is a schematic diagram of the display area, the first buffer area, and the second buffer area in one embodiment;

[0023] Figure 7 is the structural block diagram of the component adjustment device in one embodiment;

[0024] Figure 8 is the structural block diagram of the component adjustment device in another embodiment;

[0025] Figure 9 is the internal structure diagram of the terminal in one embodiment. Detailed implementation manners

[0026] In order to make the objectives, technical solutions and advantages of the embodiments of the present disclosure clearer, the embodiments of the present disclosure will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the embodiments of the present disclosure, and are not used to limit the embodiments of the present disclosure.

[0027] First, before specifically introducing the technical solutions of the embodiments of the present disclosure, the technical background or the technical evolution context on which the embodiments of the present disclosure are based will be introduced. Generally, in the field of applet technology, the current technical background is as follows: when an applet provides an infinitely refreshed list, all view elements corresponding to the scrolling components will be added to the scrolling container of the scrolling component, thereby triggering the terminal to forcibly clean the memory of the applet, resulting in a blank screen problem in the display interface of the applet during the scrolling process. Based on this background, through long-term model simulation research and development and the collection, demonstration and verification of experimental data, the applicant found that when an applet occupies too much memory of the terminal, the terminal will be triggered to forcibly clean the memory of the applet, resulting in a blank screen problem in the display interface of the applet during the scrolling process. How to control the applet from occupying too much terminal memory during infinite scrolling has become a difficult problem to be solved urgently at present. In addition, it should be noted that from determining that the applet occupies too much terminal memory during infinite scrolling and the technical solutions introduced in the following embodiments, the applicant has put in a lot of creative labor.

[0028] Next, the technical solutions involved in the embodiments of the present disclosure will be introduced in combination with the scenarios to which the embodiments of the present disclosure are applied.

[0029] The component adjustment method provided by the embodiments of the present disclosure can be applied to an application environment as Figure 1 shown. Among them, when the terminal 102 receives a trigger instruction from the user through the display screen, in the case of detecting the scrolling component of the applet triggered by the user, the sub-components corresponding to the scrolling component can be adjusted according to the target scenario of the scrolling component of the applet. Among them, the terminal 102 can be but is not limited to various smart phones, tablet computers, portable wearable devices, etc.

[0030] In one embodiment, as Figure 2As shown, a component adjustment method is provided. Taking the terminal in Figure 1 as an example for illustration, the method includes the following steps:

[0031] S201, when it is detected that the scroll component of the applet is in the target scenario, obtain the first size information of the terminal display area and the second size information of the preset first buffer area; the scroll component is used to control the scroll information of the display interface of the applet.

[0032] Among them, an applet is a micro application that does not need to be downloaded to the terminal and can be used in existing applications. The applet can provide various types of applications to users. When the user opens the applet, by swiping on the display screen of the terminal, the applet can be loaded and different display interfaces can be shown. Generally, in the applet, the scroll information of the display interface of the applet can be controlled through the scroll component, so as to achieve the scrolling effect of the display interface. For example, the display content of the display interface of the applet, the position of the display content, etc. can be controlled. Among them, the scroll component is an interface component used to display a large amount of content. The scroll component can be composed of a scroll container and scroll content. The scroll content can be contained in the scroll container. By sliding the scroll bar corresponding to the scroll component, the position of the scroll content can be adjusted, so as to display different scroll contents and achieve the scrolling effect of the display interface.

[0033] It can be understood that when the user triggers the terminal to open the applet, the applet will enter the initialization state. If the applet can provide an infinite refresh list, the scroll component in the applet will enter the initialization scenario to initialize the display interface. After the initialization is completed, the applet enters the running state, and then the scroll component of the applet enters the running scenario. Therefore, the target scenario can include the initialization scenario of the scroll component or the running scenario of the scroll component.

[0034] It should be noted that when displaying a large amount of content through the scroll component, in order to display more content on the limited display screen of the terminal, the display interface corresponding to the scroll component can be divided into a display area and a first buffer area. Among them, the display area refers to the area where the display screen of the terminal is located, and the first buffer area refers to a virtual storage area that exceeds the display screen of the terminal. Optionally, if scrolling up, the upper end area of the terminal display area can be defined as the first buffer area; or, if scrolling down, the lower end area of the terminal display area can be defined as the first buffer area. Correspondingly, the first size information refers to the length and width of the display area, and the second size information refers to the length and width of the first buffer area.

[0035] It can be understood that for the display screens of terminals of different sizes, the sizes of the interfaces displayed by the mini-programs are also different. Therefore, the obtained first size information is also different; the second size information can be set according to requirements.

[0036] In this embodiment, the terminal can obtain the running state of the mini-program through a preset listening function, and determine the target scenario corresponding to the scrolling component of the mini-program according to the running state of the mini-program. Thus, when the scrolling component of the mini-program is in the target scenario, the terminal can obtain the first size information of the display area of the terminal and the second size information of a preset first buffer area through the interface of the style sheet corresponding to the mini-program.

[0037] S202. Determine the adjustment strategy for the sub-components corresponding to the scrolling component according to the first size information, the second size information, and the target scenario.

[0038] It should be noted that there are multiple different sub-components corresponding to the scrolling component. Different display interfaces can be formed by rendering the created sub-components. For example, the sub-components can include button components, label components, text box components, etc. To avoid excessive occupation of the terminal memory caused by creating a large number of sub-components corresponding to the scrolling component during the scrolling of the display interface of the mini-program, the number of sub-components corresponding to the scrolling component can be adjusted.

[0039] In this embodiment, according to different target scenarios, it is possible to determine whether to create or delete sub-components according to the first size information and the second size information, so as to determine different adjustment strategies for the sub-components. For example, if the first size information and the second size information indicate that the sizes of the display area and the first buffer area are large, the adjustment strategy can be to create more sub-components; or, if the first size information and the second size information indicate that the sizes of the display area and the first buffer area are small, the adjustment strategy can be to create fewer sub-components.

[0040] S203. Adjust the sub-components corresponding to the scrolling component according to the adjustment strategy.

[0041] Among them, the adjustment of the sub-components can include creating sub-components and deleting sub-components. In this embodiment, the sub-components corresponding to the scrolling component can be created or deleted according to the determined adjustment strategy. Optionally, if the adjustment strategy indicates adding sub-components, the sub-components corresponding to the scrolling component can be created; if the adjustment strategy indicates reducing sub-components, the sub-components corresponding to the scrolling component can be deleted.

[0042] In the above component adjustment method, when the terminal detects that the scroll component of the mini-program is in the target scenario, by obtaining the first size information of the terminal display area and the second size information of the preset first buffer area, it can determine the adjustment strategy for the sub-components corresponding to the scroll component according to the first size information, the second size information, and the target scenario, and adjust the sub-components corresponding to the scroll component according to the adjustment strategy. Since the scroll component can control the scrolling information of the display interface of the mini-program, adjusting the sub-components corresponding to the scroll component according to the adjustment strategy can adjust the display content of the display interface of the mini-program to control the number of sub-components corresponding to the scroll component, thereby controlling the size of the terminal memory occupied by the mini-program, and further avoiding the problem that the mini-program occupies too much memory and triggers the terminal to forcibly clean the memory, resulting in a blank screen during the scrolling of the display interface of the mini-program.

[0043] In the above scenario of determining the adjustment strategy for the sub-components corresponding to the scroll component according to the first size information, the second size information, and the target scenario, different adjustment strategies can be determined according to different target scenarios. In one embodiment, if the target scenario is the initialization scenario of the scroll component, as Figure 3 shown, the above S202 includes:

[0044] S301, in the scenario of initializing the scroll component, determine the initialization sub-components corresponding to the scroll component.

[0045] Among them, the initialization sub-components refer to that when the user opens the mini-program, the scroll component of the mini-program will enter the initialization, and the mini-program is initialized by creating some sub-components. Optionally, the initialization sub-components may include text components, dropdown list components, navigation bar components, input box components, etc. It should be noted that in the initialization scenario, in order to ensure a more fluent display interface during the scrolling of the mini-program, the initialization sub-components may include the sub-components corresponding to the initialization display interface and the sub-components that are about to enter the display interface.

[0046] In this embodiment, the terminal can obtain the preset style sheet through the preset interface in the mini-program when detecting that the scroll component is in the initialization scenario, and determine the initialization sub-components corresponding to the initialization of the scroll component according to the preset style sheet.

[0047] S302, call the preset listening function to obtain the third size information of the area occupied by the created initialization sub-components in the creation area; the creation area includes the display area and the first buffer area.

[0048] It can be understood that since the display heights of the views corresponding to each initialization sub-component are different, in the initialization scenario, it is necessary to dynamically determine the number of created initialization sub-components according to the first dimension information of the display area and the second dimension information of the first buffer area. Among them, the third dimension information refers to the size of all created initialization sub-components in the creation area. In this embodiment, the display area and the first buffer area can be determined as the creation area, and the dimension information of the available area in the creation area can be obtained through a listening function.

[0049] In this embodiment, the display height of the view corresponding to each created initialization sub-component in the creation area can be obtained in real time by calling a preset listening function, so as to determine the third dimension information of the area occupied by all created initialization sub-components during creation.

[0050] As an optional implementation manner, after determining the initialization sub-components corresponding to the scroll component, the creation of the initialization sub-components can be restarted by calling a preset restart function, so as to intercept the creation of the initialization sub-components. Furthermore, in the case of obtaining the first dimension information and the second dimension information, the creatable initialization sub-components can be determined according to the first dimension information and the second dimension information, and the initialization sub-components are created in a loop through the list of virtual document object model (Document Object Model, DOM) elements corresponding to the creatable initialization sub-components until the creation is completed, and the created initialization sub-components are rendered to generate a display interface.

[0051] S303. Determine the fourth dimension information of the available area in the creation area according to the first dimension information, the second dimension information, and the third dimension information.

[0052] Among them, the fourth dimension information refers to the dimension information of the available area in the creation area in the initialization scenario. The fourth dimension information may include the length and width of the available area.

[0053] In this embodiment, the dimension sum between the first dimension and the second dimension can be calculated according to the first dimension information and the second dimension information, and then the dimension difference between the third dimension and the above dimension sum can be calculated according to the third dimension information, and the calculated dimension difference is determined as the fourth dimension information of the available area.

[0054] S304. Determine an adjustment strategy according to the fifth dimension information of the creation area corresponding to the uncreated initialization sub-components and the fourth dimension information.

[0055] Among them, the fifth dimension information refers to the size of the creation area that the view corresponding to the uncreated sub-components in the initialization sub-components needs to occupy. The fifth dimension information may include the length and width of the creation area corresponding to the uncreated initialization sub-components.

[0056] In this embodiment, the uncreated initialization sub-components can be determined based on the determined initialization sub-components and the created initialization sub-components, and the fifth dimension information of the creation area occupied by the views corresponding to the uncreated initialization sub-components can be determined, so as to determine the adjustment strategy according to the comparison result between the fifth dimension information and the fourth dimension information.

[0057] As an optional implementation manner, if it is determined according to the fifth dimension information and the fourth dimension information that the range of the creation area corresponding to the uncreated initialization sub-components is larger than the range of the available area, the adjustment strategy is determined to pause the creation of the uncreated initialization sub-components.

[0058] In this implementation manner, the dimension difference between the fifth dimension and the fourth dimension can be calculated according to the fifth dimension information and the fourth dimension information. If the dimension difference indicates that the fifth dimension is larger than the fourth dimension, it means that the range of the creation area corresponding to the uncreated initialization sub-components is larger than the range of the available area in the display area and the first buffer area. The adjustment strategy can be determined to pause the creation of the uncreated initialization sub-components. It can be understood that when the range of the creation area corresponding to the uncreated initialization sub-components is larger than the range of the available area, if the initialization sub-components continue to be created, it will cause the memory occupied by the scroll component of the mini-program to exceed the preset memory range, which may trigger the terminal to forcibly clean the memory and cause the display interface of the mini-program to appear white-screen.

[0059] In this embodiment, in the scenario of initializing the scroll component, the initialization sub-components corresponding to the scroll component are determined, and the preset monitoring function is called to obtain the third dimension information of the area occupied by the created initialization sub-components in the creation area. The fourth dimension information of the available area in the creation area can be determined according to the first dimension information, the second dimension information and the third dimension information, so that the adjustment strategy can be accurately determined according to the fifth dimension information and the fourth dimension information of the creation area corresponding to the uncreated initialization sub-components, and further, the problem that the creation process of the initialization sub-components is uncontrollable and causes excessive occupation of the terminal memory can be avoided.

[0060] Optionally, the running scenarios of the scroll component may include scrolling up and scrolling down. In this embodiment, taking scrolling up as an example, the specific process of how to determine the adjustment strategy in the target scenario of the running scenario will be described in detail. In another embodiment, if the target scenario is the running scenario of the scroll component, as Figure 4 shown, the above S202 includes:

[0061] S401, determining the offset distance between the sub-component and the display area according to the first dimension information.

[0062] Among them, the offset distance refers to the positional difference between the view of the sub-component corresponding to the scrolling component and the initial position of the display area. Optionally, the upper boundary of the display area can be determined as the initial position, or the lower boundary of the display area can also be determined as the initial position. In this embodiment, the upper boundary of the display area is taken as an example for illustration.

[0063] In this embodiment, the position information of the upper boundary of the display area can be determined according to the first dimension information, and the position of the upper boundary is determined as the initial position of the display area. By calling a preset monitoring function, the dimension information of the view corresponding to each sub-component is obtained, so as to determine the initial position of each sub-component as the lower boundary position of the view corresponding to each sub-component, and dynamically obtain the moving distance of the initial position of each sub-component relative to the initial position of the display area during the process of the display interface being swiped, and determine this moving distance as the offset distance between the sub-component and the display area.

[0064] S402. Determine whether the sub-component exceeds the first buffer area according to the second dimension information and the offset distance.

[0065] It should be noted that during the process of the user swiping up the display interface, a first buffer area can be set to store the views corresponding to the sub-components that are swiped out of the display area. When continuously swiping up, the views corresponding to the sub-components in the first buffer area may be swiped out of the first buffer area. Therefore, it can be determined whether the sub-component exceeds the first buffer area through the offset distance and the second dimension information.

[0066] In this embodiment, the length of the first buffer area in the second dimension information can be determined as the distance threshold for exceeding the first buffer area. If the offset distance is greater than the sum value of the above-mentioned moving distance and the distance threshold, it means that the sub-component exceeds the first buffer area; if the offset distance is less than or equal to the sum value of the above-mentioned moving distance and the distance threshold, it means that the sub-component does not exceed the first buffer area.

[0067] Exemplarily, taking the upper boundary of the display area as the initial position, the corresponding coordinate value is 0, the distance threshold is 5, and the relative position of the lower boundary of the view corresponding to sub-component A relative to the initial position is -5. If the offset distance between sub-component A and the display area is 11, it means that sub-component A has exceeded the first buffer area; the relative position of the lower boundary of the view corresponding to sub-component B relative to the initial position is -8. If the offset distance between sub-component B and the display area is 11, it means that sub-component B exceeds the display area and does not exceed the first buffer area. If the offset distance between sub-component B and the display area is 14, it means that sub-component B exceeds the display area.

[0068] S403. If it is determined that the sub-component exceeds the first buffer area, determine that the adjustment strategy is to delete the creation information corresponding to the sub-component.

[0069] It can be understood that when the user swipes up the display interface, the views corresponding to the sub-components partially swiped out of the display interface can be temporarily stored in the first buffer area, so that when swiping down, the views stored in the first buffer area can be redisplayed in the display interface; if continuously swiping up, the views corresponding to some components will be swiped out of the first buffer area. At this time, if swiping down, the views corresponding to the sub-components swiped out of the first buffer area will not immediately enter the display interface. Therefore, the creation information corresponding to the sub-components exceeding the first buffer area can be deleted to reduce the memory occupancy of the terminal.

[0070] In this embodiment, when it is determined that the sub-component exceeds the first buffer area, it can be determined that the adjustment strategy is to delete the creation information corresponding to the sub-component. Among them, the creation information may include the view corresponding to the sub-component, the attributes of the elements included in the real DOM node, and the text content. Optionally, in this embodiment, the sub-components exceeding the first buffer area can be deleted through the garbage collection mechanism in JavaScript.

[0071] As an alternative implementation, the description information of the deleted sub-component can be obtained and saved. The description information of the sub-component refers to the information such as the data structure, data type, and element attributes corresponding to the DOM elements in the sub-component. It should be noted that a group of DOM elements are included in the sub-component, and the display interface can be generated by rendering the DOM elements. During the rendering process, real DOM elements can be created through virtual DOM elements that describe the data structure, data type, and element attributes of the DOM elements. Therefore, when creating a sub-component, real DOM elements can be created through the description information corresponding to the sub-component, and then the view corresponding to the sub-component can be rendered.

[0072] In this implementation, the description information of the deleted sub-component can be obtained through a preset interface and saved to the memory. It should be noted that since the memory occupied by the description information of the sub-component is less than the memory occupied by the creation information, by deleting the creation information of the sub-component and saving the description information, not only can the memory occupancy of the terminal be reduced, but also the corresponding view can be regenerated according to the description information when the sub-component is re-created.

[0073] In this embodiment, by determining the offset distance between the sub-component and the display area according to the first dimension information, it is possible to determine whether the sub-component exceeds the first buffer area according to the second dimension information and the offset distance. Thus, when it is determined that the sub-component exceeds the first buffer area, it can be determined that the adjustment strategy is to delete the creation information corresponding to the sub-component, and further, the memory occupancy of the terminal can be reduced, avoiding the problem that the display interface of the applet goes blank due to forced memory cleaning by the terminal due to excessive memory occupancy.

[0074] In the scenario where the determined adjustment strategy is to delete the creation information corresponding to the sub-component, in order to ensure the smoothness of the display interface during the sliding process, the view position can be occupied by the low-resolution image corresponding to the deleted sub-component. In one embodiment, as Figure 5 shown, the above method further includes:

[0075] S501, determine the view position corresponding to the deleted sub-component.

[0076] It can be understood that in all display interfaces corresponding to the applet, including a large number of sub-component views, each sub-component view corresponds to a view position. In this embodiment, the view position corresponding to the deleted sub-component in the entire view can be obtained through a preset interface.

[0077] S502, at the view position, use a preset placeholder image to replace the view corresponding to the deleted sub-component; wherein, the resolution of the placeholder image is less than the preset resolution threshold.

[0078] It can be understood that in order to ensure that when the user slides the display interface in the reverse direction, the problem of blank areas appearing due to too fast sliding can be avoided. After deleting the sub-components beyond the first buffer area, the view position can be occupied by the image with a lower resolution corresponding to the deleted sub-component. Among them, the placeholder image can be generated by taking a snapshot of the sub-component view through an interface. In order to reduce the memory occupancy, an image with a resolution lower than the resolution threshold can be used for occupancy.

[0079] In this embodiment, the obtained placeholder image can be processed to reduce its resolution according to the preset resolution threshold to obtain the placeholder image. Thus, after deleting the creation information corresponding to the sub-component, the view position where the view corresponding to the deleted sub-component is located can be replaced by the placeholder image.

[0080] As an optional implementation manner, a threshold for the number of savable placeholder images can be set to avoid the problem of excessive memory occupancy caused by too many placeholder images generated during the sliding process.

[0081] In this embodiment, by determining the view position corresponding to the deleted sub-component and using a preset placeholder image to replace the view corresponding to the deleted sub-component at the view position, the problem of blank areas appearing in the display interface due to too fast reverse sliding can be avoided, and the smoothness of the display interface can be increased; in addition, since the resolution of the placeholder image is less than the preset resolution threshold, the problem of excessive memory occupancy due to the high resolution of the placeholder image can be avoided.

[0082] When the scroll component of the mini-program is in the running scenario and the mini-program is continuously refreshed and the display interface needs to be continuously updated, a new sub-component needs to be created to generate a new display interface. In one embodiment, the above method further includes: if it is determined that the sub-component exceeds the second buffer area according to the offset distance, the sub-component to be created is created according to the description information of the sub-component to be created or the placeholder image corresponding to the sub-component to be created.

[0083] It can be understood that during the scrolling of the display interface of the mini-program, the views corresponding to the sub-components about to enter the display area can be stored in the second buffer area. During the upward scrolling process, the views stored in the second buffer area can be sequentially drawn into the display area. During the continuous upward scrolling process, if all the views in the second buffer area have been drawn into the display area, that is, the sub-component exceeds the second buffer area, a new sub-component needs to be created to generate the corresponding view.

[0084] In this embodiment, the distance threshold can be determined according to the size information corresponding to the second buffer area. If the offset distance is greater than or equal to the sum of the moving distance and the distance threshold, it can be determined that the sub-component exceeds the second buffer area. Then, a real DOM element can be created according to the description information of the sub-component to be created, and the view corresponding to the sub-component can be generated by rendering the real DOM element. Or, a real DOM element can be created according to the placeholder image corresponding to the sub-component to be created, and the view corresponding to the sub-component can be generated by rendering the real DOM element, thereby creating the sub-component to be created.

[0085] Exemplarily, the schematic diagrams of the display area, the first buffer area, and the second buffer area can be as Figure 6 shown in the figure. In the figure, the display area represents the area corresponding to the display screen of the terminal. The first buffer area is used to store the views of the sub-components that are scrolled out of the display area during the process of the user swiping up the display interface. The second buffer area is used to store the views of the sub-components that are about to enter the display area during the process of the user swiping up the display interface.

[0086] In this embodiment, if it is determined that the sub-component exceeds the second buffer area according to the offset distance, the sub-component to be created is created according to the description information of the sub-component to be created or the placeholder image corresponding to the sub-component to be created, so as to ensure the smoothness of the display interface of the mini-program and provide the user with an infinitely refreshed display interface.

[0087] Next, a specific scenario is used to introduce an embodiment of the present disclosure. The method includes the following steps:

[0088] S1. When it is detected that the scroll component of the mini-program is in the target scenario, obtain the first size information of the terminal display area and the second size information of the preset first buffer area; the scroll component is used to control the scrolling information of the display interface of the mini-program.

[0089] S2, if the target scenario is the initialization scenario of the scrolling component, then in the initialization scenario of the scrolling component, determine the initialization sub-components corresponding to the scrolling component.

[0090] S3, call the preset monitoring function to obtain the third dimension information of the area occupied by the created initialization sub-components in the creation area; the creation area includes the display area and the first buffer area.

[0091] S4, determine the fourth dimension information of the available area in the creation area according to the first dimension information, the second dimension information, and the third dimension information.

[0092] S5, if it is determined according to the fifth dimension information and the fourth dimension information that the range of the creation area corresponding to the uncreated initialization sub-components is larger than the range of the available area, then determine the adjustment strategy as pausing the creation of the uncreated initialization sub-components.

[0093] S6, if the target scenario is the running scenario of the scrolling component, then determine the offset distance between the sub-component and the display area according to the first dimension information.

[0094] S7, determine whether the sub-component exceeds the first buffer area according to the second dimension information and the offset distance.

[0095] S8, if it is determined that the sub-component exceeds the first buffer area, then determine the adjustment strategy as deleting the creation information corresponding to the sub-component.

[0096] S9, determine the view position corresponding to the deleted sub-component.

[0097] S10, at the view position, use the preset placeholder image to replace the view corresponding to the deleted sub-component; wherein, the resolution of the placeholder image is less than the preset resolution threshold.

[0098] S11, obtain the description information of the deleted sub-component and save the description information.

[0099] S12, if it is determined according to the offset distance that the sub-component exceeds the second buffer area, then create the to-be-created sub-component according to the description information of the to-be-created sub-component or the placeholder image corresponding to the to-be-created sub-component.

[0100] It should be noted that for the descriptions in S1 - S12 above, reference can be made to the relevant descriptions in the above embodiments, and their effects are similar, so they will not be elaborated in this embodiment.

[0101] It should be understood that although the steps in the above flowcharts are shown sequentially according to the arrows, these steps are not necessarily executed sequentially in the order indicated by the arrows. Unless otherwise clearly stated in this document, there is no strict order restriction for the execution of these steps, and these steps can be executed in other orders. Moreover, at least a part of the steps in the above flowcharts may include multiple steps or multiple stages. These steps or stages are not necessarily executed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be executed alternately or in turn with at least a part of other steps or steps or stages in other steps.

[0102] In one embodiment, as Figure 7 shown, a component adjustment device is provided, including: an acquisition module 11, a first determination module 12, and an adjustment module 13, where:

[0103] The acquisition module 11 is configured to obtain first size information of the terminal display area and second size information of a preset first buffer area when it is detected that a scroll component of a mini-program is in a target scenario; the scroll component is used to control the scroll information of the display interface of the mini-program.

[0104] Optionally, the target scenario includes an initialization scenario of the scroll component or an operation scenario of the scroll component.

[0105] The first determination module 12 is configured to determine an adjustment strategy for a sub-component corresponding to the scroll component according to the first size information, the second size information, and the target scenario.

[0106] The adjustment module 13 is configured to adjust the sub-component corresponding to the scroll component according to the adjustment strategy.

[0107] The component adjustment device provided in this embodiment can execute the above method embodiment, and its implementation principle and technical effect are similar, which will not be elaborated here.

[0108] In one embodiment, if the target scenario is the initialization scenario of the scroll component, as Figure 8 shown, the above first determination module 12 includes: a first determination unit 121, an acquisition unit 122, a second determination unit 123, and a third determination unit 124, where:

[0109] The first determination unit 121 is configured to determine an initialization sub-component corresponding to the scroll component in the scenario of initializing the scroll component.

[0110] The acquisition unit 122 is configured to call a preset monitoring function to obtain third size information of the area occupied by the created initialization sub-component in the creation area; the creation area includes the display area and the first buffer area.

[0111] A second determination unit 123, configured to determine fourth dimension information of an available area in a creation area according to first dimension information, second dimension information, and third dimension information.

[0112] A third determination unit 124, configured to determine an adjustment strategy according to fifth dimension information of a creation area corresponding to an uncreated initialization sub-component and the fourth dimension information.

[0113] The component adjustment device provided in this embodiment may execute the above method embodiment, and its implementation principle and technical effect are similar, which will not be elaborated here.

[0114] In one embodiment, please continue to refer to Figure 8 The above third determination unit 124 is specifically configured to: if it is determined according to the fifth dimension information and the fourth dimension information that the range of the creation area corresponding to the uncreated initialization sub-component is greater than the range of the available area, determine the adjustment strategy as suspending the creation of the uncreated initialization sub-component.

[0115] The component adjustment device provided in this embodiment may execute the above method embodiment, and its implementation principle and technical effect are similar, which will not be elaborated here.

[0116] In one embodiment, if the target scenario is a running scenario of a scrolling component, please continue to refer to Figure 8 The above first determination module 12 includes: a fourth determination unit 125, a fifth determination unit 126, and a sixth determination unit 127, where:

[0117] The fourth determination unit 125 is configured to determine an offset distance between a sub-component and a display area according to the first dimension information.

[0118] The fifth determination unit 126 is configured to determine whether the sub-component exceeds a first buffer area according to the second dimension information and the offset distance.

[0119] The sixth determination unit 127 is configured to, if it is determined that the sub-component exceeds the first buffer area, determine the adjustment strategy as deleting the creation information corresponding to the sub-component.

[0120] The component adjustment device provided in this embodiment may execute the above method embodiment, and its implementation principle and technical effect are similar, which will not be elaborated here.

[0121] In one embodiment, please continue to refer to Figure 8 The above device further includes: a second determination module 14 and a replacement module 15, where:

[0122] The second determination module 14 is configured to determine the view position corresponding to the deleted sub-component.

[0123] A replacement module 15 is used to adopt a preset placeholder image at the view position to replace the view corresponding to the deleted sub-component; wherein, the resolution of the placeholder image is less than a preset resolution threshold.

[0124] The component adjustment device provided in this embodiment can execute the above method embodiment, and its implementation principle and technical effect are similar, which will not be elaborated here.

[0125] In one embodiment, please continue to refer to Figure 8 , the above device further includes: a saving module 16, wherein:

[0126] The saving module 16 is used to obtain the description information of the deleted sub-component and save the description information.

[0127] The component adjustment device provided in this embodiment can execute the above method embodiment, and its implementation principle and technical effect are similar, which will not be elaborated here.

[0128] In one embodiment, please continue to refer to Figure 8 , the above device further includes: a creating module 17, wherein:

[0129] The creating module 17 is used to create a to-be-created sub-component according to the description information of the to-be-created sub-component or the placeholder image corresponding to the to-be-created sub-component if it is determined according to the offset distance that the sub-component exceeds the second buffer area.

[0130] The component adjustment device provided in this embodiment can execute the above method embodiment, and its implementation principle and technical effect are similar, which will not be elaborated here.

[0131] For the specific limitations of the component adjustment device, reference can be made to the limitations on the component adjustment method in the above text, which will not be elaborated here. Each module in the above component adjustment device can be implemented in whole or in part by software, hardware, and their combination. The above modules can be embedded in the processor in the terminal in hardware form or be independent of it, or be stored in the memory in the terminal in software form so that the processor can call and execute the operations corresponding to the above modules.

[0132] Figure 9 It is a block diagram of a terminal 1300 shown according to an exemplary embodiment. For example, the terminal 1300 can be a mobile phone, a game console, a tablet device, a medical device, a fitness device, a personal digital assistant, etc.

[0133] Refer to Figure 9, the terminal 1300 may include one or more of the following components: a processing component 1302, a memory 1304, a power supply component 1306, a multimedia component 1308, an audio component 1310, an input / output (I / O) interface 1312, a sensor component 1314, and a communication component 1316. Among them, a computer program or instruction that runs on the processor is stored in the memory.

[0134] The processing component 1302 generally controls the overall operation of the terminal 1300, such as operations associated with display, telephone call, data communication, camera operation, and recording operation. The processing component 1302 may include one or more processors 1320 to execute instructions to complete all or part of the steps of the above method. In addition, the processing component 1302 may include one or more modules to facilitate the interaction between the processing component 1302 and other components. For example, the processing component 1302 may include a multimedia module to facilitate the interaction between the multimedia component 1308 and the processing component 1302.

[0135] The memory 1304 is configured to store various types of data to support the operation of the terminal 1300. Examples of these data include instructions for any application or method operating on the terminal 1300, contact data, phone book data, messages, pictures, videos, etc. The memory 1304 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, a magnetic disk, or an optical disc.

[0136] The power supply component 1306 provides power for various components of the terminal 1300. The power supply component 1306 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power for the terminal 1300.

[0137] The multimedia component 1308 includes a touch display screen that provides an output interface between the terminal 1300 and the user. In some embodiments, the touch display screen may include a liquid crystal display (LCD) and a touch panel (TP). The touch panel includes one or more touch sensors to sense touches, swipes, and gestures on the touch panel. The touch sensors can sense not only the boundaries of a touch or swipe action, but also detect the duration and pressure associated with the touch or swipe operation. In some embodiments, the multimedia component 1308 includes a front camera and / or a rear camera. When the terminal 1300 is in an operation mode, such as a shooting mode or a video mode, the front camera and / or the rear camera can receive external multimedia data. Each of the front camera and the rear camera can be a fixed optical lens system or have a focal length and optical zoom capabilities.

[0138] The audio component 1310 is configured to output and / or input audio signals. For example, the audio component 1310 includes a microphone (MIC) that is configured to receive external audio signals when the terminal 1300 is in an operation mode, such as a call mode, a recording mode, and a voice recognition mode. The received audio signals can be further stored in the memory 1304 or transmitted via the communication component 1316. In some embodiments, the audio component 1310 further includes a speaker for outputting audio signals.

[0139] The I / O interface 1312 provides an interface between the processing component 1302 and a peripheral interface module, and the peripheral interface module can be a keyboard, a click wheel, buttons, etc. These buttons can include but are not limited to: a home button, a volume button, a power button, and a lock button.

[0140] The sensor component 1314 includes one or more sensors for providing status assessments of various aspects of the terminal 1300. For example, the sensor component 1314 can detect the open / closed state of the terminal 1300, the relative positioning of components, such as the display and the keypad of the terminal 1300. The sensor component 1314 can also detect a change in the position of the terminal 1300 or a component of the terminal 1300, the presence or absence of user contact with the terminal 1300, the orientation or acceleration / deceleration of the terminal 1300, and the temperature change of the terminal 1300. The sensor component 1314 can include a proximity sensor configured to detect the presence of nearby objects without any physical contact. The sensor component 1314 can also include a light sensor, such as a CMOS or a CCD image sensor, for use in imaging applications. In some embodiments, the sensor component 1314 can further include an acceleration sensor, a gyroscope sensor, a magnetic sensor, a pressure sensor, or a temperature sensor.

[0141] The communication component 1316 is configured to facilitate communication between the terminal 1300 and other devices in a wired or wireless manner. The terminal 1300 can access a wireless network based on a communication standard, such as WiFi, 2G, or 3G, or a combination thereof. In an exemplary embodiment, the communication component 1316 receives a broadcast signal or broadcast-related information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communication component 1316 further includes a Near Field Communication (NFC) module to facilitate short-range communication. For example, the NFC module can be implemented based on Radio Frequency Identification (RFID) technology, Infrared Data Association (IrDA) technology, Ultra Wideband (UWB) technology, Bluetooth (BT) technology, and other technologies.

[0142] In an exemplary embodiment, the terminal 1300 can be implemented by one or more Application Specific Integrated Circuits (ASICs), Digital Signal Processors (DSPs), Digital Signal Processing Devices (DSPDs), Programmable Logic Devices (PLDs), Field Programmable Gate Arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic components for performing the above-described component adjustment method.

[0143] In an exemplary embodiment, a non-transitory computer-readable storage medium including instructions is also provided, such as a memory 1304 including instructions, and the above instructions can be executed by a processor 1320 of the terminal 1300 to complete the above method. For example, the non-transitory computer-readable storage medium can be a ROM, Random Access Memory (RAM), CD-ROM, magnetic tape, floppy disk, and optical data storage device, etc.

[0144] In an exemplary embodiment, a storage medium including instructions is also provided, such as a memory 1422 including instructions, and the above instructions can be executed by a processor of the server 1400 to complete the above method. The storage medium can be a non-transitory computer-readable storage medium. For example, the non-transitory computer-readable storage medium can be a ROM, Random Access Memory (RAM), CD-ROM, magnetic tape, floppy disk, and optical data storage device, etc.

[0145] In an exemplary embodiment, a computer program product is also provided. When the computer program is executed by a processor, the above method can be implemented. The computer program product includes one or more computer instructions. When these computer instructions are loaded and executed on a computer, part or all of the above method can be implemented in accordance with the processes or functions described in the embodiments of the present disclosure.

[0146] It should be noted that for the solutions described in this specification and the embodiments, if they involve the processing of personal information, they will be processed on the premise of having a legal basis (such as obtaining the consent of the personal information subject, or being necessary for the performance of a contract, etc.), and will only be processed within the specified or agreed scope. If a user refuses to process personal information other than the necessary information required for the basic functions, it will not affect the user's use of the basic functions.

[0147] Those of ordinary skill in the art can understand that all or part of the processes of implementing the methods in the above embodiments can be completed by instructing relevant hardware through a computer program. The computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above methods. Among them, any reference to a memory, storage, database, or other medium used in the embodiments provided by the present disclosure may include at least one of non-volatile and volatile memories. Non-volatile memory may include read-only memory (ROM), magnetic tape, floppy disk, flash memory, or optical memory, etc. Volatile memory may include random access memory (RAM) or an external cache. By way of illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM), etc.

[0148] The technical features of the above embodiments can be combined arbitrarily. For the sake of brevity of description, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, it should be considered to be within the scope described in this specification.

[0149] The above-described embodiments only represent several implementation manners of the embodiments of the present disclosure. Their descriptions are relatively specific and detailed, but they should not be construed as limiting the scope of the invention patent. It should be noted that for those of ordinary skill in the art, without departing from the concept of the embodiments of the present disclosure, several modifications and improvements can still be made, and these all belong to the protection scope of the embodiments of the present disclosure. Therefore, the protection scope of the patent of the embodiments of the present disclosure should be subject to the appended claims.

Claims

1. A component adjustment method, characterized in that, the method includes: When it is detected that the scrolling component of the applet is in the target scenario, obtain the first size information of the terminal display area and the second size information of the preset first buffer area; the scrolling component is used to control the scrolling information of the display interface of the applet; Determine the adjustment strategy of the sub-component corresponding to the scrolling component according to the first size information, the second size information and the target scenario; Adjust the sub-component corresponding to the scrolling component according to the adjustment strategy.

2. The method according to claim 1, characterized in that, the target scenario includes the initialization scenario of the scrolling component or the running scenario of the scrolling component.

3. The method according to claim 2, characterized in that, If the target scenario is the initialization scenario of the scrolling component; the determining the adjustment strategy of the sub-component corresponding to the scrolling component according to the first size information, the second size information and the target scenario includes: In the scenario where the scrolling component is initialized, determine the initialization sub-component corresponding to the scrolling component; Call a preset listening function to obtain the third size information of the area occupied by the created initialization sub-component in the creation area; the creation area includes the display area and the first buffer area; Determine the fourth size information of the available area in the creation area according to the first size information, the second size information and the third size information; Determine the adjustment strategy according to the fifth size information of the creation area corresponding to the uncreated initialization sub-component and the fourth size information.

4. The method according to claim 3, characterized in that, the determining the adjustment strategy according to the fifth size information of the creation area corresponding to the uncreated initial sub-component and the fourth size information includes: If it is determined according to the fifth size information and the fourth size information that the range of the creation area corresponding to the uncreated initialization sub-component is greater than the range of the available area, then determine the adjustment strategy as pausing the creation of the uncreated initialization sub-component.

5. The method according to claim 2, characterized in that, If the target scenario is the running scenario of the scrolling component; the determining the adjustment strategy of the sub-component corresponding to the scrolling component according to the first size information, the second size information and the target scenario includes: Determine the offset distance between the sub-component and the display area according to the first size information; Determine whether the sub-component exceeds the first buffer area according to the second size information and the offset distance; If it is determined that the sub-component exceeds the first buffer area, then determine the adjustment strategy as deleting the creation information corresponding to the sub-component.

6. The method according to claim 5, characterized in that, the method further includes: Determine the view position corresponding to the deleted sub-component; At the view position, use a preset placeholder image to replace the view corresponding to the deleted sub-component; wherein, the resolution of the placeholder image is less than a preset resolution threshold.

7. The method according to claim 5, It is characterized in that The method further includes: Obtaining description information of the deleted sub-component and saving the description information 8. The method according to any one of claims 5-7, It is characterized in that The method further includes: If it is determined according to the offset distance that the sub-component exceeds the second buffer area, then create the to-be-created sub-component according to the description information of the to-be-created sub-component or the placeholder image corresponding to the to-be-created sub-component 9. A component adjustment device, It is characterized in that The device includes: An obtaining module, configured to obtain first size information of a terminal display area and second size information of a preset first buffer area when it is detected that a scrolling component of a mini program is in a target scenario; the scrolling component is used to control scrolling information of a display interface of the mini program A first determination module, configured to determine an adjustment strategy for a sub-component corresponding to the scrolling component according to the first size information, the second size information, and the target scenario An adjustment module, configured to adjust the sub-component corresponding to the scrolling component according to the adjustment strategy 10. A terminal, including a memory, a processor, and a computer program stored on the memory and executable on the processor, It is characterized in that When the processor executes the computer program, the steps of the method according to any one of claims 1 to 8 are implemented 11. A storage medium, on which a computer program is stored, It is characterized in that When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 8 are implemented 12. A computer program product, including a computer program, It is characterized in that When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 8 are implemented

Images