Page style effective method and device

Abstract

The invention discloses a page style effective method and device. The page style effective method comprises the following steps: determining a plurality of style templates configured by components in a page; generating a component style code of the component based on the plurality of style templates of the component; and adding the component style code into a code of the page, so that the plurality of style templates take effect in the page. According to the method, the page style configuration efficiency can be improved.

Description

Technical Field

[0001] This application relates to the technical field of page design, and in particular, to a method and device for page style to take effect. Background Art

[0002] The traditional software development model is split into a series of processes from requirements analysis to implementation and operation and maintenance based on the software life cycle model, which has problems such as long development cycle, large human input, and high maintenance cost. Based on this, a form of development that turns from pure coding to low-code development has emerged. As a visual development platform, a low-code platform can quickly generate applications without coding or with little coding, simplifies the application development mode, reduces the human input cost, and greatly improves the software delivery efficiency.

[0003] Currently, most low-code platforms generally have relatively simple support for styles, and the style configuration efficiency is relatively low. Summary of the Invention

[0004] This application provides a method and device for page style to take effect, which can improve the style configuration efficiency of the page.

[0005] To achieve the above object, this application provides a method for page style to take effect, and the method includes:

[0006] Determine a number of style templates configured for components in the page;

[0007] Generate component style codes for the components based on the number of style templates of the components;

[0008] Add the component style codes to the code of the page so that the number of style templates take effect in the page.

[0009] To achieve the above object, this application also provides an electronic device, and the electronic device includes a processor; the processor is used to execute instructions to implement the steps of the above method.

[0010] To achieve the above object, this application also provides a computer-readable storage medium, which is used to store instructions / program data, and the instructions / program data can be executed to implement the above method.

[0011] This application determines a number of style templates configured for components in the page; generates component style codes for the components based on the number of style templates of the components; adds the component style codes to the code of the page so that the number of style templates take effect in the page. In this way, considering the problem of style reusability, the page style is designed through style templates, so that the advantages of one configuration and multiple uses can be realized, which plays an important role in improving the style configuration efficiency and reducing the amount of styles. Description of the Drawings

[0012] The accompanying drawings described herein are used to provide a further understanding of the present application and form a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation of the present application. In the drawings:

[0013] Figure 1 is a schematic flowchart of an embodiment of a method for the page style of the present application to take effect;

[0014] Figure 2 is a schematic diagram of an embodiment of a style template management interface in the method for the page style of the present application to take effect;

[0015] Figure 3 is a schematic diagram of an embodiment of a style classification in the method for the page style of the present application to take effect;

[0016] Figure 4 is a schematic diagram of an embodiment of a style editor interface in the method for the page style of the present application to take effect;

[0017] Figure 5 is a schematic diagram of an embodiment of an interactive style boundary window interface in the method for the page style of the present application to take effect;

[0018] Figure 6 is a schematic flowchart of the generation process of an embodiment of the component style code in the method for the page style of the present application to take effect;

[0019] Figure 7 is a schematic flowchart of the generation process of an embodiment of the state style code in the method for the page style of the present application to take effect;

[0020] Figure 8 is a schematic diagram of an embodiment of a page configuration file in the method for the page style of the present application to take effect;

[0021] Figure 9 is a schematic flowchart of the generation process of an embodiment of the total style code in the method for the page style of the present application to take effect;

[0022] Figure 10 is a schematic flowchart of the generation process of an embodiment of the template style code in the method for the page style of the present application to take effect;

[0023] Figure 11 is a schematic structural diagram of an embodiment of an electronic device of the present application;

[0024] Figure 12 is a schematic structural diagram of an embodiment of a computer-readable storage medium of the present application. Detailed Embodiments

[0025] Next, the technical solutions in the embodiments of the present application will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present application. Additionally, unless otherwise specified (e.g., "or otherwise" or "or in an alternative"), the term "or" as used herein refers to a non-exclusive "or" (i.e., "and / or"). And the various embodiments described herein are not necessarily mutually exclusive, because some embodiments can be combined with one or more other embodiments to form new embodiments.

[0026] The present application proposes a method for enabling a page style to take effect. This method for enabling a page style to take effect determines several style templates configured for components in a page; generates component style codes for the components based on the several style templates of the components; and adds the component style codes to the code of the page so that the several style templates take effect in the page. In this way, considering the issue of style reusability, the page style is designed through style templates, thereby achieving the advantages of one-time configuration and multiple uses, which plays an important role in improving the style configuration efficiency and reducing the amount of styles.

[0027] Specifically, as Figure 1 shown, a method for enabling a page style to take effect in an embodiment proposed by the present application specifically includes the following steps. It should be noted that the following step numbers are only for simplified description and are not intended to limit the execution order of the steps. The steps of this embodiment can be arbitrarily changed in the execution order without violating the technical idea of the present application.

[0028] S101: Determine several style templates configured for components in a page.

[0029] Optionally, considering the issue of style reusability, the page style can be designed through style templates, so that the advantages of one-time configuration and multiple uses can be achieved, which plays an important role in improving the style configuration efficiency and reducing the amount of styles.

[0030] Among them, to facilitate the management of style templates, a functional component for independently managing style templates can be designed, so that the style templates can be added, deleted, modified, queried, and the style configurations of the style templates can be edited through this functional component. Among them, the style template management interface can be as Figure 2 shown. The style templates can be saved in a database and can be provided for many applications within the platform to use. Among them, the platform can build in some common style templates.

[0031] In page development, it is possible to design the styles for the global attributes of the page to be developed (such as global style and other attributes) and each component (such as components like buttons, forms, cards, tables, modal boxes, or carousels).

[0032] As Figure 3 shown, according to the business functions and configuration processes of the styles, the designed styles can be divided into template styles and state styles.

[0033] Template style refers to the basic style configuration in the default state. The template style is the core appearance of the page, defining the visual performance of the page under normal circumstances. It usually does not depend on user interactions or changes in the state of components. The template style is static and applicable to most usage scenarios, ensuring a consistent appearance across different pages or applications. Among them, the style of the global attributes of the page can also be called the template style.

[0034] State style refers to the style changes of components in different interaction states. The state style is dynamic and will change with user operations or changes in the state of components. The state style can be further divided into default styles and interaction styles.

[0035] The default style refers to the style of the component in the initial state or when there is no user interaction. The default style is usually the basic style of the component, similar to the template style, but there may be some subtle differences in some cases. The default style ensures that the component has an appropriate appearance when not being operated by the user and can maintain a consistent visual style with other components.

[0036] The interaction style refers to the style changes of the component when the user interacts with it, so as to meet the style configuration requirements in complex interaction states through the interaction style, increase the richness of style configuration, and change the appearance of the component in different interaction states. The interaction style is dynamic and will change according to user operations or changes in the state of the component. The interaction style provides visual feedback to the user, enhances the user experience, and helps the user understand the current operation state. Optionally, the interaction style mainly includes the mouse hover state style, mouse press state style, focus state style, component disabled state style, and / or component abnormal state style, etc., and may also include styles for some custom interaction states such as component selection and / or mouse click.

[0037] For each component to be designed with styles, one or more style templates can be used for style design. Specifically, at least one style template can be used to design the template style, default style, and / or interaction style of the component.

[0038] In one example, each style template can configure a part of the style, and each component to be styled can select multiple style templates to achieve the desired configuration effect. It can be understood that a style template can also be used by multiple components, that is, the style template has the advantage of being configured once and used multiple times. In this way, the style template and the component can have a many-to-many relationship.

[0039] Optionally, it is also possible not to use a style template to style the component to be styled. For example, the styles of the component can be directly edited through a style editor.

[0040] To facilitate improving the efficiency of style design, when editing the styles of a component through a style editor, the style content configured for the component can be packaged into a style template and saved in the style template library. In this way, the style templates in the style template library can be continuously enriched by editing and designing through the style editor, so as to increase the diversity of the style templates, thereby improving the usability of the style templates, and further improving the efficiency of page style design.

[0041] In addition, when configuring the style of a component to be styled through a style template, a style template can be selected through the selector on the style editor page. As Figure 4 shown, there is a drop-down selector for template selection above the interface of the style editor, so that designers can select the style template used for the default style of the component through the drop-down selector. In addition, there is an entry for configuring the interaction style on the style editor interface, and designers can configure the interaction styles of each component through this entry. Among them, the interface of the interaction style boundary window can be as Figure 5 shown.

[0042] Below the interface of the style editor, there are also basic, text, and appearance styles that can be configured for the component, so that designers can directly style the component or modify the styles in the selected style template through these fields.

[0043] In addition, at least some of the styles in the selected style template can be modified through the style design fields on the style editor page, so as to design a page that more meets the designer's wishes. In addition, when at least some of the styles in the selected style template are modified through the style design fields on the style editor page, the styles in the corresponding style template in the style template library can be updated according to the modification content, that is, the modified style template replaces the style template in the style template library; it is also possible to retain the corresponding original template in the style template library, and further, the modified style template can be saved as a new style template in the style template library.

[0044] When designing the style of a page, several style templates configured for the page can be obtained. For example, the style templates configured for each component and / or global attributes in the page can be obtained, so as to subsequently traverse each component and generate component style code based on the style templates used by each component and fill it into the page code, so that the configured style templates take effect in the page.

[0045] S102: Generate component style code for the component based on several style templates of the component.

[0046] In one implementation, during the design process of a page, several style templates used by the components that have been designed can be successively obtained, and then the component style code of the components that have been designed can be generated. Then, the component style code of the components that have been designed is added to the page code so that the style design of the components that have been designed can take effect.

[0047] In another implementation, after the page design is completed, the style configuration file of the page can be determined, and then the total style code of the page can be generated using the page style effect method of the present application and added to the page code so that the designed style takes effect.

[0048] In this implementation, after determining several style templates configured for the components in the page, each component in the page can be traversed in sequence, and the corresponding component style code can be generated based on the several style templates of the traversed component and filled into the total style code.

[0049] Optionally, the components in the page can be placed in a loading queue, and each component in the page can be traversed in sequence according to the order of the components in the loading queue, the selector of the traversed component can be generated, and the corresponding component style code can be generated based on the selector and several style templates and filled into the total style code.

[0050] In one implementation, according to the position order of multiple components in the page, the components in the page can be placed in a loading queue so as to traverse each component in the page in sequence according to the order of the components in the loading queue. Or, the multiple components in the page can be randomly placed in the loading queue so as to traverse each component in the page in sequence according to the order of the components in the loading queue.

[0051] And during traversal, each component in the loading queue can be traversed in sequence in the order from front to back or from back to front of the components in the loading queue.

[0052] In one example, several components in a page can be added to a loading queue; the steps of 'if the loading queue is not empty, take out the component at the head of the loading queue, and use the component at the head of the queue as the currently traversed component, generate corresponding component style codes based on several style templates of the traversed component and fill them into the total style code' are repeatedly executed until the loading queue is empty.

[0053] Among them, when designing the page, the style of at least one state of the components in the page can be designed, that is, at least one state style of the components can be designed. In this way, for the traversed component, the codes of each state style of the component can be generated; the component style code of the component includes the codes of all state styles of the component. In this way, if the component has multiple state styles, the codes of all state styles of the component can be spliced to form the component style code.

[0054] Generating the codes of each state style of the component can include: determining the selectors of each state style of the component, and generating the codes of each state style based on the selectors of each state style.

[0055] As described in step S101, the state styles can be divided into default styles and interaction styles. When determining the selectors of each state style of the component, it can first be determined whether each state style of the component is a default style; if a state style is a default style, the main style class of the component is used as the selector of this state style; if a state style is not a default style, the built-in state style class can be obtained, and the state style class is used as the selector of this state style, that is, the state style class corresponding to this state style is used as the selector of this state style.

[0056] In a specific example, such as Figure 6As shown, a main style class can be generated according to the component identifier (id), and the overall component style can be defined; obtain a list of the state styles of the component; traverse each state style of the component in sequence based on the list of state styles; for the currently traversed state style, obtain the style configuration of the currently traversed state style according to the style configuration attributes of the component, and the style configuration of the state style includes the style template information of the state style configuration; if the style configuration of the currently traversed state style is not empty, confirm whether the currently traversed state style is the default style; if it is the default style, use the previously generated main style class as the selector for generating this state style; if it is not the default style, obtain the built-in state style class and use the state style class as the selector for the currently traversed state style; generate the code of the currently traversed state style using the selector and style configuration of the currently traversed state style, and fill the code of the currently traversed state style into the overall component style; if the currently traversed state style is not the last state style of the component, use the next state style of the currently traversed state style as the currently traversed state style, and return to the step of obtaining the style configuration of the currently traversed state style according to the style configuration attributes of the component to determine the selector of the currently traversed state style of the component, generating the code of the currently traversed state style based on the selector of the currently traversed state style and filling it into the overall component style; if the currently traversed state style is the last state style of the component, use the overall component style as the component style code and fill it into the overall style code.

[0057] The above list of the state styles of the component can be a priority list of the state styles of the component, that is, for several styles involved in the state styles, the generation of the styles can consider a certain priority, and when traversing, the state styles of the component can be traversed in sequence according to the order from low to high or from high to low of the priority. For example, a component includes several state styles such as default, mouse hovering, focus obtained, mouse pressed, component disabled, and component abnormal. The priority order of these state styles can be as follows: default < mouse hovering < focus obtained < mouse pressed < component disabled < component abnormal. In this way, the default style, mouse hovering style, focus obtained style, mouse pressed style, component disabled style, and component abnormal style of the component can be traversed in sequence.

[0058] In addition, as Figure 7As shown, there may be cases where some components contain sub-components. In this case, when traversing a component that contains sub-components, the sub-components of this component can be counted as one component for traversal, and corresponding component style codes can be generated based on several style templates of the sub-components during traversal and filled into the total style code. Exemplarily, the sub-components of this component can also be added to the loading queue so that the sub-components can be traversed subsequently when traversing in the order of the loading queue, and corresponding component style codes can be generated based on several style templates of the sub-components and filled into the total style code.

[0059] Optionally, to facilitate traversing each component, the configuration files of each component can be loaded into the loading queue. In this way, when traversing each component, the code for each state style of the component can be generated according to the relevant information (such as style configuration attributes, etc.) in the configuration file of the currently traversed component in the loading queue.

[0060] Among them, the configuration file of a component can be the JSON data of the component, and the JSON data of the component can include the style configuration of the component. As Figure 8 shown, regarding the storage of styles in the application JSON data, it mainly depends on several key fields. Each page has a field "styleTemplates" to store which style templates are used on this page, which is used for generating template styles when generating page styles. Each page has "components" which contains multiple components, and each component has a "style" attribute to store the style configuration, including the default style and various interaction styles. Each default style or interaction style of each component has an attribute "templates" to store the selected style template. In this way, the json data of the component can include the relevant content of the IComponentStyle field in the figure. Among them, IApp: the interface of the application, which contains attributes such as the id, name, and page list of the application. IView: the interface of the page, which contains attributes such as the id, name, component list, and style template list of the page. IComponent: the interface of the component, which contains attributes such as the id, name, type, style, and sub-components of the component. IComponentStyle: the interface of the component style configuration, which contains attributes such as the default style, mouse hover style, mouse press style, component disabled style, focus style, and component exception style. IStateStyle: the interface of the state style, which contains the style template list and style attributes. IStyle: the interface of the style, which contains attributes such as width, height, margin, font, font size, and color.

[0061] Optionally, as described in step S101, styles can be classified into state styles and template styles. As Figure 9As shown, in step S102, the component style codes corresponding to the component style templates can be generated by traversing each component in the page in sequence, so as to obtain the state style codes. The state style codes of the page include the component style codes of all components in the page. Additionally, the template style codes of the page can be generated. The total style codes of the page include the state style codes and the template style codes.

[0062] In an example, the blank total style codes can be defined first; the template style codes of the page are generated and filled into the total style codes; the step of traversing each component in the page in sequence is executed, and the component style codes corresponding to the component style templates are generated and filled into the total style codes; after all components are traversed and the template style codes are generated and filled, the final total style codes of the page can be obtained.

[0063] In another example, as Figure 9 shown, the blank state style code file can be defined first, the step of traversing each component in the page in sequence is executed, the component style codes corresponding to the component style templates are generated and filled into the state style code file, and the final state style codes of the page can be obtained after all components are traversed; the template style codes of the page are generated; the template style codes and the state style codes of the page are concatenated to obtain the total style codes of the page. Among them, Figure 7 the style M in is the state style code.

[0064] In the above examples, the generation order of the state style codes and the template style codes is not restricted. For example, the template style codes can be generated first, and then the state style codes; or the state style codes can be generated first, and then the template style codes.

[0065] Preferably, the generation order of the state style codes and the template style codes can be determined according to the priority order of the state style and the template style. For example, the priority of the state style is higher than that of the template style. The definition of the state style codes needs to be after the definition of the template style codes. When merging the styles, this priority needs to be followed, so the template style codes of the page can be generated first and then the state style codes of the page.

[0066] In addition, if a component contains sub-components, the component style codes of the component include both the component style codes of the component itself and the component style codes of all its sub-components.

[0067] Optionally, as Figure 10As shown, the template style code for generating a page may include: determining several style templates used by the template style based on the configuration of the template style in the style configuration file of the page (i.e., the JSON data of the page), traversing the several style templates used by the template style in sequence, and generating a template style selector based on the traversed style template; using the generated template style selector to generate the style code of the traversed style template to obtain the template style code of the page, where the template style code of the page includes the style codes of several style templates used by the template style.

[0068] In a specific example, as Figure 10 shown, several style templates used by the template style can be determined based on the configuration of the template style in the style configuration file of the page, and a blank template style code file can be defined; the several style templates used by the template style are traversed in sequence, and a template style selector is generated based on the traversed style template; the style code of the traversed style template is generated using the generated template style selector and filled into the template style code file. After traversing all the style templates used by the template style, the template style code of the page can be obtained.

[0069] Furthermore, in the generation of the style code of the present application, an internal or external style sheet can be used to introduce styles to form the corresponding style code. For example, if an internal style sheet is used, then <style>标签来定义CSS样式，并将样式追加在HTML文档的<head>部分；又例如，采用外部样式表则可以将CSS样式保存在一个.css文件中，然后在HTML文档的<head>部分使用<link>标签来引用这个文件。较为优选的是，使用外部样式表的方式来形成样式代码而完成样式的生效。

[0070] 步骤S103：将组件样式代码添加到页面的代码中，以使若干个样式模板在页面中生效。

[0071] 基于上述步骤得到组件样式代码后，可以将组件样式代码添加到页面的代码中，以使单元的若干个样式模板在页面中生效。

[0072] 在利用本申请的页面样式生效方法生成页面的样式总代码并添加到页面代码的实现方式中，基于上述步骤得到页面的样式总代码后，可以将样式总代码添加到页面的代码中，以使单元的若干个样式模板在页面中生效。

[0073] 可以理解的是，单元的若干个样式模板在页面中生效并不代表若干个样式模板在当前页面中均有所呈现。例如，若单元的若干个样式模板分别对应于单元的多个状态，当前页面中呈现的单元的样式可能仅包含当前页面中单元的当前状态下所配置的样式模板，不包括单元的当前状态下未配置而在单元的其他状态下配置的样式模板。

[0074] 可选地，可以将组件样式代码或样式总代码添加到页面的代码HTML文档的<head>部分。

[0075] 在本实施方式中，确定页面中组件配置的若干个样式模板；基于所述组件的若干个样式模板生成所述组件的组件样式代码；将所述组件样式代码添加到所述页面的代码中，以使所述若干个样式模板在所述页面中生效，如此考虑到样式复用性的问题，通过样式模板来进行页面样式的设计，从而可以实现一次配置、多次使用的优点，对于提升样式配置效率和减少样式量有着重要的作用。

[0076] 综上，本申请可视化的使用样式模板提升复用性，使用状态样式和多种交互样式的低代码平台样式配置方法，更好的支撑样式配置需求；且本申请是适用于低代码平台的页面样式生成和生效方法。

[0077] 请参阅图11，图11是本申请电子设备一实施方式的结构示意图。本电子设备20包括处理器22，处理器22用于执行指令以实现上述方法。具体实施过程请参阅上述实施方式的描述，在此不再赘述。

[0078] 处理器22还可以称为CPU(Central Processing Unit，中央处理组件)。处理器22可能是一种集成电路芯片，具有信号的处理能力。处理器22还可以是通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。通用处理器可以是微处理器或者该处理器22也可以是任何常规的处理器等。

[0079] 电子设备20还可进一步包括存储器21，用于存储处理器22运行所需的指令和数据。

[0080] 处理器22用于执行指令以实现上述本申请方法任一实施例及任意不冲突的组合所提供的方法。

[0081] 其中，本申请的电子设备可以为混淆控制系统。

[0082] 请参阅图12，图12为本申请实施方式中计算机可读存储介质的结构示意图。本申请实施例的计算机可读存储介质30存储有指令 / 程序数据31，该指令 / 程序数据31被执行时实现本申请页面样式生效方法任一实施例以及任意不冲突的组合所提供的方法。在一实施例中，该指令 / 程序数据31可以形成程序文件以软件产品的形式存储在上述存储介质30中，以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本申请各个实施方式方法的全部或部分步骤。而前述的存储介质30包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，RandomAccess Memory)、磁碟或者光盘等各种可以存储程序代码的介质，或者是计算机、服务器、手机、平板等终端设备。

[0083] 在本申请所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，组件的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个组件或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或组件的间接耦合或通信连接，可以是电性，机械或其它的形式。

[0084] 另外，在本申请各个实施例中的各功能组件可以集成在一个处理组件中，也可以是各个组件单独物理存在，也可以两个或两个以上组件集成在一个组件中。上述集成的组件既可以采用硬件的形式实现，也可以采用软件功能组件的形式实现。

[0085] 还需要说明的是，术语"包括”、"包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句"包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。

[0086] 以上仅为本申请的实施方式，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。< / style>

Claims

1. A method for enabling a page style, characterized in that, The method includes: Determine a number of style templates for the component configurations in the page; Generate component style codes for the components based on the number of style templates of the components; Add the component style codes to the code of the page so that the number of style templates take effect in the page.

2. The page style activation method according to claim 1, wherein The determining of a number of style templates for the component configurations in the page includes: Use one or more style templates in the style template library to design the styles for the components to determine a number of style templates for the component configurations; or, Use a style editor to edit the various styles of the components, package the style contents configured for the components into style templates and save them in the style template library to determine a number of style templates for the component configurations.

3. The method for enabling a page style according to claim 1, wherein The generating of component style codes for the components based on the number of style templates of the components includes: Put a number of components in the page into a loading queue, sequentially traverse each component in the page in the order of the components in the loading queue, generate selectors for the traversed components, and generate component style codes for the traversed components based on the selectors of the traversed components and the number of style templates and fill them into the total style code; The adding of the component style codes to the code of the page so that the number of style templates take effect in the page includes: Add the total style code to the code of the page so that the number of style templates take effect in the page.

4. The page style activation method according to claim 3, wherein The determining of a number of style templates for the component configurations in the page includes: Design the styles for at least one state style of the components in the page to determine at least one style template used by the at least one state style; The sequentially traversing each component in the page, generating selectors for the traversed components, and generating component style codes for the traversed components based on the selectors of the traversed components and the number of style templates and filling them into the total style code includes: Determine the selectors for each state style of the traversed components, generate codes for each state style based on the selectors of each state style and at least one style template, and the component style codes of the traversed components include the codes of all state styles of the traversed components.

5. The page style activation method according to claim 4, wherein The state styles of the components are divided into default styles and interaction styles. The determining of the selectors for each state style of the traversed components and generating codes for each state style based on the selectors of each state style and at least one style template includes: Determine whether each state style of the component is the default style; If a state style is the default style, use the main style class of the component as the selector for the state style; If a state style is not the default style, obtain the built-in state style class and use the state style class as the selector for the state style.

6. The page style activation method according to claim 4, wherein The designing of the styles for at least one state style of the components in the page to determine at least one style template used by the at least one state style includes: Design the styles of at least one state style of the components in the page to generate a style configuration file for the components. The style configuration file of the components contains the style configurations of various state styles of the components, and the style configuration of the state style contains the style template information of the state style configuration; Determine the selectors of each state style of the traversed components, and generate the code of each state style based on the selectors of each state style and at least one style template. The component style code of the traversed components includes the codes of all state styles of the traversed components, including: Determine whether the style configuration of the currently traversed state style of the component is empty; If the style configuration of the currently traversed state style is not empty, determine the selector of the currently traversed state style, and generate the code of the currently traversed state style based on the selector of the currently traversed state style and at least one style template recorded in the style configuration; If the style configuration of the currently traversed state style is empty, do not generate the code of the currently traversed state style.

7. The page style activation method according to claim 3, wherein The styles are divided into state styles and template styles. The steps of putting several components in the page into a loading queue, traversing each component in the page in the order of the components in the loading queue, generating the selector of the traversed components, generating the component style code of the traversed components based on the selector of the traversed components and several style templates, and filling it into the total style code include: Traverse each component in the page in the order of the components in the loading queue, generate the selector of the traversed components, and generate the component style code of the traversed components based on the selector of the traversed components and several style templates to obtain the state style code of the page. The state style code includes the component style codes of all components in the page; Generate the template style code of the page; Among them, the total style code includes the state style code and the template style code.

8. The page style activation method according to claim 7, characterized in that, The steps of generating the template style code of the page include: Determine several style templates used by the template style based on the configuration of the template style in the style configuration file of the page; Traverse several style templates used by the template style in turn, and generate a template style selector based on the traversed style templates; Use the generated template style selector to generate the style code of the traversed style templates to obtain the template style code of the page. The template style code of the page includes the style codes of several style templates used by the template style.

9. An electronic device, characterized in that, The electronic device includes a processor; the processor is used to execute instructions to implement the steps of the method described in any one of claims 1-8.

10. A computer-readable storage medium having a program and / or instructions stored thereon, characterized in that, When the program and / or instructions are executed, the steps of the method described in any one of claims 1-8 are implemented.

Images