Page rendering method and device, equipment, medium and program product

Abstract

The invention discloses a page rendering method and device, equipment, a medium and a program product, and relates to the technical field of computer technologies. The method comprises the following steps: matching a first rendering resource with a resource mapping relationship to obtain a mapped second rendering resource; matching the first rendering resource with a resource mapping relationship to obtain a mapped second rendering resource; and rendering and displaying the first page based on the second rendering resource. A resource mapping relationship is introduced to record a corresponding relationship between rendering resources of a default theme and a specified theme, so that the resources under different themes can be replaced through the mapping relationship, theme switching is realized under the condition of not changing an application code, a developer mainly pays attention to definition of theme resources and establishment of the mapping relationship, and the development efficiency is improved. Realization codes of multiple themes do not need to be repeatedly written in each page, the development process is simplified, and the development efficiency is improved.

Description

Technical Field

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

[0002] In some applications, users can change the overall visual style of the application interface according to the system's preset theme. For example, when the user sets the theme to dark, the background color, text color, etc. of the application interface will be adjusted to dark mode.

[0003] In related technologies, developers define implementation code for multiple themes and package resource files for each theme within the application's installation package. When a user selects a theme in the application, the client executes a corresponding callback function based on the selected theme. The callback function calls the specified theme code, loads the corresponding resource files using the specified theme code, and thus the client displays the application interface according to the user's selected theme.

[0004] However, the methods of defining multiple theme codes and packaging multiple resource files in related technologies require a large amount of modification to the application, which will bring a large workload in the application development process, thereby reducing the development efficiency of the application. Summary of the Invention

[0005] This application provides a page rendering method, apparatus, device, medium, and program product, which can improve application development efficiency. The technical solution is as follows:

[0006] On the one hand, a page rendering method is provided, the method including:

[0007] Obtain the first rendering resource of the first page under the first page theme. The first rendering resource is used to render the page elements in the first page with the first page theme as the display mode.

[0008] Upon receiving a display request indicating that the first page should be displayed with a second page theme, the resource mapping relationship corresponding to the second page theme is obtained. The resource mapping relationship is used to indicate the mapping relationship between the display mode of the page element under the first page theme and the display mode of the page element under the second page theme.

[0009] The first rendering resource is matched with the resource mapping relationship to obtain the mapped second rendering resource. The second rendering resource is used to render the page elements in the first page with the second page theme as the display mode.

[0010] The first page is rendered and displayed based on the second rendering resource.

[0011] On the other hand, a page rendering apparatus is provided, the apparatus comprising:

[0012] The acquisition module is used to acquire the first rendering resource of the first page under the theme of the first page. The first rendering resource is used to render the page elements in the first page with the theme of the first page as the display mode.

[0013] The acquisition module is used to acquire the resource mapping relationship corresponding to the second page theme when it receives a display request instruction to display the first page with the second page theme. The resource mapping relationship is used to indicate the mapping relationship between the display mode of the page element under the first page theme and the display mode of the page element under the second page theme.

[0014] The mapping module is used to match the first rendering resource with the resource mapping relationship to obtain the mapped second rendering resource. The second rendering resource is used to render the page elements in the first page with the second page theme as the display mode.

[0015] The display module is used to render and display the first page based on the second rendering resource.

[0016] In some embodiments, when the first rendering resource includes a color resource, the first resource identifier includes the color code corresponding to the color resource; when the first rendering resource includes an image resource, the first resource identifier includes at least one of the storage address and the image identifier number corresponding to the image resource.

[0017] In some embodiments, the acquisition module is configured to cache resource mapping relationships corresponding to at least one theme, wherein the at least one theme includes the second page theme; and determine the resource mapping relationship corresponding to the second page theme from the resource mapping relationships corresponding to the at least one theme.

[0018] In some embodiments, the display request includes custom theme prompt information, which describes the visual style requirements for displaying the first page; the acquisition module is used to input the first rendering resource and the theme prompt information into a mapping relationship generation model when the theme prompt information does not match a stored theme, the mapping relationship generation model is used to generate a predicted mapping relationship under the prompt of the theme prompt information; the mapping module is used to match the first rendering resource with the predicted mapping relationship to obtain a predicted rendering resource, the first page rendered and displayed by the predicted rendering resource conforms to the description of the theme prompt information; the display module is used to render and display the first page based on the predicted rendering resource.

[0019] In some embodiments, the acquisition module is configured to update the resource mapping relationship corresponding to at least one topic upon receiving an update request for the resource mapping relationship corresponding to at least one topic, wherein the at least one topic includes the second page topic.

[0020] In some embodiments, the mapping module is configured to match the first rendering resource with the resource mapping relationship to obtain at least one candidate resource under the theme of the second page, wherein different candidate resources correspond to different resource parameters; obtain device parameters based on the parameter type of the resource parameters, wherein the device parameters refer to the parameters of the computer device used to display the first page, and the parameter type of the resource parameters matches the parameter type of the device parameters; and determine the second rendering resource from the at least one candidate resource based on the device parameters.

[0021] In some embodiments, the first rendering resource includes an image resource, the resource parameters are used to indicate the image resolution, the at least one candidate resource is used to indicate a specified image at different resolutions, and the device parameters include a device model; the mapping module is used to determine a first candidate resource as the second rendering resource from the at least one candidate resource based on the resolution range indicated by the device model, wherein the image resolution indicated by the first candidate resource is within the resolution range.

[0022] In some embodiments, the first rendering resource includes a color resource, the resource parameters indicate a color code, the at least one candidate resource is used to indicate different colors under the same color system, and the device parameters include display brightness; the mapping module is used to determine a second candidate resource as the second rendering resource from the at least one candidate resource based on the display brightness, wherein the color code indicated by the second candidate resource meets a preset contrast requirement with the display brightness.

[0023] In some embodiments, the first page is a page in a first application; the acquisition module is used to acquire an application package corresponding to the first application; parse the application package to acquire the page code and the first rendering resource corresponding to the first page, wherein the page code includes code content related to the rendering logic of the first page; the display module is used to execute the page code of the first page, render the second rendering resource according to the rendering logic in the page code, and display the first page.

[0024] On the other hand, a computer device is provided, the computer device including a processor and a memory, the memory storing at least one instruction, at least one program, code set or instruction set, the at least one instruction, the at least one program, the code set or instruction set being loaded and executed by the processor to implement any of the page rendering methods described above.

[0025] On the other hand, a computer-readable storage medium is provided, wherein at least one instruction, at least one program, code set, or instruction set is stored therein, wherein the at least one instruction, the at least one program, the code set, or the instruction set is loaded and executed by a processor to implement any of the page rendering methods described above.

[0026] On the other hand, a computer program product or computer program is provided, comprising computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform any of the page rendering methods described above.

[0027] The beneficial effects of the technical solutions provided in this application include at least the following:

[0028] When a user requests to display the first page with a specified theme, the resource mapping relationship between the specified theme and the default theme is retrieved. By matching the rendering resources of the first page under the default theme with the resource mapping relationship, the rendering resources of the first page under the specified theme are obtained. The first page is then rendered and displayed based on these specified theme rendering resources. On one hand, the introduction of a resource mapping relationship records the correspondence between the rendering resources of the default theme and the specified theme. This allows resources under different themes to be replaced through the mapping relationship, enabling theme switching without changing the application code. Developers mainly focus on defining theme resources and establishing mapping relationships, without needing to repeatedly write implementation code for multiple themes on each page, simplifying the development process and improving development efficiency. On the other hand, as the application evolves, it may be necessary to add new themes or modify existing themes. Developers only need to modify the corresponding entries in the resource mapping relationship, without needing to delve into the code of each page, thus enhancing the application's extensibility. Attached Figure Description

[0029] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0030] Figure 1 This is a schematic diagram of a computer system provided in an exemplary embodiment of this application;

[0031] Figure 2 This is a flowchart of a page rendering method provided in an exemplary embodiment of this application;

[0032] Figure 3 This is a flowchart of a page rendering method provided in another exemplary embodiment of this application;

[0033] Figure 4 This is a schematic diagram illustrating the configuration of subject symbols provided in an exemplary embodiment of this application;

[0034] Figure 5 This is a schematic diagram of a theme switching interface provided in an exemplary embodiment of this application;

[0035] Figure 6 This is a flowchart of a page rendering method provided in yet another exemplary embodiment of this application;

[0036] Figure 7 This is a schematic diagram illustrating the configuration of subject symbols provided in another exemplary embodiment of this application;

[0037] Figure 8 This is a schematic diagram of the system architecture of a page rendering method provided in an exemplary embodiment of this application;

[0038] Figure 9 This is a system flowchart of an application page rendering method provided in an exemplary embodiment of this application;

[0039] Figure 10 This is a structural block diagram of a page rendering apparatus provided in an exemplary embodiment of this application;

[0040] Figure 11 This is a structural block diagram of a computer device provided in an exemplary embodiment of this application. Detailed Implementation

[0041] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments in this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0042] In this application, the terms "first" and "second" are used to distinguish between identical or similar items that have essentially the same function. It should be understood that there is no logical or temporal dependency between "first" and "second", nor is there any limitation on the quantity or execution order.

[0043] It should be noted that this application may display prompt interfaces, pop-ups, or output voice prompts before and during the collection of user data. These prompt interfaces, pop-ups, or voice prompts are used to inform the user that their data is being collected. This ensures that the application only begins the steps for collecting user data after receiving confirmation from the user regarding the prompt interface or pop-up; otherwise (i.e., without user confirmation), the steps for collecting user data end, meaning no user data is collected. In other words, all user data collected in this application is collected with the user's consent and authorization, and the collection, use, and processing of related user data must comply with relevant laws, regulations, and standards.

[0044] In related technologies, developers define implementation code for multiple themes and package resource files for each theme within the application's installation package. When a user selects a theme in the application, the client executes a corresponding callback function based on the selected theme. This callback function calls the specified theme code, loads the corresponding resource files, and the client then displays the application interface according to the user's selected theme. However, this method of defining multiple theme codes and packaging multiple resource files requires significant modifications to the application, resulting in a large workload during application development and reducing development efficiency.

[0045] Based on this, this application provides a page rendering method. On the one hand, it introduces a resource mapping relationship to record the correspondence between resources that need to be switched from the default theme to a specified theme. This allows resources under different themes to be replaced through the mapping relationship, achieving theme switching without changing the application code. Developers mainly focus on defining theme resources and establishing mapping relationships, without having to repeatedly write implementation code for multiple themes on each page, simplifying the development process and improving development efficiency. On the other hand, as the application evolves, it may be necessary to add new themes or modify existing themes. Developers only need to modify the corresponding entries in the resource mapping relationship, without having to delve into the code of each page, thereby enhancing the application's scalability. The page rendering method provided in this application can be applied to various page development scenarios with theme switching requirements, such as mobile applications (e.g., game applications, instant messaging applications), personal websites, e-commerce platforms, and educational platforms, and is not limited here.

[0046] The computer system involved in the embodiments of this application will be described below. The page rendering method provided in the embodiments of this application can be implemented by the terminal alone, by the server, or by the terminal and the server through data interaction. The embodiments of this application do not limit this. Optionally, the page rendering method is described using the interaction between the terminal and the server.

[0047] This is illustrative; please refer to it. Figure 1 The computer system involves a terminal 110 and a server 120, which are connected via a communication network 130.

[0048] The client of the first application is installed in the terminal 110. This application does not limit the form of the first application, including but not limited to App (Application), applet, etc. installed in the terminal 110, and it can also be in the form of a web page.

[0049] For illustrative purposes, when a user selects to open the first page of the first application with a specified theme, the client will read and parse the page code and default theme resources related to the first page from the installation package of the first application. The default theme resources refer to the rendering resources of the first page under the default theme, where theme resources refer to at least one of image resources, audio and video resources, color resources, font resources, etc.

[0050] The page code defines the execution logic of the first page. After the client parses the page code, it retrieves a resource mapping table between the default theme and the specified theme before executing the page code. This resource mapping table records the mapping relationship between resources in the default theme and the specified theme, such as the replacement rules for color resources and image resources. Optionally, the resource mapping table is pre-set by the developers and uploaded to the server 120. When the terminal 110 starts the client of the first application, it can retrieve the resource mapping table from the server 120.

[0051] After obtaining the resource mapping table, the client matches the default theme resources with the resource mapping table. Based on the rules in the resource mapping table, it determines the specified theme resources, which are the rendering resources for the first page under that specified theme. After obtaining the specified theme resources, the client begins executing the page code. When it needs to render page elements of the first page, the client loads the specified theme resources to replace the default theme resources and uses the rendering engine to render the specified theme resources according to the logic defined in the page code. Finally, the client displays the first page with the specified theme as the display mode.

[0052] In some embodiments, the mapping relationship recorded in the resource mapping table can be implemented as a mapping relationship between default theme resources and specified resource symbols, for example: "ffffff:C0", where ffffff represents a hexadecimal color code, ffffff refers to white, and C0 represents the identifier of the color resource that matches white under the specified theme. After the default theme resources are matched with the resource mapping table, at least one specified resource symbol is obtained. The terminal 110 sends at least one specified resource symbol to the server 120. The server 120 queries the resource library based on at least one specified resource symbol to obtain the specified theme resource and sends the specified theme resource to the terminal 110. Alternatively, the terminal 110 has a resource library pre-stored. After obtaining the specified resource symbol, the terminal 110 queries the resource library based on at least one specified resource symbol to obtain the specified theme resource.

[0053] It is worth noting that the aforementioned terminal 110 includes, but is not limited to, mobile terminals such as mobile phones, tablets, portable laptops, smart voice interaction devices, smart home appliances, and vehicle terminals, and can also be desktop computers, etc.; the server 120 can be an independent physical server, a server cluster or distributed system composed of multiple physical servers, a cloud server that provides basic cloud computing services, or a node in a blockchain system.

[0054] Based on the above introduction, the page rendering method provided in this application will be explained. Figure 2 This is a flowchart of a page rendering method provided in an embodiment of this application. Taking the application of this method in a terminal as an example, the method includes the following steps 210 to 240.

[0055] Step 210: Obtain the first rendering resource of the first page under the first page theme.

[0056] The first page refers to the page provided by the first application, which can be a game application, a game auxiliary application, an instant messaging application, a video application, a news application, etc., without limitation here. Optionally, the first page refers to a single page; or the first page refers to a combination of pages containing multiple subpages.

[0057] The first page theme indicates the overall visual style of the first page, such as a light theme mode, a dark theme mode, or a distinctive theme mode (e.g., a cartoon-style theme mode, a minimalist theme mode, etc.). In some embodiments, the first page theme refers to a pre-set default page theme. This is illustrative; the first page theme is the base theme used by the developers when designing the first page, such as using a light theme mode as the first page theme.

[0058] The first rendering resource is used to render page elements in the first page using the first page theme as the display mode. These page elements include display elements such as backgrounds, text, borders, and controls. Optionally, the first rendering resource includes at least one of the following resources:

[0059] 1. Color resources: Color resources are used to define the colors of page elements in the first page, such as the background color, text color, border color, and control color of the first page.

[0060] 2. Image resources, including visual elements such as background images and control icons on the first page.

[0061] 3. Font resources: Font resources are used to define the display style of text on the first page, including font type, size, weight, color, etc.

[0062] It should be noted that the examples of the first rendering resources mentioned above are merely illustrative and are not intended to be limiting. For example, the first rendering resource can also be implemented as a layout resource, audio and video resources, etc. Layout resources are used to define the layout of various page elements in the first page, including the position, spacing, and relative relationships of each page element; audio and video resources include background music, control-triggered animations, etc.

[0063] In some embodiments, the first page is a page in a first application. Optionally, the application package corresponding to the first application is obtained; the application package is parsed to obtain the page code and the first rendering resource corresponding to the first page, wherein the page code includes code content related to the rendering logic of the first page.

[0064] To illustrate, an application package is typically a bundled file containing the code and resources required to run the first application. When a client of the first application needs to open the first page, the client parses the application package to obtain the executable code (i.e., page code) and rendering resources (i.e., first rendering resources) related to the first page. Optionally, the corresponding page code can be found in the application package based on page identifiers such as URLs (Uniform Resource Locators) and page IDs (identification numbers).

[0065] Optionally, the application package is parsed to obtain the page code and resource storage address corresponding to the first page; the first rendering resource is obtained based on the resource storage address.

[0066] To illustrate, the first rendering resource is stored on the server. The storage address of the first rendering resource can be obtained by parsing the application package. The first rendering resource can be downloaded from the server to the terminal by parsing the storage address.

[0067] Optionally, upon receiving a display request instruction to display the first page with the second page theme, the first rendering resource of the first page under the first page theme is obtained; or, when the client of the first application starts, the first rendering resource of the first page under the first page theme is obtained.

[0068] Step 220: Upon receiving a display request instruction to display the first page with the second page theme, obtain the resource mapping relationship corresponding to the second page theme.

[0069] In some embodiments, the theme of the first page is the same as the theme of the second page. Illustratively, when a user launches the client of the first application and enters the homepage of the first application, a display request for the homepage is triggered. If the user has not set a theme, the homepage of the first application will be displayed with the default light-colored theme (i.e., the first page theme). The display request for the homepage may include the theme identifier of the light-colored theme. When the client receives this display request, it parses the display request to obtain the theme identifier of the light-colored theme, and obtains the resource mapping relationship corresponding to the light-colored theme based on the theme identifier.

[0070] In other embodiments, the theme of the first page differs from the theme of the second page. Illustratively, a user sets the theme within the first application. This theme setting can be a global setting (i.e., a theme setting for all pages of the first application) or a local setting (i.e., a theme setting for a portion of the first application's pages). The user can switch the theme of the first application from a light theme to a dark theme. When the user requests to open the homepage again, a homepage display request is triggered. This homepage display request may include a dark theme identifier. When the client receives this display request, it parses the request to obtain the dark theme identifier and retrieves the resource mapping relationship corresponding to the dark theme based on the dark theme identifier.

[0071] The above resource mapping relationship is used to indicate the mapping relationship between the display mode of page elements under the first page theme and the display mode of page elements under the second page theme.

[0072] As an illustration, resource mapping relationships can exist in various forms, such as configuration files, database tables, and data structures in program code. The following explanation will mainly focus on resource mapping relationships implemented as resource mapping tables.

[0073] In some embodiments, the first rendering resource includes at least one of color resources, image resources, font resources, etc.

[0074] Optionally, the resource mapping relationship includes the mapping relationship between the first color resource of the first page theme and the second color resource of the second page theme. Illustratively, the resource mapping relationship includes the mapping relationship between white under a light theme and black under a dark theme.

[0075] Optionally, the resource mapping relationship includes the mapping relationship between the first image resource of the first page theme and the second image resource of the second page theme. Illustratively, the resource mapping relationship includes the mapping relationship between control icon a under the light theme and control icon b under the dark theme.

[0076] Optionally, the resource mapping relationship includes the mapping relationship between the first font resource of the first page theme and the second font resource of the second page theme. For illustration, the resource mapping relationship includes the mapping relationship between font 1 under the minimalist theme and font 2 under the cartoon theme.

[0077] Optionally, the resource mapping relationship includes at least one of global mapping relationship, local mapping relationship, etc.

[0078] The global mapping relationship indicates the mapping between the display modes of global page elements under the first page theme and the display modes of global page elements under the second page theme. For example, using color resources, the global mapping relationship indicates that page elements displayed as white in light mode on the first page will be displayed as black in dark mode.

[0079] The local mapping relationship indicates the mapping between the display modes of local page elements under the first page theme and the display modes of local page elements under the second page theme. For example, using color resources, the local mapping relationship indicates that a background displayed as white in light mode will be displayed as black in dark mode.

[0080] In some embodiments, the resource mapping relationship includes the mapping relationship between the first resource identifier corresponding to the first rendering resource and the second resource identifier corresponding to the second rendering resource.

[0081] Optionally, the first resource identifier is used to indicate the first rendering resource. For example, for the color resource white, the hexadecimal color code of white can be used as the first resource identifier, i.e., "ffffff". For the image resource control icon a, the storage address of control icon a can be used as the first resource identifier, such as a URL; or an icon identifier can be used to represent control icon a, such as "001".

[0082] Optionally, the second resource identifier is used to indicate the second rendering resource. For example, for the color resource black, a preset theme symbol can be used to represent it, such as "C1". For the image resource control icon b, a preset theme symbol can be used to represent the control icon b, such as "P1".

[0083] Optionally, the above resource mapping relationships are pre-defined by the developers.

[0084] In illustrative terms, the developer defines at least one theme and designs rendering resources for at least one theme; after designing the rendering resources corresponding to at least one theme, based on the resource mapping relationship between the first page theme and at least one theme, at least one theme includes the second page theme.

[0085] In some embodiments, resource mapping relationships corresponding to at least one topic are cached, and the at least one topic includes a second page topic; the resource mapping relationship corresponding to the second page topic is determined from the resource mapping relationships corresponding to the at least one topic.

[0086] To illustrate, when the client of the first application starts, it obtains at least one resource mapping relationship corresponding to each theme from the server; when it receives a display request indicating that the first page is displayed with the second page theme, it obtains the resource mapping relationship corresponding to the second page theme from the resource mapping relationship corresponding to at least one theme cached by the client according to the theme identifier corresponding to the second page theme.

[0087] In the above embodiments, by caching the resource mapping relationship corresponding to at least one theme, when a specific page needs to be displayed, the mapping relationship can be directly obtained from the client cache without sending a request to the server again, which reduces the number of network requests, reduces the server load, and speeds up the loading speed of resources.

[0088] In other embodiments, upon receiving a display request indicating that the first page should be displayed with a second page theme, a mapping relationship retrieval request is sent to the server. The server is used to determine the resource mapping relationship corresponding to the second page theme from resource mapping relationships corresponding to at least one theme when it receives the mapping relationship retrieval request; and to retrieve the resource mapping relationship corresponding to the second page theme sent by the server.

[0089] As an illustration, when a display request is triggered, the resource mapping relationship corresponding to the theme of the second page is obtained from the server in real time.

[0090] In the above embodiments, since each request is made in real time, the resource mapping relationship can be dynamically adjusted according to the user's specific needs or the latest status of the server, which improves the system's flexibility and responsiveness. Moreover, real-time acquisition of resource mapping relationships does not require storing a large amount of mapping relationship data on the client, thereby reducing the client's storage pressure.

[0091] Optionally, the above display request is triggered after the user sets a second display theme. Alternatively, the above display request is triggered based on the device parameters of the current terminal. For example, the second display theme refers to a dark theme. When the current clock time of the terminal is within a preset time range (e.g., 10:00 PM to 5:00 AM the next day), the display request for the dark theme page is triggered when the user opens the first page.

[0092] Step 230: Match the first rendering resource with the resource mapping relationship to obtain the mapped second rendering resource.

[0093] The second rendering resource is used to render page elements in the first page using the second page theme as the display mode.

[0094] In some embodiments, the resource mapping relationship includes the mapping relationship between the first resource identifier corresponding to the first rendering resource and the second resource identifier corresponding to the second rendering resource.

[0095] Optionally, a second resource identifier that has a mapping relationship with the first resource identifier is obtained from the resource mapping relationship; and the second rendering resource is loaded according to the second resource identifier.

[0096] Indicatively, the process involves obtaining a mapping relationship containing a first resource identifier from the resource mapping relationship, obtaining a second resource identifier from the mapping relationship containing the first resource identifier, and loading a second rendering resource based on the second resource identifier.

[0097] Wherein, when the first rendering resource is a color resource, the first resource identifier includes the color code corresponding to the color resource; when the first rendering resource is an image resource, the first resource identifier includes at least one of the storage address, image identifier number, etc., corresponding to the image resource.

[0098] For illustration purposes, if the first rendering resource is white, the hexadecimal color code of white can be used as the first resource identifier, that is, the first resource identifier is "ffffff", and the mapping relationship containing "ffffff" is "ffffff: C1", then the second resource identifier is determined to be C1; if the first rendering resource is a control image a, the identifier a can be used as the first resource identifier, that is, the first resource identifier is "identifier a", and the mapping relationship containing "identifier a" is "identifier a: P1", then the second resource identifier is determined to be P1.

[0099] The second rendering resource is retrieved from the resource list of the second page theme cached on the client based on the second resource identifier; alternatively, the second resource identifier is sent to the server, the server retrieves the second rendering resource from the resource list of the second page theme based on the second resource identifier, and then sends the second rendering resource to the client.

[0100] In the above embodiments, the resource identifier serves as an identifier for the resource, enabling the terminal to quickly and accurately determine the second rendering resource. The resource identifier can greatly simplify the resource search process and improve the efficiency of resource loading and use.

[0101] For color resources, using color coding as resource identifiers ensures accurate color representation and rapid identification, while the direct color coding method avoids potential ambiguity caused by color names. For image resources, using storage addresses, image identifiers, etc., as resource identifiers ensures the uniqueness and accessibility of image resources. The storage address directly points to the physical location of the image data, while the image identifier can identify the image at an abstract level, facilitating its use in resource management and referencing.

[0102] In some embodiments, upon receiving an update request for resource mapping relationships corresponding to at least one topic, the resource mapping relationships corresponding to at least one topic are updated.

[0103] Optionally, update requests include at least one of deletion requests, addition requests, and modification requests. Illustratively, receiving a deletion request removes the corresponding resource mapping relationship, which helps clean up outdated resource information and maintain the accuracy and validity of resource mapping relationships. When a new resource mapping requirement arises, receiving an addition request creates a new resource mapping relationship, thereby dynamically expanding the resource set. When the mapping relationship of existing resources needs to be adjusted (e.g., changing a white-to-black mapping relationship to a white-to-purple mapping relationship), receiving a modification request updates the corresponding resource mapping relationship, which helps maintain the timeliness and accuracy of resource mapping relationships to reflect current business logic and user needs.

[0104] In the above embodiments, resource mapping relationships can be updated at runtime, making the application more flexible in adapting to changing needs, which helps to improve user experience and maintain the application's attractiveness and competitiveness.

[0105] Step 240: Render and display the first page based on the second rendering resource.

[0106] Optionally, the page code of the first page is executed, and the second rendering resource is rendered according to the rendering logic in the page code to display the first page.

[0107] To illustrate, after obtaining the second rendering resource, the page code of the first page is executed. When it is necessary to render the page elements of the first page, the client loads the second rendering resource to replace the first rendering resource, and uses the rendering engine to render the second rendering resource according to the logic defined in the page code. Finally, the client displays the first page with the theme of the second page as the display mode.

[0108] Taking color resources as an example, the page code includes "backgroundColor:'color a'", and the corresponding resource file records "'identifier a' = ffffff". That is, "identifier a" represents white in the first rendering resource. The hexadecimal color code "ffffff" corresponding to white is obtained as the first resource identifier. The mapping relationship matching "ffffff" in the resource mapping relationship is "ffffff: identifier b". Therefore, the second resource identifier is determined to be "identifier b". This "identifier b" represents the color resource matching white in the second page theme. Assuming that "identifier b" represents black in the second rendering resource, the hexadecimal color code "000000" corresponding to black is obtained and replaced with "ffffff" in the resource file. The resource file is then updated to "'identifier a' = 000000". So when the page code is executed, "backgroundColor:'identifier a'" means that the background color of the first page will be rendered as black.

[0109] In some embodiments, the aforementioned "identifier a" and "identifier b" can be implemented as the same identifier. Taking "identifier a" and "identifier b" as "C1" as an example, the page code includes "backgroundColor:'C1'". The resource file corresponding to the first rendering resource records "C1 = ffffff", meaning that C1 represents white in the first rendering resource. The hexadecimal color code "ffffff" corresponding to white is obtained as the first resource identifier. The mapping relationship matching the first resource identifier "ffffff" in the resource mapping relationship is "ffffff:C1", thus determining the second resource identifier as C1. Based on the second resource identifier C1, the resource file corresponding to the second rendering resource is obtained. This resource file records "C1 = 000000", meaning that C1 represents black in the second rendering resource. The resource file corresponding to the second rendering resource is used to replace the resource file corresponding to the first rendering resource. Therefore, when the page code is executed, "backgroundColor:'C1'" indicates that the background color of the first page will be rendered as black.

[0110] In the above embodiments, dynamic replacement of resources is achieved through resource mapping relationships. The theme switching of the page can be realized without modifying the application code. Moreover, when the theme needs to be updated frequently, the solution provided by the above embodiments can significantly reduce maintenance costs. Developers only need to update the resource mapping relationships and corresponding resource files, without modifying the application code, which greatly simplifies the maintenance process.

[0111] In summary, the page rendering method provided in this application, when a user requests to display the first page with a specified theme, obtains the resource mapping relationship between the specified theme and the default theme. By matching the rendering resources of the first page under the default theme with the resource mapping relationship, the rendering resources of the first page under the specified theme are obtained, and the first page is rendered and displayed according to the rendering resources under the specified theme. On the one hand, the introduction of a resource mapping relationship to record the correspondence between the rendering resources of the default theme and the specified theme allows resources under different themes to be replaced through the mapping relationship, realizing theme switching without changing the application code. Developers mainly focus on the definition of theme resources and the establishment of mapping relationships, without having to repeatedly write implementation code for multiple themes in each page, simplifying the development process and improving development efficiency. On the other hand, as the application develops, it may be necessary to add new themes or modify existing themes. Developers only need to modify the corresponding entries in the resource mapping relationship, without having to delve into the code of each page, thereby enhancing the scalability of the application.

[0112] In some embodiments, the resource mapping relationship corresponding to the second page theme is a mapping relationship cached on the client before the display request is received. Figure 3 This is a flowchart of a page rendering method provided in an embodiment of this application. Taking the application of this method in a terminal as an example, the method includes the following steps 301 to 306.

[0113] Step 301: Cache at least one resource mapping relationship corresponding to a topic.

[0114] At least one of the themes includes a second page theme.

[0115] Optionally, at least one resource mapping relationship corresponding to a topic can be cached from the server.

[0116] As an illustration, developers set up resource mapping relationships for at least one theme on the development side and upload these resource mapping relationships to the server. When the client of the terminal starts the first application, it caches the resource mapping relationships for at least one theme from the server.

[0117] Developers can set multiple theme symbols, each theme symbol representing a resource, and each theme symbol can set at least one rendering resource corresponding to the theme.

[0118] This is illustrative; please refer to it. Figure 4 It shows a schematic diagram of the configuration of a theme symbol, such as Figure 4 As shown, theme symbol 401 indicates a color resource. In a light theme, theme symbol 401 represents white, and in a dark theme, theme symbol 401 represents black.

[0119] After configuring n theme symbols, for the light theme, convert the n theme symbols into a first mapping table corresponding to the light theme. The first mapping table contains n mapping relationships. Assume the i-th mapping relationship records the mapping between the hexadecimal hexadecimal color value of the target color under the default theme and the i-th theme symbol (e.g., Ci), where n and i are positive integers and i ≤ n. For the dark theme, convert the n theme symbols into a second mapping table corresponding to the dark theme. The second mapping table contains n mapping relationships, where the i-th mapping relationship records the mapping between the hexadecimal hexadecimal color value of the target color under the default theme and the i-th theme symbol (e.g., Ci).

[0120] The default theme can be a light theme, in which case the target color is the color indicated by the i-th theme symbol under the light theme; or the default theme is a dark theme, in which case the target color is the color indicated by the i-th theme symbol under the dark theme. The first and second mapping tables mentioned above represent the resource mapping relationships corresponding to at least one theme.

[0121] Upon receiving an update request for resource mapping relationships corresponding to at least one topic, update the resource mapping relationships corresponding to at least one topic.

[0122] Step 302: Upon receiving a display request instruction to display the first page with the second page theme, obtain the first resource identifier corresponding to the first rendering resource of the first page under the first page theme.

[0123] The first rendering resource is used to render the page elements in the first page with the first page theme as the display mode.

[0124] Indicatively, the first resource identifier is used to indicate the first rendering resource. For example, for a color resource - white, the hexadecimal color code of white can be used as the first resource identifier, i.e., "ffffff". For an image resource - control icon a, the storage address of control icon a can be used as the first resource identifier, such as a URL; or the icon name can be used to represent control icon a, such as "001".

[0125] Step 303: Determine the resource mapping relationship corresponding to the second page theme based on the display request in the resource mapping relationship corresponding to at least one theme.

[0126] The resource mapping relationship corresponding to the second page theme is used to indicate the mapping relationship between the display mode of page elements under the first page theme and the display mode of page elements under the second page theme.

[0127] Indicatively, the display request includes a theme identifier corresponding to the second page theme, and the resource mapping relationship corresponding to the second page theme is determined from at least one resource mapping relationship corresponding to a theme based on the theme identifier corresponding to the second page theme.

[0128] Optionally, the resource mapping relationship corresponding to the second page theme records the mapping relationship between the first resource identifier corresponding to the first rendering resource and the theme symbol corresponding to the second rendering resource.

[0129] Optionally, theme symbols are used to indicate the second rendering resource. For example, the theme symbol is the one that the developers pre-set on the development side, such as the theme symbol "C1", which represents the color resource - black under the second page theme. The theme symbol "P1" represents the image resource - control icon b under the second page theme.

[0130] In this embodiment of the application, the definition of subject symbols serves two purposes:

[0131] (1) Construct a mapping relationship. Use theme symbols to represent the second rendering resource in the mapping relationship, such as "ffffff:C1".

[0132] (2) Write rendering code. To set the background color of the page, the code can be implemented as "backgroundColor:'C1'". The color assigned to the background is abstractly represented by the theme symbol "C1", so that the resource can be replaced without modifying the code. For example, when the resource file associated with this code is the resource file corresponding to the first theme, and the resource file records "C1=ffffff", then "backgroundColor:'C1'" means that the background color of the first page will be rendered as white. When the resource file associated with this code is replaced with the resource file corresponding to the second display theme, and the resource file records "C1=000000", then "backgroundColor:'C1'" means that the background color of the first page will be rendered as black.

[0133] Step 304: Match the first resource identifier corresponding to the first rendering resource with the resource mapping relationship to obtain the theme symbol corresponding to the second rendering resource.

[0134] Optionally, the mapping relationship containing the first resource identifier is obtained from the resource mapping relationship, and the topic symbol is obtained from the mapping relationship containing the first resource identifier.

[0135] For illustration, a white hexadecimal color code is used as the first resource identifier, that is, the first resource identifier is "ffffff". The mapping relationship that matches the first resource identifier "ffffff" in the resource mapping relationship is "ffffff:C1", then the theme symbol is determined to be C1.

[0136] Step 305: Load the second rendering resource based on the theme symbol corresponding to the second rendering resource.

[0137] The second rendering resource is used to render page elements in the first page using the second page theme as the display mode.

[0138] Optionally, the second rendering resource can be retrieved from the resource list of the second page theme cached on the client based on the theme symbol; or, the theme symbol can be sent to the server, the server can retrieve the second rendering resource from the resource list of the second page theme based on the theme symbol, and then send the second rendering resource to the client.

[0139] Step 306: Render and display the first page based on the second rendering resource.

[0140] After obtaining the second rendering resource, when it is necessary to render the page elements of the first page, the client will load the second rendering resource to replace the first rendering resource, and use the rendering engine to render the second rendering resource according to the rendering logic of the page code corresponding to the first page. Finally, the client displays the first page with the theme of the second page as the display mode.

[0141] This is illustrative; please refer to it. Figure 5 The diagram illustrates a theme switching scenario. Page 510 is the first page under a light theme. When a theme switching occurs, the page rendering method provided in this application is applied to re-render the first page to obtain page 520, which is the first page under a dark theme.

[0142] In some embodiments, the first page includes multiple components. Illustratively, a component is the basic unit for building a user interface (UI), and can be a button, text box, image, video player, etc. Each component requires corresponding code and rendering resources for rendering.

[0143] Optionally, multiple component rendering resources are configured based on the second rendering resource; the first page is rendered and displayed based on the component rendering resources corresponding to the multiple components.

[0144] Optionally, the first page refers to a combination of pages containing multiple subpages, which use one or more components when displayed. Illustratively, the reusability of components means they can be reused across different subpages.

[0145] Optionally, multiple component rendering resources are configured through the second rendering resource; when a display request for a target subpage is received from multiple subpages, the target subpage is rendered and displayed based on the component rendering resources of at least one component corresponding to the target subpage.

[0146] To illustrate, when a user triggers a request to display a target subpage, the client analyzes the structure of the target subpage, determines the components it needs to use, and based on the configuration of the second rendering resource, the client can find and load the rendering resources of all the components required by the target subpage, use the loaded rendering resources to render the target subpage, and display it to the user.

[0147] In the above embodiments, by pre-configuring and managing the rendering resources of components, the client can respond quickly when it receives a display request, improving the page loading speed and rendering efficiency. Furthermore, it only loads the component rendering resources required by the target subpage, avoiding unnecessary resource loading and thus optimizing resource utilization efficiency.

[0148] In some embodiments, the display request includes custom theme hints that describe the visual style requirements for displaying the first page.

[0149] Indicatively, the theme prompt can be the prompt text entered by the user in the theme settings area of ​​the first application. This prompt text can be something like "Choose warm colors as the main color scheme, add retro patterns or fonts to create a nostalgic and retro atmosphere," etc. There are no restrictions here.

[0150] Optionally, the method of displaying the first page based on the topic prompt information also includes the following steps:

[0151] Step 1: If the theme hint information does not match the stored theme, input the first rendering resource and the theme hint information into the mapping relationship to generate the model.

[0152] The mapping generation model is used to generate predicted mappings based on prompts from topic hints.

[0153] Optionally, the stored theme can be implemented as at least one theme cached to the client as described above.

[0154] Optionally, the topic hint information and the topic names of the stored topics are input into the topic matching model, and a matching score is output. The matching score is used to characterize the degree of matching between the topic name and the topic hint information. If the matching score is less than a preset score, it is determined that the topic hint information does not match the stored topics.

[0155] The topic matching model is a pre-trained machine learning model (such as a neural network). The training process of this topic matching model is as follows: Sample data is acquired, including multiple sample topic hint texts and multiple topic names. A sample topic hint text and a specific topic name are input into the sample machine learning model, which outputs a predicted matching score. A reference matching score is labeled between the sample topic hint text and the topic name; this reference matching score is manually labeled. The target loss is determined based on the difference between the predicted matching score and the reference matching score. The sample machine learning model is trained using the target loss, iterating through multiple sample topic hint texts and multiple topic names until the calculated target loss is less than the preset loss, or the training iterations reach the preset number. At this point, the training of the sample machine learning model stops, and the resulting sample machine learning model is the topic matching model.

[0156] After determining that the theme hints do not match any of the stored themes, the mapping relationship between the theme hints and the first rendering resource input is generated in the model.

[0157] Taking the first rendering resource, which includes color resource 1, color resource 2, image resource a, and image resource b, as an example, the mapping relationship generation model establishes mapping relationships for color resource 1, color resource 2, image resource a, and image resource b respectively. First, it obtains the resource mapping table corresponding to the theme of the first page. The resource mapping table includes resource mapping relationships indicated by multiple theme symbols, such as: color resource 1: C1, color resource 1: C2. Then, the mapping relationship generation model generates a prediction resource library based on the resource mapping table. For example, for color resource 1: C1, the mapping relationship generation model determines the specific color that matches color resource 1 under the visual style described in the theme prompt based on the theme prompt description. Then, it stores C1 and the predicted color in the prediction resource library, such as storing "C1 = fcfcfc" in the prediction resource library. Finally, the resource mapping table and the prediction resource library are obtained as the prediction mapping relationship.

[0158] In some embodiments, a theme resource library corresponding to the target theme is obtained. The theme resource library includes multiple theme symbol-target resource storage pairs, wherein the multiple theme symbols in the theme resource library correspond one-to-one with the multiple theme symbols in the resource mapping table corresponding to the first page theme, and the target resource indicates the rendering resource under the target theme. Optionally, the target theme is the theme with the highest stored theme matching score.

[0159] The theme prompt information, the first rendering resource, and the theme resource library corresponding to the target theme are input into the mapping relationship generation model. First, the resource mapping table corresponding to the theme of the first page is obtained. The resource mapping table includes resource mapping relationships indicated by multiple theme symbols. Then, the mapping relationship generation model adjusts the theme resource library corresponding to the target theme according to the resource mapping table to obtain the predicted resource library. For example, for color resource 1: C1, the mapping relationship generation model will adjust the target resource stored in the theme resource library corresponding to the target theme corresponding to C1 according to the description of the theme prompt. For example, "C1 = fcfcff" is adjusted to "C1 = fcfcfc", and then "C1 = fcfcfc" is stored in the predicted resource library.

[0160] Optionally, the mapping relationship generation model is a pre-trained neural network model. The training process of the mapping relationship generation model is similar to the inference process, and will not be described in detail here.

[0161] Step 2: Match the first rendering resource with the prediction mapping relationship to obtain the prediction rendering resource.

[0162] The predicted rendering resource displays the first page that matches the description in the theme prompt information.

[0163] The prediction mapping relationship corresponding to the second page theme records the mapping relationship between the first resource identifier corresponding to the first rendering resource and the theme symbol corresponding to the predicted rendering resource. The prediction mapping relationship contains the mapping relationship with the first resource identifier, and the theme symbol is obtained from the mapping relationship containing the first resource identifier. Based on the theme symbol, the predicted rendering resource is retrieved from the predicted resource library.

[0164] Step 3: Render and display the first page based on the predicted rendering resources.

[0165] After obtaining the predictive rendering resources, when it is necessary to render the page elements of the first page, the client loads the predictive rendering resources to replace the first rendering resources, and uses the rendering engine to render the predictive rendering resources according to the rendering logic of the page code corresponding to the first page. Finally, the client displays the first page that matches the description of the theme prompt information.

[0166] In the above embodiments, when a user inputs custom theme prompts, the mapping relationship generation model can automatically generate a predicted mapping relationship based on the theme prompts. This process automates and automates the process from user input to page rendering, greatly reducing the workload of developers and improving work efficiency. Furthermore, the predicted mapping relationship generated by the mapping relationship generation model can accurately reflect the user's visual style requirements. This high degree of matching makes the final rendered first page more in line with the user's expectations, thereby improving the overall user experience.

[0167] In summary, introducing resource mapping records the correspondence between the default theme and the rendering resources of a specified theme. This allows resources under different themes to be replaced through mapping, enabling theme switching without changing the application code. Developers mainly focus on defining theme resources and establishing mapping relationships, eliminating the need to repeatedly write implementation code for multiple themes on each page, thus simplifying the development process and improving efficiency. Furthermore, by caching the resource mapping relationship for at least one theme, when a page with a specific theme needs to be displayed, the mapping relationship can be directly retrieved from the client cache without sending another request to the server. This reduces the number of network requests, lowers server load, and speeds up resource loading.

[0168] In some embodiments, the resource mapping relationship corresponding to the theme of the second page indicates that there are at least one candidate resource, and the second rendering resource can be determined from the at least one candidate resource according to the device parameters corresponding to the first page. Figure 6 This is a flowchart of a page rendering method provided in an embodiment of this application. Taking the application of this method in a terminal as an example, the method includes the following steps 601 to 606.

[0169] Step 601: Obtain the first rendering resource of the first page under the first page theme.

[0170] The first rendering resource is used to render the page elements in the first page with the first page theme as the display mode.

[0171] Optionally, when the client of the first application starts, it caches the resource mapping relationship corresponding to at least one theme. Among the cached resource mapping relationships corresponding to at least one theme, the resource mapping relationship corresponding to the second display theme records the mapping relationship between the first resource identifier corresponding to the first rendering resource and the theme symbol, wherein the theme symbol corresponds to multiple candidate resources under the second display theme.

[0172] Developers can set multiple theme symbols, each theme symbol representing a resource. Each theme symbol can set at least one rendering resource group corresponding to a theme, which includes multiple candidate resources.

[0173] This is illustrative; please refer to it. Figure 7 It shows a schematic diagram of the configuration of a theme symbol, such as Figure 7 As shown, theme symbol 701 indicates image resources. Under a light theme, theme symbol 701 is configured with 3 image resources, which represent icon a at 1x, 2x, and 3x resolutions. Under a dark theme, theme symbol 701 is also configured with 3 image resources, which represent icon b at 1x, 2x, and 3x resolutions.

[0174] After configuring m theme symbols, for the light theme, the m theme symbols are converted into a third mapping table corresponding to the light theme. The third mapping table includes m mapping relationship groups, and each mapping relationship group includes at least one candidate mapping relationship. Assume that the j-th mapping relationship group records the mapping relationship between the image identifier under the default theme and the j-th theme symbol (e.g., Cj), where m and j are positive integers and j ≤ m. For the dark theme, the m theme symbols are converted into a fourth mapping table corresponding to the dark theme. The fourth mapping table includes m mapping relationship groups, and each mapping relationship group includes at least one candidate mapping relationship. The j-th mapping relationship group records the mapping relationship between the image identifier under the default theme and the j-th theme symbol (e.g., Cj).

[0175] The default theme can be a light theme, in which case the image identifier can be "icon a"; or the default theme can be a dark theme, in which case the image identifier can be "icon b".

[0176] It should be noted that the above examples of rendering resource groups are only illustrative and are not limited in this application embodiment. For example, the theme symbol 701 under the dark theme can also refer to color resources. The theme symbol 701 can be configured with 3 colors, but these 3 colors belong to the same color system, such as light green, dark green and dark green.

[0177] Step 602: Upon receiving a display request instruction to display the first page with the second page theme, obtain the resource mapping relationship corresponding to the second page theme.

[0178] Resource mapping relationships are used to indicate the mapping relationship between the display modes of page elements under the first page theme and the display modes of page elements under the second page theme.

[0179] Optionally, upon receiving a display request indicating that the first page should be displayed with a second page theme, the first resource identifier corresponding to the first rendering resource of the first page under the first page theme is obtained; and the resource mapping relationship corresponding to the second page theme is determined based on the display request in the resource mapping relationship corresponding to at least one theme.

[0180] The resource mapping relationship corresponding to the second page theme records the mapping relationship between the first resource identifier and the theme symbol corresponding to the first rendering resource, where the theme symbol corresponds to multiple candidate resources under the second display theme.

[0181] Step 603: Match the first rendering resource with the resource mapping relationship to obtain at least one candidate resource under the theme of the second page.

[0182] The resource parameters are different for different candidate resources.

[0183] Optionally, different types of candidate resources have different resource parameters. For example, the resource parameters of image resources can be image resolution, image size, etc.; the resource parameters of color resources can be the color encoding itself, such as hexadecimal hex color values.

[0184] Schematic: Using white hexadecimal color coding as the first resource identifier, i.e., the first resource identifier is "ffffff". The mapping relationship matching the first resource identifier "ffffff" in the resource mapping relationship is "ffffff:C1", thus determining the theme symbol as C1. Based on the theme symbol C1, a candidate resource group is retrieved from the resource list of the second rendered resource cached by the client. The candidate resource group includes at least one candidate resource; alternatively, the theme symbol C1 is sent to the server, which retrieves the candidate resource group from the resource list of the second rendered resource based on the theme symbol C1, and then sends the candidate resource group to the client.

[0185] Step 604: Obtain device parameters based on the parameter type of the resource parameters.

[0186] Among them, device parameters refer to the parameters of the computer device used to display the first page, and the parameter types of resource parameters match the parameter types of device parameters.

[0187] Optionally, the device parameters can be implemented as at least one of the following: the device model of the computer device, display parameters, etc.

[0188] Illustratively, when the first rendering resource includes image resources, the resource parameters include image resolution, at least one candidate resource is used to indicate a specified image at a different resolution, and the device parameters include device model; when the first rendering resource includes color resources, the resource parameters indicate color encoding, at least one candidate resource is used to indicate different colors within the same color family, and the device parameters include display brightness.

[0189] Step 605: Determine a second rendering resource from at least one candidate resource based on device parameters.

[0190] Optionally, when the first rendering resource is implemented as an image resource and the device parameters are implemented as a device model, a first candidate resource is determined as a second rendering resource from at least one candidate resource based on the resolution range indicated by the device model, wherein the image resolution indicated by the first candidate resource is within the resolution range.

[0191] In the first application, images of different resolutions are displayed according to the model of different devices to ensure the best display effect on different devices. Assume that the maximum resolution supported by device 1 is 2532x1170 (simplified to the range of 2500x1200), and the maximum resolution supported by device 2 is 3200x1440 (simplified to the range of 3200x1400). There are three images of different resolutions as candidate resources: image A: 1080x1920, image B: 2048x3072, and image C: 2560x1440.

[0192] Obtain the model of the currently running device, and based on the device model, find the corresponding resolution range. For example, if the current device is device 1, the resolution range is 2500x1200. Iterate through all candidate resources and find images whose resolution is within the resolution range of the current device. Among them, the resolution of image C (2560x1440) is within the resolution range of device 1, so image C is selected as the second rendering resource.

[0193] In the above embodiments, by selecting the most suitable image resources according to the actual resolution range of the device, it can be ensured that the image can be displayed in the best state on different devices, avoiding the problem of slow loading due to excessively high image resolution or the problem of low resolution affecting clarity, and improving the user experience when switching themes.

[0194] Optionally, when the first rendering resource is implemented as a color resource and the device parameter is implemented as display brightness, a second candidate resource is determined from at least one candidate resource as the second rendering resource based on the display brightness, wherein the color code indicated by the second candidate resource meets the preset contrast requirement for the display brightness.

[0195] Display brightness refers to the current brightness level of the device screen.

[0196] To illustrate, the process involves obtaining a first brightness value corresponding to the current display brightness. For each candidate color resource (e.g., black, dark gray, light gray, etc.), the following steps are performed: convert the color code of the candidate color resource into a second brightness value; calculate the contrast ratio based on the first and second brightness values; compare the calculated contrast ratio with a preset contrast ratio; if the contrast ratio is greater than or equal to the preset contrast ratio, the candidate color resource is considered to meet the preset contrast ratio requirement under the current display brightness. If multiple candidate color resources meet the contrast ratio requirement, the candidate color resource with the closest contrast ratio to the preset contrast ratio is selected as the second candidate resource.

[0197] In the above embodiments, by dynamically adjusting color resources according to the display brightness of the device, it is ensured that the display elements on the user interface can maintain sufficient contrast under different brightness environments, thereby improving the readability of the content and enhancing the user experience when switching themes.

[0198] Step 606: Render and display the first page based on the second rendering resource.

[0199] After obtaining the second rendering resource, when it is necessary to render the page elements of the first page, the client will load the second rendering resource to replace the first rendering resource, and use the rendering engine to render the second rendering resource according to the logic defined in the page code corresponding to the first page. Finally, the client displays the first page with the theme of the second page as the display mode.

[0200] In summary, the page rendering method provided in this application introduces a resource mapping relationship to record the correspondence between the default theme and the rendering resources of a specified theme. This allows resources under different themes to be replaced through the mapping relationship, enabling theme switching without changing the application code. Developers mainly focus on defining theme resources and establishing mapping relationships, eliminating the need to repeatedly write implementation code for multiple themes on each page, thus simplifying the development process and improving development efficiency. Furthermore, this application's embodiment determines the second rendering resource from at least one candidate resource using device parameters, ensuring that the selected resource fully utilizes the device's performance characteristics, avoiding resource waste, and improving the user experience.

[0201] The system architecture for implementing the page rendering method provided in this application is described below. For illustrative purposes, please refer to [reference needed]. Figure 8 It shows a schematic diagram of the system architecture of a page rendering method.

[0202] like Figure 8 As shown, the theme management center 810 uniformly manages theme changes and notifications of the upper-level page 830. The upper-level page 830 can be implemented as a Native page, an RN (React Native) page, or an H5 (HTML5) page, etc. The upper-level page 830 includes multiple sub-pages. The upper-level page usually refers to a high-level page in the application. The upper-level page can contain multiple sub-pages. These sub-pages are used to display different content or functions, but they usually belong to the same upper-level page. For example, in a news reading application, the upper-level page refers to the main tab page. The main tab page includes three tabs, and each tab represents a sub-page. Sub-page 1 can be a news feed page, sub-page 2 can be a video page, and sub-page 3 can be a settings page.

[0203] The theme resource files of the upper-layer page 830 are packaged in the RN package. The theme resource files can be parsed to obtain hex color values ​​(i.e., hexadecimal color values, corresponding to color resources) or image identifiers (corresponding to image resources), and then passed to the rendering engine 820.

[0204] The rendering engine 820 converts the hex color values ​​(i.e., hexadecimal color values) or image identifiers passed from the upper-level page 830 into theme symbols for the target theme and passes them to the theme management center 810. The theme management center 810 controls the rendering and display of UI components 840 in the upper-level page 830. For example, it obtains the theme color and theme image corresponding to the target theme based on the theme symbol, and renders UI components 840 in the upper-level page 830 based on the theme color and theme image. UI components 840 are displayed as components in the target theme mode.

[0205] After UI component 840 is updated, it notifies the theme management center 810. When the theme of UI component 840 changes, the theme management center 810 notifies the Provider layer of the theme status through the rendering engine 820. The Provider layer then distributes the theme status to each subpage. Each subpage can achieve dynamic theme switching by obtaining the theme status and updating its own UI components accordingly.

[0206] The following describes the system flow for implementing the page rendering method provided in this application. Please refer to the illustrative example. Figure 9 It shows a system flowchart of an application page rendering method.

[0207] like Figure 9 As shown, when client 910 starts, management module 911 retrieves the mapping table `darkModeSymbol` from server 920 and caches it locally. `darkModeSymbol` is a mapping table of theme symbols, using the hex color value of the default theme's theme color or the image identifier of the theme image as the key, corresponding to a theme symbol. The theme symbols are obtained from a symbol file, where each theme symbol corresponds to multiple themes, their respective theme colors, or theme images.

[0208] When client 910 opens page 913, it loads the application package and parses its contents to obtain theme resources, which include color and image resources. Rendering engine 912 converts the color resources passed from page 913 into hexadecimal hex values ​​(i.e., hexString), or converts the image resources passed from page 913 into image identifiers.

[0209] The management module 911 reads the cached darkModeSymbol and maps the hexadecimal color values ​​or image identifiers converted by the rendering engine 912 to theme symbols.

[0210] After receiving the theme symbol, the management module 911 passes it to the corresponding UI component on page 913. The theme resources rendered by the UI component are uniformly transformed into the theme resources indicated by the theme symbol, rather than the actual theme resources in the application package. Specifically, when rendering page 913, the management module 911 loads the theme resources indicated by the theme symbol from server 920 based on the theme symbol in the UI component, thereby switching themes. Optionally, server 920 is responsible for maintaining the mapping table to enable dynamic configuration and modification.

[0211] In summary, the page rendering method provided in this application embodiment enables switching between different themes without modifying the application code, achieving zero business intrusion and no pollution.

[0212] This is illustrative; please refer to it. Figure 10 It shows a structural block diagram of a page rendering apparatus, which includes:

[0213] The acquisition module 1010 is used to acquire the first rendering resource of the first page under the theme of the first page. The first rendering resource is used to render the page elements in the first page with the theme of the first page as the display mode.

[0214] The acquisition module 1010 is used to acquire the resource mapping relationship corresponding to the second page theme when it receives a display request instruction to display the first page with the second page theme. The resource mapping relationship is used to indicate the mapping relationship between the display mode of the page element under the first page theme and the display mode of the page element under the second page theme.

[0215] The mapping module 1020 is used to match the first rendering resource with the resource mapping relationship to obtain the mapped second rendering resource. The second rendering resource is used to render the page elements in the first page with the second page theme as the display mode.

[0216] Display module 1030 is used to render and display the first page based on the second rendering resource.

[0217] In some embodiments, the resource mapping relationship includes a mapping relationship between a first resource identifier corresponding to the first rendering resource and a second resource identifier corresponding to the second rendering resource; the mapping module 1020 is used to obtain the second resource identifier that has a mapping relationship with the first resource identifier from the resource mapping relationship; and load the second rendering resource according to the second resource identifier.

[0218] In some embodiments, when the first rendering resource includes a color resource, the first resource identifier includes the color code corresponding to the color resource; when the first rendering resource includes an image resource, the first resource identifier includes at least one of the storage address and the image identifier number corresponding to the image resource.

[0219] In some embodiments, the acquisition module 1010 is configured to cache resource mapping relationships corresponding to at least one topic, wherein the at least one topic includes the second page topic; and determine the resource mapping relationship corresponding to the second page topic from the resource mapping relationships corresponding to the at least one topic.

[0220] In some embodiments, the display request includes custom theme prompt information, which describes the visual style requirements for displaying the first page; the acquisition module 1010 is used to input the first rendering resource and the theme prompt information into a mapping relationship generation model when the theme prompt information does not match a stored theme, the mapping relationship generation model is used to generate a predicted mapping relationship under the prompt of the theme prompt information; the mapping module 1020 is used to match the first rendering resource with the predicted mapping relationship to obtain a predicted rendering resource, the first page rendered and displayed by the predicted rendering resource conforms to the description of the theme prompt information; the display module 1030 is used to render and display the first page based on the predicted rendering resource.

[0221] In some embodiments, the acquisition module 1010 is configured to update the resource mapping relationship corresponding to at least one topic upon receiving an update request for the resource mapping relationship corresponding to at least one topic, wherein the at least one topic includes the second page topic.

[0222] In some embodiments, the mapping module 1020 is configured to match the first rendering resource with the resource mapping relationship to obtain at least one candidate resource under the theme of the second page, wherein different candidate resources correspond to different resource parameters; obtain device parameters based on the parameter type of the resource parameters, wherein the device parameters refer to the parameters of the computer device used to display the first page, and the parameter type of the resource parameters matches the parameter type of the device parameters; and determine the second rendering resource from the at least one candidate resource based on the device parameters.

[0223] In some embodiments, the first rendering resource includes an image resource, the resource parameters are used to indicate the image resolution, the at least one candidate resource is used to indicate a specified image at different resolutions, and the device parameters include a device model; the mapping module 1020 is used to determine a first candidate resource as the second rendering resource from the at least one candidate resource based on the resolution range indicated by the device model, wherein the image resolution indicated by the first candidate resource is within the resolution range.

[0224] In some embodiments, the first rendering resource includes a color resource, the resource parameters indicate a color code, the at least one candidate resource is used to indicate different colors under the same color system, and the device parameters include display brightness; the mapping module 1020 is used to determine a second candidate resource as the second rendering resource from the at least one candidate resource based on the display brightness, wherein the color code indicated by the second candidate resource meets a preset contrast requirement with the display brightness.

[0225] In some embodiments, the first page is a page in a first application; the acquisition module 1010 is used to acquire the application package corresponding to the first application; parse the application package to acquire the page code and the first rendering resource corresponding to the first page, wherein the page code includes code content related to the rendering logic of the first page; the display module 1030 is used to execute the page code of the first page, render the second rendering resource according to the rendering logic in the page code, and display the first page.

[0226] In summary, the page rendering apparatus provided in this application, when a user requests to display a first page with a specified theme, obtains the resource mapping relationship between the specified theme and the default theme. By matching the rendering resources of the first page under the default theme with the resource mapping relationship, the rendering resources of the first page under the specified theme are obtained, and the first page is rendered and displayed according to the rendering resources under the specified theme. On the one hand, the introduction of a resource mapping relationship to record the correspondence between the rendering resources of the default theme and the specified theme allows resources under different themes to be replaced through the mapping relationship, realizing theme switching without changing the application code. Developers mainly focus on the definition of theme resources and the establishment of mapping relationships, without having to repeatedly write implementation code for multiple themes in each page, simplifying the development process and improving development efficiency. On the other hand, as the application develops, it may be necessary to add new themes or modify existing themes. Developers only need to modify the corresponding entries in the resource mapping relationship, without having to delve into the code of each page, thereby enhancing the scalability of the application.

[0227] It should be noted that the specific limitations of the embodiments of the one or more page rendering devices provided above can be found in the limitations of the page rendering method above, and will not be repeated here. Each module of the above-mentioned device can be implemented entirely or partially by software, hardware, or a combination thereof. Each module can be embedded in the processor of the computer device in hardware form or independent of the processor, or it can be stored in the memory of the computer device in software form, so that the processor can call and execute the corresponding operations of each module.

[0228] This application also provides a computer device, which includes: a processor and a memory, wherein the memory stores a computer program; the processor is used to execute the computer program in the memory to implement the page rendering method provided in the above-described method embodiments.

[0229] For example, Figure 11 This is a structural block diagram of a computer device 1100 provided in an exemplary embodiment of this application. Optionally, the computer device 1100 is a server 1100.

[0230] Typically, server 1100 includes a processor 1101 and memory 1102.

[0231] Processor 1101 may include one or more processing cores, such as a quad-core processor, an octa-core processor, etc. Processor 1101 may be implemented using at least one hardware form selected from Digital Signal Processing (DSP), Field-Programmable Gate Array (FPGA), and Programmable Logic Array (PLA). Processor 1101 may also include a main processor and a coprocessor. The main processor, also known as a Central Processing Unit (CPU), is used to process data in the wake-up state; the coprocessor is a low-power processor used to process data in the standby state. In some embodiments, processor 1101 may integrate a Graphics Processing Unit (GPU), which is responsible for rendering and drawing the content to be displayed on the screen. In some embodiments, processor 1101 may also include an Artificial Intelligence (AI) processor, which is used to handle computational operations related to machine learning.

[0232] The memory 1102 may include one or more computer-readable storage media, which may be non-transitory. The memory 1102 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices or flash memory devices. In some embodiments, the non-transitory computer-readable storage media in the memory 1102 are used to store at least one instruction, which is executed by the processor 1101 to implement the page rendering methods provided in the various method embodiments of this application.

[0233] In some embodiments, server 1100 may optionally include an input interface 1103 and an output interface 1104. Processor 1101, memory 1102, and input interface 1103 and output interface 1104 can be connected via a bus or signal lines. Various peripheral devices can be connected to input interface 1103 and output interface 1104 via a bus, signal lines, or circuit board. Input interface 1103 and output interface 1104 can be used to connect at least one input / output (I / O) related peripheral device to processor 1101 and memory 1102. In some embodiments, processor 1101, memory 1102, and input interface 1103 and output interface 1104 are integrated on the same chip or circuit board; in some other embodiments, any one or two of processor 1101, memory 1102, and input interface 1103 and output interface 1104 can be implemented on separate chips or circuit boards, and this application embodiment does not limit this.

[0234] Those skilled in the art will understand that Figure 11 The structure shown does not constitute a limitation on the computer device 1100 and may include more or fewer components than shown, or combine certain components, or use different component arrangements.

[0235] In an exemplary embodiment, this application provides a chip including programmable logic circuits and / or program instructions, which, when run on a computer device, are used to implement the page rendering methods provided in the above-described method embodiments.

[0236] In an exemplary embodiment, this application provides a computer-readable storage medium storing a computer program that is loaded and executed by a processor to implement the page rendering methods provided in the above-described method embodiments.

[0237] In an exemplary embodiment, this application provides a computer program product or computer program including computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the processor of the computer device to load and execute the page rendering method provided in the above-described method embodiments.

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

[0239] Those skilled in the art will understand that all or part of the steps of the above embodiments can be implemented by hardware or by a program instructing related hardware. The program can be stored in a computer-readable storage medium, such as a read-only memory, a disk, or an optical disk.

[0240] Those skilled in the art will recognize that the functions described in the embodiments of this application in one or more of the above examples can be implemented using hardware, software, firmware, or any combination thereof. When implemented using software, these functions can be stored in a computer-readable medium or transmitted as one or more instructions or code on a computer-readable medium. Computer-readable media include computer storage media and communication media, wherein communication media include any medium that facilitates the transfer of a computer program from one place to another. Storage media can be any available medium that can be accessed by a general-purpose or special-purpose computer.

[0241] The above description is merely an optional embodiment of this application and is not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A page rendering method, characterized in that, The method includes: Obtain the first rendering resource of the first page under the first page theme. The first rendering resource is used to render the page elements in the first page with the first page theme as the display mode. Upon receiving a display request indicating that the first page should be displayed with a second page theme, the resource mapping relationship corresponding to the second page theme is obtained. The resource mapping relationship is used to indicate the mapping relationship between the display mode of the page element under the first page theme and the display mode of the page element under the second page theme. The first rendering resource is matched with the resource mapping relationship to obtain the mapped second rendering resource. The second rendering resource is used to render the page elements in the first page with the second page theme as the display mode. The first page is rendered and displayed based on the second rendering resource.

2. The method according to claim 1, characterized in that, The resource mapping relationship includes the mapping relationship between the first resource identifier corresponding to the first rendering resource and the second resource identifier corresponding to the second rendering resource; The step of matching the first rendering resource with the resource mapping relationship to obtain the mapped second rendering resource includes: Obtain the second resource identifier that has a mapping relationship with the first resource identifier from the resource mapping relationship; The second rendering resource is loaded according to the second resource identifier.

3. The method according to claim 2, characterized in that, When the first rendering resource includes a color resource, the first resource identifier includes the color code corresponding to the color resource; When the first rendering resource includes an image resource, the first resource identifier includes at least one of the storage address corresponding to the image resource and the image identifier number.

4. The method according to any one of claims 1 to 3, characterized in that, The method further includes: Cache the resource mapping relationship corresponding to at least one theme, wherein the at least one theme includes the theme of the second page; The step of obtaining the resource mapping relationship corresponding to the theme of the second page includes: The resource mapping relationship corresponding to the second page theme is determined from the resource mapping relationships corresponding to the at least one theme.

5. The method according to any one of claims 1 to 3, characterized in that, The display request includes custom theme prompts, which describe the visual style requirements for displaying the first page. The method further includes: If the topic prompt information does not match the stored topic, the first rendering resource and the topic prompt information are input into the mapping relationship generation model, which is used to generate a predicted mapping relationship under the prompt of the topic prompt information. The first rendering resource is matched with the prediction mapping relationship to obtain the prediction rendering resource. The first page rendered and displayed by the prediction rendering resource conforms to the description of the theme prompt information. The first page is rendered and displayed based on the predicted rendering resources.

6. The method according to any one of claims 1 to 3, characterized in that, The method further includes: Upon receiving an update request for the resource mapping relationship corresponding to at least one topic, the resource mapping relationship corresponding to the at least one topic is updated, wherein the at least one topic includes the second page topic.

7. The method according to any one of claims 1 to 3, characterized in that, The step of matching the first rendering resource with the resource mapping relationship to obtain the mapped second rendering resource includes: The first rendering resource is matched with the resource mapping relationship to obtain at least one candidate resource under the theme of the second page. Different candidate resources have different resource parameters. Device parameters are obtained based on the parameter type of the resource parameters, wherein the device parameters refer to the parameters of the computer device used to display the first page, and the parameter type of the resource parameters matches the parameter type of the device parameters; The second rendering resource is determined from the at least one candidate resource based on the device parameters.

8. The method according to claim 7, characterized in that, The first rendering resource includes image resources, the resource parameters are used to indicate image resolution, the at least one candidate resource is used to indicate a specified image at a different resolution, and the device parameters include device model; Determining the second rendering resource from the at least one candidate resource based on the device parameters includes: A first candidate resource is determined from the at least one candidate resource as the second rendering resource based on the resolution range indicated by the device model, wherein the image resolution indicated by the first candidate resource is within the resolution range.

9. The method according to claim 7, characterized in that, The first rendering resource includes color resources, the resource parameters indicate color encoding, the at least one candidate resource is used to indicate different colors under the same color system, and the device parameters include display brightness; Determining the second rendering resource from the at least one candidate resource based on the device parameters includes: A second candidate resource is determined from the at least one candidate resource as the second rendering resource based on the display brightness, wherein the color code indicated by the second candidate resource meets a preset contrast requirement with the display brightness.

10. The method according to any one of claims 1 to 3, characterized in that, The first page is a page in the first application; The step of obtaining the first rendering resource of the first page under the first page theme includes: Obtain the application package corresponding to the first application; parse the application package to obtain the page code and the first rendering resource corresponding to the first page, wherein the page code includes code content related to the rendering logic of the first page; The rendering and displaying of the first page based on the second rendering resource includes: The page code of the first page is executed, and the second rendering resource is rendered according to the rendering logic in the page code to display the first page.

11. A page rendering apparatus, characterized in that, The device includes: The acquisition module is used to acquire the first rendering resource of the first page under the theme of the first page. The first rendering resource is used to render the page elements in the first page with the theme of the first page as the display mode. The acquisition module is used to acquire the resource mapping relationship corresponding to the second page theme when it receives a display request instruction to display the first page with the second page theme. The resource mapping relationship is used to indicate the mapping relationship between the display mode of the page element under the first page theme and the display mode of the page element under the second page theme. The mapping module is used to match the first rendering resource with the resource mapping relationship to obtain the mapped second rendering resource. The second rendering resource is used to render the page elements in the first page with the second page theme as the display mode. The display module is used to render and display the first page based on the second rendering resource.

12. A computer device, characterized in that, The computer device includes a processor and a memory, the memory storing at least one program, which is loaded and executed by the processor to implement the page rendering method as described in any one of claims 1 to 10.

13. A computer-readable storage medium, characterized in that, The storage medium stores at least one program segment, which is loaded and executed by a processor to implement the page rendering method as described in any one of claims 1 to 10.

14. A computer program product, characterized in that, It includes a computer program that, when executed by a processor, implements the page rendering method as described in any one of claims 1 to 10.

Images