List rendering method and device, electronic equipment and storage medium

Abstract

The embodiment of the invention discloses a list rendering method and device, electronic equipment and a storage medium, and the method comprises the steps: responding to a loading event of a list page, requesting list data through a native network request code, and loading a cross-end component code; through the cross-end component code, a list framework in the list page is rendered; responding to the success of the list data request through the native network request code, and sending a notification message to a native component code; wherein the requested list data is stored in a preset data manager; and obtaining the list data from the preset data manager according to the notification message through the native component code, and rendering a list card to the list framework according to the list data. The list rendering time can be shortened, and the user experience is improved.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and more particularly to a method, apparatus, electronic device, and storage medium for rendering a list. Background Technology

[0002] List components developed using cross-platform development technologies can be adapted to multiple operating systems. However, since cross-platform development technologies typically use interpreted scripting languages, which require translation before each execution, this can lead to excessively long rendering times for complex list components, significantly impacting the user experience. Summary of the Invention

[0003] This disclosure provides a list rendering method, apparatus, electronic device, and storage medium that can reduce list rendering time and improve user experience.

[0004] In a first aspect, embodiments of this disclosure provide a method for rendering a list, including:

[0005] In response to the list page's load event, request list data via native network request code, and load cross-platform component code;

[0006] The cross-platform component code is used to render the list frame in the list page;

[0007] In response to a successful list data request, the native network request code sends a notification message to the native component code; wherein the requested list data is stored in a preset data manager.

[0008] Using the native component code, the list data is retrieved from the preset data manager based on the notification message, and the list cards are rendered onto the list box based on the list data.

[0009] Secondly, embodiments of this disclosure also provide a list rendering apparatus, including:

[0010] The request and load module is used to respond to the load event of the list page, request list data through native network request code, and load cross-platform component code;

[0011] The frame rendering module is used to render the list frame in the list page through the cross-platform component code;

[0012] The notification module is used to send a notification message to the native component code upon successful request of the list data via the native network request code; wherein the requested list data is stored in a preset data manager;

[0013] The card rendering module is used to obtain the list data from the preset data manager according to the notification message through the native component code, and render the list cards to the list frame according to the list data.

[0014] Thirdly, embodiments of this disclosure also provide an electronic device, the electronic device comprising:

[0015] One or more processors;

[0016] Storage device for storing one or more programs.

[0017] When the one or more programs are executed by the one or more processors, the one or more processors implement a list rendering method as described in any embodiment of this disclosure.

[0018] Fourthly, embodiments of this disclosure also provide a storage medium containing computer-executable instructions, which, when executed by a computer processor, are used to perform a list rendering method as described in any of the embodiments of this disclosure.

[0019] The technical solution of this disclosure embodiment, in response to the loading event of the list page, requests list data through native network request code and loads cross-platform component code; renders the list frame in the list page through the cross-platform component code; and sends a notification message to the native component code in response to the successful request of list data through the native network request code; wherein the requested list data is stored in a preset data manager; and the native component code retrieves the list data from the preset data manager according to the notification message, and renders the list cards to the list frame according to the list data.

[0020] Compared to related technologies that use pure cross-platform code to render lists, the technical solution of this disclosure can render lists using both cross-platform code (including cross-platform component code) and native system code (including native network request code and native component code). In this disclosure, list data is not requested after the cross-platform component code has finished loading. Instead, list data is requested in parallel via independent native network requests during the cross-platform component code loading process, reducing the waiting time for data requests and thus reducing list rendering time. Furthermore, after the list data is requested, list cards can be rendered directly through native component code, eliminating the need for communication with or rendering of list cards through cross-platform component code. This saves communication and code translation time, further reducing list rendering time. In summary, the list rendering method provided by this disclosure reduces list rendering time and improves user experience. Attached Figure Description

[0021] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. Throughout the drawings, the same or similar reference numerals denote the same or similar elements. It should be understood that the drawings are schematic, and the originals and elements are not necessarily drawn to scale.

[0022] Figure 1 A flowchart illustrating a list rendering method provided in an embodiment of this disclosure;

[0023] Figure 2 The diagram illustrates the effect of reducing list rendering time in a list rendering method provided in this embodiment of the disclosure.

[0024] Figure 3 A schematic diagram of the architecture of a target list component in a list rendering method provided in an embodiment of this disclosure;

[0025] Figure 4 A schematic block diagram illustrating the bridging mode setting process in a list rendering method provided in this embodiment of the disclosure;

[0026] Figure 5 A schematic block diagram of a network request simulation mechanism in a list rendering method provided in an embodiment of this disclosure;

[0027] Figure 6 A schematic diagram of the structure of a list rendering apparatus provided in an embodiment of this disclosure;

[0028] Figure 7 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this disclosure. Detailed Implementation

[0029] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.

[0030] It should be understood that the steps described in the method embodiments of this disclosure may be performed in different orders and / or in parallel. Furthermore, the method embodiments may include additional steps and / or omit the steps shown. The scope of this disclosure is not limited in this respect.

[0031] The term "comprising" and its variations as used herein are open-ended inclusions, meaning "including but not limited to". The term "based on" means "at least partially based on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". Definitions of other terms will be given in the description below.

[0032] It should be noted that the concepts of "first" and "second" mentioned in this disclosure are used only to distinguish different devices, modules or units, and are not used to limit the order of functions performed by these devices, modules or units or their interdependencies.

[0033] It should be noted that the terms "a" and "a plurality of" used in this disclosure are illustrative rather than restrictive, and those skilled in the art should understand that, unless otherwise expressly indicated in the context, they should be understood as "one or more".

[0034] The names of messages or information exchanged between multiple devices in the embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of such messages or information.

[0035] Figure 1 This is a flowchart illustrating a list rendering method provided in an embodiment of the present disclosure. The embodiments of the present disclosure are applicable to the rendering of lists. This method can be executed by a list rendering device, which can be implemented in software and / or hardware, and can be configured in an electronic device, such as a mobile phone, computer, or other computer device.

[0036] like Figure 1 As shown, the list rendering method provided in this embodiment may include:

[0037] S110: Responding to the list page load event, request list data via native network request code, and load cross-platform component code.

[0038] The list rendering method provided in this disclosure can be applied to application software (APP) that contains list components, and the code structure of the APP can include both cross-platform code and native system code.

[0039] The cross-platform code can include code written in an interpreted scripting language (such as JavaScript) corresponding to the cross-platform technology. Interpreted scripting languages ​​typically require a translator (or interpreter) to translate before execution. In this embodiment, the cross-platform code of the app can include cross-platform component code. This cross-platform component code can be understood as the code for the list page (which can be called front-end code), and can be used to perform simple rendering of the list on the page (such as list frame rendering), as well as calling the native system code that implements the various list functions.

[0040] The native system code can include code written based on the source code used within the operating system to implement various functions. It is understood that the native system code implementing the same function in an app will contain different code statements for different operating systems. Native system code can be executed directly without translation, therefore its performance is generally higher than cross-platform code. In this embodiment, the native system code of the app can include native network request code and native component code. The native network request code implements functions related to list data requests; the native component code implements functions related to rendering list cards in the list component. List cards, also known as list items in the list component, can be understood as views bound to list data.

[0041] In this embodiment of the disclosure, the app's list page can be opened in response to a preset trigger, thereby initiating a loading event for the list page. In response to this loading event, on the one hand, the network request address corresponding to the list page can be obtained, and the corresponding list data can be requested based on the network request address using the network capabilities of the native network request code; on the other hand, the cross-platform component code can be read and loaded using a preset interpreter for interpretation. It can be considered that these two aspects can be executed in parallel, that is, requesting list data through the native network request code and loading the cross-platform component code can be executed concurrently.

[0042] In related technologies, when rendering list components using pure cross-platform code, a network request needs to be sent through the list component's data acquisition module in the cross-platform code to request list data after the cross-platform code has finished loading. However, the list rendering method provided in this disclosure can advance the network request step for list data to be executed synchronously with the loading of the cross-platform component code, thereby reducing the idle waiting time for requesting list data.

[0043] S120. Render the list frame in the list page using cross-platform component code.

[0044] In this embodiment of the disclosure, the list component can be initialized after the cross-platform component code is loaded. For example, the list frame of the corresponding list type can be rendered according to the list type identifier set in the cross-platform component code. The list type may include, for example, a single-column list, a double-column list, etc. The list frame may be composed of row and column boxes, and the row and column boxes can be used to load list cards.

[0045] S130. In response to a successful list data request, the native network request code sends a notification message to the native component code; wherein the requested list data is stored in a preset data manager.

[0046] In this embodiment of the disclosure, the native network request code can asynchronously request list data and, in response to a successful list data request, execute a preset asynchronous callback process. This asynchronous callback process may include, but is not limited to: first storing the list data in a preset data manager using the native network request code; then sending a notification message to the native component code to notify it to request the pre-fetched list data from the preset data manager.

[0047] The data stored in the preset data manager can be cleaned up according to preset cleanup strategies. For example, it can be cleaned up when the storage time of list data expires, which can ensure the reuse rate of the storage space in the preset data manager.

[0048] S140. Using native component code, retrieve list data from the preset data manager based on the notification message, and render the list cards to the list frame based on the list data.

[0049] In this embodiment of the disclosure, the native component code can be built based on existing architectural patterns, such as the Model-View-View Model (MVVM) architectural pattern or the Model-View-Controller (MVC) architectural pattern.

[0050] In this embodiment, the native component code will be described using an MVVM architecture as an example. In this example, the native component code may include a View, a View Controller, a View Model, a Data Source, and a Data Controller. The View and View Controller belong to the view portion, the Data Source and Data Controller belong to the data input portion, and the View Model can be understood as a bridge between the view portion and the data portion. Upon receiving a notification message, the native component code can retrieve list data from a preset data manager through the Data Controller; and it can bind the list data to the View through the View Model to create list cards based on the list data.

[0051] Understandably, in other architectural patterns, list data can be retrieved from a pre-defined data manager through the code of the corresponding data retrieval module in the native component code; and list cards can be created based on the list data through the corresponding list card rendering module. This will not be exhaustive.

[0052] In this embodiment of the disclosure, the relevant position information of the list frame can also be passed to the native component code through the cross-platform component code. Therefore, the native component code can render each list card to its corresponding position in the list frame to achieve the rendering of the list component.

[0053] Figure 2 The image shows an effect diagram illustrating the reduction in list rendering time provided by an embodiment of this disclosure. See also... Figure 2 , Figure 2 Figure (a) is a timing diagram of the related technology rendering list. Figure 2 Figure (b) is a timing diagram of the rendering list of technical solutions based on the embodiments of this disclosure.

[0054] See Figure 2 In Figure (a), when rendering a list component using pure cross-platform code, the cross-platform code needs to be read and loaded first. Then, blank or placeholder components can be rendered, which usually takes milliseconds. While the component is being rendered, a network request for list data can be initiated, and the time to wait for the data to return is relatively long, usually reaching the second level, so there is usually a waiting period. Finally, the list component can be rendered based on the requested data.

[0055] See Figure 2In Figure (b), when rendering a list component based on the technical solution of this embodiment, list data can be requested in parallel via native network request code while reading the cross-platform component code and loading it through a preset interpreter. The subsequent rendering of the list frame via the cross-platform component code can also be performed in parallel with the list data request process. After the native network request code obtains the list data, the list cards can be rendered onto the list frame using the native component code. Since the native component code does not require translation, it is more efficient than rendering the list component using cross-platform code.

[0056] By comparison Figure 2 As shown in the two timing diagrams, the list rendering method provided in this embodiment can advance the network request step for list data to be executed synchronously with the loading of cross-platform component code. Furthermore, column cards can be rendered using native component code to further reduce list rendering time. Figure 2 Compared to the middle (b) diagram Figure 2 The shorter portion in Figure (a) can be considered as the saved rendering time.

[0057] Compared to related technologies that use pure cross-platform code to render lists, the technical solution of this disclosure can render lists using both cross-platform code (including cross-platform component code) and native system code (including native network request code and native component code). In this disclosure, list data is not requested after the cross-platform component code has finished loading. Instead, list data is requested in parallel via independent native network requests during the cross-platform component code loading process, reducing the waiting time for data requests and thus reducing list rendering time. Furthermore, after the list data is requested, list cards can be rendered directly through native component code, eliminating the need for communication with or rendering of list cards through cross-platform component code. This saves communication and code translation time, further reducing list rendering time. In summary, the list rendering method provided by this disclosure reduces list rendering time and improves user experience.

[0058] This embodiment can be combined with various optional schemes in the list rendering methods provided in the above embodiments. The list rendering method provided in this embodiment can bridge native system code in application software to cross-platform code. This enables mutual calls between native system code and cross-platform code, laying the foundation for rendering lists by mixing native system code and cross-platform code, thereby reducing list rendering time.

[0059] In the list rendering method provided in this embodiment, the native network request code and native component code are encapsulated in the target list component. The target list component is obtained by re-encapsulating the basic list component of the native system.

[0060] The list component encapsulated in the native system can be called the basic list component. The target list component can be obtained by modifying some functional modules and adding new functional modules based on the basic list component.

[0061] For example, Figure 3 This is a schematic diagram of the architecture of the target list component in a list rendering method provided in an embodiment of this disclosure. Figure 3 As shown, in the target list component, boxes with dotted fill can represent existing functional modules of the base list component, and thick solid line boxes can represent existing functional modules that have been modified; unfilled boxes can represent functional modules added on the basis of the base list component.

[0062] Figure 3 In this framework, the basic list component can be built based on the MVVM architecture pattern and may include a View, View Controller, View Model, Data Source, and Data Controller. The Data Controller in the basic list component can send network requests to retrieve list data from the network. To enable the Data Controller to retrieve list data from a pre-defined data manager, the data retrieval code of the Data Controller can be modified. Figure 3 The data controller can be represented by a thick solid box. The modified code for the base list component can be called the native component code. The data controller can process the acquired list data into a data class with a predefined structure; this data class can be called the data model.

[0063] See you again Figure 3 Furthermore, native network request code can be added, which may include code for a prefetch module, a network request module, and a callback handling module. The prefetch module can trigger network requests for list data, the network request module can request list data, and the callback handling module can handle logic related to list data storage and callbacks. The callback handling module separates data storage and callback logic from the data request logic, reducing logical coupling and facilitating the expansion of callback logic for other data retrieval tasks. Additionally, code related to a preset data manager can be added to implement list data storage.

[0064] In the list rendering method provided in this embodiment, the native network request code and native component code have a calling relationship with the cross-platform component code. That is, the native network request code and the cross-platform component code can have a mutual calling relationship, and the native component code and the cross-platform component code can have a mutual calling relationship.

[0065] For example, Figure 4 This is a schematic block diagram illustrating the bridging mode setting process in a list rendering method provided in an embodiment of this disclosure. See also... Figure 4 The call relationship can be implemented based on the bridge pattern, and the process of setting up the bridge pattern can include: wrapping the target list component according to the preset wrapping requirements, and registering the wrapped target list component to the cross-platform engine.

[0066] In related technologies, the bridging pattern can be understood as separating the abstract part from its implementation part, allowing them to vary independently. In this embodiment of the disclosure, the abstract part may include cross-platform component code, and the implementation part may include native network request code and native component code, etc., that implement the list-related functions.

[0067] This process involves packaging the target list component according to preset packaging requirements, which may include packaging the target list component into a form required by the cross-platform engine. For example, variables in the target list component may be processed into attributes conforming to cross-platform code; and / or functionalities in the target list component may be processed into methods conforming to cross-platform code calls. The cross-platform engine can then be used to run the cross-platform component code. The packaged target list component can be registered with the cross-platform engine through a registration interface provided by the cross-platform engine.

[0068] By wrapping the target list component, the abstract part of the Bridge pattern can be constructed; by registering the wrapped target list component with the cross-platform engine, the abstract part and the implementation part of the Bridge pattern can be bridged. Thus, the native network request code and the native component code can respectively call each other with the cross-platform component code.

[0069] It is understandable that cross-platform code written in different scripting languages ​​can use corresponding code to implement the bridging pattern. For example, when the cross-platform code is written in JavaScript, the bridging pattern can be implemented through JavaScript Bridge (JSB).

[0070] The list rendering method provided in this embodiment may further include: calling cross-platform component code through native component code based on the update event of the list page; and calling native network request code through cross-platform component code to request updated list data.

[0071] Update events can include, but are not limited to, expand events (load more) and refresh events (refresh). An expand event can be understood as rendering and displaying the undisplayed portion of list data from a list that has already triggered a network request. A refresh event can be understood as rendering and displaying list data that has been re-triggered with a network request. For example, assuming the list page currently displays list cards 1-10, an expand event expects to display list cards 11-20, while a refresh event expects to update list cards 1-10.

[0072] The expand event can be triggered by the user swiping up on the list, clicking the "Load More" button, or automatically at a first preset interval. Similarly, the refresh event can be triggered by the user pulling down on the list, clicking the "Refresh" button, or automatically at a second preset interval. Furthermore, expand and refresh events can also be triggered based on other user actions or methods, which will not be exhaustive here.

[0073] See you again Figure 3 The rendering process of the target list component in response to the update event is basically the same as the rendering process in response to the load event, and the differences can be represented by dashed lines, and the cross-platform component code can be represented by dashed boxes. Figure 3 In the process, update events from the list page can be received through the native component code in the target list component; cross-platform component code can be called through the native component code; and then, the updated list data can be requested through the native network request code called through the cross-platform component code.

[0074] Because the native network request code is separated in the target list component to enable list data pre-fetching while the page is loading, the native component code and the native network request code are decoupled. In this embodiment of the disclosure, when an update event is triggered, the native component code can invoke the native network request to request data through the bridged cross-platform component code.

[0075] Correspondingly, after being invoked, the native network request code can perform the same operations as responding to the load event. It can request updated list data through the native network request code; and in response to the successful request for updated list data, it can send a notification message to the native component code. Furthermore, the native component code can also retrieve the updated list data from the preset data manager based on the notification message, and render the list cards to the list frame according to the updated list data.

[0076] In some further implementations, calling native network request code to request updated list data through cross-platform component code may include: obtaining a first network request address through cross-platform component code, and calling native network request code to request updated list data based on the first network request address; wherein the first network request address is the same as the second network request address used by the native network code when requesting list data.

[0077] See you again Figure 3 The native network request code can respond to both load and update events to request list data. When requesting list data in response to a load event, the cross-platform component code is still loading; in this case, a specified network request address (i.e., the second network request address) can be called to request list data. When requesting list data in response to an update event, the cross-platform component code can call the native network request code to request updated list data. In this case, the first network request address passed by the cross-platform component code must be the same as the second network request address to ensure data requests for the same list page are made. The prefetch module can trigger a network request based on the same network request address.

[0078] Among these optional implementation methods, the data request capabilities of the native network request code can be invoked through multiple mechanisms. Moreover, the network request address used is the same when the same list page invokes the native network request code through different mechanisms, thereby ensuring that the list data of the corresponding list page is requested.

[0079] The technical solution of this disclosure embodiment can bridge native system code in application software to cross-platform code. This enables mutual calls between native system code and cross-platform code, laying the foundation for rendering lists by mixing native system code and cross-platform code, thereby reducing list rendering time. The list rendering method provided in this disclosure embodiment belongs to the same disclosed concept as the list rendering method provided in the above embodiments. Technical details not described in detail in this embodiment can be found in the above embodiments, and the same technical features have the same beneficial effects in this embodiment and the above embodiments.

[0080] The embodiments disclosed herein can be combined with the various optional schemes in the list rendering methods provided in the above embodiments. The list rendering method provided in this embodiment may further include:

[0081] The cross-platform component code passes the page identifier and list identifier of the list page to the native network request code. The native network request code then constructs key data based on the page identifier and list identifier, constructs value data based on the requested list data, and stores the key-value pairs constructed from the key data and value data in the preset data manager.

[0082] In this embodiment, the list data is stored in a preset data manager of the target list component, separate from the cross-platform component code. To ensure data operation consistency between the cross-platform component code and the target list component, in this embodiment, a data identifier for the list data can be constructed through the cross-platform component code and can be passed through to the native network request code.

[0083] See you again Figure 3 The data identifier for list data can consist of a page identifier and a list identifier. The page identifier can be understood as a container identifier (also called a container ID), used to distinguish page instances. For example, when multiple identical list pages are opened, each list page will have a different page identifier. The list identifier can be understood as the identifier of the list component within the container (also called a cache key). For example, a page may include a tab bar, and each tab item in the tab bar may include a list component; these multiple list components can be distinguished by their list identifiers.

[0084] The native network request code, upon receiving the page identifier and list identifier, can construct key data based on these identifiers. For example, it can concatenate the page identifier and list identifier to obtain the key data. After retrieving the list data, the native network request code can construct value data based on it. For example, it can directly use the requested list data (referred to as raw data) as the value data, or it can process the requested list data (e.g., formatting, merging, filtering, etc.) and use the processed list data (referred to as processed data) as the value data. Both raw and processed data can be represented using JSON format. The native network request code can construct key-value (KV) structures based on the key and value data and store the KV structure data in a preset data manager.

[0085] The technical solution of this disclosure specifies the identifier of list data through cross-platform code and passes the identifier to the native system code. This allows the native system code to associate and store the list data based on the identifier and the corresponding request, which is beneficial to the consistency of data display and behavioral interaction between the native system code and the cross-platform code. The list rendering method provided in this disclosure belongs to the same disclosed concept as the list rendering method provided in the above embodiments. Technical details not described in detail in this embodiment can be found in the above embodiments, and the same technical features have the same beneficial effects in this embodiment and the above embodiments.

[0086] The embodiments disclosed herein can be combined with the various optional schemes in the list rendering methods provided in the above embodiments. In the list rendering method provided in this embodiment, obtaining list data from a preset data manager may include: obtaining list data from the preset data manager based on a preset network request simulation mechanism.

[0087] Since the target list component contains modules of the base list component that remain unchanged, and these unchanged modules may involve state variables and their processing logic corresponding to network requests, the technical solution of this disclosure replaces the related technology of requesting data from the network through cross-platform component code with obtaining prefetched data from a preset data manager through native component code. By obtaining list data from the preset data manager based on a preset network request simulation mechanism, the relevant network request state variables can be simulated. These simulated state variables ensure that the unchanged modules in the target list component execute normally when processing the relevant logic of network request state.

[0088] This can be achieved by implementing a network request simulation mechanism based on the functional code provided in the native system. For example, Figure 5 This is a schematic block diagram illustrating the network request simulation mechanism in a list rendering method provided in an embodiment of this disclosure. See also... Figure 5 To implement the aforementioned network request simulation mechanism, a concurrent queue can first be initialized in response to the list page loading event. Then, an asynchronous thread task can be started through the queue to set up dispatch functions for 30 semaphores. These dispatch functions can be called by timer code to decrement the semaphore by 1; they can also be called when the data controller acquires list data to stop semaphore dispatch. Through the dispatch functions, a 30-second countdown can be implemented, stopping either when list data is acquired or when the semaphore reaches 0. Furthermore, when the dispatch function stops the countdown, if the semaphore is not 0, a success module can be called back; if the semaphore is 0, a failure module can be called back. Thus, the simulation of list data request success and failure states can be achieved.

[0089] The technical solution of this disclosure embodiment obtains list data from a preset data manager based on a preset network request simulation mechanism, thereby simulating the process of requesting data from the network through cross-end component code in related technologies. This allows for the simulation of relevant network request state variables, which ensure that unchanged modules in the target list component execute correctly when processing the relevant logic of the network request state. The list rendering method provided in this disclosure embodiment belongs to the same disclosed concept as the list rendering method provided in the above embodiments. Technical details not described in detail in this embodiment can be found in the above embodiments, and the same technical features have the same beneficial effects in this embodiment and the above embodiments.

[0090] This embodiment can be combined with various optional schemes in the list rendering method provided in the above embodiments. The list rendering method provided in this embodiment may further include: splitting the requested list data using native network request code to obtain target data, and storing the target data in a preset data manager.

[0091] See you again Figure 3 The requested list data can be split and processed according to business requirements using the callback handling module in the native network request code to obtain the target data. Figure 3 (This is represented by processed data). Afterwards, value data can be constructed based on the target data, and key-value pairs constructed from key data and value data can be stored in a preset data manager.

[0092] By constructing different splitting methods in different business scenarios, such as different functional pages, the target data required for lists in different business scenarios can be built based on diverse network data. This enables the target component code to have versatility across multiple scenarios, thereby reducing development costs. For example, in a content aggregation page, the multimedia content list can contain not only multimedia content but also other information such as page header and / or page footer information, depending on business requirements. Requests for other information can be merged into the list data request. The data obtained from the request can then be split and stored according to the presentation requirements of the multimedia content list, facilitating rapid rendering of the list page. This avoids multiple requests for network data in different formats; based on a single request and corresponding splitting operations, the target data required for lists in different business scenarios can be constructed.

[0093] The technical solution of this disclosure embodiment, through native network request code, splits the list data into target data according to different business needs after requesting the list data and before storing it in a preset data manager, thereby achieving the versatility of the target list component. After programming the target list component, it can be applied to different business scenarios of application software, reducing development costs to a certain extent. The list rendering method provided in this disclosure embodiment belongs to the same disclosed concept as the list rendering method provided in the above embodiments. Technical details not described in detail in this embodiment can be found in the above embodiments, and the same technical features have the same beneficial effects in this embodiment and the above embodiments.

[0094] This embodiment can be combined with the various optional solutions in the list rendering method provided in the above embodiments. The list rendering method provided in this embodiment further includes at least one of the following: using native network request code to call back the request result of the list data to the cross-platform component code; using native component code to call back the list state of the list page to the cross-platform component code.

[0095] See you again Figure 3 The request result for the list data can be routed back to the cross-platform component code via the callback handling module in the native network request code. This request result can include status variables such as request success or failure, and can also include at least a portion of the list data.

[0096] The cross-platform component code can execute corresponding logic based on status variables such as request success or failure. For example, it can render pop-up windows to display success / failure messages; or it can generate request logs to help calculate success / failure rates. Furthermore, the cross-platform component code can render the page based on at least a portion of the list data received in the callback, such as rendering at least a portion of the list data into the header or footer controls of the list component to enrich the data display methods.

[0097] In addition, the callback handling module can also send the request result of the list data to the native component code, so as to notify the native component code to retrieve the list data from the preset data manager when the request is successful.

[0098] See you again Figure 3 The list state of the list page can be callback to the cross-platform component code through the view controller of the native component code. The list state can include, but is not limited to, update, and edit states, and can include a pre-status and a current status. By callbacking the list state to the cross-platform component code, the corresponding functional code can be called from the cross-platform component code to execute list functions.

[0099] The technical solution of this disclosure, by callback the request result of list data and / or list status to the cross-platform component code, facilitates more diverse list logic processing through the cross-platform component code, thereby improving the user's list usage experience. The list rendering method provided in this disclosure belongs to the same disclosed concept as the list rendering method provided in the above embodiments. Technical details not described in detail in this embodiment can be found in the above embodiments, and the same technical features have the same beneficial effects in this embodiment and the above embodiments.

[0100] Figure 6 This is a schematic diagram of a list rendering apparatus provided in an embodiment of the present disclosure. The list rendering apparatus provided in this embodiment is applicable to the rendering of lists.

[0101] like Figure 6 As shown, the list rendering apparatus provided in this embodiment of the disclosure may include:

[0102] The request and load module 610 is used to respond to the load event of the list page, request list data through native network request code, and load cross-platform component code;

[0103] The frame rendering module 620 is used to render the list frame in the list page through cross-platform component code;

[0104] The notification module 630 is used to send a notification message to the native component code when the request for list data is successful via the native network request code; wherein, the requested list data is stored in a preset data manager;

[0105] The card rendering module 640 is used to retrieve list data from the preset data manager based on notification messages using native component code, and then render list cards to the list frame based on the list data.

[0106] In some optional implementations, native network request code and native component code have a calling relationship with cross-platform component code;

[0107] The rendering device for the list may also include:

[0108] The update module is used to perform the following steps:

[0109] By using native component code, cross-platform component code is invoked based on update events from the list page;

[0110] The cross-platform component code calls the native network request code to request updated list data.

[0111] In some alternative implementations, the call relationship is based on the bridge pattern; the list rendering device may also include:

[0112] The bridging module is used to set the bridging mode based on the following procedure:

[0113] The target list component is packaged according to the preset packaging requirements, and the packaged target list component is registered to the cross-platform engine;

[0114] The native network request code and native component code are encapsulated in the target list component; the cross-platform engine is used to run the cross-platform component code.

[0115] In some alternative implementations, the target list component is obtained by re-encapsulating the basic list component of the native system.

[0116] In some alternative implementations, the update module can be used for:

[0117] The cross-platform component code obtains the first network request address and, based on the first network request address, calls the native network request code to request updated list data.

[0118] The first network request address is the same as the second network request address used when the native network code requests list data.

[0119] In some alternative implementations, the list rendering device may also include:

[0120] The delivery module is used to pass the page identifier and list identifier of the list page to the native network request code through cross-platform component code;

[0121] The storage module is used to construct key data based on page identifiers and list identifiers, construct value data based on the requested list data, and store the key-value pairs constructed from the key data and value data in a preset data manager via native network request code.

[0122] In some alternative implementations, the card rendering module can be used for:

[0123] Based on a preset network request simulation mechanism, list data is obtained from a preset data manager.

[0124] In some alternative implementations, the storage module can also be used for:

[0125] The requested list data is split using native network request code to obtain the target data, and the target data is stored in a preset data manager.

[0126] In some alternative implementations, the list rendering device may also include:

[0127] A callback module is used to perform at least one of the following:

[0128] The results of the list data request are redirected to the cross-platform component code via native network request code.

[0129] By using native component code, the list state of the list page can be redirected to the cross-platform component code.

[0130] The list rendering apparatus provided in this disclosure can execute the list rendering method provided in any embodiment of this disclosure, and has the corresponding functional modules and beneficial effects of the execution method.

[0131] It is worth noting that the various units and modules included in the above-mentioned device are only divided according to functional logic, but are not limited to the above division, as long as the corresponding functions can be realized; in addition, the specific names of each functional unit are only for easy differentiation and are not used to limit the protection scope of the embodiments of this disclosure.

[0132] The following is for reference. Figure 7 It illustrates an electronic device suitable for implementing embodiments of the present disclosure (e.g., Figure 7 The diagram below shows the structure of the terminal device or server 700. The terminal device in this embodiment may include, but is not limited to, mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), and vehicle terminals (e.g., vehicle navigation terminals), as well as fixed terminals such as digital TVs and desktop computers. Figure 7 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of the embodiments disclosed herein.

[0133] like Figure 7 As shown, the electronic device 700 may include a processing unit (e.g., a central processing unit, a graphics processor, etc.) 701, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 702 or a program loaded from a storage device 708 into a random access memory (RAM) 703. The RAM 703 also stores various programs and data required for the operation of the electronic device 700. The processing unit 701, ROM 702, and RAM 703 are interconnected via a bus 704. An input / output (I / O) interface 705 is also connected to the bus 704.

[0134] Typically, the following devices can be connected to I / O interface 705: input devices 706 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 707 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 708 including, for example, magnetic tapes, hard disks, etc.; and communication devices 709. Communication device 709 allows electronic device 700 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 7 An electronic device 700 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively.

[0135] In particular, according to embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this disclosure include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication device 709, or installed from storage device 708, or installed from ROM 702. When the computer program is executed by processing device 701, it performs the functions defined in the rendering methods of the list of embodiments of this disclosure.

[0136] The electronic device provided in this embodiment and the rendering method of the list provided in the above embodiments belong to the same disclosed concept. Technical details not described in detail in this embodiment can be found in the above embodiments, and this embodiment has the same beneficial effects as the above embodiments.

[0137] This disclosure provides a storage medium for computer-executable instructions, which, when executed by a computer processor, can be used to perform the list rendering method provided in the above embodiments.

[0138] It should be noted that the storage medium described in this disclosure can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM) or flash memory (FLASH), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this disclosure, a computer-readable storage medium can be any tangible medium that contains or stores executable instructions that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this disclosure, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable executable instructions. Such transmitted data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. The computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit executable instructions for use by or in connection with an instruction execution system, apparatus, or device. Executable instructions contained on the storage medium can be transmitted using any suitable medium, including but not limited to: wires, optical fibers, RF (radio frequency), etc., or any suitable combination thereof.

[0139] In some implementations, clients and servers can communicate using any currently known or future-developed network protocol such as HTTP (Hypertext Transfer Protocol) and can interconnect with digital data communication (e.g., communication networks) of any form or medium. Examples of communication networks include local area networks (“LANs”), wide area networks (“WANs”), the Internet (e.g., the Internet of Things), and end-to-end networks (e.g., ad hoc end-to-end networks), as well as any currently known or future-developed networks.

[0140] The aforementioned storage medium may be included in the aforementioned electronic device; or it may exist independently and not be assembled into the electronic device.

[0141] The aforementioned storage medium carries one or more executable instructions, which, when executed by the electronic device, cause the electronic device to:

[0142] In response to the list page load event, the system requests list data via native network request code and loads cross-platform component code. The cross-platform component code then renders the list frame on the list page. Upon successful list data request via native network request code, a notification message is sent to the native component code. The requested list data is stored in a preset data manager. Based on the notification message, the native component code retrieves the list data from the preset data manager and renders the list cards onto the list frame.

[0143] Executable instructions for performing the operations of this disclosure can be written in one or more programming languages ​​or a combination thereof, including but not limited to object-oriented programming languages ​​such as Java, Smalltalk, and C++, as well as conventional procedural programming languages ​​such as the "C" language or similar programming languages. The executable instructions can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0144] This disclosure also provides a computer program product, including a computer program that, when executed by a processor, can implement the list rendering method provided in any embodiment of this disclosure.

[0145] In implementing a computer program product, computer program code for performing the operations of this disclosure can be written in one or more programming languages ​​or a combination thereof. Programming languages ​​include object-oriented programming languages ​​such as Java, Smalltalk, and C++, as well as conventional procedural programming languages ​​such as C or similar languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0146] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0147] The units described in the embodiments of this disclosure can be implemented in software or hardware. The names of the units and modules do not, in certain circumstances, constitute a limitation on the unit or module itself.

[0148] The functions described above in this document can be performed, at least in part, by one or more hardware logic components. For example, exemplary types of hardware logic components that can be used, without limitation, include: Field Programmable Gate Array (FPGA), Application Specific Integrated Circuit (ASIC), Application Specific Standard Parts (ASSP), System on Chip (SOC), Complex Programmable Logic Device (CPLD), and so on.

[0149] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0150] According to one or more embodiments of this disclosure, a method for rendering a list is provided, the method comprising:

[0151] In response to the list page's load event, request list data via native network request code, and load cross-platform component code;

[0152] The cross-platform component code is used to render the list frame in the list page;

[0153] In response to a successful list data request, the native network request code sends a notification message to the native component code; wherein the requested list data is stored in a preset data manager.

[0154] Using the native component code, the list data is retrieved from the preset data manager based on the notification message, and the list cards are rendered onto the list frame based on the list data.

[0155] According to one or more embodiments of this disclosure, a method for rendering a list is provided, further comprising:

[0156] In some optional implementations, the native network request code and the native component code have a calling relationship with the cross-platform component code;

[0157] The method further includes:

[0158] The cross-platform component code is invoked based on the update event of the list page using the native component code.

[0159] The cross-platform component code calls the native network request code to request updated list data.

[0160] According to one or more embodiments of this disclosure, a method for rendering a list is provided, further comprising:

[0161] In some optional implementations, the call relationship is based on the bridge pattern, and the process of setting up the bridge pattern includes:

[0162] The target list component is packaged according to the preset packaging requirements, and the packaged target list component is registered to the cross-platform engine;

[0163] The native network request code and the native component code are encapsulated in the target list component; the cross-platform engine is used to run the cross-platform component code.

[0164] According to one or more embodiments of this disclosure, a method for rendering a list is provided, further comprising:

[0165] In some alternative implementations, the target list component is obtained by re-encapsulating the basic list component of the native system.

[0166] According to one or more embodiments of this disclosure, a method for rendering a list is provided, further comprising:

[0167] In some optional implementations, the step of calling the native network request code to request updated list data through the cross-platform component code includes:

[0168] The cross-platform component code obtains the first network request address and, based on the first network request address, calls the native network request code to request updated list data.

[0169] The first network request address is the same as the second network request address used when the native network code requests list data.

[0170] According to one or more embodiments of this disclosure, a method for rendering a list is provided, further comprising:

[0171] Some alternative implementations also include:

[0172] The cross-platform component code passes the page identifier and list identifier of the list page to the native network request code.

[0173] Using the native network request code, key data is constructed based on the page identifier and the list identifier, and value data is constructed based on the requested list data. The key-value pairs constructed from the key data and the value data are then stored in the preset data manager.

[0174] According to one or more embodiments of this disclosure, a method for rendering a list is provided, further comprising:

[0175] In some optional implementations, obtaining the list data from the preset data manager includes:

[0176] The list data is obtained from the preset data manager based on a preset network request simulation mechanism.

[0177] According to one or more embodiments of this disclosure, a method for rendering a list is provided, further comprising:

[0178] Some alternative implementations also include:

[0179] The requested list data is split using the native network request code to obtain the target data, and the target data is stored in the preset data manager.

[0180] According to one or more embodiments of this disclosure, a method for rendering a list is provided, further comprising:

[0181] Some optional implementations also include at least one of the following:

[0182] The request result for the list data is then sent back to the cross-platform component code via the native network request code.

[0183] The native component code is used to redirect the list state of the list page back to the cross-platform component code.

[0184] According to one or more embodiments of the present disclosure, a list rendering apparatus is provided, the apparatus comprising:

[0185] The request and load module is used to respond to the load event of the list page, request list data through native network request code, and load cross-platform component code;

[0186] The frame rendering module is used to render the list frame in the list page through the cross-platform component code;

[0187] The notification module is used to send a notification message to the native component code upon successful request of the list data via the native network request code; wherein the requested list data is stored in a preset data manager;

[0188] The card rendering module is used to obtain the list data from the preset data manager according to the notification message through the native component code, and render the list cards to the list frame according to the list data.

[0189] The above description is merely a preferred embodiment of this disclosure and an explanation of the technical principles employed. Those skilled in the art should understand that the scope of this disclosure is not limited to technical solutions formed by specific combinations of the above-described technical features, but should also cover other technical solutions formed by arbitrary combinations of the above-described technical features or their equivalents without departing from the above-described concept. For example, technical solutions formed by substituting the above features with (but not limited to) technical features disclosed in this disclosure that have similar functions.

[0190] Furthermore, while the operations are described in a specific order, this should not be construed as requiring these operations to be performed in the specific order shown or in a sequential order. In certain environments, multitasking and parallel processing may be advantageous. Similarly, while several specific implementation details are included in the above discussion, these should not be construed as limiting the scope of this disclosure. Certain features described in the context of individual embodiments may also be implemented in combination in a single embodiment. Conversely, various features described in the context of a single embodiment may also be implemented individually or in any suitable sub-combination in multiple embodiments.

[0191] Although the subject matter has been described using language specific to structural features and / or methodological logic, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or actions described above. Rather, the specific features and actions described above are merely illustrative examples of implementing the claims.

Claims

1. A method for rendering a list, characterized in that, include: In response to the list page's load event, request list data via native network request code, and load cross-platform component code; The cross-platform component code is used to render the list frame in the list page; In response to a successful list data request, the native network request code sends a notification message to the native component code; wherein the requested list data is stored in a preset data manager. Using the native component code, the list data is retrieved from the preset data manager based on the notification message, and the list cards are rendered onto the list frame based on the list data.

2. The method according to claim 1, characterized in that, The native network request code and the native component code have a calling relationship with the cross-platform component code; The method further includes: The cross-platform component code is invoked based on the update event of the list page using the native component code. The cross-platform component code calls the native network request code to request updated list data.

3. The method according to claim 2, characterized in that, The call relationship is implemented based on the bridge mode, and the process of setting up the bridge mode includes: The target list component is packaged according to the preset packaging requirements, and the packaged target list component is registered to the cross-platform engine; The native network request code and the native component code are encapsulated in the target list component; the cross-platform engine is used to run the cross-platform component code.

4. The method according to claim 3, characterized in that, The target list component is obtained by re-encapsulating the basic list component of the native system.

5. The method according to claim 2, characterized in that, The step of calling the native network request code to request updated list data through the cross-platform component code includes: The cross-platform component code obtains the first network request address and, based on the first network request address, calls the native network request code to request updated list data. The first network request address is the same as the second network request address used when the native network code requests list data.

6. The method according to claim 1, characterized in that, Also includes: The cross-platform component code passes the page identifier and list identifier of the list page to the native network request code. Using the native network request code, key data is constructed based on the page identifier and the list identifier, and value data is constructed based on the requested list data. The key-value pairs constructed from the key data and the value data are then stored in the preset data manager.

7. The method according to claim 1, characterized in that, The step of obtaining the list data from the preset data manager includes: The list data is obtained from the preset data manager based on a preset network request simulation mechanism.

8. The method according to claim 1, characterized in that, Also includes: The requested list data is split using the native network request code to obtain the target data, and the target data is stored in the preset data manager.

9. The method according to claim 1, characterized in that, It also includes at least one of the following: The request result for the list data is then sent back to the cross-platform component code via the native network request code. The native component code is used to redirect the list state of the list page back to the cross-platform component code.

10. A list rendering apparatus, characterized in that, include: The request and load module is used to respond to the load event of the list page, request list data through native network request code, and load cross-platform component code; The frame rendering module is used to render the list frame in the list page through the cross-platform component code; The notification module is used to send a notification message to the native component code upon successful request of the list data via the native network request code; wherein the requested list data is stored in a preset data manager; The card rendering module is used to obtain the list data from the preset data manager according to the notification message through the native component code, and render the list cards to the list frame according to the list data.

11. An electronic device, characterized in that, The electronic device includes: One or more processors; Storage device for storing one or more programs. When the one or more programs are executed by the one or more processors, the one or more processors implement the list rendering method as described in any one of claims 1-9.

12. A storage medium containing computer-executable instructions, which, when executed by a computer processor, are used to perform a method for rendering a list as described in any one of claims 1-9.

13. A computer program product, characterized in that, The computer program product includes a computer program that, when executed by a processor, implements the list rendering method as described in any one of claims 1-9.

Images