Page loading method and device, electronic equipment and storage medium

Abstract

The application provides a page loading method and device, electronic equipment and storage medium, the method comprises the following steps: establishing the mapping relationship between the unique identifier of the UI module and the modelClass; after receiving the first array including the page JSON data issued by the backend server based on the page data acquisition request, determining the modelClass corresponding to the UI module according to the mapping relationship and the N unique identifiers in the page JSON data, the N UI modules correspond to the N unique identifiers one by one; creating a model object according to the JSON data and the modelClass corresponding to the UI module, updating the first array based on the model object; in the case of page refreshing and successful registration of the UI module, the content corresponding to the UI module is displayed at the matching position of the display page according to the position of the model object in the first array. The application can flexibly dynamically combine and display the content of different UI modules.

Description

Technical Field

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

[0002] System list components include, for example, the system's UITableView and UICollectionView components. The UITableView component is the core control in iOS development for displaying list data, supporting high-performance scrolling and rich interactive features. The UICollectionView component 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, the UI module needs to be registered with the system list component in advance. When it is used, the UI module is obtained through a unique identifier for display.

[0004] As business grows, the number of UI modules increases. How to efficiently expand and manage these modules without significantly increasing development costs has become a key issue. Furthermore, as business grows, the amount of data provided from the backend to the frontend also increases. How to dynamically combine and display the module content in the list based on the different data transmitted from the backend without increasing development complexity is another urgent problem to solve. Summary of the Invention

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

[0006] In a first aspect, embodiments of this application provide a page loading method, including:

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

[0008] In response to receiving a first array of page JSON data sent by the backend server based on a page data retrieval request, the modelClass corresponding to each of the N UI modules is determined according to the mapping relationship and the N unique identifiers carried in the page JSON data. The N UI modules correspond one-to-one with the N unique identifiers, where N is an integer greater than or equal to 1.

[0009] Create a model object corresponding to the UI module based on 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;

[0010] Upon triggering a page refresh and upon successful registration of the UI module, the display content corresponding to the UI module is displayed at the matching position on the display page, based on the position of the model object corresponding to the UI module in the first array.

[0011] Secondly, embodiments of this application provide a page loading device, including:

[0012] Create a module to establish a mapping relationship between the unique identifier of the user interface (UI) module and the model class (modelClass);

[0013] The determination module is used to respond to the first array of page JSON data sent by the backend server based on the page data acquisition request, and to determine the modelClass corresponding to the N UI modules according to the mapping relationship and the N unique identifiers carried by the page JSON data. The N UI modules correspond one-to-one with the N unique identifiers, and N is an integer greater than or equal to 1.

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

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

[0016] Thirdly, embodiments of this application provide an electronic device, including a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the computer program, when executed by the processor, implements the steps of the page loading method as described in the first aspect above.

[0017] Fourthly, embodiments of this application provide a computer-readable storage medium storing a computer program that, when executed by a processor, implements the steps of the page loading method described in the first aspect above.

[0018] The technical solution of this application establishes a mapping relationship between the unique identifier of a UI module and its modelClass. After receiving a first array including page JSON data from the backend server, the modelClass corresponding to each of the N UI modules is determined based on the mapping relationship and the N unique identifiers carried in the page JSON data that correspond one-to-one with the N UI modules. A model object corresponding to the UI module is created based on 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 is refreshed and the UI module is successfully registered, the display content corresponding to the UI module is displayed at the matching position on the display page according to the position of the model object corresponding to the UI module in the first array. This allows for flexible dynamic combination and display of display content corresponding to different UI modules based on data dynamically sent by the backend server, thereby enabling efficient organization, management, and dynamic combination of UI modules. It has the ability to expand at low cost and configure flexibly, and is suitable for scenarios where modules are added and different content is displayed according to different user needs. Attached Figure Description

[0019] Figure 1 A schematic diagram illustrating the page loading method provided in an embodiment of this application;

[0020] Figure 2 This diagram illustrates an overall implementation flowchart of the page loading method provided in this application.

[0021] Figure 3 This is a schematic diagram illustrating the page loading device provided in an embodiment of this application;

[0022] Figure 4 This is a schematic diagram of the electronic device structure provided in the embodiments of this application. Detailed Implementation

[0023] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0024] It should be understood that the phrase "one embodiment" or "an embodiment" throughout the specification means that a specific feature, structure, or characteristic related to the embodiment is included in at least one embodiment of this application. Therefore, "in one embodiment" or "in an embodiment" appearing throughout the specification does not necessarily refer to the same embodiment. Furthermore, these specific features, structures, or characteristics can be combined in any suitable manner in one or more embodiments. Multiple embodiments in this application may include two or more.

[0025] In the various embodiments of this application, it should be understood that the sequence number of each process described below does not imply 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 this application.

[0026] This application provides a page loading method, applied to a terminal device, such as... Figure 1 As shown, the method includes the following steps:

[0027] Step 101: Establish the 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, forming a mapping relationship between the UI module and the unique identifier. Additionally, a mapping relationship is established between the unique identifier of the UI module and the model class (modelClass). The modelClass can be viewed as a data container used to store the data that the application needs to display or process.

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

[0030] The mapping relationship can be established, for example, when the application starts. When the application starts, 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 of page JSON data sent by the backend server based on the page data retrieval request, determine the modelClass corresponding to each of the N UI modules according to the mapping relationship and the N unique identifiers carried in the page JSON data. The N UI modules correspond one-to-one with the N unique identifiers, where N is an integer greater than or equal to 1.

[0032] After initiating a page data retrieval request to the backend server, the system receives a first array of page JSON data from the backend server based on the request. This received JSON data carries N unique identifiers, each corresponding to one of the N UI modules. Based on these N unique identifiers and the pre-established mapping between them and their corresponding modelClasses, the modelClasses that carry the data for each of the N UI modules (N unique identifiers) can be determined. These 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 retrieval request.

[0033] Step 103: Create the model object corresponding to the UI module based on 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] N UI modules, each corresponding to a `modelClass`, carry page JSON data provided by the backend server. Each UI module corresponds to at least a portion of the page JSON data. For each of the N UI modules, the corresponding page JSON data is determined from the page JSON data provided by the backend server. Since the `modelClass` for each UI module has been determined, a corresponding model object can be created for each UI module based on its corresponding page JSON data and `modelClass`. The model object for each UI module includes a unique identifier and the data content to be displayed.

[0035] After creating the model objects corresponding to each UI module, the first array is updated based on the model objects corresponding to each UI module. The page JSON data in the first array is replaced with the N model objects corresponding to the N UI modules, thus updating the content in the first array into the form of model objects.

[0036] Step 104: Upon triggering a page refresh and successful registration of the UI module, display the content corresponding to the UI module at the matching position on the display page, based on the position of the model object corresponding to the UI module in the first array.

[0037] After updating the first array based on the model object, a page refresh is triggered to display the content corresponding to N UI modules. After triggering the page refresh, it's necessary to check if the UI module has been successfully registered. If successful registration is confirmed, the corresponding model object for each UI module is used to display the appropriate content on the page.

[0038] Since the JSON data provided by the backend server corresponds to N UI modules, N model objects are adapted to the page JSON data. When displaying visual information on the page, the position of the display content corresponding to each 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 in the appropriate position. In other words, when displaying content on the display page, the matching position is determined 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, achieving the visualization of the page data corresponding to the UI module in the appropriate position on the display page.

[0039] The above implementation scheme of this application establishes a mapping relationship between the unique identifier of the UI module and the modelClass; after receiving the first array including page JSON data sent by the backend server, it determines the modelClass corresponding to each of the N UI modules according to the mapping relationship and the N unique identifiers carried in the page JSON data that correspond one-to-one with the N UI modules; it creates the model object corresponding to the UI module according to the page JSON data and modelClass corresponding to the UI module, and updates the first array based on the model object corresponding to the UI module; when the page is refreshed and the UI module is successfully registered, it displays the display content corresponding to the UI module at the matching position on the display page according to the position of the model object corresponding to the UI module in the first array. This 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 backend server, thereby enabling efficient organization, management and dynamic combination of UI modules, with low-cost expansion and flexible configuration capabilities, and is suitable for scenarios where modules are added and different content is displayed according to different user needs.

[0040] The following details the process of creating the model object and updating the first array based on the model object. The page JSON data provided by the backend server includes N sets of JSON data matching N unique identifiers; when creating the model object corresponding to the UI module based on the page JSON data and modelClass, the process includes:

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

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

[0043] The backend server provides N sets of JSON data for the page, each with a unique identifier. These N sets of JSON data are then matched with N UI modules based on their unique identifiers. When creating the model object corresponding to each UI module, for each of the N UI modules, the unique identifier of the UI module is used to determine the corresponding set of JSON data from the N sets of JSON data. This set of JSON data for the UI module is then combined with the corresponding modelClass of the UI module to create a model object for that UI module, containing both the unique identifier and the data content to be displayed.

[0044] After creating model objects corresponding to N UI modules, when updating the first array based on the model objects corresponding to the UI modules, the N sets 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 first array contains N sets of JSON data, each adapted to one of the N UI modules. After creating a corresponding model object for each UI module based on its corresponding modelClass and a set of JSON data, the set of JSON data corresponding to each UI module in the first array is replaced with its corresponding model object. The set of JSON data for each UI module is uniquely associated with its corresponding model object, ensuring the accuracy of the replacement. Furthermore, 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 set of JSON data. By replacing the N sets of JSON data in the first array with the adapted model objects based on unique identifiers, the content of the first array is updated to the form of model objects, allowing subsequent page refreshes to trigger the display of the adapted content at the corresponding location on the page.

[0046] In the above implementation scheme, a model object is created by combining the modelClass and JSON data corresponding to the UI module based on the unique identifier, 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 adapted display content can be displayed in the corresponding position of the display page using the model object.

[0047] The following describes the process of displaying the UI module's content on the display page after successful UI module registration. Upon triggering a page refresh and successful UI module registration, the process of displaying the UI module's content at the matching position on the display page, based on the position of the UI module's corresponding model object in the first array, includes:

[0048] A page refresh is triggered after updating the first array;

[0049] Based on the position index of the UI module in the first array, the corresponding model object is determined in the first array. The position index of the UI module in the first array is determined based on the position of the corresponding model object in the first array.

[0050] In response to successful registration of the UI module, determine the target position on the display page based on the UI module's position index in the first array, and display the corresponding content of the UI module at the target position based on the model object corresponding to the UI module.

[0051] After updating the first array based on the model object corresponding to the UI module, refresh the page to trigger the display of the content corresponding to the UI module on the display page. Before displaying the 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 its position index, and to identify whether the UI module has been successfully registered. If the UI module is confirmed to be successfully registered, determine the target position on the display page based on the position index of the UI module in the first array, and trigger the display of the content corresponding to the UI module at the target position based on the model object corresponding to the UI module.

[0052] The index of the UI module in the first array is the same as the index of its corresponding model object in the first array. The position of the model object in the first array determines the display position of the UI module's content on the display page. When a UI module is successfully registered, its content is displayed at the target position on the display page.

[0053] Specifically, when identifying whether a UI module has been successfully registered, the process includes: based on the unique identifier corresponding to the UI module, checking whether the UI module has been successfully registered in the correspondence between the unique identifier and the UI module registration status; in response to the UI module being successfully registered, triggering the display of the corresponding content 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 correspondence.

[0054] In this embodiment, a registration factory class (such as WBHSHDetailCellRegister) is created. This factory internally maintains a dictionary to store whether each UI module has been registered; that is, it records the registration status of each UI module, and the dictionary records the correspondence between unique identifiers and UI module registration statuses. When identifying whether a UI module has been successfully registered, the registration status of the UI module is checked in the correspondence based on its unique identifier. If the UI module has been successfully registered, the corresponding content can be displayed at the target location on the display page; if the UI module has not been registered, dynamic registration is performed, and the registration status of the UI module is updated after registration to avoid duplicate 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 occur repeatedly.

[0055] In the above implementation scheme, when a page refresh is triggered, the corresponding model object is determined based on the UI module's position index in the first array. If the UI module has been successfully registered, the target position on the display page is determined based on the model object's location, and the corresponding content of the UI module is displayed at the target position based on the data in the model object. This ensures that the corresponding content is displayed in the appropriate position. Using an on-demand registration mechanism for dynamic registration of UI modules reduces the amount of code required for one-time registration and lowers execution time; furthermore, detecting the registration status of UI modules based on unique identifiers avoids duplicate registration of UI modules.

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

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

[0058] After sending a page data retrieval request to the backend server, the system receives the first array from the backend server. The arrangement of the N sets of JSON data corresponding to the page JSON data included in the first array is adapted to user behavior habits.

[0059] In this system, N sets of JSON data are matched with N UI modules, and the display content corresponding to the N UI modules is arranged on the display page based on user behavior habits.

[0060] Collect historical behavioral data corresponding to user actions performed on the user interface, and report the collected historical behavioral data to the backend server, so that the backend server can analyze user behavior habits based on the received historical behavioral data.

[0061] After sending a page data retrieval request to the backend server, the backend server can arrange the page JSON data matching the page data retrieval request based on the analyzed user behavior habits. That is, the N sets of JSON data corresponding to the page JSON data are arranged according to user behavior habits, and the N sets of JSON data correspond one-to-one with N UI modules based on unique identifiers.

[0062] After arranging the N sets of JSON data corresponding to the page's JSON data based on user behavior habits, the backend server returns a first array containing the arranged N sets of JSON data. That is, the arrangement of the N sets of JSON data in the first array provided by the backend server conforms to user behavior habits. When the frontend triggers the display page to show the content corresponding to the UI modules, the appropriate position on the display page can be determined based on the position of the model object corresponding to the UI module in the first array. The corresponding content is then displayed at that position based on the data in the model object. This allows the display content of each UI module to be displayed in an appropriate position on the display page based on user behavior habits, enabling personalized display pages based on user needs.

[0063] The above implementation scheme collects users' historical behavior data and reports it to the backend server. The backend server analyzes the users' behavior habits and provides N sets of JSON data arranged according to the users' behavior habits. Based on the user's behavior habits, the display content of each UI module can be displayed in an appropriate position on the display page to personalize and optimize the display page, ensuring the user's page browsing and usage experience.

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

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

[0066] Receive the second array sent by the backend server. The second array includes JSON data corresponding to the newly added UI modules determined based on real-time behavior data.

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

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

[0069] After displaying the content corresponding to the UI module on the display page, real-time user behavior data is collected based on the user's actions on the display page. This collected real-time behavior data is reported to the backend server. The backend server then determines the user-related JSON data 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 the JSON data corresponding to the newly added UI module determined based on the real-time behavior data. Here, "newly added UI module" refers to a module added compared to the previously mentioned N UI modules.

[0070] After receiving the second array from the backend server, the frontend creates a model object for the newly added UI module based on the JSON data and modelClass. The JSON data for the newly added UI module carries a unique identifier for that module. This unique identifier determines the corresponding modelClass, and the 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 new UI module, insert the model object corresponding to the new UI module into the preset position of the first array. The preset position is determined based on real-time behavior data. For example, if the real-time behavior data is the behavior data of touch UI module 1, then the position of the model object corresponding to the new 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 new UI module is located after the model object corresponding to UI module 1.

[0072] After inserting the model object corresponding to the new UI module into the first array, the appropriate position is determined on the display page based on the position of the model object corresponding to the new UI module in the first array, and the display content corresponding to the new UI module is displayed at that position.

[0073] It is important to note that before displaying the content corresponding to the newly added UI module, it is necessary to identify the registration status of the UI module. If it is confirmed that the newly added UI module has been dynamically registered, the content display will be triggered based on the successful registration status of the UI module.

[0074] For example, the display page includes a product / service control. Clicking this control triggers a phone call. The backend server can then send JSON data matching the product / service details based on real-time data from the control click. After the user cancels the phone pop-up or makes the call, they return to the display page, where the product / service details are inserted at an appropriate location for the user's information.

[0075] The above implementation scheme collects real-time user behavior data on the display page and reports it to the backend server. The backend server then sends a second array containing 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 in the first array, the display content corresponding to the newly added UI module is displayed at the corresponding position on the display page based on the model object. This allows for the dynamic addition of content of interest to the user on the display page based on user behavior, thereby optimizing the user's page experience.

[0076] The page loading method provided in this application embodiment is described below through an overall implementation process. For example... Figure 2 As shown, it includes the following steps:

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

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

[0079] Step 203: Based on the mapping relationship and N unique identifiers, determine the modelClass corresponding to each of the N UI modules.

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

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

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

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

[0084] Step 208: Check if the UI module has been successfully registered. If not, proceed to step 209. If it has been registered, proceed to step 210.

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

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

[0087] Step 211: Collect real-time behavior data of users on the display page and report it to the backend server. Receive the second array sent by the backend server and add display content on 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 unique identifiers and modelClasses, flexible module combination and dynamic display are ensured. The backend only needs to issue unique identifiers and page data, and the frontend can flexibly combine and display corresponding content through the mapping relationship and registration mechanism. Furthermore, the use of an on-demand registration mechanism for dynamic registration of UI modules ensures efficient module management and avoids duplicate registration.

[0089] This application provides a page loading device, such as... Figure 3 As shown, the device includes:

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

[0091] The determining module 302 is used to respond to receiving a first array including page JSON data sent by the backend server based on a page data acquisition request, and to determine the modelClass corresponding to each of the N UI modules according to the mapping relationship and the N unique identifiers carried by the page JSON data. The N UI modules correspond one-to-one with the N unique identifiers, and N is an integer greater than or equal to 1.

[0092] Processing module 303 is used to create a model object corresponding to the UI module based on the page JSON data and modelClass corresponding to the UI module, and to 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 content corresponding to the UI module at the matching position on the display page according to the position of the model object corresponding to the UI module in the first array when the page is refreshed and the UI module is successfully registered.

[0094] Optionally, the page JSON data includes N sets of JSON data that match the N unique identifiers;

[0095] The processing module includes:

[0096] The first determining submodule is used to determine, for each of the N UI modules, a set of JSON data corresponding to the UI module from the N sets of JSON data included in the page JSON data, based on the unique identifier corresponding to the UI module.

[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 the model object corresponding to the UI module.

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

[0099] After creating the model objects corresponding to the N UI modules, the N sets 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] The trigger submodule is used to trigger a page refresh after the first array is updated;

[0102] The second determining submodule is used to determine the corresponding model object in the first array based on the 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 the position of the model object corresponding to the UI module in the first array;

[0103] The processing submodule is configured to, in response to the successful registration of the UI module, determine the target position on the display page according to the position index of the UI module in the first array, and 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 includes:

[0105] The inspection module is used to check whether the UI module has been successfully registered based on the unique identifier corresponding to the UI module and in the record of the correspondence between the unique identifier and the registration status of the UI module;

[0106] A trigger module is used to trigger the display of the content corresponding to the UI module on the display page in response to the successful registration of the UI module.

[0107] The registration update module is used to dynamically register the UI module and update the registration status of the UI module recorded in the correspondence when the UI module is not registered.

[0108] Optionally, the device further includes:

[0109] The first collection and reporting module is used to collect historical behavior data of users on the user interaction interface and report it to the backend server, and the backend server analyzes user behavior habits based on the historical behavior data.

[0110] The first receiving module is used to receive the first array sent by the backend server after sending the page data acquisition request to the backend server. The arrangement of the N sets 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 sets of JSON data are matched with the N UI modules, and the display content corresponding to the N UI modules is arranged on the display page based on the user's behavior habits.

[0112] Optionally, the device further includes:

[0113] The second collection and reporting module is used to collect real-time behavioral data of users on the display page and report it to the backend server;

[0114] The second receiving module is used to receive the 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;

[0115] An insertion module is used to insert the model object corresponding to the newly added UI module into a preset position in the first array after the model object corresponding to the newly added UI module is created. The preset position is determined based on the real-time behavior data.

[0116] The second display module is used to display the content corresponding to the newly added UI module at the 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 the device embodiment is basically similar to the method embodiment, the description is relatively simple, and relevant parts can be found in the description of the method embodiment.

[0118] This application also provides an electronic device, including: a processor, a memory, and a computer program stored in the memory and executable on the processor. When the computer program is executed by the processor, it implements the various processes of the above-described page loading method embodiments and achieves the same technical effect. To avoid repetition, it will not be described again here.

[0119] For example, Figure 4 A schematic diagram of the physical structure of an electronic device is shown. (For example...) Figure 4 As shown, the electronic device may include a processor 410, a communications interface 420, a memory 430, and a communication bus 440. The processor 410, communications interface 420, and memory 430 communicate with each other via the communication bus 440. The processor 410 can call logical instructions stored in the memory 430. The processor 410 is used to execute various processes of the page loading method of this embodiment, which will not be described in detail here.

[0120] Furthermore, the logical instructions in the aforementioned memory 430 can be implemented as software functional units and, when sold or used as independent products, can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application.

[0121] This application also provides a computer-readable storage medium storing a computer program. When the computer program is executed by a processor, it implements the various processes of the above-described page loading method embodiments and achieves the same technical effects. To avoid repetition, it will not be described again here. The computer-readable storage medium may be 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 "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.

[0123] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they 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 this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) and includes several instructions to cause a terminal (which may be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0124] The embodiments of this application have been described above with reference to the accompanying drawings. However, this application is not limited to the specific embodiments described above. The specific embodiments described above are merely illustrative and not restrictive. Those skilled in the art can make many other forms under the guidance of this application without departing from the spirit and scope of the claims, and all of these forms are within the protection scope of this application.

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

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

[0127] In the embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative. For instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0128] The units described as separate components may or may not be physically separate. 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 the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0129] In addition, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0130] If the aforementioned functions are implemented as 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 this application, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, ROM, RAM, magnetic disks, or optical disks.

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

Claims

1. A page loading method, characterized in that, include: Establish a unique mapping relationship between the user interface (UI) module and the model class (modelClass); In response to receiving a first array of page JSON data sent by the backend server based on a page data retrieval request, the modelClass corresponding to each of the N UI modules is determined according to the mapping relationship and the N unique identifiers carried in the page JSON data. The N UI modules correspond one-to-one with the N unique identifiers, where N is an integer greater than or equal to 1. Create a model object corresponding to the UI module based on 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; Upon triggering a page refresh and upon successful registration of the UI module, the display content corresponding to the UI module is displayed at the matching position on the display page, based on 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 sets of JSON data that match the N unique identifiers; The step of creating the model object corresponding to the UI module based on the page JSON data and modelClass of the UI module includes: For each of the N UI modules, based on the unique identifier corresponding to the UI module, determine a set of JSON data corresponding to the UI module from the N sets of JSON data included in the page JSON data; Combine a set of JSON data corresponding to the UI module with the modelClass corresponding to the UI module to create the model object corresponding to the UI module.

3. The page loading method according to claim 2, characterized in that, Updating the first array based on the model object corresponding to the UI module includes: After creating the model objects corresponding to the N UI modules, the N sets 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, characterized in that, When a page refresh is triggered and the UI module is successfully registered, the content corresponding to the UI module is displayed at the matching position on the display page according to the position of the model object corresponding to the UI module in the first array, including: A page refresh is triggered after the first array is updated; Based on the position index of the UI module in the first array, the corresponding model object is determined in the first array, and 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; 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 the 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, check whether the UI module has been successfully registered in the correspondence between the unique identifier and the registration status of the UI module. In response to the successful registration of the UI module, the display content corresponding to the UI module is triggered to be displayed on the display page; In response to the UI module not being registered, the UI module is dynamically registered and the registration status of the UI module recorded in the correspondence is updated.

6. The page loading method according to claim 1, characterized in that, The method further includes: Collect historical behavior data of users on the user interaction interface and report it to the backend server, which then analyzes user behavior habits based on the historical behavior data; After sending the page data retrieval request to the backend server, the system receives the first array from the backend server. The arrangement of the N sets of JSON data corresponding to the page JSON data included in the first array is adapted to the user's behavior habits. The N sets of JSON data are matched with the N UI modules, and the display content corresponding to the N UI modules is arranged on the display page based on the user's behavior habits.

7. The page loading method according to claim 1, characterized in that, After displaying the content corresponding to the UI module on the display page, the method further includes: Collect real-time behavioral data of users on the display page and report it to the backend server; 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; 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, and the preset position is determined based on the real-time behavior data; Based on 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 on the display page.

8. A page loading device, characterized in that, include: Create a module to establish a mapping relationship between the unique identifier of the user interface (UI) module and the model class (modelClass); The determination module is used to respond to the first array of page JSON data sent by the backend server based on the page data acquisition request, and to determine the modelClass corresponding to the N UI modules according to the mapping relationship and the N unique identifiers carried by the page JSON data. The N UI modules correspond one-to-one with the N unique identifiers, and N is an integer greater than or equal to 1. The processing module is used to create a model object corresponding to the UI module based on the page JSON data and modelClass corresponding to the UI module, and to update the first array based on the model object corresponding to the UI module; The first display module is used to display the content corresponding to the UI module at the matching position on the display page, based on the position of the model object corresponding to the UI module in the first array, when the page is refreshed and the UI module is successfully registered.

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

10. A computer-readable storage medium, characterized in that, A computer program is stored on the computer-readable storage medium, which, when executed by a processor, implements the steps of the page loading method as described in any one of claims 1 to 7.

Images