Applet interface rendering method and device, storage medium and computer device

Abstract

This application discloses a method, apparatus, storage medium, and computer device for rendering the interface of a mini-program. The method includes: responding to a rendering request, determining a key of first rendering data in the local storage space of the mini-program, wherein the first rendering data is determined according to the interface content of the mini-program; reading the first rendering data from a target object according to the key of the first rendering data, wherein the target object is configured in the runtime memory of the mini-program, target object data stored in the target object is obtained from the local storage space of the mini-program, and the target object data includes the first rendering data; and rendering the interface according to the first rendering data. This accelerates data reading speed, reduces rendering blocking, improves the smoothness of mini-program operation, effectively improves the display efficiency of the user interface, and ensures greater consistency and accuracy of the read data, avoiding rendering errors caused by untimely updates of local storage.

Description

Technical Field

[0001] This application relates to the field of Internet technology, and in particular to a method, apparatus, storage medium, and computer device for rendering the interface of a mini-program. Background Technology

[0002] With the development of technology, applications are integrating more and more functions. Different applications' corresponding mini-programs can be attached to the client, allowing users to operate other applications directly within the client of another application simply by using the mini-program, without needing to install the client itself. During operation, the mini-program needs to use the client's local storage space to store data and frequently interacts with the client.

[0003] In related technologies, when storing data, the `setStorageSync` method is directly called to store local data in the mini-program's local storage, and when retrieving data, `getStorageSync` is used to read the locally stored data. However, as mini-programs are used, the amount of data read and written is increasing, and synchronous reading and storing of local storage can cause thread blocking, making the interface rendering slower. Moreover, if the user data on the server changes but the cache does not update in time, it will also lead to rendering errors. Summary of the Invention

[0004] In view of this, the present invention is proposed to provide a method, apparatus, storage medium and computer device for rendering the interface of a mini-program that overcomes or at least partially solves the above problems.

[0005] According to the first aspect of this application, a method for rendering the interface of a mini-program is provided, the method comprising:

[0006] In response to a rendering request, determine the key of the first rendering data in the local storage space of the mini program, wherein the first rendering data is determined based on the interface content of the mini program;

[0007] The first rendering data is read from the target object based on the key of the first rendering data. The target object is configured in the running memory of the mini program. The target object data stored in the target object is obtained from the local storage space of the mini program. The target object data includes the first rendering data.

[0008] The interface is rendered based on the first rendering data.

[0009] Furthermore, before reading the first rendering data from the target object based on the key of the first rendering data, the mini-program's interface rendering method also includes:

[0010] Configure the target object in the running memory of the mini-program;

[0011] In response to the launch command of the mini program, the synchronous read interface is called to obtain the target object data stored in the local storage space;

[0012] The target object is initialized based on the target object data.

[0013] Furthermore, before reading the first rendering data from the target object based on the key of the first rendering data, the mini-program's interface rendering method also includes:

[0014] Data migration processing is performed on local data stored in the local storage space to generate target object data.

[0015] Furthermore, data migration processing is performed on the local data stored in the local storage space, including:

[0016] Obtain the storage information of the first local data;

[0017] Retrieve the first local data from the local data based on the stored information;

[0018] The target object data is obtained by splicing the first local data based on the structural information of the target object.

[0019] Furthermore, the interface rendering methods for mini-programs also include:

[0020] Call the target application's interface to send a data retrieval request to the server;

[0021] Receive the second rendering data sent by the server;

[0022] Update the target object with the second rendered data;

[0023] The updated first rendering data is read from the target object based on the key of the first rendering data, and the interface is rendered a second time based on the updated first rendering data.

[0024] Furthermore, the interface rendering methods for mini-programs also include:

[0025] In response to an update command for the target object data, the updated target object data is stored in the target object;

[0026] Call the asynchronous write interface to write the updated target object data to the local storage space.

[0027] Furthermore, the interface rendering methods for mini-programs also include:

[0028] If the updated target object data fails to be written to the local storage space, the error data of the writing failure is recorded for use in initializing the target object the next time the mini program starts.

[0029] According to a second aspect of this application, a user interface rendering apparatus for a mini-program is provided, the apparatus comprising:

[0030] The data reading module is used to respond to the rendering request, determine the key of the first rendering data in the local storage space of the mini program, wherein the first rendering data is determined according to the interface content of the mini program; and read the first rendering data from the target object according to the key of the first rendering data, wherein the target object is configured in the running memory of the mini program, the target object data stored in the target object is obtained from the local storage space of the mini program, and the target object data includes the first rendering data.

[0031] The rendering module is used to render the interface based on the first rendering data.

[0032] Furthermore, the interface rendering device for mini-programs also includes:

[0033] The configuration module is used to configure the target object in the runtime memory of the mini-program;

[0034] The data reading module is also used to respond to the mini program's startup command by calling the synchronous reading interface to obtain the target object data stored in the local storage space;

[0035] The initialization module is used to initialize the target object based on the target object data.

[0036] Furthermore, the interface rendering device for mini-programs also includes:

[0037] The data migration module is used to migrate local data stored in the local storage space to generate target object data.

[0038] Furthermore, the data migration module is specifically used to obtain the storage information of the first local data; to obtain the first local data from the local data based on the storage information; and to perform concatenation processing on the first local data based on the structural information of the target object to obtain the target object data.

[0039] Furthermore, the interface rendering device for mini-programs also includes:

[0040] The communication module is used to call the target application interface to send a data acquisition request to the server; and to receive the second rendering data sent by the server.

[0041] The update module is used to update the target object with the second rendering data;

[0042] The data reading module is also used to read the updated first rendering data from the target object based on the key of the first rendering data;

[0043] The rendering module is also used to perform secondary rendering of the interface based on the updated first rendering data.

[0044] Furthermore, the interface rendering device for mini-programs also includes:

[0045] The data writing module is used to respond to the update command of the target object data, store the updated target object data in the target object; and call the asynchronous write interface to write the updated target object data to the local storage space.

[0046] Furthermore, the interface rendering device for mini-programs also includes:

[0047] The error logging module is used to record error data if the updated target object data fails to be written to the local storage space, so that the target object can be initialized the next time the mini program starts.

[0048] According to a third aspect of this application, a storage medium is provided on which a computer program is stored, and when the program is executed by a processor, it implements the interface rendering method of the aforementioned applet.

[0049] According to a fourth aspect of this application, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the interface rendering method of the aforementioned applet.

[0050] Based on the above technical solution, this application provides a method, apparatus, storage medium, and computer device for rendering the interface of a mini-program. A target object is pre-configured in the mini-program's runtime memory. This target object can be used to synchronously store key-value pair format target object data in the mini-program's local storage space. When a client has a need to render the mini-program's interface, first rendering data related to the interface to be rendered is determined. Through a preset function overriding or global data replacement reading method, the client reads the key of the first rendering data from the mini-program's local storage space, rather than the complete key-value pair format data. Then, the key of the first rendering data is used to read the complete first rendering data from the target object. Finally, the interface is rendered based on the first rendering data to obtain the required user interface. The mini-program interface rendering method provided in this embodiment not only places all the data required for rendering in the runtime memory through the target object, accelerating data reading speed, especially in scenarios with large amounts of data to be read and written, eliminating the need to repeatedly read the data required for rendering from local storage, simplifying development and calls, improving the smoothness of mini-program operation, effectively improving the display efficiency of the user interface, and contributing to a better user experience. Furthermore, since data reading and writing both pass through a unified target object, the consistency and accuracy of the read data are better guaranteed, avoiding rendering errors caused by untimely updates to local storage.

[0051] The above description is only an overview of the technical solution of this application. In order to better understand the technical means of this application and to implement it in accordance with the contents of the specification, and to make the above and other objects, features and advantages of this application more obvious and understandable, the following are specific embodiments of this application. Attached Figure Description

[0052] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings:

[0053] Figure 1 A schematic diagram of the hardware environment for the interface rendering method of the mini-program provided in this application embodiment is shown;

[0054] Figure 2 This illustration shows one of the flowcharts of the interface rendering method for a mini-program provided in an embodiment of this application;

[0055] Figure 3 This is a second flowchart illustrating the interface rendering method of a mini-program provided in an embodiment of this application;

[0056] Figure 4 The flowcharts of the interface rendering method for the mini-program provided in the embodiments of this application are shown in three parts;

[0057] Figure 5 This paper shows a structural block diagram of the interface rendering device for a mini-program provided in an embodiment of this application;

[0058] Figure 6 A schematic diagram of the computer device structure provided in an embodiment of this application is shown. Detailed Implementation

[0059] The present application will be described in detail below with reference to the accompanying drawings and embodiments. It should be noted that, unless otherwise specified, the embodiments and features described in the embodiments of the present application can be combined with each other.

[0060] Those skilled in the art will understand that the accompanying drawings are merely schematic diagrams of a preferred embodiment, and the modules or processes shown in the drawings are not necessarily essential for implementing this application. Those skilled in the art will understand that the modules in the apparatus of the embodiment can be distributed within the apparatus of the embodiment as described, or can be modified to be located in one or more apparatuses different from this embodiment. The modules of the above-described embodiment can be combined into one module, or further divided into multiple sub-modules.

[0061] The serial numbers in this application are for descriptive purposes only and do not represent the superiority or inferiority of any particular implementation scenario. The above disclosures are merely a few specific implementation scenarios of this application; however, this application is not limited thereto, and any variations conceived by those skilled in the art should fall within the protection scope of this application.

[0062] According to one aspect of the embodiments of this application, an embodiment of a method for rendering the interface of a mini-program is provided.

[0063] In this embodiment of the application, the above-described mini-program interface rendering method can be applied to, for example... Figure 1 The hardware environment shown consists of client 110 and server 120. For example... Figure 1 As shown, server 120 connects to client 110 via a network and can provide services to the client or clients installed on the client. Client 110 not only sets up local storage space 111 for the mini-program, but can also configure target object 112 in the mini-program's runtime memory. Both local storage space 111 and target object 112 are used to provide data storage services for client 110 and / or server 120. Examples of the aforementioned networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof. Client 110 includes, but is not limited to, computers, mobile phones, tablets, etc.

[0064] The interface rendering method of a mini-program in this embodiment can be executed by the client 110, such as... Figure 2 As shown, the method may include the following steps:

[0065] Step 201: In response to the rendering request, determine the key of the first rendering data in the local storage space of the mini program;

[0066] The first rendering data is stored in local storage in key-value pair format. Specifically, each key-value pair consists of two parts: a key and a value. The key is a unique identifier used to access the corresponding value, while the value is the information associated with the key. The first rendering data can be determined based on the content of the mini-program's interface.

[0067] In this embodiment, a target object is pre-configured in the mini-program's runtime memory. This target object can be used to synchronously store key-value pair format target object data in the mini-program's local storage space. When the client has a need to render the mini-program's interface, the first rendering data related to the interface to be rendered is first determined. The interface content of the interface to be rendered determines the keys of the required first rendering data, and these keys can be used to query and retrieve the corresponding values ​​to obtain the complete first rendering data.

[0068] Step 202: Read the first rendering data from the target object based on the key of the first rendering data;

[0069] In one embodiment, a preset function can be used to override or globally replace the original method of synchronously reading data from local storage, so that the client can call the synchronous reading interface to read the first rendering data from the target object of the mini-program.

[0070] The target object is pre-configured in the mini program's running memory. The target object stores target object data in key-value pair format. This target object data includes the first rendering data. The target object data stored in the target object can be obtained from the mini program's local storage space to ensure data synchronization between the target object and the local storage space.

[0071] In this embodiment, after determining the key of the first rendering data, the complete first rendering data is read from the target object using the key of the first rendering data. This allows the use of a pre-configured target object to obtain the same first rendering data as the local storage space. This not only reduces UI rendering blocking caused by synchronously reading data from local storage, but also ensures the consistency and accuracy of the read data because data reading and writing are both performed through a unified target object, avoiding rendering errors caused by untimely updates to local storage.

[0072] In one embodiment, such as Figure 3 As shown, before step 202, the interface rendering method of the mini-program also includes:

[0073] Step 301: Configure the target object in the running memory of the mini-program;

[0074] Step 302: In response to the mini-program's startup command, call the synchronous read interface to obtain the target object data stored in the local storage space;

[0075] Among them, the target object data is local data that can be stored in the target object.

[0076] Step 303: Initialize the target object based on the target object data.

[0077] In this embodiment, a target object is first configured, which remains in the runtime memory of the mini-program. When the mini-program starts, the client calls a synchronous read interface (e.g., getStorageSync) to synchronously retrieve the target object data stored in local storage. The client then initializes the target object based on this data, synchronously storing the target object data from local storage into the target object. Thus, by calling the synchronous read interface only once, the synchronization between local storage and the target object data is ensured. This allows the client to quickly manage stored data using the target object, enabling it to retrieve the same initial rendering data as the local storage data when rendering is required. This significantly reduces the number of times local storage is read during rendering, thus minimizing rendering blocking. Furthermore, the client can leverage the target object's automatic data change monitoring feature for easier and faster program development.

[0078] It is understandable that the method of synchronously reading the interface in step 302 is different from the method of synchronously reading the interface in step 202. In step 302, the synchronous reading interface is called to read the data stored locally when the mini-program starts, while in step 202, when rendering is required, the method of the original synchronous reading interface is overridden or globally replaced by a preset function, so that the client calls the synchronous reading interface to read the first rendering data from the target object in the mini-program's memory.

[0079] In another embodiment, prior to step 201, the method for rendering the mini-program's interface further includes:

[0080] Step 401: Perform data migration processing on the local data stored in the local storage space.

[0081] In this embodiment, it is first determined whether to read the target object data from the local storage space. If not, i.e., upon first login to the mini-program or if the target object data was not obtained through the synchronous read interface, then data migration processing is used to convert the local data stored in the mini-program's local storage space into target object data that can be stored by the target object. Thus, the next time the user enters the mini-program, the client can read the same target object data from the target object as in the local storage space. Therefore, data migration ensures that the target object and the local storage space remain consistent, allowing the required data to be read directly from the target object.

[0082] In specific application scenarios, step 401, which involves migrating local data stored in the local storage space, includes the following steps:

[0083] Step 401-1: Obtain the storage information of the first local data;

[0084] The first local data refers to the local data that needs to be stored on the target object, such as the local data required by the mini-program to implement a certain function. The first local data can be cached temporary data, such as user configuration and history in the mini-program, or it can be data stored on the client for persistence, such as user information, game item data, and shopping cart data in the mini-program.

[0085] Specifically, the storage information is used to identify, describe, and manage local data to assist in subsequent data operations and processing. The storage information includes, but is not limited to, at least one of the following: an array of storage names, data types (such as integers, floating-point numbers, strings, etc.), dates and timestamps, data length, storage location, and data relationships. The specific storage information can be reasonably set according to the application scenario and system requirements, and this application embodiment does not impose specific limitations.

[0086] Step 401-2: Obtain the first local data from the local data based on the stored information;

[0087] Step 401-3: Based on the structural information of the target object, the first local data is spliced ​​to obtain the target object data.

[0088] In this embodiment, local data is filtered based on stored information to obtain first local data that may need to be synchronized and stored in the target object. The first local data is then reassembled according to the target object's structural information to form target object data that can be stored in the target object, and this data is then stored again in the local storage space. Thus, the next time the target object and local storage space need to be synchronized, the target object data in the local storage space can be directly used to initialize the target object, enabling functions such as interface rendering to be implemented through the target object.

[0089] In one embodiment, the above operation can occur when the mini-program starts, that is, when it is impossible to read data from the local storage space to initialize the target object. After obtaining the target object data by concatenating the first local data, it can be directly used to initialize the target object, and then stored in the mini-program's local storage using an asynchronous storage method; or the target object data obtained by concatenating the first local data can be directly stored locally for use in the initialization of the target object in step 302.

[0090] For example, local data contains key1:value1, key2:value2, and key3:value3 arranged in order, while the target object requires a data structure of key3:{key1:value1,key2,value2}. Because the required data and structure are different, it cannot be read quickly. Therefore, it is necessary to concatenate the required local data based on the target object's structural information to transform the data's storage structure.

[0091] Step 203: Render the interface based on the first rendering data.

[0092] Interface rendering is the process of converting the initial rendered data into a user-visible interface. Specifically, the initial rendered data, such as WXML, WXSS, data binding, and event handling, is previewed and debugged using the mini-program development tools to create and update the mini-program's interface, achieving rich interactive effects and a superior user experience.

[0093] The mini-program interface rendering method provided in this embodiment allows for the pre-configuration of target objects in the mini-program's runtime memory for synchronously storing key-value pair format target object data in local storage. When a client has a mini-program interface rendering requirement, the first rendering data related to the interface to be rendered is first determined. By overriding or globally replacing the original data reading method through a preset function, the client reads the first rendering data from the target object in the mini-program's memory. Finally, the interface is rendered based on the first rendering data to obtain the required user interface. On one hand, all the data required for rendering can be placed in runtime memory through the target object, accelerating data reading speed, especially in scenarios with large amounts of data to be read and written. It eliminates the need to repeatedly read the data required for rendering from local storage, simplifying development and calls, improving the smoothness of mini-program operation, effectively improving the display efficiency of the user interface, and contributing to a better user experience. On the other hand, since data reading and writing both use a unified target object, the consistency and accuracy of the read data are better guaranteed, avoiding rendering errors caused by untimely updates to local storage.

[0094] In another embodiment, considering that when a mini-program renders its interface, in addition to rendering unified attributes such as interface structure layout, style, appearance, and logical interaction, it may also render user data with high real-time requirements from the server for different applications. After step 203, the mini-program's interface rendering method further includes:

[0095] Step 204: Call the target application interface to send a data retrieval request to the server;

[0096] Step 205: Receive the second rendering data sent by the server;

[0097] Step 206: Update the target object with the second rendering data;

[0098] Step 207: Read the updated first rendering data from the target object based on the key of the first rendering data, and perform a second rendering of the interface based on the updated first rendering data.

[0099] In this embodiment, the client calls the target application programming interface (API) to send a data retrieval request to the server. The server processes the retrieval request and returns the required second rendering data. After receiving the second rendering data, the client maps the returned second rendering data to the attributes or fields of the first rendering data stored in the target object to update the first rendering data. The updated first rendering data is then read from the target object again using the key of the first rendering data, and a second rendering of the interface is performed using the updated first rendering data. This completes the real-time updating of the content, style, or other attributes of the interface elements, enabling the user interface to reflect the latest data status promptly, ensuring timely interface rendering, and meeting the user's need for immediate interface content.

[0100] It should be noted that the data provided by the server needs to undergo secure processing to prevent data leakage, tampering, or other problems caused by security issues. At the same time, data interaction between the client and server also requires security protection measures such as encrypted transmission to ensure the security of data transmission.

[0101] Furthermore, such as Figure 4 As shown, the interface rendering methods for mini-programs also include:

[0102] Step 501: In response to the update instruction for the target object data, store the updated target object data in the target object;

[0103] Specifically, the triggering condition for the update instruction of the target object data may be that the target object data needs to be changed, such as when the user modifies the local configuration of the mini program or when new data is received from the server. This application embodiment will not list them all.

[0104] Step 502: Call the asynchronous write interface to write the updated target object data to the local storage space.

[0105] In this embodiment, when the target object data changes, a preset function overrides or modifies the default behavior of the global asynchronous write interface (e.g., the `setStorage` method). This ensures that updating the target object data does not directly modify the local storage space, but rather writes to the target object first and then calls the asynchronous write interface to store the updated target object data in the local storage space. Thus, all modifications to the target object data are reflected in the target object immediately. Even if other components need to access the target object data during subsequent rendering, or in scenarios where multiple asynchronous tasks need to simultaneously modify or read the same local data, the latest state data can be obtained through the target object, ensuring the timeliness and consistency of local data updates. Furthermore, asynchronous write operations are non-blocking, allowing for processing within callback functions without blocking the main thread, thereby improving the mini-program's response speed and user experience.

[0106] Understandably, because the updated target object data is written to the local storage space using asynchronous storage, the target object can obtain the asynchronously stored target object data through the logic in steps 301 to 303 when the mini-program is launched next time.

[0107] In addition, in some embodiments, since the operation of asynchronously storing target object data locally is caused by server data updates (the client requests data from the server), the target object data stored locally in the mini program contains both client data and server data.

[0108] Furthermore, after step 502, the interface rendering method of the mini-program also includes: if the updated target object data fails to be written to the local storage space, then record the error data of the writing failure.

[0109] In this embodiment, if writing target object data fails, the error data is recorded. When the target object is initialized again, the error record is checked first to identify whether erroneous data exists. If it exists, the target object data obtained from the local storage space, i.e., the target object data before the update, and the erroneous data are merged, and the target object is initialized based on the merged data. This ensures that erroneous data and normal data are initialized together, guaranteeing the integrity of the data in the target object and effectively preventing data loss.

[0110] Understandably, to avoid repeated reading and writing of data, error records can be cleared after the target object initializes erroneous data and the target object data is retrieved from local storage.

[0111] In one specific embodiment, a method for rendering the interface of a mini-program is provided, which specifically includes:

[0112] Before launching the mini-program:

[0113] (1) Initialize a target object. This target object will remain in memory during the operation of the mini program and can be referenced in the JS files of each interface of the mini program.

[0114] (2) Provide an update method for the target object so that after it is changed, the setStorage method will always be called to store all the data in the target object into storage. The setStorage method is completed asynchronously to avoid blocking the process execution.

[0115] (3) Provide an initialization method for the target object, and only change the value of the target object without performing the setStoreage method.

[0116] For example, the mobx-miniprogram library can be used to simplify data state management in mini-programs. By creating observable state objects and defining related Action functions, data initialization and updates can be implemented, and the setStorage method can be used to asynchronously store the latest data in the local cache.

[0117] When the mini-program is running:

[0118] (1) When the mini program starts, use the getStorageSync method to synchronously obtain the target object data saved locally during the last mini program run, and initialize a target object globally based on the target object data.

[0119] For example, the function() callback function of the onLaunch method is used to perform initialization. Specifically, the getStorageSync method is used to try to retrieve the target object data from the local cache (storage) and pass it to the target object, and the initStorage() method is used to initialize the target object.

[0120] Furthermore, if the getStoragesync method does not retrieve the target object data, the getStorageInfoSync method retrieves an array of all local storage names. The array is then used to iterate through and retrieve all local data stored locally. The data is then concatenated into a data object with the same structure as the target object. The concatenated data object is then used to call the initialization method, and the update method of the target object is called once to directly collect the existing local data. The next time the mini-program starts, it can directly proceed to step (1).

[0121] (2) Override or globally replace the getStorageSync method so that when the user reads local storage, they read the key-value pairs corresponding to the rendered data in the target object. Then, the local data retrieved during the operation of the mini program all come from the target object, with a unified source, and the reading speed is faster because the target object is in memory rather than in storage.

[0122] (3) Override or modify the global setStorageSync method so that when the user sets the local storage, instead of directly modifying the local storage, the update method of the target object is called. Then all data modifications will be reflected on the target object in the first time.

[0123] (4) Since the update method of the target object will asynchronously call the setStorage method to store the current result, when the mini program is closed and reopened, it will still go to step (1) and get the target object data this time.

[0124] In this embodiment, all storage is placed in memory, increasing read speed and simplifying development. Except for migrating old data, the mini-program only needs to call `getStorageSync` once, reducing page rendering blocking caused by synchronous storage retrieval. Furthermore, when data changes, the target object's data is modified first, and then local data is saved asynchronously, ensuring the immediacy of local data updates. During data read and write operations, a single target object is consistently used, further guaranteeing the consistency and accuracy of the read data.

[0125] It should be understood that the sequence number of each step in the above embodiments 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.

[0126] Furthermore, this embodiment also provides a mini-program interface rendering device for implementing the above embodiments and preferred embodiments; details already described will not be repeated. As used below, the term "module" can be a combination of software and / or hardware that implements a predetermined function. Although the device described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.

[0127] like Figure 5 As shown, the interface rendering device of this mini-program includes a data reading module 601 and a rendering module 602. Among them,

[0128] The data reading module 601 is used to respond to a rendering request, determine the key of the first rendering data in the local storage space of the mini program, wherein the first rendering data is determined according to the interface content of the mini program; and read the first rendering data from the target object according to the key of the first rendering data, wherein the target object is configured in the running memory of the mini program, the target object data stored in the target object is obtained from the local storage space of the mini program, and the target object data includes the first rendering data.

[0129] The rendering module 602 is used to render the interface based on the first rendering data.

[0130] In this embodiment, a target object is pre-configured in the mini-program's runtime memory. This target object can be used to synchronously store key-value pair format target object data in the mini-program's local storage space. When the client has a mini-program interface rendering requirement, the first rendering data related to the interface to be rendered is first determined. By overriding or globally replacing the original data reading method through a preset function, the client reads the complete first rendering data from the target object in the mini-program's memory. Finally, the interface is rendered based on the first rendering data to obtain the required user interface. The mini-program interface rendering method provided in this embodiment not only places all the data required for rendering in the runtime memory through the target object, accelerating data reading speed, especially in scenarios with large amounts of data to be read and written, eliminating the need to repeatedly read the data required for rendering from local storage, simplifying development and calls, improving the smoothness of mini-program operation, effectively improving the display efficiency of the user interface, and helping to improve the user's interactive experience. Moreover, since data reading and writing are all done through a unified target object, the consistency and accuracy of the read data are better guaranteed, avoiding rendering errors caused by untimely updates of local storage.

[0131] Furthermore, the interface rendering device of the mini-program also includes: a configuration module (not shown in the figure), which is used to configure the target object in the running memory of the mini-program; a data reading module 601, which is also used to call the synchronous reading interface to obtain the target object data stored in the local storage space in response to the startup command of the mini-program; and an initialization module (not shown in the figure), which is used to initialize the target object according to the target object data.

[0132] Furthermore, the interface rendering device of the mini program also includes a data migration module (not shown in the figure), which is used to perform data migration processing on local data stored in the local storage space to generate target object data.

[0133] Furthermore, the data migration module is specifically used to obtain the storage information of the first local data; to obtain the first local data from the local data based on the storage information; and to perform concatenation processing on the first local data based on the structural information of the target object to obtain the target object data.

[0134] Furthermore, the interface rendering device of the mini-program also includes: a communication module (not shown in the figure), which is used to call the target application interface to send a data acquisition request to the server; and to receive the second rendering data sent by the server; an update module (not shown in the figure), which is used to update the target object with the second rendering data; a data reading module 601, which is also used to read the updated first rendering data from the target object according to the key of the first rendering data; and a rendering module 602, which is also used to perform secondary rendering of the interface according to the updated first rendering data.

[0135] Furthermore, the interface rendering device of the mini program also includes: a data writing module (not shown in the figure), which is used to respond to the update instruction of the target object data, store the updated target object data in the target object; and call the asynchronous write interface to write the updated target object data to the local storage space.

[0136] Furthermore, the interface rendering device of the mini program also includes an error recording module (not shown in the figure). The error recording module is used to record the error data of the writing failure if the updated target object data fails to be written to the local storage space, so as to initialize the target object when the mini program is launched next time.

[0137] For specific limitations regarding the UI rendering device of a mini-program, please refer to the limitations on the UI rendering method of mini-programs mentioned above, which will not be repeated here. Each module in the aforementioned UI rendering device of a mini-program can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device in hardware form, or stored in the memory of a computer device in software form, so that the processor can call and execute the operations corresponding to each module.

[0138] Based on the above, Figures 2 to 4 Accordingly, embodiments of this application also provide a readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the above-described method. Figures 2 to 4 The interface rendering method of the mini-program is shown.

[0139] Based on this understanding, the technical solution of this application can be embodied in the form of a software product. This software product can be stored in a non-volatile storage medium (such as a CD-ROM, USB flash drive, or portable hard drive), and includes several instructions to cause a computer device (such as a personal computer, server, or network device) to execute the methods described in the various implementation scenarios of this application.

[0140] Based on the above, Figures 2 to 4 The method shown, and Figure 5To achieve the above objectives, the present application also provides a computer device, specifically a personal computer, server, network device, etc., as shown in the virtual device embodiment. This computer device includes a storage medium and a processor; the storage medium stores a computer program; the processor executes the computer program to achieve the above-described objectives. Figures 2 to 4 The interface rendering method of the mini-program is shown.

[0141] Optionally, the computer device may also include a user interface, a network interface, a camera, radio frequency (RF) circuitry, sensors, audio circuitry, a Wi-Fi module, etc. The user interface may include a display screen, input units such as a keyboard, etc., and optional user interfaces may also include USB interfaces, card reader interfaces, etc. The network interface may optionally include standard wired interfaces, wireless interfaces (such as Bluetooth interfaces, Wi-Fi interfaces), etc.

[0142] Those skilled in the art will understand that the computer device structure provided in this embodiment does not constitute a limitation on the computer device, and may include more or fewer components, or combine certain components, or have different component arrangements.

[0143] Furthermore, Figure 6 This is a structural diagram of a computer device according to an embodiment of the present invention, such as... Figure 6 As shown, the system includes a processor 711, a communication interface 712, a memory 713, and a communication bus 714. The processor 711, communication interface 712, and memory 713 communicate with each other via the communication bus 714. The memory 713 is used to store computer programs. When the processor 711 executes the program stored in the memory 713, it performs the following steps: In response to a rendering request, it determines the key of the first rendering data in the local storage space of the mini-program, wherein the first rendering data is determined according to the interface content of the mini-program; it reads the first rendering data from the target object according to the key of the first rendering data, wherein the target object is configured in the running memory of the mini-program, and the target object data stored in the target object is obtained from the local storage space of the mini-program, and the target object data includes the first rendering data; and it performs interface rendering based on the first rendering data.

[0144] Furthermore, before reading the first rendering data from the target object based on the key of the first rendering data, the interface rendering method of the mini program also includes: configuring the target object in the running memory of the mini program; responding to the startup command of the mini program, calling the synchronous reading interface to obtain the target object data stored in the local storage space; and initializing the target object based on the target object data.

[0145] Furthermore, before reading the first rendering data from the target object based on the key of the first rendering data, the mini-program's interface rendering method also includes: performing data migration processing on the local data stored in the local storage space to generate the target object data.

[0146] Furthermore, data migration processing is performed on the local data stored in the local storage space, including: obtaining the storage information of the first local data; obtaining the first local data from the local data based on the storage information; and concatenating the first local data based on the structural information of the target object to obtain the target object data.

[0147] Furthermore, the interface rendering method of the mini program also includes: calling the target application interface to send a data acquisition request to the server; receiving the second rendering data sent by the server; updating the target object with the second rendering data; reading the updated first rendering data from the target object according to the key of the first rendering data; and performing secondary rendering of the interface according to the updated first rendering data.

[0148] Furthermore, the interface rendering method of the mini program also includes: responding to the update instruction of the target object data, storing the updated target object data in the target object; and calling the asynchronous write interface to write the updated target object data to the local storage space.

[0149] Furthermore, the interface rendering method of the mini program also includes: if the updated target object data fails to be written to the local storage space, the error data of the writing failure is recorded for use in initializing the target object when the mini program is launched next time.

[0150] The communication bus mentioned above can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. This communication bus can be divided into address bus, data bus, control bus, etc. For ease of illustration, only one thick line is used to represent it in the diagram, but this does not mean that there is only one bus or one type of bus.

[0151] The communication interface is used for communication between the aforementioned terminal and other devices.

[0152] The memory may include random access memory (RAM) or non-volatile memory, such as at least one disk storage device. Optionally, the memory may also be at least one storage device located remotely from the aforementioned processor.

[0153] The processors mentioned above can be general-purpose processors, including central processing units (CPUs), network processors (NPs), etc.; they can also be digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.

[0154] In the above embodiments, implementation can be achieved entirely or partially through software, hardware, firmware, or any combination thereof. When implemented using software, it can be implemented entirely or partially as a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of this application are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid-state disk (SSD)).

[0155] The sequence numbers of the embodiments in this application are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0156] In the above embodiments of this application, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0157] In the several embodiments provided in this application, it should be understood that the disclosed technical content can be implemented in other ways. The device embodiments described above are merely illustrative; for example, 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 displayed or discussed mutual coupling, direct coupling, or communication connection may be through some interfaces; the indirect coupling or communication connection between units or modules may be electrical or other forms.

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

[0159] Furthermore, 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. The integrated unit can be implemented in hardware or as a software functional unit.

[0160] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it 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 all or part 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 a USB flash drive, read-only memory (ROM), random access memory (RAM), portable hard drive, magnetic disk, or optical disk.

[0161] The above description is only a preferred embodiment of this application. It should be noted that for those skilled in the art, several improvements and modifications can be made without departing from the principle of this application, and these improvements and modifications should also be considered within the scope of protection of this application.

Claims

1. A method for rendering the interface of a WeChat mini-program, characterized in that, The method includes: The target object is configured in the running memory of the mini program. The target object remains in memory while the mini program is running, and the JS files of each interface of the mini program can reference the target object. In response to the launch command of the mini program, the getStorageSync method is called to synchronously obtain the target object data stored in the local storage space of the mini program, and the target object is globally initialized based on the target object data; If the getStorageSync method fails to retrieve the target object data, the getStorageInfoSync method is called to retrieve the array of storage names in the local storage space. The local data in the local storage is retrieved by traversing the array of storage names. The retrieved local data is then concatenated according to the structure information of the target object to obtain target object data with the same structure as the target object. The target object is then initialized based on the concatenated target object data. In response to a rendering request, a key for first rendering data in the local storage space of the mini-program is determined, wherein the first rendering data is determined based on the interface content of the mini-program; By overriding or globally replacing the getStorageSync method, when the mini-program reads relevant data from local storage, it can read the corresponding first rendering data from the target object through the key of the first rendering data. The target object stores the target object data in key-value pair format, and the target object data stored in the target object is obtained from the local storage space of the mini-program. The target object data includes the first rendering data. Render the interface based on the first rendering data; In response to an update instruction for target object data in the local storage space, the updated target object data is stored in the target object by overriding or modifying the global setStorageSync method; The updated target object data is written to the local storage space by calling the asynchronous write interface. If writing data from the current target object to the local storage space fails, the error data of the writing failure is recorded so that when the mini program starts again, the error data can be merged with the target object data obtained from the local storage space to initialize the target object.

2. The method according to claim 1, characterized in that, The method further includes: Call the target application's interface to send a data retrieval request to the server; Receive the second rendering data sent by the server; Update the target object with the second rendering data; Read the updated first rendering data from the target object based on the key of the first rendering data; The interface is then rendered a second time based on the updated first rendering data.

3. A user interface rendering device for a mini-program, characterized in that, The device includes: The configuration module is used to configure the target object in the runtime memory of the mini program. The target object is always in memory when the mini program is running, and the JS files of each interface of the mini program can reference the target object. The data reading module is used to respond to the launch command of the mini program by calling the getStorageSync method to synchronously obtain the target object data stored in the local storage space of the mini program; An initialization module is used to perform global initialization of the target object based on the target object data; The data migration module is used to, if the getStorageSync method fails to obtain the target object data, call the getStorageInfoSync method to obtain the array of storage names in the local storage space, traverse the array of storage names to obtain the local data in the local storage, and concatenate the obtained local data according to the structural information of the target object to obtain target object data with the same structure as the target object, and initialize the target object according to the concatenated target object data; The data reading module is further configured to, in response to a rendering request, determine the key of the first rendering data in the local storage space of the mini-program, wherein the first rendering data is determined based on the interface content of the mini-program; and, by overriding or globally replacing the getStorageSync method, enable the mini-program to read the first rendering data from the target object through the key of the first rendering data when reading relevant data in local storage, wherein the target object stores target object data in a key-value pair format, the target object data stored in the target object is obtained from the local storage space of the mini-program, and the target object data includes the first rendering data; The rendering module is used to render the interface based on the first rendering data; The data writing module is used to respond to an update instruction for target object data in the local storage space by overriding or modifying the global setStorageSync method to store the updated target object data in the target object; and to call the asynchronous write interface to write the updated target object data into the local storage space. The error logging module is used to record error data if the data in the current target object fails to be written to the local storage space. This error data is then used to merge with the target object data obtained from the local storage space and initialize the target object when the mini program is launched next time.

4. A storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the interface rendering method of the applet as described in claim 1 or 2.

5. A computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the interface rendering method of the applet as described in claim 1 or 2.

Images