Interface processing method, device, electronic device and storage medium

Abstract

An embodiment of the present invention provides an interface processing method, device, electronic device and storage medium, the method comprising: obtaining original data to be presented in the interface; generating binding relationship data between the original data and interface element controls; generating a reused control of the interface according to the binding relationship data, and obtaining corresponding data from the original data and filling it into the reused control according to the position of the reused control in the interface, wherein the reused control is a control obtained by reusing the interface element controls that flow out of the visible area of ​​the screen. When performing a sliding operation on the interface element controls in the interface, the embodiment of the present invention does not need to repeatedly destroy and create the same interface element controls, thereby reducing memory usage and providing users with a smoother interface experience.

Description

Technical Field

[0001] Embodiments of the present invention relate to the field of interface technology, and in particular to an interface processing method, an interface processing device, an electronic device, and a storage medium. Background Art

[0002] React Native is a very popular cross-platform framework. The List component (i.e., list) is one of the core components of React Native. Most of the interface content that users browse on mobile devices such as mobile phones and tablets is presented using the List component. Due to the infinite extension feature of the List component, unlimited content can be presented within the limited screen of a mobile device.

[0003] React Native's built-in List component is called VirtualizedList, and it uses a high memory usage on mobile devices due to its implementation mechanism. Specifically, VirtualizedList destroys UI elements that slide out of the visible area of ​​the screen, and simultaneously creates UI elements that slide back into the visible area. Based on this implementation mechanism, if a user repeatedly swipes within a certain area of ​​the interface, the same UI elements in that area need to be frequently destroyed and created, occupying a large amount of mobile device memory. Summary of the Invention

[0004] The embodiment of the present invention provides an interface processing method to solve the problem that the List component provided by React Native occupies a large amount of memory.

[0005] Correspondingly, an embodiment of the present invention further provides an interface processing device to ensure the implementation and application of the above method.

[0006] In order to solve the above problems, an embodiment of the present invention discloses an interface processing method, which includes:

[0007] Obtaining raw data that needs to be presented in the interface;

[0008] Generate binding relationship data between the original data and the interface element control;

[0009] A multiplexed control of the interface is generated according to the binding relationship data, and corresponding data is obtained from the original data and filled into the multiplexed control according to the position of the multiplexed control in the interface, wherein the multiplexed control is a control obtained by multiplexing the interface element controls that flow out of the visible area of ​​the screen.

[0010] Optionally, the original data includes multiple data items, each of which includes a field name and field data corresponding to the field name; and generating binding relationship data between the original data and the interface element control includes:

[0011] Creating a template component based on the original data; the template component includes element information and layout information of the interface element control, the element information includes the display content of the interface element control, and the layout information includes the relative position relationship between the interface element controls;

[0012] Generate a rendering instruction sequence according to the template component; the rendering instruction in the rendering instruction sequence includes the element attribute name of the interface element control;

[0013] A relationship object sequence is generated according to the original data; and an association relationship between the field name and the element attribute name is created in the relationship object in the relationship object sequence.

[0014] Optionally, after generating the binding relationship data between the original data and the interface element control, the method further includes:

[0015] Creating an interface element control of the interface according to the rendering instruction;

[0016] According to the element attribute name of the interface element control and the position of the interface element control in the interface, the field name corresponding to the element attribute name is obtained from the relationship object, and the field data corresponding to the field name is filled into the interface element control.

[0017] Optionally, creating the interface element control of the interface according to the rendering instruction includes:

[0018] Get the height of the interface;

[0019] Creating the interface element control of the interface according to the rendering instruction; wherein the interface element control has a corresponding height;

[0020] Calculate the sum of the heights of the created interface element controls;

[0021] When it is determined that the sum is greater than or equal to the height of the interface, the creation of the interface element control is stopped.

[0022] Optionally, the acquiring, from the relationship object, a field name corresponding to the element attribute name of the interface element control and a position of the interface element control in the interface, and filling the field data corresponding to the field name into the interface element control includes:

[0023] Determine the interface element controls within the visible area of ​​the screen;

[0024] According to the element attribute name corresponding to the interface element control in the visible area of ​​the screen, the field name corresponding to the element attribute name is obtained from the relationship object, and the field data corresponding to the field name is filled into the interface element control in the visible area of ​​the screen.

[0025] Optionally, generating a multiplexed control of the interface according to the binding relationship data includes:

[0026] In response to a sliding operation on an interface element control of the interface, determining the interface element control to flow out of the visible area of ​​the screen;

[0027] The interface element control that flows out of the visible area of ​​the screen is moved to the position of the last interface element control in the interface that is in the same direction as the sliding operation to serve as a reused control.

[0028] Optionally, acquiring corresponding data from the original data and filling the multiplexed control into the multiplexed control according to the position of the multiplexed control in the interface includes:

[0029] Determining multiplexed controls that flow into the visible area of ​​the screen;

[0030] For the multiplexed control that flows into the visible area of ​​the screen, obtain the field name corresponding to the element attribute name from the relationship object according to the element attribute name of the multiplexed control that flows into the visible area of ​​the screen, and refill the field data corresponding to the field name into the multiplexed control that flows into the visible area of ​​the screen.

[0031] Optionally, the method further includes:

[0032] When it is detected that the interface element control in the visible area of ​​the screen is not filled with corresponding original data, the interface element control is displayed in a preset manner; the preset manner includes not displaying the interface element control.

[0033] The embodiment of the present invention further discloses an interface processing device, which includes:

[0034] A data acquisition module, used to acquire the original data that needs to be presented in the interface;

[0035] A data generation module, used to generate binding relationship data between the original data and the interface element controls;

[0036] A control reuse module is used to generate a reused control of the interface based on the binding relationship data, and obtain corresponding data from the original data and fill it into the reused control according to the position of the reused control in the interface, wherein the reused control is a control obtained by reusing the interface element controls that flow out of the visible area of ​​the screen.

[0037] Optionally, the original data includes multiple data items, and the data items include field names and field data corresponding to the field names; the data generation module is used to create a template component based on the original data; the template component includes element information and layout information of the interface element control, the element information includes the display content of the interface element control, and the layout information includes the relative position relationship between the interface element controls; a rendering instruction sequence is generated based on the template component; the rendering instructions in the rendering instruction sequence include the element attribute name of the interface element control; a relationship object sequence is generated based on the original data; and an association relationship between the field name and the element attribute name is created in the relationship object in the relationship object sequence.

[0038] Optionally, the control creation module is used to create the reusable interface element control of the interface according to the rendering instruction, obtain the field name corresponding to the element attribute name from the relationship object according to the element attribute name of the interface element control and the position of the interface element control in the interface, and fill the field data corresponding to the field name into the interface element control.

[0039] Optionally, the control creation module is used to obtain the height of the interface; create the interface element control of the interface according to the rendering instruction; wherein the interface element control has a corresponding height; calculate the sum of the heights of the created interface element controls; and stop creating the interface element control when it is determined that the sum is greater than or equal to the height of the interface.

[0040] Optionally, the control creation module is used to determine the interface element control in the visible area of ​​the screen; according to the element attribute name corresponding to the interface element control in the visible area of ​​the screen, obtain the field name corresponding to the element attribute name from the relationship object, and fill the field data corresponding to the field name into the interface element control in the visible area of ​​the screen.

[0041] Optionally, the control multiplexing module is configured to respond to a sliding operation on an interface element control of the interface and determine an interface element control that flows out of the visible area of ​​the screen;

[0042] The interface element control that flows out of the visible area of ​​the screen is moved to the position of the last interface element control in the interface that is in the same direction as the sliding operation to serve as a reused control.

[0043] Optionally, the control multiplexing module is used to determine the multiplexing control that flows into the visible area of ​​the screen; obtain the field name corresponding to the element attribute name of the multiplexing control that flows into the visible area of ​​the screen from the relationship object according to the element attribute name of the multiplexing control that flows into the visible area of ​​the screen, and refill the field data corresponding to the field name into the multiplexing control that flows into the visible area of ​​the screen.

[0044] Optionally, the device also includes: a display module, which is used to display the interface element control in a preset manner when it detects that the corresponding original data is not filled in the interface element control in the visible area of ​​the screen; the preset manner includes not displaying the interface element control or displaying the interface element control filled with preset data.

[0045] An embodiment of the present invention discloses an electronic device, including a processor, a memory, and a computer program stored in the memory and capable of running on the processor. When the computer program is executed by the processor, the steps of the interface processing method described above are implemented.

[0046] An embodiment of the present invention discloses a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps of the interface processing method described above are implemented.

[0047] An embodiment of the present invention further discloses a computer program product, which is stored in a storage medium and is executed by at least one processor to implement the method described in the embodiment of the present invention.

[0048] The embodiments of the present invention include the following advantages:

[0049] In an embodiment of the present invention, the original data that needs to be presented in the interface is obtained, and binding relationship data between the original data and the interface element control is generated. Then, a reusable multiplexing control of the interface is generated according to the binding relationship data, and according to the position of the multiplexing control in the interface, the corresponding data is obtained from the original data and filled into the multiplexing control. The interface element control created in the embodiment of the present invention can be reused as a multiplexing control after flowing out of the visible area of ​​the screen, so that when the interface element control in the interface is slid, there is no need to repeatedly destroy and create the same interface element control, thereby reducing memory usage, and thus providing users with a smoother interface experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] Figure 1 It is a flowchart of the steps of an embodiment of an interface processing method of the present invention;

[0051] Figure 2 It is a flowchart of the steps of an interface processing step of the present invention;

[0052] Figure 3 This is a schematic diagram of an element recycling mechanism of a RecyclingList of the present invention;

[0053] Figure 4 This is a RecyclingList data binding diagram of the present invention;

[0054] Figure 5 It is a structural block diagram of an embodiment of an interface processing device of the present invention. DETAILED DESCRIPTION

[0055] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, the present invention is further described in detail below with reference to the accompanying drawings and specific embodiments.

[0056] 1. Implementing List component based on ScrollView

[0057] ScrollView is a component that automatically scrolls when the content exceeds the size of its container. The underlying implementation of ScrollView is to create and arrange interface element controls in sequence, load all interface element controls in the interface at once, and when the interface element controls of the interface scroll, the interface element controls at the corresponding position in the visible area of ​​the screen are displayed.

[0058] However, there are two main problems with ScrollView:

[0059] 1. All interface elements and controls need to be loaded at once. Therefore, if there are many interface elements and controls, the loading time will be too long. Excessive loading time will cause the interface to be unable to display content in time, which will affect the timely response of the interface.

[0060] 2. All interface element controls in the interface are loaded into the memory, which will cause excessive memory usage. In addition, these interface element controls will not be destroyed, resulting in the memory being occupied all the time and the memory always running at a high level.

[0061] Second, React Native's own VirtualizedList.

[0062] React Native's built-in List component is called VirtualizedList. VirtualizedList destroys the interface element controls that slide out of the visible area of ​​the screen, and at the same time, it needs to create the interface element controls that slide into the visible area of ​​the screen.

[0063] There are two main problems with VirtualizedList:

[0064] 1. When sliding, VirtualizedList calculates the interface element controls that can be displayed in the visible range of the current screen in real time, and performs creation operations on these interface element controls, and performs destruction operations on interface element controls that slide out of the screen. As the user scrolls the sliding list on the screen, VirtualizedList will frequently create and destroy interface element controls. Frequent creation and destruction of interface element controls means that the memory usage rate increases rapidly. Moreover, since interface element controls are allocated in smaller memory blocks, frequent creation and destruction will lead to memory fragmentation, which will cause the garbage collector to start frequently. The startup and operation of the garbage collector will affect the performance of the virtual machine (the garbage collector will suspend the rendering thread briefly). The performance degradation of the virtual machine will lead to the performance degradation of the application itself. From a visual perspective, the list scrolling is not smooth.

[0065] 2. The rendering of VirtualizedList is asynchronous. The rendering instructions of the interface element controls need to be sent to the native layer through a specific communication method between the JS layer and the native layer, and then the native layer completes the rendering. There is always a delay from sending the rendering instructions to rendering the interface element controls on the mobile terminal screen. When the user quickly slides the list, the delayed rendering may not be timely, causing the user to briefly see the list content as blank, which is the white screen problem. That is, no interface element controls are displayed on the screen, and the user can only see a white screen.

[0066] Therefore, one of the objectives of the embodiments of the present invention is to provide an innovative List component to solve the memory and white screen issues of React Native's own List component, providing users with a better list experience. In the following description, the innovative List component of the embodiments of the present invention is referred to as the RecyclingList component.

[0067] Reference Figure 1 , shows a flowchart of the steps of an embodiment of an interface processing method of the present invention, and the embodiment of the present invention may specifically include the following steps:

[0068] Step 101: Acquire original data that needs to be presented in the interface.

[0069] Here, the interface refers to the interface of an application (APP), for example, the prop interface in a game program, the news interface in a media program, the product interface in a shopping program, etc.

[0070] Raw data is the unprocessed data obtained from the server that needs to be presented in an interface (such as a list interface), and its format is usually an array. Specifically, when a user opens a certain interface of an application, the server can retrieve the raw data needed to be presented in that interface, such as images, text, videos, etc. As a specific example, when a user opens the product interface of an e-commerce platform, the server can retrieve raw data containing multiple product details describing the product.

[0071] Step 102: Generate binding relationship data between the original data and the interface element control.

[0072] Among them, the interface element control refers to the View (view control), which is a description of the original data displayed in the interface. A View is an interface element control. Specifically, there can be multiple interface element controls in an interface. An interface with multiple interface element controls is usually called a list interface.

[0073] Among them, the binding relationship data is used to instruct the native layer rendering to generate interface element controls, and to fill the original data into the interface element controls accordingly. In other words, the binding relationship data is used to instruct the generation of interface element controls, and which original data should be filled into which interface element controls in the interface.

[0074] Step 103: Generate a reusable control of the interface based on the binding relationship data, and obtain corresponding data from the original data and fill it into the reusable control based on the position of the reusable control in the interface, wherein the reusable control is a control obtained by reusing the interface element controls that flow out of the visible area of ​​the screen.

[0075] Specifically, one or more interface element controls of the interface can be created based on the binding relationship data. The position of the interface element control in the interface can refer to the interface element control in the screen visible area of ​​the interface, or the interface element control in the non-screen visible area of ​​the interface. Specifically, when the user slides the interface, the interface element control in the interface will scroll accordingly based on the sliding operation, and then the position of the interface element control in the interface will change accordingly. For example, the interface element control can flow out from the screen visible area to the non-screen visible area, or the interface element control can flow from the non-screen visible area into the screen visible area.

[0076] In an embodiment of the present invention, the interface element control is reusable, and the reused interface element control will be used as a reused control. The reused control is specifically a control obtained by reusing the interface element control that flows out of the visible area of ​​the screen. Specifically, when the interface element control flows out of the visible area of ​​the screen to the non-visible area of ​​the screen, the interface element control will not be destroyed, but will be used as a reused control. Moreover, when the reused control flows from the non-visible area of ​​the screen to the visible area of ​​the screen, it is only necessary to refill the corresponding original data in the reused control. Among them, the original data in the reused control can be cleared after flowing out of the visible area of ​​the screen, or it can be cleared and filled with the corresponding original data when it flows into the visible area of ​​the screen for reuse.

[0077] In an embodiment of the present invention, a multiplexed control of the interface can be generated based on the binding relationship data. Then, based on the position of the multiplexed control in the interface, that is, whether it is in the visible area of ​​the screen, the corresponding data is obtained from the original data and filled into the multiplexed control. Then, in the visible area of ​​the screen, the multiplexed control filled with the original data can be viewed.

[0078] In a specific implementation, an application may include a JS layer and a native layer. The JS layer refers to the JavaScript layer, which is responsible for describing the form and function of the application's interface (page); the native layer refers to the Android platform or iOS platform, or refers to the coding method of the Android platform or iOS platform.

[0079] As a specific example of the present invention, the communication method between the JS layer and the native layer provided by React Native is Bridge. Based on Bridge, the JS layer can be equipped with the ability to call native layer code. In an embodiment of the present invention, after the JS layer obtains the binding relationship data based on the original data, the JS layer can send the original data and the binding relationship data to the native layer through the communication method of Bridge. The native layer can then create one or more interface element controls of the interface based on the binding relationship data, and use the control as a reused control when there is an interface element control that flows out of the visible area of ​​the screen. Therefore, the corresponding data can be obtained from the original data and filled into the reused control according to the position of the reused control in the interface, thereby realizing the reuse of the control.

[0080] In the above-mentioned interface processing method, the original data that needs to be presented in the interface is obtained, and the binding relationship data between the original data and the interface element control is generated. Then, the reuse control of the interface is generated according to the binding relationship data, and according to the position of the reuse control in the interface, the corresponding data is obtained from the original data and filled into the reuse control. The embodiment of the present invention creates a reusable interface element control that can be reused as a reuse control after flowing out of the visible area of ​​the screen, so that when the interface element control in the interface is slid, there is no need to repeatedly destroy and create the same interface element control, thereby reducing the memory usage, and thus providing users with a smoother interface usage experience.

[0081] Based on the above embodiment, a modified embodiment of the above embodiment is proposed. It should be noted that, in order to simplify the description, only the differences from the above embodiment are described in the modified embodiment.

[0082] In an exemplary embodiment, the original data may include multiple data items, each of which includes at least a field name and field data corresponding to the field name; step 102, generating binding relationship data between the original data and the interface element control, may include the following steps:

[0083] Creating a template component based on the original data; the template component includes element information and layout information of the interface element control, the element information includes the display content of the interface element control, and the layout information includes the relative position relationship between the interface element controls;

[0084] Generate a rendering instruction sequence according to the template component; the rendering instruction in the rendering instruction sequence includes the element attribute name of the interface element control;

[0085] A relationship object sequence is generated according to the original data; and an association relationship between the field name and the element attribute name is created in the relationship object in the relationship object sequence.

[0086] The binding relationship data may include a rendering instruction sequence and a relationship object sequence.

[0087] In an embodiment of the present invention, the user (developer using the List component) generates a template component that describes the interface based on the original data (for example, in a product interface, the display order of multiple products in the interface, such as product 1, product 2, product 3...), and the template component is a React component, which contains the layout information and element information of the interface. Specifically, the layout information may include information such as the up, down, left, and right relationships and spacing between interface element controls, and the element information may include information such as the position, size, background (the background includes the background color and pictures of the displayed text, etc.) and text of the interface element controls. These layout information and element information are described using the syntax of React. Among them, React is a programming framework that supports the mixed writing of XML tags and JS code.

[0088] The generated template component is instructed using the React Native interface to obtain a rendering instruction sequence containing multiple rendering instructions. Specifically, the original rendering interface of React Native is intercepted, and a temporary proxy implementation is used for rendering. The React Native interface is called to render the template component. The rendering call will go to the proxy implementation, and each rendering instruction, such as createView and updateView, is recorded in the proxy implementation. The rendering instruction will carry the identifier of the interface element control that requires specific operation and the attributes of the element. After rendering the template component, a set of rendering instructions can be obtained. The set of rendering instructions is serialized to obtain a rendering instruction sequence, and saved as a JSON (JavaScript Object Notation, a lightweight data exchange format) format file for temporary storage.

[0089] React Native renders a template component through a renderer object, which implements a set of interfaces, including methods such as addView (adding interface elements), removeView (removing interface elements), and updateView (updating interface elements). In an embodiment of the present invention, a proxy implementation refers to a custom object that implements this set of interfaces, and the proxy implementation is used instead of the original React Native renderer object. In the original renderer implementation, these methods call Bridge, and then the native layer directly performs the addition, deletion, and update operations of interface elements. Because the JS layer cannot directly operate interface elements (if it does, it cannot control the creation time of interface elements), it caches the calls to operate interface elements (converting each call to a rendering instruction) and ultimately "plays back" these rendering instructions in the native layer, achieving the purpose of controlling the creation time of interface elements and caching interface elements. Therefore, the custom proxy implementation is used to achieve the purpose of "recording" these rendering instructions.

[0090] The raw data is processed at the JS layer, with each field of the raw data item mapped to each element attribute (including the element attribute name) of the interface element control. Maps (Map refers to a mapping from key to value) are used for identification. The key of the Map is the element attribute name of the interface element control, and the value is the field name of the data item in the raw data. A relationship object (Map object) can describe which field name in the data item the element attribute name of an interface element control corresponds to when binding data. Subsequently, multiple relationship objects are serialized to obtain a relationship object sequence and saved as a JSON format file for temporary storage.

[0091] In an embodiment of the present invention, after generating a rendering instruction sequence and a relationship object sequence based on the original data, the JSON format file of the rendering instruction sequence and the JSON format file of the relationship object sequence are sent to the native layer through the Bridge, so that the native layer can generate interface element controls by executing the rendering instructions in the rendering instruction sequence, and fill in the corresponding original data in the interface element controls based on the relationship objects in the relationship object sequence to render the generated interface.

[0092] It should be noted that since the original data, rendering instruction sequence, and relationship object sequence are all sent to the native layer at one time through the communication method (Bridge) between the JS layer and the native layer, and the JS layer does not need to send any data to the native layer in the future, the process of rendering the raw interface is completed by the native layer itself, so there will be no asynchronous rendering problem of VirtualizedList, that is, the white screen problem.

[0093] In the above exemplary embodiment, after the JS layer generates a rendering instruction sequence and a relationship object sequence based on the original data, the original data, rendering instruction sequence and relationship object sequence are sent to the native layer. The native layer can then use the original data, rendering instruction sequence and relationship object sequence to generate an interface. Moreover, since the JS layer does not need to send any data to the native layer after sending the original data, rendering instruction sequence and relationship object sequence to the native layer, there will be no asynchronous rendering problem, i.e., white screen problem, in the process of rendering the interface in the native layer.

[0094] In an exemplary embodiment, referring to Figure 2 In step 102, after generating the binding relationship data between the original data and the interface element control, the method may include the following steps:

[0095] Step 201: Create the reusable interface element control of the interface according to the rendering instruction;

[0096] Step 202: According to the element attribute name of the interface element control and the position of the interface element control in the interface, obtain the field name corresponding to the element attribute name from the relationship object, and fill the field data corresponding to the field name into the interface element control.

[0097] In an embodiment of the present invention, the native layer implements a RecyclingList component through the method provided by React Native. The RecyclingList component is based on the reusable component of the native layer (Android's RecyclerView or iOS's UITableView). The RecyclingList component provides all the methods that the JS layer needs to call the native layer, including a Bridge for the JS layer to send data to the native layer.

[0098] When each interface element control is created according to the rendering instruction, it will be added to the RecyclingList component. Then data binding will be performed, and all element attribute names of the interface element control will be traversed to determine whether the element attribute name of the interface element control is in the relationship object. If so, it means that the interface element control needs to be bound to data. Specifically, the field name corresponding to the element attribute name of the interface element control that needs to be bound to data is obtained from the relationship object. According to the location of the interface element control (whether it is in the visible area of ​​the screen), it is determined whether to obtain the corresponding field data of the interface element control from the original data. If the interface element control is in the visible area of ​​the screen, the corresponding field name is determined from the relationship object based on the element attribute name of the interface element control to obtain the value corresponding to the bound field of the interface element control from the original data. The value is read out and set to the corresponding element attribute of the interface element control (for example, setting the background color attribute backgroundColor to black #000000). Once the creation and data binding of the interface element control are completed, it can be displayed in the interface.

[0099] For example, suppose that interface element controls View1, View2, and View3 are created according to rendering instructions, where "1", "2", and "3" represent the corresponding element attribute names of View1, View2, and View3 respectively. If View1 is in the visible area of ​​the screen, suppose that the field name "1'" corresponding to the element attribute name "1" of View1 is obtained from the relationship object, then the value (field data) corresponding to the field name is further obtained from the original data based on the field name "1'", and then the value can be set to the element attribute name of View1 to complete the data binding of View1. Since View2 and View3 are in the non-visible area of ​​the screen, there is no need to perform the data binding step.

[0100] It should be noted that since the creation of interface element controls and the data binding process are synchronized, it means that before the interface is rendered, the user will not be able to slide the interface element controls in the interface, so there will be no white screen phenomenon, ensuring the user interface experience.

[0101] In the above exemplary embodiment, the JS layer generates a rendering instruction sequence and a relationship object sequence based on the original data, and sends the original data, rendering instruction sequence and relationship object sequence to the native layer. The native layer can then execute the rendering instruction sequence to create an interface element control, and bind the original data to the corresponding interface element control based on the relationship object sequence, so that an interface can be generated to display the original data in the interface. Since the original data, rendering instruction sequence and relationship object sequence are all sent to the native layer at one time through the communication method (Bridge) between the JS layer and the native layer, and the process of creating the interface element control and binding the data is synchronized, the user will not be able to slide the interface element control of the interface before the interface is rendered and generated, so there will be no white screen phenomenon.

[0102] In an exemplary embodiment, the step 201 of creating the interface element control of the interface according to the rendering instruction may include the following steps:

[0103] Get the height of the interface;

[0104] Creating the interface element control of the interface according to the rendering instruction; wherein the interface element control has a corresponding height;

[0105] Calculate the sum of the heights of the created interface element controls;

[0106] When it is determined that the sum is greater than or equal to the height of the interface, the creation of the interface element control is stopped.

[0107] The creation process of each interface element control in the native layer is to use the rendering instructions generated in the JS layer to translate the instructions into different React Native interface calls. When a group of React Native interface calls are completed, an interface element control is created. This process is repeated until all interface element controls are created.

[0108] The height of the RecyclingList itself and the height of the interface element controls are fixed. The height of the RecyclingList determines the height of the interface. Specifically, the height of the RecyclingList is specified by the developer when declaring the RecyclingList component (either a fixed value or a dynamic value such as a percentage). The height of the interface element controls is specified by the developer when declaring the template component (element template). Since all UI (interface) layouts created by the JS layer are rendered in the native layer, the native layer can obtain the height of all layout interface element controls through the platform's layout measurement-related APIs.

[0109] Specifically, when loading, RecyclingList will obtain its own height (the height of the interface) and the height of the interface element control. The height of the RecyclingList and the height of the interface element control can be used to calculate the number of interface element controls that need to be created at one time. The number of interface element controls is sent to the native layer through the communication method between React Native's JS layer and the native layer. The native layer needs to use this number as the basis when creating interface element controls, or the native layer calculates the creation of interface elements that need to be created based on the height of the RecyclingList and the height of the interface element control.

[0110] In an embodiment of the present invention, after the native layer's RecyclingList component receives data sent from the JS layer, it first needs to fill the RecyclingList component with interface element controls. The first step in filling the interface element controls is to create the interface element controls. Each time RecyclingList creates an interface element control, it calculates the remaining space. If the remaining space can accommodate more interface element controls, it continues to create the next interface element control until a group of interface element controls is created. The height of this group of interface element controls added together just fills or just exceeds the height of the RecyclingList itself.

[0111] In the above exemplary embodiment, the interface element control is created according to the height of the interface (the height of the RecyclingList itself) and the height of the interface element control of the template component, so that the space of the RecyclingList can be utilized to the maximum extent.

[0112] In an exemplary embodiment, step 202, obtaining a field name corresponding to the element attribute name of the interface element control and the position of the interface element control in the interface, and filling the field data corresponding to the field name into the interface element control, may include the following steps:

[0113] Determine the interface element controls within the visible area of ​​the screen;

[0114] According to the element attribute name corresponding to the interface element control in the visible area of ​​the screen, the field name corresponding to the element attribute name is obtained from the relationship object, and the field data corresponding to the field name is filled into the interface element control in the visible area of ​​the screen.

[0115] In an embodiment of the present invention, the position of the interface element control in the interface can be continuously changed according to the user's sliding operation on the interface. If the interface element control is in the visible area of ​​the screen, it means that the interface element control needs to be displayed in the interface, so the interface element control needs to be data bound so that the corresponding original data can be displayed through the interface element control.

[0116] Specifically, in the native layer, for the interface element controls in the visible area of ​​the screen, the field name corresponding to the element attribute name is obtained from the relationship object according to the element attribute name corresponding to the interface element control in the visible area of ​​the screen, and the field data corresponding to the field name is filled into the interface element controls in the visible area of ​​the screen for display in the visible area of ​​the screen.

[0117] In the above exemplary embodiments, data binding can be performed on the interface element controls in the visible area of ​​the screen so that the corresponding original data can be displayed in the interface element controls. Of course, data binding does not need to be performed on the interface element controls in the non-visible area of ​​the screen to save unnecessary operation steps.

[0118] In an exemplary embodiment, step 103, generating a multiplexed control of the interface according to the binding relationship data, and obtaining corresponding data from the original data and filling the multiplexed control according to the position of the multiplexed control in the interface, may include the following steps:

[0119] In response to a sliding operation on an interface element control of the interface, determining the interface element control to flow out of the visible area of ​​the screen;

[0120] Moving the interface element control that flows out of the visible area of ​​the screen to the position of the last interface element control in the same direction as the sliding operation in the interface to serve as a reused control;

[0121] Determining multiplexed controls that flow into the visible area of ​​the screen;

[0122] For the multiplexed control that flows into the visible area of ​​the screen, obtain the field name corresponding to the element attribute name from the relationship object according to the element attribute name of the multiplexed control that flows into the visible area of ​​the screen, and refill the field data corresponding to the field name into the multiplexed control that flows into the visible area of ​​the screen.

[0123] In an embodiment of the present invention, the number of interface element controls is fixed. In order to avoid repeatedly creating and destroying interface element controls, the interface element controls that flow out of the visible area of ​​the screen can be reused as reused controls. Then, whether to perform data binding is determined based on whether the reused controls flow into the visible area of ​​the screen. That is, when an interface element control is used as a reused control, data binding can be performed repeatedly.

[0124] Reference Figure 3 , item represents an interface element control. When the user starts to slide the interface element control in the interface, such as sliding up or down on the screen of a mobile device, when the first interface element control (item0) changes from visible to invisible (moving from the visible area of ​​the screen to the non-visible area of ​​the screen), the position of item0 is immediately moved from the top of the screen to the bottom of the screen, that is, the position of the last interface element control (item6). At the same time, the data binding is re-executed on the interface element control, thereby realizing the recycling and reuse of item0 (Recycler), wherein the bound data is the original data that is desired to be displayed at that position in the interface. Subsequently, if the user continues to slide the interface element control in the interface, when item0 flows into the visible area of ​​the screen again, the content displayed by item0 is the re-bound original data.

[0125] In an embodiment of the present invention, when the user continues to slide the interface element controls in the interface downward, the step of binding data in the interface element controls will be repeated, the first interface element control will move to the position of the last interface element control, and then the data will be re-bound. Similarly, when the user slides the interface element controls in the interface upward, the last interface element control will move to the position of the first interface element control and then the data will be re-bound. In the above manner, the interface element controls themselves are recycled and reused, and there is no need to create a fixed number of additional interface element controls (the process of creating interface element control objects is time-consuming and occupies more memory). As the interface element controls in the interface are slid, it is only necessary to re-bind the data to the interface element controls.

[0126] In the above exemplary embodiment, the original data of the RecyclingList is a longer array (of any length), which will be bound to the interface element controls of the RecyclingList in sequence. As the list interface slides, the interface element controls that are moved out of the visible area of ​​the screen will be recycled, and new original data will be bound again during the recycling process. This process can be repeated to present content of infinite length using a fixed number of interface element controls.

[0127] In an exemplary embodiment, the method may further include the following steps:

[0128] When it is detected that the interface element control in the visible area of ​​the screen is not filled with corresponding original data, the interface element control is displayed in a preset manner; the preset manner includes not displaying the interface element control.

[0129] Specifically, if the native layer detects that the UI element controls in the visible area of ​​the screen have not been populated with corresponding raw data, they can be displayed in a preset manner, where the preset manner may include not displaying or displaying them in a default state. For example, if the interface does not require much raw data to display, some created UI element controls do not require data binding and can be displayed in the visible area of ​​the screen in a preset manner.

[0130] For example, if a text control in the visible area of ​​the screen is not bound to any raw data (such as text or background color), a blank transparent area will be displayed. If the text control is sized, the blank transparent area will be the size of the setting. If no specific size is set, the blank transparent area will be 0 pixels because it is not bound to any raw data, which means it is not displayed in the interface.

[0131] In the above exemplary embodiment, when it is detected that the interface element controls in the visible area of ​​the screen are not filled with corresponding original data, the interface element controls are displayed in a preset manner to avoid these interface element controls affecting the normal display of other interface element controls in the interface.

[0132] In summary, the present invention provides a RecyclingList component that addresses both the memory issues of existing solutions and the white screen issue caused by asynchronous rendering. RecyclingList incorporates two core innovations: support for the recycling of UI element controls and synchronous rendering.

[0133] In an embodiment of the present invention, the interface element control of RecyclingList needs to create a rendering template (template component) by the JS layer, that is, the user decides how to render the interface element control. This rendering template will generate a set of rendering instructions in the JS layer. The rendering instructions include which sub-elements (interface element controls) need to be created, such as interface element controls for displaying pictures or texts, and information such as the position, size, and number of interface element controls in the interface. This information will be sent to the native layer through the JS and native communication method Bridge. The native layer sends this set of rendering instructions to the React Native rendering engine through the React Native interface. React Native will create a root View of the interface, and RecyclingList will create a corresponding number of interface element controls (sub-Views) according to the number of elements, and add them all to the root View.

[0134] When using RecyclingList, the JS layer also needs to provide data for RecyclingList. The data needs to include the element attribute name and corresponding value of each interface element control. For example, there is an interface element control for an image. The element attribute name of the image is imageSource, and the value is " / path / to / image". The JS layer needs to create a relationship object for the interface element control based on the original data. The structure of the relationship object is {"imageSource":" / path / to / image"}. Each interface element control corresponds to a relationship object, and multiple relationship objects form an array. The JS layer sends this array to the native layer in the form of a string. When the native layer starts rendering the interface element control, it will first obtain the interface element control created above, and then bind the interface element control to the original data. The binding method can be summarized as: based on the element attribute name of the interface element control, determine the corresponding field name in the relationship object, and then set the value of the element attribute name to the value corresponding to the field name in the relationship object. In this way, the interface formed by the interface element control can display the corresponding original data through the interface element control.

[0135] Reference Figure 4, is a schematic diagram of RecyclingList data binding in an embodiment of the present invention. In the JS layer, a template component (element template) describing the interface is generated, and rendering instructions are generated based on the template component. A relationship object (JS object) is used to describe the association between the field name of the original data and the element attribute name of the View. For example, if there is a name field in the original data and a nameText attribute in the View, the value of the name field can be assigned to the nameText attribute of the View to obtain a relationship object. The relationship object has a field named name (string type) and a value of "nameText". Then, the rendering instruction and the relationship object are serialized into a JSON string and sent to the native layer by calling the Bridge communication method between the JS layer and the native layer.

[0136] At the native layer, the interface element control is generated based on the rendering instruction, and then based on all the element attribute names of the interface element control, the field name corresponding to the element attribute name of the interface element control is obtained from the relationship object, and the value corresponding to the field name in the original data is bound to the interface element control. When the creation and data binding of the interface element control are completed, it can be displayed in the interface.

[0137] The innovative List component of the embodiment of the present invention, namely the RecyclingList component, makes up for the performance deficiencies of the VirtualizedList provided by React Native and provides users with a smoother interface sliding experience.

[0138] It should be noted that for the sake of simplicity, the method embodiments are described as a series of actions. However, those skilled in the art should be aware that the embodiments of the present invention are not limited by the order of the actions described, because according to the embodiments of the present invention, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in this specification are all preferred embodiments, and the actions involved are not necessarily required by the embodiments of the present invention.

[0139] Reference Figure 5 , shows a structural block diagram of an embodiment of an interface processing device of the present invention, wherein the interface is an interface of an application program, and the application program includes a JS layer and a native layer. The embodiment of the present invention may specifically include the following modules:

[0140] The data acquisition module 501 is used to acquire the original data to be presented in the interface;

[0141] The data generation module 502 is used to generate binding relationship data between the original data and the interface element controls;

[0142] The control reuse module 503 is used to generate a reused control of the interface based on the binding relationship data, and obtain corresponding data from the original data and fill it into the reused control according to the position of the reused control in the interface, wherein the reused control is a control obtained by reusing the interface element control that flows out of the visible area of ​​the screen.

[0143] In an exemplary embodiment, the original data includes multiple data items, and the data items include field names and field data corresponding to the field names; the data generation module 502 is used to create a template component based on the original data; the template component includes element information and layout information of the interface element control, the element information includes the display content of the interface element control, and the layout information includes the relative position relationship between the interface element controls; a rendering instruction sequence is generated based on the template component; the rendering instructions in the rendering instruction sequence include the element attribute name of the interface element control; a relationship object sequence is generated based on the original data; and an association relationship between the field name and the element attribute name is created in the relationship object in the relationship object sequence.

[0144] In an exemplary embodiment, the device also includes a control creation module for creating a reusable interface element control of the interface according to the rendering instruction; obtaining the field name corresponding to the element attribute name from the relationship object according to the element attribute name of the interface element control and the position of the interface element control in the interface, and filling the field data corresponding to the field name into the interface element control.

[0145] In an exemplary embodiment, the control creation module is used to obtain the height of the interface; create the interface element control of the interface according to the rendering instruction at the native layer; wherein the interface element control has a corresponding height; calculate the sum of the heights of the created interface element controls; and stop creating the interface element control when the native layer determines that the sum is greater than or equal to the height of the interface.

[0146] In an exemplary embodiment, the control creation module 503 is used to determine the interface element control in the visible area of ​​the screen; according to the element attribute name corresponding to the interface element control in the visible area of ​​the screen, obtain the field name corresponding to the element attribute name from the relationship object, and fill the field data corresponding to the field name into the interface element control in the visible area of ​​the screen.

[0147] In an exemplary embodiment, the control reuse module 503 is used to respond to a sliding operation on the interface element control of the interface, determine the interface element control that flows out of the visible area of ​​the screen; and move the interface element control that flows out of the visible area of ​​the screen to the position of the last interface element control in the interface in the same direction as the sliding operation as a reused control.

[0148] In an exemplary embodiment, the control multiplexing module 503 is used to determine the multiplexing control that flows into the visible area of ​​the screen; obtain the field name corresponding to the element attribute name of the multiplexing control that flows into the visible area of ​​the screen from the relationship object according to the element attribute name of the multiplexing control that flows into the visible area of ​​the screen, and refill the field data corresponding to the field name into the multiplexing control that flows into the visible area of ​​the screen.

[0149] In an exemplary embodiment, the device also includes: a display module, which is used to display the interface element control in a preset manner when it detects that the corresponding original data is not filled in the interface element control in the visible area of ​​the screen; the preset manner includes not displaying the interface element control or displaying the interface element control filled with preset data.

[0150] In summary, in an embodiment of the present invention, the original data that needs to be presented in the interface is obtained, and binding relationship data between the original data and the interface element control is generated. Then, a reusable multiplexing control of the interface is generated according to the binding relationship data, and according to the position of the multiplexing control in the interface, the corresponding data is obtained from the original data and filled into the multiplexing control. The interface element control created in the embodiment of the present invention can be reused as a multiplexing control after flowing out of the visible area of ​​the screen, so that when the interface element control in the interface is slid, there is no need to repeatedly destroy and create the same interface element control, thereby reducing memory usage, and thus providing users with a smoother interface usage experience.

[0151] As for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0152] An embodiment of the present invention discloses an electronic device, including a processor, a memory, and a computer program stored in the memory and capable of running on the processor. When the computer program is executed by the processor, the steps described in the above embodiment of the interface processing method are implemented.

[0153] An embodiment of the present invention discloses a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps described in the above embodiment of the interface processing method are implemented.

[0154] An embodiment of the present invention provides a computer program product, which is stored in a storage medium. The program product is executed by at least one processor to implement the various processes of the above-mentioned interface processing method embodiment and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0155] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0156] Those skilled in the art will appreciate that embodiments of the present invention may be provided as methods, apparatus, or computer program products. Thus, embodiments of the present invention may take the form of a fully hardware embodiment, a fully software embodiment, or an embodiment combining software and hardware. Furthermore, embodiments of the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0157] The embodiments of the present invention are described with reference to the flowcharts and / or block diagrams of the methods, terminal devices (systems), and computer program products according to the embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of the processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing terminal device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing terminal device generate instructions for implementing the process in the flowchart and / or block diagram. Figure 1 a process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0158] These computer program instructions may also be stored in a computer readable memory that can direct a computer or other programmable data processing terminal device to operate in a specific manner, so that the instructions stored in the computer readable memory produce a manufactured product including an instruction device, which implements the process Figure 1 a process or multiple processes and / or boxes Figure 1 The function specified in one or more boxes.

[0159] These computer program instructions can also be loaded onto a computer or other programmable data processing terminal device so that a series of operating steps are executed on the computer or other programmable terminal device to produce a computer-implemented process, thereby providing instructions for executing on the computer or other programmable terminal device to implement the process. Figure 1a process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.

[0160] Although the preferred embodiments of the present invention have been described, those skilled in the art may make additional changes and modifications to these embodiments once they become aware of the basic creative concepts. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the embodiments of the present invention.

[0161] Finally, it should be noted that, in this document, relational terms such as first and second, etc., are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the terms "comprises," "comprising," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or terminal device that includes a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, article, or terminal device. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of additional identical elements in the process, method, article, or terminal device that includes the element.

[0162] The above is a detailed introduction to an interface processing method, an interface processing device, an electronic device and a storage medium provided by the present invention. Specific examples are used herein to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only used to help understand the method of the present invention and its core idea; at the same time, for general technical personnel in this field, based on the ideas of the present invention, there will be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as a limitation on the present invention.

Claims

1. An interface processing method, characterized in that: The interface is an interface of an application program, the application program includes a JS layer and a native layer, and the method includes: Acquire original data to be presented in the interface, wherein the original data includes multiple data items, each of which includes a field name and field data corresponding to the field name; Generate binding relationship data between the original data and the interface element control, wherein the binding relationship data is used to instruct the native layer to render and generate the interface element control, and to fill the original data into the interface element control accordingly; In response to a sliding operation on an interface element control of the interface, determining the interface element control flowing out of a visible area of ​​the screen; Moving the interface element control that flows out of the visible area of ​​the screen to the position of the last interface element control in the interface that is opposite to the sliding operation direction to serve as a reused control; According to the position of the multiplexed control in the interface, corresponding data is obtained from the original data and filled into the multiplexed control; The step of generating the binding relationship data between the original data and the interface element controls includes: Creating a template component based on the original data; the template component includes element information and layout information of the interface element control, the element information includes the display content of the interface element control, and the layout information includes the relative position relationship between the interface element controls; Generate a rendering instruction sequence according to the template component; the rendering instruction in the rendering instruction sequence includes the element attribute name of the interface element control; A relationship object sequence is generated according to the original data; and an association relationship between the field name and the element attribute name is created in the relationship object in the relationship object sequence.

2. The method according to claim 1, characterized in that After generating the binding relationship data between the original data and the interface element control, the method further includes: Creating an interface element control of the interface according to the rendering instruction; According to the element attribute name of the interface element control and the position of the interface element control in the interface, the field name corresponding to the element attribute name is obtained from the relationship object, and the field data corresponding to the field name is filled into the interface element control.

3. The method according to claim 2, characterized in that The step of creating an interface element control of the interface according to the rendering instruction includes: Get the height of the interface; Creating the interface element control of the interface according to the rendering instruction; wherein the interface element control has a corresponding height; Calculate the sum of the heights of the created interface element controls; When it is determined that the sum is greater than or equal to the height of the interface, the creation of the interface element control is stopped.

4. The method according to claim 2, characterized in that The acquiring, according to the element attribute name of the interface element control and the position of the interface element control in the interface, the field name corresponding to the element attribute name from the relationship object, and filling the field data corresponding to the field name into the interface element control, includes: Determine the interface element controls within the visible area of ​​the screen; According to the element attribute name corresponding to the interface element control in the visible area of ​​the screen, the field name corresponding to the element attribute name is obtained from the relationship object, and the field data corresponding to the field name is filled into the interface element control in the visible area of ​​the screen.

5. The method according to claim 1, wherein The acquiring corresponding data from the original data and filling the data into the multiplexing control according to the position of the multiplexing control in the interface includes: Determining multiplexed controls that flow into the visible area of ​​the screen; For the multiplexed control that flows into the visible area of ​​the screen, obtain the field name corresponding to the element attribute name from the relationship object according to the element attribute name of the multiplexed control that flows into the visible area of ​​the screen, and refill the field data corresponding to the field name into the multiplexed control that flows into the visible area of ​​the screen.

6. The method according to claim 4, characterized in that The method further comprises: When it is detected that the interface element control in the visible area of ​​the screen is not filled with corresponding original data, the interface element control is displayed in a preset manner; the preset manner includes not displaying the interface element control.

7. An interface processing device, characterized in that: The interface is an interface of an application program, the application program includes a JS layer and a native layer, and the device includes: A data acquisition module is used to acquire original data that needs to be presented in the interface, wherein the original data includes multiple data items, each of which includes a field name and field data corresponding to the field name; A data generation module is used to generate binding relationship data between the original data and the interface element control, wherein the binding relationship data is used to instruct the native layer to render and generate the interface element control, and to fill the original data into the interface element control accordingly; a control reuse module, configured to respond to a sliding operation on an interface element control of the interface and determine an interface element control that flows out of the visible area of ​​the screen; move the interface element control that flows out of the visible area of ​​the screen to the position of the last interface element control in the interface that is opposite to the sliding operation direction to serve as a reused control; and obtain corresponding data from the original data based on the position of the reused control in the interface and fill it into the reused control; Among them, the data generation module is used to create a template component based on the original data; the template component includes element information and layout information of the interface element control, the element information includes the display content of the interface element control, and the layout information includes the relative position relationship between the interface element controls; a rendering instruction sequence is generated according to the template component; the rendering instructions in the rendering instruction sequence include the element attribute name of the interface element control; a relationship object sequence is generated according to the original data; and an association relationship between the field name and the element attribute name is created in the relationship object in the relationship object sequence.

8. An electronic device, characterized in that: The method comprises a processor, a memory and a computer program stored in the memory and capable of running on the processor, wherein the computer program implements the steps of the interface processing method according to any one of claims 1 to 6 when executed by the processor.

9. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the interface processing method according to any one of claims 1 to 6 are implemented.

Images