Page display method, device and terminal equipment

By receiving the application's theme switching request, obtaining the theme information in the data packet and updating the applet display page, the problem of high complexity of the applet is solved and flexible and efficient theme switching is achieved.

CN114647473BActive Publication Date: 2025-02-14ALIBABA CLOUD COMPUTING CO LTD
View PDF 2 Cites 0 Cited by

Patent Information

Application Number
CN202210317302.6
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2022-03-28
Publication Date
2025-02-14
Estimated Expiration
2042-03-28

AI Technical Summary

Technical Problem

The existing technology of small and medium-sized programs is relatively complex, and the underlying business logic of the small programs needs to be modified to realize multi-theme switching.

Method used

By receiving the application's topic switching request, obtain the topic information in the data packet according to the identification of the topic to be switched, and update the display page of the applet based on the information to avoid writing the topic code in the applet.

Benefits of technology

It reduces the complexity of the applet, realizes the flexibility and efficiency of theme switching, and does not require modification of the underlying logic of the applet.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN114647473B_ABST
    Figure CN114647473B_ABST
Patent Text Reader

Abstract

The present application provides a page display method, apparatus and terminal device, the method comprising: receiving a theme switching request of a first application, the theme switching request including an identifier of a theme to be switched, the first application including multiple mini-programs; obtaining theme information of the theme to be switched in a data packet according to the identifier of the theme to be switched, the data packet including theme information of multiple themes; updating display pages of the multiple mini-programs according to the theme information of the theme to be switched. Reduce the complexity of mini-programs.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present application relates to the field of data processing technology, and in particular to a page display method, device and terminal equipment. Background Art

[0002] An application can include multiple applets. By selecting the theme of the applet, you can change the display page of the applet.

[0003] Currently, the theme of the mini program can be written into the mini program development framework in an inline manner, so that the mini program can change the displayed theme. For example, the value of the page element that needs to be modified is dynamically written into the label of the corresponding page element in an inline manner, thereby realizing the multi-theme switching of the mini program. However, this requires modifying the underlying business logic of the mini program, which leads to a high complexity of the mini program. Summary of the invention

[0004] The present application provides a page display method, apparatus and terminal device, which are used to solve the technical problem of high complexity of mini-programs in the prior art.

[0005] In a first aspect, the present application provides a page display method, the method comprising:

[0006] Receiving a theme switching request of a first application, wherein the theme switching request includes an identifier of a theme to be switched, and the first application includes a plurality of mini-programs;

[0007] According to the identifier of the subject to be switched, acquiring subject information of the subject to be switched in a data packet, wherein the data packet includes subject information of multiple subjects;

[0008] According to the theme information of the theme to be switched, the display pages of the multiple mini-programs are updated.

[0009] In a possible implementation, for a display page of any mini program, updating the display page of the mini program according to the theme information of the theme to be switched includes:

[0010] Acquire first page information of the display page, where the first page information includes a theme style currently displayed by each node in the display page;

[0011] According to the theme information of the theme to be switched, each node in the display page is virtually rendered to obtain second page information, wherein the second page information includes the theme style of each node in the display page after virtual rendering;

[0012] Update the display page of the mini program according to the first page information and the second page information.

[0013] In a possible implementation, updating the display page of the mini program according to the first page information and the second page information includes:

[0014] Determine a first corresponding relationship between each node in the first page information and each node in the second page information;

[0015] According to the first corresponding relationship and the second page information, determining a target node in the first page information, the target node being a node of a theme style to be updated;

[0016] The theme style of the target node is updated to update the display page of the mini program.

[0017] In a possible implementation, the theme style includes at least one theme parameter; updating the theme style of the target node to update the display page of the mini program includes:

[0018] Determining a target theme parameter in the theme style of the target node, wherein the target theme parameter is a theme parameter to be updated;

[0019] The target theme parameters are updated to update the display page of the applet.

[0020] In a possible implementation manner, before acquiring the theme information of the theme to be switched in the data packet, the method further includes:

[0021] Get subject information of at least one subject;

[0022] The topic information of the at least one topic is stored in the data packet.

[0023] In a possible implementation, obtaining subject information of at least one subject includes:

[0024] Acquire a theme template corresponding to the at least one theme, wherein the theme template includes a plurality of theme parameter variables;

[0025] According to the multiple topic parameter variables, topic information of the topic is obtained.

[0026] In a possible implementation manner, acquiring the topic information of the topic according to the multiple topic parameter variables includes:

[0027] Add corresponding theme parameters to the theme parameter variables of the theme template to obtain a theme style;

[0028] The theme style is compiled by a compiler to obtain theme information of the theme.

[0029] In a second aspect, the present application provides a page display device, the page display device comprising a receiving module, a first acquisition module and an updating module, wherein:

[0030] The receiving module is used to receive a theme switching request of a first application, wherein the theme switching request includes an identifier of a theme to be switched, and the first application includes a plurality of mini-programs;

[0031] The first acquisition module is used to acquire the theme information of the theme to be switched in the data packet according to the identifier of the theme to be switched, and the data packet includes theme information of multiple themes;

[0032] The updating module is used to update the display pages of the plurality of mini-programs according to the theme information of the theme to be switched.

[0033] In a possible implementation manner, the update module is specifically used to:

[0034] Acquire first page information of the display page, where the first page information includes a theme style currently displayed by each node in the display page;

[0035] According to the theme information of the theme to be switched, each node in the display page is virtually rendered to obtain second page information, wherein the second page information includes the theme style of each node in the display page after virtual rendering;

[0036] Update the display page of the mini program according to the first page information and the second page information.

[0037] In a possible implementation manner, the update module is specifically used to:

[0038] Determine a first corresponding relationship between each node in the first page information and each node in the second page information;

[0039] According to the first corresponding relationship and the second page information, determining a target node in the first page information, the target node being a node of a theme style to be updated;

[0040] The theme style of the target node is updated to update the display page of the mini program.

[0041] In a possible implementation manner, the update module is specifically used to:

[0042] Determining a target theme parameter in the theme style of the target node, wherein the target theme parameter is a theme parameter to be updated;

[0043] The target theme parameters are updated to update the display page of the applet.

[0044] In a possible implementation, the page display device further includes a second acquisition module, and the second acquisition module is used to:

[0045] Get subject information of at least one subject;

[0046] The topic information of the at least one topic is stored in the data packet.

[0047] In a possible implementation manner, the second acquisition module is specifically configured to:

[0048] Acquire a theme template corresponding to the at least one theme, wherein the theme template includes a plurality of theme parameter variables;

[0049] According to the multiple topic parameter variables, topic information of the topic is obtained.

[0050] In a possible implementation manner, the second acquisition module is specifically configured to:

[0051] Add corresponding theme parameters to the theme parameter variables of the theme template to obtain a theme style;

[0052] The theme style is compiled by a compiler to obtain theme information of the theme.

[0053] In a third aspect, the present application provides a terminal device, including: a processor and a memory;

[0054] The memory stores computer-executable instructions;

[0055] The processor executes the computer-executable instructions stored in the memory, so that the processor executes the page display method as described in the first aspect.

[0056] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores computer-executable instructions, and when the computer-executable instructions are executed by a processor, they are used to implement any of the page display methods described above.

[0057] In a fifth aspect, the present application also provides a computer program product, including a computer program, which, when executed by a processor, implements the steps of the page display method as described in any of the above items.

[0058] The present application provides a page display method, apparatus and terminal device, which receive a theme switching request of a first application, wherein the theme switching request includes an identifier of a theme to be switched, and the first application includes multiple applets. According to the identifier of the theme to be switched, the theme information of the theme to be switched is obtained in a data packet, wherein the data packet includes theme information of multiple themes, and the display pages of multiple applets are updated according to the theme information of the theme to be switched. According to the above method, the terminal device can directly call the theme information of the theme to be switched of the applet in the data packet, and then update the display page of the applet according to the theme information of the theme to be switched. In this way, when switching the theme of the applet, there is no need to write the corresponding theme code in the applet, thereby reducing the complexity of the applet. BRIEF DESCRIPTION OF THE DRAWINGS

[0059] Figure 1 A schematic diagram of an application scenario provided for an embodiment of the present application;

[0060] Figure 2 A flow chart of a page display method provided in an embodiment of the present application;

[0061] Figure 3 A schematic diagram of a process for receiving a theme switching request provided in an embodiment of the present application;

[0062] Figure 4 A schematic diagram of a subject provided by an embodiment of the present application;

[0063] Figure 5 A flowchart of a method for obtaining subject information provided in an embodiment of the present application;

[0064] Figure 6 A schematic diagram of a process of updating a page of a mini-program provided in an embodiment of the present application;

[0065] Figure 7 A schematic diagram of a page display method provided in an embodiment of the present application;

[0066] Figure 8 A schematic diagram of the structure of a page display device provided in an embodiment of the present application;

[0067] Fig. 9 A schematic diagram of the structure of another page display device provided in an embodiment of the present application;

[0068] Fig.10 A schematic diagram of the hardware structure of the terminal device provided for this application. DETAILED DESCRIPTION

[0069] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with the present application. Instead, they are merely examples of devices and methods consistent with some aspects of the present application as detailed in the appended claims.

[0070] It should be noted that, in this article, the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the existence of other identical elements in the process, method, article or device including the element.

[0071] To facilitate understanding, the concepts involved in the embodiments of the present application are first explained.

[0072] Terminal device: a device with wireless transceiver function. Terminal devices can be deployed on land, including indoors or outdoors, handheld, wearable or vehicle-mounted; they can also be deployed on the water (such as ships, etc.); they can also be deployed in the air (such as airplanes, balloons and satellites, etc.). The terminal device can be a mobile phone, a tablet computer, a computer with wireless transceiver function, a virtual reality (VR) terminal device, an augmented reality (AR) terminal device, a wireless terminal in industrial control, a vehicle-mounted terminal device, a wireless terminal in self-driving, a wireless terminal device in remote medical, a wireless terminal device in smart grid, a wireless terminal device in transportation safety, a wireless terminal device in smart city, a wireless terminal device in smart home, a wearable terminal device, etc. The terminal equipment involved in the embodiments of the present application may also be referred to as a terminal, user equipment (UE), access terminal equipment, vehicle-mounted terminal, industrial control terminal, UE unit, UE station, mobile station, mobile station, remote station, remote terminal equipment, mobile equipment, UE terminal equipment, wireless communication equipment, UE agent or UE device, etc. The terminal equipment may also be fixed or mobile.

[0073] In the related art, an application includes multiple applets, and the display page of the applet can be changed by selecting the theme of the applet. At present, since there is no kernel in the applet that can load Cascading Style Sheets (CSS) files, the theme of the applet can be written into the development framework of the applet in an inline manner so that the applet can change the display theme. For example, in an inline manner, selectable color parameters are written in advance in the text color tag of the applet, and then when the applet is used, the text color of the applet can be switched to a pre-set color. However, this requires the underlying business logic of the applet to be modified, which leads to a high complexity of the applet.

[0074] In order to solve the technical problem of high complexity of mini-programs in related technologies, an embodiment of the present application provides a page display method, which receives a theme switching request of a first application, wherein the theme switching request includes an identifier of a theme to be switched, and the first application includes multiple mini-programs. According to the identifier of the theme to be switched, the theme information of the theme to be switched is obtained in a data packet, and multiple theme parameters in the theme information of the theme to be switched are obtained, multiple page parameters of each display page are obtained, and the display pages of multiple mini-programs are updated according to the multiple theme parameters and the multiple page parameters. In this way, when switching the theme of the mini-program, the terminal device can directly obtain the corresponding theme information in the data packet, and update the display page of the mini-program according to the theme information, without writing the corresponding theme code in the mini-program, thereby reducing the complexity of the mini-program.

[0075] Next, combine Figure 1 , the application scenarios of this application are described.

[0076] Figure 1 This is a schematic diagram of an application scenario provided by the embodiment of this application. Figure 1 , including a terminal device and a data packet. The data packet stores multiple themes such as Theme A and Theme B. When the terminal device receives a theme switching request, the terminal device can obtain the identifier of the theme to be switched in the theme switching request as the identifier of Theme A. The terminal device obtains Theme A in the data packet and switches the theme of the mini-program to Theme A. In this way, when switching the theme of the mini-program, the terminal device can directly obtain the corresponding theme information in the data packet, and update the display page of the mini-program according to the theme information, without writing the corresponding theme code in the mini-program, thereby reducing the complexity of the mini-program.

[0077] The technical solution of the present application and how the technical solution of the present application solves the above-mentioned technical problems are described in detail below with specific embodiments. The following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments. The embodiments of the present application will be described below in conjunction with the accompanying drawings.

[0078] Figure 2 A flow chart of a page display method provided in an embodiment of the present application. Figure 2 , the method may include:

[0079] S201: Receive a theme switching request from a first application.

[0080] The execution subject of the present application may be a terminal device, or a page display device arranged in the terminal device. The page display device may be implemented by software, or by a combination of software and hardware.

[0081] Optionally, the first application includes multiple mini-programs. For example, the first application may be an application program including multiple mini-programs in the terminal device. Optionally, the mini-program may be a micro-application. For example, a micro-application may be an application program that can be used without downloading and installing, and the micro-application may be a one-code micro-application, a weather query micro-application, a vehicle information query micro-application, etc.

[0082] Optionally, the theme switching request is used to switch the themes of multiple mini-programs in the first application. The theme can be the display style of the mini-program page. For example, if the mini-programs have different themes, the text color, background color, control size and other information displayed on the mini-program pages will be different. Optionally, the theme switching request includes an identifier of the theme to be switched. For example, the identifier of the theme to be switched can be the name of the theme, the ID of the theme, etc.

[0083] Next, combine Figure 3 , describing receiving a theme switching request for a first application.

[0084] Figure 3 A schematic diagram of a process for receiving a theme switching request provided in an embodiment of the present application. Figure 3 , including a terminal device. The display page of the terminal device is page 101, and page 101 is a theme control page. Page 101 includes theme A, theme B, theme C, theme D, and control buttons of each theme. When the user clicks the control button of theme C, page 101 of the terminal device jumps to page 102. Page 102 includes theme A, theme B, theme C, theme D, and control buttons of each theme, and the control button of theme C is turned on. The terminal device receives a theme switching request, wherein the theme switching request includes the identifier of theme C.

[0085] S202: Acquire the theme information of the theme to be switched in the data packet according to the identifier of the theme to be switched.

[0086] Optionally, the data packet includes theme information of multiple themes. Optionally, the mini program can obtain theme information from the data packet. For example, the data packet can be a bundle, and the terminal device can obtain theme information from the bundle. For example, the bundle is used for data transmission, and the bundle can store theme information of multiple themes, and the theme information of each theme is stored in the form of a key-value pair.

[0087] Optionally, the theme information may include multiple theme parameters. The theme parameters may include at least one of the following: theme color information, theme font information, theme control information. Optionally, the theme color information may include theme color, background color, card background color, auxiliary color, button color, functional color, etc. For example, the theme color is the main color, the background color is the base color of all pages, the card background color is the card background color of a group of elements framed in a card, the auxiliary color is the secondary color, the button colors include normal, click, disabled (indicated by opacity), and the functional colors include fluorescent colors, green, blue, yellow, purple, cyan, red, etc.

[0088] Optionally, the theme font information may include font, font size and font weight. For example, the font may include two font specifications for title and text, the title includes a large title, a middle title and a small title, and the text includes the main text, secondary text, auxiliary text, etc. Optionally, the font size may be the size of the text font. Optionally, the font weight may be the thickness of the text font.

[0089] Optionally, the theme control information may include the margin of the control, the spacing of the control, the corners of the control, and the lines of the control. Optionally, the margin of the control may be the distance from the content to the edge of the control. For example, if the control is a query control, the margin of the control is the distance between the text "query" in the control and the border of the control. Optionally, the spacing of the control may be the distance between two controls. For example, if the distance between control A and control B is 1 mm. Then the spacing of the controls is 1 mm. Optionally, the corners of the control may be the corner shape of the control. For example, the corners of the control may be right angles, rounded corners, etc. Optionally, the line of the control may be the thickness of the border of the control. For example, if the line of the control is 1 mm, then the line thickness of the border of the control is 1 mm.

[0090] Next, combine Figure 4 , describe the topic.

[0091] Figure 4 A schematic diagram of a subject provided by an embodiment of the present application. Figure 4, including themes. Themes include UI framework controls and application scenario controls. The fonts of the texts "UI framework" and "application scenario" are in Kaiti, and the font of the text "touch" is in Songti. The distance between the text "UI framework" and the edge of the control is the margin of the control, the distance between the UI framework control and the application scenario control is the spacing of the controls, and the corners of the UI framework control and the application scenario control are both rounded.

[0092] Optionally, the subject information of the subject to be switched can be obtained according to the following feasible implementation method: obtain the correspondence between the subject information and the identifier. The correspondence between the subject information and the identifier includes the subject information of each subject in the data packet and the identifier corresponding to each subject information. For example, the correspondence between the subject information and the identifier can be shown in Table 1:

[0093] Table 1

[0094] Topic Information Logo Topic Information 1 Logo 1 Topic Information 2 Logo 2 Topic Information 3 Logo 3 …… ……

[0095] It should be noted that Table 1 is only an example to illustrate the correspondence between the subject information and the identifier, and is not intended to limit the correspondence between the subject information and the identifier.

[0096] According to the identifier of the subject to be switched and the correspondence between the subject information and the identifier, the subject information of the subject to be switched is obtained in the data packet. For example, if the identifier of the subject to be switched is identifier 1, the subject information of the subject to be switched is subject information 1; if the identifier of the subject to be switched is identifier 2, the subject information of the subject to be switched is subject information 2; if the identifier of the subject to be switched is identifier 3, the subject information of the subject to be switched is subject information 3. In this way, each subject information in the data packet has a corresponding identifier, and the terminal device can accurately determine the subject identifier of the subject to be switched based on the identifier of the subject to be switched and the identifier in the data packet.

[0097] S203: Update the display pages of multiple mini-programs according to the theme information of the theme to be switched.

[0098] Optionally, for the display page of any small program, the display pages of multiple small programs can be updated according to the following feasible implementation method: obtain the first page information of the display page. Among them, the first page information includes the theme style currently displayed by each node in the display page. Optionally, the theme style can be the theme information currently displayed by the visualization node. For example, the theme style of the visualization node can be the font, font size, control spacing and other information currently displayed by the visualization node. For example, the display page can include multiple visualization nodes, and each visualization node is displayed according to the current theme style. For example, the display page includes control A and control B, and the font format of control A and the font format of control B are both displayed according to the pre-set theme.

[0099] Optionally, the terminal device may obtain a rendering tree of the display page to obtain the first page information. For example, the terminal device may construct a rendering tree corresponding to the display page according to the display format of each visualization node of the display page, and the rendering tree includes the current first page information of the display page.

[0100] According to the theme information of the theme to be switched, each node in the display page is virtually rendered to obtain the second page information. The second page information includes the theme style of each node in the display page after virtual rendering. For example, the terminal device can virtually render each visual node of the display page in the virtual space through the theme information of the theme to be switched, and then obtain the second page information of the display page after the virtual rendering. For example, when the terminal device obtains the theme information of the theme to be switched, it can obtain the position of the current theme in the file, and then replace the current theme with the theme information of the theme to be switched, and simulate the rendering of the display page through the theme information of the theme to be switched (without updating the display page), and then obtain the rendering tree after the simulated rendering of the display page, and obtain the second page information of the display page through the rendering tree.

[0101] According to the first page information and the second page information, the display page of the applet is updated. Optionally, the display page of the applet can be updated according to the following feasible implementation method: determine the first correspondence between each node in the first page information and each node in the second page information. For example, the first correspondence includes the node corresponding to each node in the first page information in the second page information. For example, since the second page information is obtained by the terminal device virtually rendering the node of the display page according to the theme information of the theme to be switched, the node of the first page information and the corresponding node of the second page information are actually the same node of the display page. For example, the display page includes control A, if the node of control A in the first page information is node A, if the node of control A in the second page information is node B, then node A and node B are a group of corresponding nodes.

[0102] According to the first corresponding relationship and the second page information, the target node is determined in the first page information. The target node is a node of the theme style to be updated. For example, if the theme style of the node changes after the theme is switched, the node is determined to be the target node. If the theme style of the node does not change after the theme is switched, the node is not the target node. For example, by displaying the current rendering tree of the page and the rendering tree obtained after the virtual rendering of the display page, the node whose data has changed in the current rendering tree can be accurately determined, and then the node is determined as the target node.

[0103] Optionally, since the content to be displayed in the visualization nodes is different (for example, some visualization nodes include main titles and subtitles, while other visualization nodes are images, etc.), when switching themes, the theme styles of some nodes have not changed (for example, the theme to be switched only modifies the font, so the nodes displaying the pictures do not need to be changed), and thus there is no need to render, and only the rendering and update are performed for the nodes whose theme styles have changed, which can save resources of the terminal device.

[0104] The theme style of the target node is updated to update the display page of the mini program. Optionally, the theme style includes at least one theme parameter, and the display page can be updated according to the following feasible implementation: determining the target theme parameter in the theme style of the target node, and updating the target theme parameter to update the display page of the mini program.

[0105] Optionally, the theme style may include at least one theme parameter. For example, the theme style of a visualization node may include theme font information, and may also include theme control information and theme color information, etc. Among them, the target theme parameter is the theme parameter to be updated. For example, node A is a node in the first page information, and the node corresponding to node A in the second page information is node B. If the theme style A of node A is different from the theme style B of node B, then the target theme parameter is included in theme style A. If the font in theme style A is different from the font in theme style B, then the target theme parameter is the font. For example, the data of the current rendering tree of the display page can be compared with the data of the rendering tree after the display page is virtually rendered, so as to obtain the target node and the target theme parameter in the theme style of the target node.

[0106] Optionally, the target theme parameters are updated to update the display page of the applet, specifically: the target theme parameters in the first page information are updated to the corresponding theme parameters in the second page information. For example, node A is the target node in the first page information, and the node corresponding to node A in the second page information is node B. If the font parameter of node A is the target theme parameter, the font parameter of node A is updated to the font parameter of node B, and then the display page of the applet is updated; if the main background color of node A is gray and the main background color of node B is white, the main background color of node A is updated to white, and then the display page of the applet is updated. Optionally, all target nodes in the first information can be updated to achieve the update of the display page. In this way, only the changed theme parameters can be updated to save the resources of the terminal device.

[0107] Optionally, when the terminal device switches the theme, the multiple mini-programs of each first application in the terminal device can be updated. For example, when the terminal device switches the theme, the multiple mini-program display pages of application A and the multiple mini-program display pages of application B are updated.

[0108] The embodiment of the present application provides a page display method, receiving a theme switching request of a first application, wherein the theme switching request includes an identifier of a theme to be switched, the first application includes multiple mini-programs, and according to the identifier of the theme to be switched, the theme information of the theme to be switched is obtained in a data packet, and the first page information of the display page is obtained, wherein the first page information includes the theme style currently displayed by each node in the display page, and according to the theme information of the theme to be switched, each node in the display page is virtually rendered to obtain the second page information, wherein the second page information includes the theme style after the virtual rendering of each node in the display page, and according to the first page information and the second page information, the display page of the mini-program is updated. In this way, when switching the theme of the mini-program, the terminal device can directly obtain the corresponding theme information in the data packet, and update the display page of the mini-program according to the theme information, without writing the corresponding theme code in the mini-program, thereby reducing the complexity of the mini-program.

[0109] exist Figure 2 Based on the embodiment shown in the figure, the above page display method also includes a process of obtaining subject information. Figure 5 , the method of obtaining subject information is explained.

[0110] Figure 5 A flowchart of a method for obtaining subject information provided in an embodiment of the present application. Figure 5 The method flow includes:

[0111] S501. Obtain subject information of at least one subject.

[0112] Optionally, the theme information of at least one theme may be obtained according to the following feasible implementation: obtaining a theme template corresponding to at least one theme, wherein the theme template includes a plurality of theme parameter variables. For example, the theme parameter variable is a variable name that can be a theme parameter.

[0113] Optionally, the design of the theme template meets the following preset conditions: variable override, style override, component customization and global customization. Among them, variable override meets global variable override and component variable override. For example, by using the less variable mechanism to adjust the variable resolution in the process of compiling the theme, the organization structure of the variable file of the variable override is in accordance with the preset directory organization structure, and the preset directory rental structure may include a global variable entry and a component variable entry.

[0114] Optionally, style overrides satisfy component-level style overrides. For example, by using the less mixin mechanism, some theme parameter variables are overridden with mixin-overridden features. This allows the theme template to support style overrides at the component level through a custom component override mechanism, and supports override style priority during compilation.

[0115] Optionally, component customization is to override variables within the component. For example, by customizing the loadUIOverridesmixin mechanism, the style override is performed at the component level through the overrides.less file ending convention, and then the variables.less file ending convention is implemented at the component level, so that the variables within the component are overwritten during the component style compilation process. Optionally, global customization can override global variables during the compilation process through a preset interface. For example, the global variables during the compilation process can be overwritten by agreeing on the entry globals / theme.varibales.less file.

[0116] According to multiple theme parameter variables, theme information of the theme is obtained. Optionally, the theme information of the theme can be obtained according to the following feasible implementation method: add corresponding theme parameters in the theme parameter variables of the theme template to obtain the theme template style. The theme information of the theme is obtained by compiling the theme template style through a compiler. For example, by adjusting the values ​​of the theme variable parameters in the theme template, different theme template styles can be obtained, and then the theme template styles are compiled through the cli compiler to obtain a theme that can be recognized by the mini program. In this way, the theme can be customized at different levels and granularities through the coverage mechanism from components to the global, and the effect of dynamically switching the theme can be achieved during the operation of the mini program, thereby improving the control flexibility of the mini program and reducing the complexity of the mini program.

[0117] S502: Store subject information of at least one subject into a data packet.

[0118] Optionally, theme information of multiple themes can be obtained through theme templates and compilers, and the multiple theme information can be stored in a data packet so that the mini program can obtain the theme information in the data packet. For example, the terminal device can add the theme parameters of multiple themes pre-set by the user to the theme parameter variables of the theme template to obtain theme template styles corresponding to multiple themes, compile the multiple theme template styles through the compiler to obtain theme information of multiple themes, and store the multiple theme information in the bundle of the mini program. When the mini program switches the theme, it can obtain the corresponding theme information in the bundle to update the display page of the mini program.

[0119] Next, combine Figure 6 , explains the process of updating the page of the mini program.

[0120] Figure 6 A schematic diagram of a process of updating a small program page provided in an embodiment of the present application. Figure 6 , including: theme compilation process and theme running process. When compiling the theme, customize N themes such as Theme A, Theme B, Theme N, and input the theme parameters of each theme into the theme template to obtain N theme styles of N themes. Compile the N theme styles through the cli compiler, configure the application theme, and store the compiled Theme A, Theme B, Theme N, etc. in the bundle of the mini program.

[0121] See also Figure 6 When the theme is running, the mini-program container can obtain multiple themes in the bundle, select the theme to be switched from the multiple themes, parse the theme to be switched, and render and draw the theme based on the parsed results. When the theme is switched, the multi-application global notification theme switching mechanism enables the mini-programs of each application in the terminal device to switch the theme. In this way, the mini-program can directly load the pre-configured theme in the bundle, thereby reducing the complexity of the mini-program.

[0122] An embodiment of the present application provides a method for obtaining theme information, obtaining a theme template corresponding to at least one theme, adding corresponding theme parameters to the theme parameter variables of the theme template to obtain a theme style, and compiling the theme style through a compiler to obtain theme information of at least one theme, and storing the theme information of at least one theme in the data packet. In this way, the effect of dynamically switching the theme can be achieved during the operation of the mini-program, thereby improving the control flexibility of the mini-program, and the mini-program can directly load the corresponding theme in the data packet without writing the corresponding theme code in the mini-program, thereby reducing the complexity of the mini-program.

[0123] Based on any of the above embodiments, Figure 7 , the process of the above page display method is explained.

[0124] Figure 7 A schematic diagram of a page display method provided in an embodiment of the present application. Figure 7 , including terminal devices. Page 201 of the terminal device is a mini-program page. Among them, page 201 includes UI frame controls and application scene controls with a green background, and the spacing between the application scene controls and the UI frame controls is large. When the terminal device switches themes, page 202 is a theme page, which includes Theme A, Theme B, Theme C, Theme D and the control buttons corresponding to each theme. The control button of Theme A is on, and the other control buttons are off.

[0125] See also Figure 7 , when the user clicks the control button of Theme C, the terminal device displays page 203. In page 203, the control button of Theme A is turned off, and the control button of Theme C is turned on. The terminal device obtains the theme information of Theme C in the data packet, and updates the page according to the theme information of Theme C. After the page is updated, the terminal device displays page 204, and page 204 is the mini-program page. Among them, page 204 includes UI framework controls and application scenario controls. Among them, the background of the UI framework control changes from green to white, and the distance between the UI framework control and the application scenario control becomes smaller. In this way, the effect of dynamically switching themes can be achieved during the operation of the mini-program, thereby improving the control flexibility of the mini-program, and the mini-program can directly load the corresponding theme in the data packet without writing the corresponding theme code in the mini-program, thereby reducing the complexity of the mini-program.

[0126] Figure 8 This is a schematic diagram of the structure of a page display device provided in an embodiment of the present application. Figure 8 The page display device 10 includes a receiving module 11, a first obtaining module 12 and an updating module 13, wherein:

[0127] The receiving module 11 is used to receive a theme switching request of a first application, wherein the theme switching request includes an identifier of a theme to be switched, and the first application includes a plurality of mini-programs;

[0128] The first acquisition module 12 is used to acquire the theme information of the theme to be switched in the data packet according to the identifier of the theme to be switched, and the data packet includes theme information of multiple themes;

[0129] The updating module 13 is used to update the display pages of the plurality of mini-programs according to the theme information of the theme to be switched.

[0130] In a possible implementation manner, the updating module 13 is specifically configured to:

[0131] Acquire first page information of the display page, where the first page information includes a theme style currently displayed by each node in the display page;

[0132] According to the theme information of the theme to be switched, each node in the display page is virtually rendered to obtain second page information, wherein the second page information includes the theme style of each node in the display page after virtual rendering;

[0133] Update the display page of the mini program according to the first page information and the second page information.

[0134] In a possible implementation manner, the updating module 13 is specifically configured to:

[0135] Determine a first corresponding relationship between each node in the first page information and each node in the second page information;

[0136] According to the first corresponding relationship and the second page information, determining a target node in the first page information, the target node being a node of a theme style to be updated;

[0137] The theme style of the target node is updated to update the display page of the mini program.

[0138] In a possible implementation manner, the updating module 13 is specifically configured to:

[0139] Determining a target theme parameter in the theme style of the target node, wherein the target theme parameter is a theme parameter to be updated;

[0140] The target theme parameters are updated to update the display page of the applet.

[0141] The page display device provided in the embodiment of the present application can execute the technical solution shown in the above method embodiment, and its implementation principle and beneficial effects are similar, which will not be repeated here.

[0142] Fig. 9 A schematic diagram of the structure of another page display device provided in an embodiment of the present application. Figure 8 Based on the examples shown, see Fig. 9 The page display device 10 further includes a second acquisition module 14, wherein the second acquisition module 14 is used to:

[0143] Get subject information of at least one subject;

[0144] The topic information of the at least one topic is stored in the data packet.

[0145] In a possible implementation manner, the second acquisition module 14 is specifically configured to:

[0146] Acquire a theme template corresponding to the at least one theme, wherein the theme template includes a plurality of theme parameter variables;

[0147] According to the multiple topic parameter variables, topic information of the topic is obtained.

[0148] In a possible implementation manner, the second acquisition module 14 is specifically configured to:

[0149] Add corresponding theme parameters to the theme parameter variables of the theme template to obtain a theme style;

[0150] The theme style is compiled by a compiler to obtain theme information of the theme.

[0151] The page display device provided in the embodiment of the present application can execute the technical solution shown in the above method embodiment, and its implementation principle and beneficial effects are similar, which will not be repeated here.

[0152] Fig.10 The hardware structure diagram of the terminal device provided for this application. Fig.10 The terminal device 20 may include: a processor 21 and a memory 22, wherein the processor 21 and the memory 22 can communicate; illustratively, the processor 21 and the memory 22 communicate via a communication bus 23, the memory 22 is used to store program instructions, and the processor 21 is used to call the program instructions in the memory to execute the page display method shown in any of the above method embodiments.

[0153] Optionally, the terminal device 20 may further include a communication interface, which may include a transmitter and / or a receiver.

[0154] Optionally, the processor may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), etc. A general-purpose processor may be a microprocessor or any conventional processor, etc. The steps of the method disclosed in the present application may be directly implemented as being executed by a hardware processor, or may be implemented by a combination of hardware and software modules in the processor.

[0155] An embodiment of the present application provides a readable storage medium, on which a computer program is stored; the computer program is used to implement the page display method described in any of the above embodiments.

[0156] An embodiment of the present application provides a computer program product, which includes instructions. When the instructions are executed, a computer executes the above-mentioned page display method.

[0157] All or part of the steps of implementing the above-mentioned method embodiments can be completed by hardware related to program instructions. The aforementioned program can be stored in a readable memory. When the program is executed, the steps of the above-mentioned method embodiments are executed; and the aforementioned memory (storage medium) includes: read-only memory (English: read-only memory, abbreviated: ROM), RAM, flash memory, hard disk, solid state drive, magnetic tape (English: magnetic tape), floppy disk (English: floppy disk), optical disc (English: optical disc) and any combination thereof.

[0158] The embodiments of the present application are described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processing unit of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable terminal device to generate a machine, so that the instructions executed by the processing unit of the computer or other programmable terminal device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0159] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable terminal device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce a manufactured product including an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0160] These computer program instructions can also be loaded onto a computer or other programmable terminal device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for executing on the computer or other programmable device to implement the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0161] Obviously, those skilled in the art can make various changes and modifications to the embodiments of the present application without departing from the spirit and scope of the present application. Thus, if these modifications and variations of the embodiments of the present application fall within the scope of the claims of the present application and their equivalents, the present application is also intended to include these modifications and variations.

[0162] In the present application, the term "include" and its variations may refer to non-restrictive inclusion; the term "or" and its variations may refer to "and / or". The terms "first", "second", etc. in the present application are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. In the present application, "plurality" refers to two or more. "And / or" describes the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B may mean: A exists alone, A and B exist at the same time, and B exists alone. The character " / " generally indicates that the previously associated objects are in an "or" relationship.

Claims

1. A page display method, characterized in that: include: Receiving a theme switching request of a first application, wherein the theme switching request includes an identifier of a theme to be switched, and the first application includes a plurality of mini-programs; According to the identifier of the subject to be switched, acquiring subject information of the subject to be switched in a data packet, wherein the data packet includes subject information of multiple subjects; According to the theme information of the theme to be switched, updating the display pages of the plurality of mini-programs; For the display page of any small program; According to the theme information of the theme to be switched, updating the display page of the mini program includes: Acquire first page information of the display page, where the first page information includes a theme style currently displayed by each node in the display page; According to the theme information of the theme to be switched, each node in the display page is virtually rendered to obtain second page information, wherein the second page information includes the theme style of each node in the display page after virtual rendering; Update the display page of the mini program according to the first page information and the second page information.

2. The method according to claim 1, characterized in that Updating the display page of the mini program according to the first page information and the second page information includes: Determine a first corresponding relationship between each node in the first page information and each node in the second page information; According to the first corresponding relationship and the second page information, determining a target node in the first page information, the target node being a node of a theme style to be updated; The theme style of the target node is updated to update the display page of the mini program.

3. The method according to claim 2, characterized in that The theme style includes at least one theme parameter; Updating the theme style of the target node to update the display page of the mini program includes: Determining a target theme parameter in the theme style of the target node, wherein the target theme parameter is a theme parameter to be updated; The target theme parameters are updated to update the display page of the applet.

4. The method according to any one of claims 1 to 3, characterized in that: Before acquiring the subject information of the subject to be switched in the data packet, the method further includes: Get subject information of at least one subject; The topic information of the at least one topic is stored in the data packet.

5. The method according to claim 4, characterized in that Get topic information of at least one topic, including: Acquire a theme template corresponding to the at least one theme, wherein the theme template includes a plurality of theme parameter variables; According to the multiple topic parameter variables, topic information of the topic is obtained.

6. The method according to claim 5, characterized in that Acquiring theme information of the theme according to the multiple theme parameter variables includes: Add corresponding theme parameters to the theme parameter variables of the theme template to obtain a theme template style; The theme template style is compiled by a compiler to obtain theme information of the theme.

7. A page display device, characterized in that: It includes a receiving module, a first obtaining module and an updating module, wherein: The receiving module is used to receive a theme switching request of a first application, wherein the theme switching request includes an identifier of a theme to be switched, and the first application includes a plurality of mini-programs; The first acquisition module is used to acquire the theme information of the theme to be switched in the data packet according to the identifier of the theme to be switched, and the data packet includes theme information of multiple themes; The updating module is used to update the display pages of the plurality of mini-programs according to the theme information of the theme to be switched; For any display page of a small program, the update module is specifically used to: Acquire first page information of the display page, where the first page information includes a theme style currently displayed by each node in the display page; According to the theme information of the theme to be switched, each node in the display page is virtually rendered to obtain second page information, wherein the second page information includes the theme style of each node in the display page after virtual rendering; Update the display page of the mini program according to the first page information and the second page information.

8. A terminal device, characterized in that: include: Processor, memory; The memory stores computer-executable instructions; The processor executes the computer-executable instructions stored in the memory, so that the processor executes the page display method according to any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-executable instructions, which, when executed by a processor, are used to implement the page display method according to any one of claims 1 to 6.

10. A computer program product, characterized in that The invention comprises a computer program which, when executed by a processor, implements the method according to any one of claims 1 to 6.

Citation Information

Patent Citations

  • Application communication method and equipment

    CN112804330A

  • Application program processing method and device, equipment and medium

    CN113296841A