Page loading method and device, electronic equipment and storage medium

Abstract

The invention provides a page loading method and device, electronic equipment and a storage medium. The method comprises the following steps: establishing a mapping relationship between a unique identifier of a UI module and modelClass; after a first array including page JSON data issued by the back-end server based on the page data acquisition request is received, according to the mapping relation and N unique identifiers in the page JSON data, determining modelClass corresponding to the UI modules, the N UI modules being in one-to-one correspondence with the N unique identifiers; creating a model object according to the JSON data corresponding to the UI module and modelClass, and updating the first array based on the model object; and under the condition that the page is refreshed and the UI module is successfully registered, displaying the content corresponding to the UI module at the matched position of the display page according to the position of the model object in the first array. According to the invention, the contents of different UI modules can be flexibly and dynamically combined and displayed.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a page loading method, device, electronic device, and storage medium. Background Art

[0002] System list components include UITableView and UICollectionView. UITableView is a core control for displaying list data in iOS development, supporting high-performance scrolling and rich interactive features. UICollectionView is a powerful user interface component provided for iOS and macOS, used to display data in a grid format, enabling more complex layouts and richer visual effects. Applications typically use system list components to host different UI (User Interface) displays.

[0003] When the system list component displays content, it is necessary to register the UI module with the system list component in advance. When using it, the UI module is obtained through the unique identifier for display.

[0004] As the business grows, the number of UI modules increases. Efficiently scaling and managing these modules without excessively increasing development costs becomes a key challenge. Furthermore, as the business grows, the amount of data provided by the backend to the frontend increases. Dynamically combining and displaying module content in lists based on the data passed by the backend without increasing development complexity is also a pressing issue. Summary of the Invention

[0005] In view of the above problems, embodiments of the present application provide a page loading method, device, electronic device, and storage medium that overcome the above problems or at least partially solve the above problems.

[0006] In a first aspect, an embodiment of the present application provides a page loading method, comprising:

[0007] Establish a mapping relationship between the unique identifier of the user interface UI module and the model class modelClass;

[0008] In response to receiving a first array including page JSON data sent by the backend server based on the page data acquisition request, determining modelClasses corresponding to N UI modules respectively according to the mapping relationship and N unique identifiers carried by the page JSON data, where the N UI modules correspond one-to-one to the N unique identifiers, where N is an integer greater than or equal to 1;

[0009] Creating a model object corresponding to the UI module according to the page JSON data and modelClass corresponding to the UI module, and updating the first array based on the model object corresponding to the UI module;

[0010] When page refresh is triggered and the UI module is successfully registered, the display content corresponding to the UI module is displayed at a matching position on the display page according to the position of the model object corresponding to the UI module in the first array.

[0011] In a second aspect, an embodiment of the present application provides a page loading device, comprising:

[0012] Establish a module for establishing a mapping relationship between the unique identifier of the user interface UI module and the model class modelClass;

[0013] a determination module configured to, in response to receiving a first array including page JSON data sent by the backend server based on the page data acquisition request, determine, based on the mapping relationship and N unique identifiers carried by the page JSON data, modelClasses corresponding to N UI modules, respectively, where the N UI modules correspond one-to-one to the N unique identifiers, and N is an integer greater than or equal to 1;

[0014] a processing module, configured to create a model object corresponding to the UI module according to the page JSON data and modelClass corresponding to the UI module, and update the first array based on the model object corresponding to the UI module;

[0015] The first display module is used to display the display content corresponding to the UI module at a matching position on the display page according to the position of the model object corresponding to the UI module in the first array when a page refresh is triggered and the UI module is successfully registered.

[0016] In a third aspect, an embodiment of the present application provides an electronic device comprising a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein when the computer program is executed by the processor, the steps of the page loading method described in the first aspect above are implemented.

[0017] In a fourth aspect, an embodiment of the present application provides 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 page loading method described in the first aspect above are implemented.

[0018] The technical solution of the embodiment of the present application establishes a mapping relationship between the unique identifier of the UI module and the modelClass; after receiving the first array including the page JSON data sent by the back-end server, the modelClass corresponding to the N UI modules is determined according to the mapping relationship and the N unique identifiers carried by the page JSON data and corresponding to the N UI modules; the model object corresponding to the UI module is created according to the page JSON data and modelClass corresponding to the UI module, and the first array is updated based on the model object corresponding to the UI module; when the page refresh is triggered and the UI module is successfully registered, the display content corresponding to the UI module is displayed at the matching position of the display page according to the position of the model object corresponding to the UI module in the first array, which can realize the flexible dynamic combination and display of the display content corresponding to different UI modules according to the data dynamically sent by the back-end server, and thus can efficiently organize, manage and dynamically combine UI modules, and has the ability of low-cost expansion and flexible configuration, which is suitable for scenarios where modules are added and different content is displayed according to different user needs. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] Figure 1 A schematic diagram showing a page loading method provided in an embodiment of the present application;

[0020] Figure 2 A flowchart showing an overall implementation of the page loading method provided in an embodiment of the present application;

[0021] Figure 3 A schematic diagram showing a page loading device provided in an embodiment of the present application;

[0022] Figure 4 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application is shown. DETAILED DESCRIPTION

[0023] The following will be combined with the drawings in the embodiments of this application to clearly and completely describe the technical solutions in the embodiments of this application. Obviously, the embodiments described are part of the embodiments of this application, not all of them. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0024] It should be understood that references throughout this specification to "one embodiment" or "an embodiment" mean that a particular feature, structure, or characteristic associated with the embodiment is included in at least one embodiment of the present application. Therefore, the appearance of "in one embodiment" or "in an embodiment" throughout this specification does not necessarily refer to the same embodiment. Furthermore, these particular features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. The term "a plurality" in the embodiments of the present application may include two or more.

[0025] In the various embodiments of the present application, it should be understood that the size of the serial numbers of the following processes does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0026] The present application embodiment provides a page loading method, which is applied to a terminal device, such as Figure 1 As shown, the method includes the following steps:

[0027] Step 101: Establish a mapping relationship between the unique identifier of the UI module and the modelClass.

[0028] In this embodiment, the mapping relationship between the system list component and the UI module is decoupled, improving the module's scalability and maintainability. For each UI module, a corresponding unique identifier is set to form a mapping relationship between the UI module and the unique identifier. Furthermore, a mapping relationship is established between the UI module's unique identifier and the model class modelClass. modelClass can be thought of as a data container, used to store data that the application needs to display or process.

[0029] In this embodiment, a base class (e.g., WBHSHDListBaseModel) is created to record the unique identifier of the UI module; a factory class (e.g., WBHSHDCellFactory) is created that maintains a dictionary to store the mapping between the unique identifier and the modelClass. Data sent by the backend server can obtain the corresponding modelClass through this mapping to carry the data.

[0030] The mapping relationship is established when the application is started, for example. When the application is started, the load method is called to initialize the mapping module and establish a mapping relationship between the unique identifier of the UI module and the modelClass.

[0031] Step 102: In response to receiving the first array including page JSON data sent by the back-end server based on the page data acquisition request, determine the modelClass corresponding to the N UI modules respectively according to the mapping relationship and the N unique identifiers carried by the page JSON data. The N UI modules correspond one-to-one to the N unique identifiers, and N is an integer greater than or equal to 1.

[0032] After initiating a page data acquisition request to the backend server, a first array including page JSON data is received from the backend server based on the page data acquisition request. The received page JSON data carries N unique identifiers corresponding to the N UI modules. Based on the N unique identifiers carried by the page JSON data and the pre-established mapping relationship between the unique identifier and the modelClass, the modelClass corresponding to the N UI modules (N unique identifiers) and used to carry the data can be determined. The N modelClasses corresponding to the N UI modules are used to carry the page JSON data provided by the backend server based on the page data acquisition request.

[0033] Step 103: Create a model object corresponding to the UI module according to the page JSON data and modelClass corresponding to the UI module, and update the first array based on the model object corresponding to the UI module.

[0034] The N modelClasses corresponding to the N UI modules carry the page JSON data provided by the backend server, and each UI module corresponds to at least a portion of the page JSON data. For each of the N UI modules, the page JSON data corresponding to the current UI module is determined within the page JSON data provided by the backend server. And because the modelClass corresponding to each UI module has been determined, for each UI module, a model object corresponding to the UI module can be created based on the page JSON data and modelClass corresponding to the UI module. The model object corresponding to the UI module includes a unique identifier and the data content to be displayed.

[0035] After creating the model objects corresponding to the UI modules, the first array is updated based on the model objects corresponding to each UI module, and the page JSON data in the first array is replaced with N model objects corresponding to N UI modules, so as to update the content in the first array to the model object format.

[0036] Step 104: When page refresh is triggered and the UI module is successfully registered, display content corresponding to the UI module is displayed at a matching position on the display page according to the position of the model object corresponding to the UI module in the first array.

[0037] After the first array is updated based on the model object, a page refresh is triggered to display the display content corresponding to the N UI modules. After triggering the page refresh, it is necessary to determine whether the UI module is successfully registered. If it is determined that the UI module is successfully registered, the adapted content is presented on the display page based on the model object corresponding to the UI module.

[0038] Since the page JSON data provided by the backend server corresponds to N UI modules, the N model objects are adapted to the page JSON data. When presenting visual information on the display page, the position of the display content corresponding to the UI module on the display page can be determined based on the position of the model object in the first array, ensuring that the display content corresponding to each UI module is displayed at the adapted position. In other words, when displaying content on the display page, a matching position is determined on the display page based on the position of the model object corresponding to the UI module in the first array, and the display content corresponding to the UI module is displayed at that position, thereby visually presenting the page data corresponding to the UI module at the appropriate position on the display page.

[0039] The above implementation scheme of the present application establishes a mapping relationship between the unique identifier of the UI module and the modelClass; after receiving the first array including the page JSON data sent by the back-end server, the modelClass corresponding to the N UI modules is determined according to the mapping relationship and the N unique identifiers carried by the page JSON data corresponding to the N UI modules; the model object corresponding to the UI module is created according to the page JSON data and modelClass corresponding to the UI module, and the first array is updated based on the model object corresponding to the UI module; when the page refresh is triggered and the UI module is successfully registered, the display content corresponding to the UI module is displayed at the matching position of the display page according to the position of the model object corresponding to the UI module in the first array, which can realize the flexible dynamic combination and display of the display content corresponding to different UI modules according to the data dynamically sent by the back-end server, and thus can efficiently organize, manage and dynamically combine UI modules, with the ability of low-cost expansion and flexible configuration, and is suitable for scenarios where modules are added and different content is displayed according to different user needs.

[0040] The following describes in detail the process of creating a model object and updating the first array based on the model object. The page JSON data provided by the backend server includes N groups of JSON data that match N unique identifiers. When creating the model object corresponding to the UI module based on the page JSON data and modelClass corresponding to the UI module, it includes:

[0041] For each UI module in the N UI modules, based on the unique identifier corresponding to the UI module, determine a group of JSON data corresponding to the UI module from the N groups of JSON data included in the page JSON data;

[0042] Combine a set of JSON data corresponding to the UI module and the modelClass corresponding to the UI module to create a model object corresponding to the UI module.

[0043] The page JSON data provided by the backend server includes N groups of JSON data, each group of JSON data has a unique identifier. The N groups of JSON data are adapted to the N UI modules based on the unique identifiers. When creating the model object corresponding to each UI module, for each of the N UI modules, the group of JSON data corresponding to the UI module is determined from the N groups of JSON data based on the UI module's unique identifier. The group of JSON data corresponding to the UI module is then combined with the modelClass corresponding to the UI module to create a model object corresponding to the UI module, which includes the unique identifier and the data content to be displayed.

[0044] After creating model objects corresponding to N UI modules respectively, when updating the first array based on the model objects corresponding to the UI modules, N groups of JSON data in the first array are replaced based on the N model objects corresponding to the N UI modules to update the first array.

[0045] The page JSON data in the first array includes N groups of JSON data that are adapted to N UI modules one by one. After creating a corresponding model object for the UI module based on its corresponding modelClass and a group of JSON data, the group of JSON data corresponding to the UI module in the first array is replaced with the model object corresponding to the UI module. The group of JSON data corresponding to the UI module is associated with the model object corresponding to the UI module based on a unique identifier, and the model object can be guaranteed to replace the adapted group of JSON data based on the unique identifier to ensure the accuracy of the replacement. And after the first array is updated, the position of each model object in the first array is the same as the position of the adapted group of JSON data in the first array. By replacing the N groups of JSON data in the first array with the adapted model object based on the unique identifier, the content in the first array can be updated to the form of a model object, so that when the page is refreshed subsequently, the model object can be used to trigger the display of the adapted content at the corresponding position of the page.

[0046] In the above implementation scheme, the modelClass and JSON data corresponding to the UI module are combined based on the unique identifier to create a model object, and the JSON data in the first array is replaced with the adapted model object based on the unique identifier. When the page is refreshed, the model object can be used to display the adapted display content at the corresponding position of the display page.

[0047] The following describes the process of displaying the content of a UI module on a display page when the UI module is successfully registered. When a page refresh is triggered and the UI module is successfully registered, the process of displaying the content of the UI module at a matching position on the display page based on the position of the model object corresponding to the UI module in the first array includes:

[0048] Trigger a page refresh after updating the first array;

[0049] Determine the corresponding model object in the first array according to the position index of the UI module in the first array, where the position index of the UI module in the first array is determined based on the position of the model object corresponding to the UI module in the first array;

[0050] In response to the successful registration of the UI module, a target position is determined on the display page according to the position index of the UI module in the first array, and display content corresponding to the UI module is displayed at the target position according to the model object corresponding to the UI module.

[0051] After updating the first array based on the model object corresponding to the UI module, the page is refreshed to trigger the display of the display content corresponding to the UI module on the display page. Before displaying the display content corresponding to the UI module, it is necessary to determine the corresponding model object in the first array for each UI module based on the position index of the UI module in the first array, and it is necessary to identify whether the UI module is successfully registered. If it is determined that the UI module is successfully registered, the target position is determined on the display page based on the position index of the UI module in the first array, and the display content corresponding to the UI module is triggered to be displayed at the target position based on the model object corresponding to the UI module.

[0052] The position index of the UI module in the first array is the position index of the model object corresponding to the UI module in the first array. The position of the model object corresponding to the UI module in the first array determines the display position of the corresponding display content of the UI module on the display page. If the UI module is successfully registered, the display content corresponding to the UI module is displayed at the target position on the display page.

[0053] Among them, when identifying whether the UI module is successfully registered, it includes: based on the unique identifier corresponding to the UI module, checking whether the UI module has been successfully registered in the corresponding relationship between the unique identifier and the registration status of the UI module; in response to the UI module being successfully registered, triggering the display content corresponding to the UI module to be displayed on the display page; in response to the UI module not being registered, dynamically registering the UI module and updating the registration status of the UI module recorded in the corresponding relationship.

[0054] In this embodiment, a registration factory class (such as WBHSHDetailCellRegister) is created. The factory maintains a dictionary inside to save whether each UI module has been registered, that is, to record the registration status of each UI module, and the dictionary records the correspondence between the unique identifier and the registration status of the UI module. When identifying whether the UI module is successfully registered, based on the unique identifier corresponding to the UI module, the registration status of the UI module is checked in the correspondence to identify whether the UI module has been successfully registered. If the UI module has been successfully registered, the corresponding content can be displayed at the target location of the display page; if the UI module is not registered, it is dynamically registered, and the registration status of the UI module is updated after registration to avoid repeated registration. By using a factory class to manage the registration status of each UI module, it is ensured that the registration operation of each UI module will not be repeated.

[0055] In the above implementation, when a page refresh is triggered, the corresponding model object is determined based on the position index of the UI module in the first array. When the UI module has been successfully registered, the target position on the display page is determined based on the position of the model object, and the display content corresponding to the UI module is displayed at the target position based on the data in the model object, thereby ensuring that the corresponding content is displayed in the appropriate position. Using an on-demand registration mechanism for dynamic registration of UI modules can reduce the amount of code required for one-time registration and reduce execution time. Furthermore, detecting the registration status of the UI module based on a unique identifier can avoid duplicate registration of the UI module.

[0056] In an optional embodiment of the present application, the method further includes:

[0057] Collect historical behavior data of users on the user interaction interface and report it to the backend server, which analyzes user behavior habits based on the historical behavior data;

[0058] After sending a page data acquisition request to the backend server, a first array sent by the backend server is received, wherein the arrangement of N groups of JSON data corresponding to the page JSON data included in the first array is adapted to the user's behavior habits;

[0059] Among them, N groups of JSON data are matched with N UI modules, and the display contents corresponding to the N UI modules are arranged on the display page based on user behavior habits.

[0060] Collect historical behavior data corresponding to the user's operations performed on the user interaction interface, and report the collected historical behavior data to the back-end server, so that the back-end server can analyze the user's behavior habits based on the received historical behavior data of the user.

[0061] After sending a page data acquisition request to the back-end server, the back-end server can layout the page JSON data that matches the page data acquisition request based on the analyzed user behavior habits, that is, arrange the N groups of JSON data corresponding to the page JSON data based on user behavior habits, and the N groups of JSON data correspond one-to-one to N UI modules based on the unique identifier.

[0062] After the back-end server arranges the N groups of JSON data corresponding to the page JSON data based on the user's behavior habits, it feeds back a first array including the arranged N groups of JSON data. That is, the arrangement of the N groups of JSON data included in the first array provided by the back-end server conforms to the user's behavior habits. When the front-end triggers the display page to display the display content corresponding to the UI module, the adaptation position can be determined on the display page based on the position of the model object corresponding to the UI module in the first array, and the corresponding display content can be displayed at the position based on the data in the model object, so as to display the display content corresponding to each UI module at the appropriate position on the display page based on the user's behavior habits, so that the display content corresponding to the N UI modules is arranged on the display page based on the user's behavior habits, thereby realizing the provision of personalized display pages based on user needs.

[0063] The above implementation scheme collects the user's historical behavior data and reports it to the back-end server. The back-end server analyzes the user's behavior habits and provides N groups of JSON data that are arranged in accordance with the user's behavior habits. The display content corresponding to each UI module can be displayed at an appropriate position on the display page based on the user's behavior habits, so as to personalize the display page and ensure the user's page browsing and usage experience.

[0064] In another optional embodiment of the present application, after the display page displays the display content corresponding to the UI module, the method further includes:

[0065] Collect real-time user behavior data on the displayed page and report it to the backend server;

[0066] Receive a second array sent by the backend server, the second array including JSON data corresponding to the newly added UI module determined based on the real-time behavior data;

[0067] After creating a model object corresponding to the newly added UI module, inserting the model object corresponding to the newly added UI module into a preset position of the first array, where the preset position is determined based on the real-time behavior data;

[0068] According to the position of the model object corresponding to the newly added UI module in the first array, the display content corresponding to the newly added UI module is displayed at the matching position of the display page.

[0069] After the display page displays the content corresponding to the UI module, real-time user behavior data on the display page is collected based on the user's actions on the display page. The collected real-time behavior data is reported to the backend server. The backend server determines JSON data related to the user that is not included in the first array based on the real-time behavior data, and sends a second array to the frontend. The second array includes JSON data corresponding to the newly added UI module determined based on the real-time behavior data. The newly added UI module here is a module that is newly added compared to the N UI modules previously mentioned.

[0070] After receiving the second array from the backend server, the frontend creates a model object corresponding to the newly added UI module based on the JSON data corresponding to the newly added UI module and the modelClass. The JSON data corresponding to the newly added UI module carries the unique identifier of the newly added UI module. Based on the unique identifier, the corresponding modelClass can be determined. The corresponding model object is then created based on the combination of the JSON data and the modelClass.

[0071] After creating the model object corresponding to the newly added UI module, the model object corresponding to the newly added UI module is inserted into the preset position of the first array. The preset position is determined based on the real-time behavior data. If the real-time behavior data is the behavior data of the touch UI module 1, the position of the model object corresponding to the newly added UI module in the first array is adjacent to the position of the model object corresponding to UI module 1 in the first array. For example, in the first array, the model object corresponding to the newly added UI module is located behind the model object corresponding to UI module 1.

[0072] After the model object corresponding to the newly added UI module is inserted into the first array, the adaptation position is determined on the display page according to the position of the model object corresponding to the newly added UI module in the first array, and the display content corresponding to the newly added UI module is displayed at this position.

[0073] It should be noted that before displaying the display content corresponding to the newly added UI module, it is necessary to identify the registration status of the UI module. When it is determined that the newly added UI module has been dynamically registered, the content display is triggered based on the successful registration status of the UI module.

[0074] For example, a display page might include a product and service control. Clicking this control triggers a phone call. Based on the real-time behavioral data from clicking this control, the backend server can deliver JSON data matching the product and service details. After the user cancels the pop-up call window or completes the call based on the pop-up window, the user returns to the display page, where the product and service details are inserted at the appropriate location for the user to easily understand.

[0075] The above implementation scheme collects the real-time behavior data of users on the display page and reports it to the back-end server. The back-end server then sends a second array of JSON data corresponding to the newly added UI module based on the real-time behavior data. After creating a model object corresponding to the newly added UI module and inserting it into the appropriate position of the first array, the display content corresponding to the newly added UI module is displayed at the corresponding position of the display page based on the model object. The content of interest to the user can be dynamically added to the display page based on the user behavior to optimize the user's page usage experience.

[0076] The following describes the page loading method provided by the embodiment of the present application through an overall implementation process. Figure 2 As shown, the following steps are included:

[0077] Step 201: Establish a mapping relationship between the unique identifier of the UI module and the modelClass.

[0078] Step 202: Receive the first array sent by the back-end server based on the page data acquisition request. The arrangement of the N groups of JSON data corresponding to the page JSON data included in the first array conforms to the user's behavior habits. The page JSON data carries N unique identifiers, and the N UI modules correspond one-to-one with the N groups of JSON data based on the N unique identifiers.

[0079] Step 203: Determine the modelClasses corresponding to the N UI modules respectively according to the mapping relationship and the N unique identifiers.

[0080] Step 204: For each UI module, based on the unique identifier of the UI module, determine a group of JSON data corresponding to the UI module in the N groups of JSON data, and combine the group of JSON data corresponding to the UI module with modelClass to create a model object.

[0081] Step 205: Replace the N groups of JSON data in the first array based on the N model objects corresponding to the N UI modules to update the first array.

[0082] Step 206: Trigger page refresh after updating the first array.

[0083] Step 207: Determine the corresponding model object in the first array according to the position index of the UI module in the first array.

[0084] Step 208 : Check whether the UI module has been successfully registered. If not, execute step 209 ; if already registered, execute step 210 .

[0085] Step 209 : Dynamically register the UI module and update the registration status of the UI module. After step 209 , execute step 210 .

[0086] Step 210: Determine a target position on the display page according to the position index of the UI module in the first array, and display corresponding display content at the target position according to the model object corresponding to the UI module.

[0087] Step 211: collect the real-time behavior data of the user on the display page and report it to the backend server, receive the second array sent by the backend server, and add new display content to the display page according to the JSON data corresponding to the newly added UI module included in the second array.

[0088] In the above implementation process, by establishing a mapping relationship between the unique identifier and the modelClass, flexible module combination and dynamic display are ensured. The backend only needs to send the unique identifier and page data, and the frontend can flexibly combine and display the corresponding content through the mapping relationship and registration mechanism; and the on-demand registration mechanism is used for dynamic registration of UI modules, ensuring efficient management of modules and avoiding duplicate registration.

[0089] The embodiment of the present application provides a page loading device, such as Figure 3 As shown, the device includes:

[0090] Establishing module 301, used to establish a mapping relationship between the unique identifier of the UI module and the model class modelClass;

[0091] Determining module 302 is configured to, in response to receiving a first array including page JSON data sent by the backend server based on the page data acquisition request, determine, based on the mapping relationship and N unique identifiers carried by the page JSON data, modelClasses corresponding to N UI modules, respectively, where the N UI modules correspond one-to-one to the N unique identifiers, and N is an integer greater than or equal to 1;

[0092] The processing module 303 is configured to create a model object corresponding to the UI module according to the page JSON data and modelClass corresponding to the UI module, and update the first array based on the model object corresponding to the UI module;

[0093] The first display module 304 is used to display the display content corresponding to the UI module at a matching position on the display page according to the position of the model object corresponding to the UI module in the first array when a page refresh is triggered and the UI module is successfully registered.

[0094] Optionally, the page JSON data includes N groups of JSON data matching the N unique identifiers;

[0095] The processing module includes:

[0096] A first determining submodule is configured to determine, for each UI module in the N UI modules, based on a unique identifier corresponding to the UI module, a group of JSON data corresponding to the UI module from the N groups of JSON data included in the page JSON data;

[0097] The combination creation submodule is used to combine a set of JSON data corresponding to the UI module and the modelClass corresponding to the UI module to create a model object corresponding to the UI module.

[0098] Optionally, the processing module is further configured to:

[0099] After creating model objects corresponding to the N UI modules respectively, the N groups of JSON data in the first array are replaced based on the N model objects corresponding to the N UI modules to update the first array.

[0100] Optionally, the first display module includes:

[0101] A trigger submodule, configured to trigger a page refresh after the first array is updated;

[0102] a second determining submodule, configured to determine a corresponding model object in the first array according to a position index of the UI module in the first array, wherein the position index of the UI module in the first array is determined based on a position of the model object corresponding to the UI module in the first array;

[0103] A processing submodule is used to determine a target position on the display page according to the position index of the UI module in the first array in response to the successful registration of the UI module, and to display the display content corresponding to the UI module at the target position according to the model object corresponding to the UI module.

[0104] Optionally, the device further comprises:

[0105] A checking module, configured to check whether the UI module has been successfully registered based on the unique identifier corresponding to the UI module and in recording the correspondence between the unique identifier and the registration status of the UI module;

[0106] A triggering module, configured to trigger displaying the display content corresponding to the UI module on the display page in response to the UI module being successfully registered;

[0107] A registration update module is configured to dynamically register the UI module and update the registration status of the UI module recorded in the corresponding relationship in response to the UI module not being registered.

[0108] Optionally, the device further comprises:

[0109] A first collection and reporting module is used to collect historical behavior data of users on the user interaction interface and report it to the back-end server, and the back-end server analyzes user behavior habits based on the historical behavior data;

[0110] A first receiving module is configured to receive the first array sent by the backend server after sending the page data acquisition request to the backend server, wherein the arrangement of the N groups of JSON data corresponding to the page JSON data included in the first array is adapted to the user's behavior habits;

[0111] The N groups of JSON data are matched with the N UI modules, and the display contents corresponding to the N UI modules are arranged on the display page based on the user behavior habits.

[0112] Optionally, the device further comprises:

[0113] A second collection and reporting module is used to collect real-time behavior data of users on the display page and report it to the back-end server;

[0114] A second receiving module is configured to receive a second array sent by the backend server, wherein the second array includes JSON data corresponding to the newly added UI module determined based on the real-time behavior data;

[0115] an insertion module, configured to, after creating a model object corresponding to the newly added UI module, insert the model object corresponding to the newly added UI module into a preset position of the first array, where the preset position is determined based on the real-time behavior data;

[0116] The second display module is used to display the display content corresponding to the newly added UI module at a matching position on the display page according to the position of the model object corresponding to the newly added UI module in the first array.

[0117] 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.

[0118] An embodiment of the present application also provides an electronic device, including: a processor, a memory, and a computer program stored in the memory and runnable on the processor. When the computer program is executed by the processor, the various processes of the above-mentioned page loading method embodiment are implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0119] For example, Figure 4 FIG. 1 shows a schematic diagram of the physical structure of an electronic device. Figure 4 As shown, the electronic device may include: a processor 410, a communication interface 420, a memory 430, and a communication bus 440, wherein the processor 410, the communication interface 420, and the memory 430 communicate with each other via the communication bus 440. The processor 410 can call the logic instructions in the memory 430, and the processor 410 is used to execute the various processes of the page loading method of the embodiment of the present application, which will not be elaborated here one by one.

[0120] In addition, the logic instructions in the above-mentioned memory 430 can be implemented in the form of a software functional unit and can be stored in a computer-readable storage medium when sold or used as an independent product. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, or the part of the technical solution can be embodied in the form of a software product, which is stored in a storage medium and includes a number of instructions for enabling a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present application.

[0121] The present application also provides a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the various processes of the above-mentioned page loading method embodiment are implemented, and the same technical effects are achieved. To avoid repetition, the details are not described here. The computer-readable storage medium is, for example, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0122] It should be noted that, in this document, the terms "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, article, or apparatus comprising 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 apparatus. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of other identical elements in the process, method, article, or apparatus comprising the element.

[0123] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus the necessary general hardware platform, and of course can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for enabling a terminal (which can be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in each embodiment of the present application.

[0124] The embodiments of the present application are described above in conjunction with the accompanying drawings, but the present application is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the guidance of this application, ordinary technicians in this field can also make many forms without departing from the purpose of this application and the scope of protection of the claims, all of which are within the protection of this application.

[0125] Those skilled in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed in the embodiments of this application can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0126] Those skilled in the art will clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0127] In the embodiments provided in this application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are merely schematic. For example, the division of the units is merely a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0128] The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of these units may be selected to achieve the purpose of this embodiment according to actual needs.

[0129] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0130] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for enabling a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes various media that can store program codes, such as a USB flash drive, a mobile hard disk, a ROM, a RAM, a magnetic disk, or an optical disk.

[0131] The above description is merely a specific embodiment of the present application, but the scope of protection of the present application is not limited thereto. Any changes or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in this application should be included in the scope of protection of the present application. Therefore, the scope of protection of the present application should be based on the scope of protection of the claims.

Claims

1. A page loading method, characterized in that: include: Establish a mapping relationship between the unique identifier of the user interface UI module and the model class modelClass; In response to receiving a first array including page JSON data sent by the backend server based on the page data acquisition request, determining modelClasses corresponding to N UI modules respectively according to the mapping relationship and N unique identifiers carried by the page JSON data, where the N UI modules correspond one-to-one to the N unique identifiers, where N is an integer greater than or equal to 1; Creating a model object corresponding to the UI module according to the page JSON data and modelClass corresponding to the UI module, and updating the first array based on the model object corresponding to the UI module; When page refresh is triggered and the UI module is successfully registered, the display content corresponding to the UI module is displayed at a matching position on the display page according to the position of the model object corresponding to the UI module in the first array.

2. The page loading method according to claim 1, characterized in that: The page JSON data includes N groups of JSON data matching the N unique identifiers; The step of creating a model object corresponding to the UI module according to the page JSON data and modelClass corresponding to the UI module includes: For each UI module in the N UI modules, based on a unique identifier corresponding to the UI module, determining a group of JSON data corresponding to the UI module from the N groups of JSON data included in the page JSON data; Combine a set of JSON data corresponding to the UI module and the modelClass corresponding to the UI module to create a model object corresponding to the UI module.

3. The page loading method according to claim 2, characterized in that: The updating of the first array based on the model object corresponding to the UI module includes: After creating model objects corresponding to the N UI modules respectively, the N groups of JSON data in the first array are replaced based on the N model objects corresponding to the N UI modules to update the first array.

4. The page loading method according to claim 1, wherein: When a page refresh is triggered and the UI module is successfully registered, displaying the display content corresponding to the UI module at a matching position on the display page according to the position of the model object corresponding to the UI module in the first array includes: Triggering a page refresh after updating the first array; Determining a corresponding model object in the first array according to a position index of the UI module in the first array, where the position index of the UI module in the first array is determined based on a position of the model object corresponding to the UI module in the first array; In response to the successful registration of the UI module, a target position is determined on the display page according to the position index of the UI module in the first array, and display content corresponding to the UI module is displayed at the target position according to the model object corresponding to the UI module.

5. The page loading method according to claim 4, characterized in that: Also includes: Based on the unique identifier corresponding to the UI module, checking whether the UI module has been successfully registered in recording the correspondence between the unique identifier and the UI module registration status; In response to the UI module being successfully registered, triggering display of display content corresponding to the UI module on the display page; In response to the UI module not being registered, dynamically registering the UI module and updating the registration status of the UI module recorded in the corresponding relationship.

6. The page loading method according to claim 1, characterized in that: The method further comprises: Collecting historical behavior data of users on the user interaction interface and reporting it to the back-end server, and the back-end server analyzing user behavior habits based on the historical behavior data; After sending the page data acquisition request to the backend server, receiving the first array sent by the backend server, where the arrangement of N groups of JSON data corresponding to the page JSON data included in the first array is adapted to the user's behavior habits; The N groups of JSON data are matched with the N UI modules, and the display contents corresponding to the N UI modules are arranged on the display page based on the user behavior habits.

7. The page loading method according to claim 1, characterized in that: After displaying the display content corresponding to the UI module on the display page, the method further includes: Collecting real-time behavior data of users on the display page and reporting it to the back-end server; Receive a second array sent by the backend server, where the second array includes JSON data corresponding to a newly added UI module determined based on the real-time behavior data; After creating a model object corresponding to the newly added UI module, inserting the model object corresponding to the newly added UI module into a preset position of the first array, where the preset position is determined based on the real-time behavior data; According to the position of the model object corresponding to the newly added UI module in the first array, the display content corresponding to the newly added UI module is displayed at the matching position of the display page.

8. A page loading device, characterized in that: include: Establish a module for establishing a mapping relationship between the unique identifier of the user interface UI module and the model class modelClass; a determination module configured to, in response to receiving a first array including page JSON data sent by the backend server based on the page data acquisition request, determine, based on the mapping relationship and N unique identifiers carried by the page JSON data, modelClasses corresponding to N UI modules, respectively, where the N UI modules correspond one-to-one to the N unique identifiers, and N is an integer greater than or equal to 1; a processing module, configured to create a model object corresponding to the UI module according to the page JSON data and modelClass corresponding to the UI module, and update the first array based on the model object corresponding to the UI module; The first display module is used to display the display content corresponding to the UI module at a matching position on the display page according to the position of the model object corresponding to the UI module in the first array when a page refresh is triggered and the UI module is successfully registered.

9. An electronic device, characterized in that: The method comprises a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the computer program implements the steps of the page loading method according to any one of claims 1 to 7 when executed by the processor.

10. 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 page loading method according to any one of claims 1 to 7 are implemented.

Images