Component library construction method and device, page development method and device, equipment and storage medium

Abstract

The embodiment of the invention provides a component library construction method and device, a page development method and device, equipment and a storage medium. The method comprises the steps of generating a basic component based on basic attribute information; based on the at least one basic component corresponding to the general type and the general attribute information, packaging to generate a general component, and based on the at least one basic component corresponding to the function type, the at least one general component and the logic attribute information, packaging to generate a logic component; based on the at least one basic component, the at least one universal component, the at least one logic component and the scene attribute information corresponding to the scene type, packaging and generating a scene component; and storing the basic component, the universal component, the logic component and the scene component in a component library. According to the scheme, the multi-level components achieving different functions are generated and stored in the component library, the needed components can be imported from the component library, the components of different levels are combined, repeated development according to basic components is not needed, and the development efficiency is improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a component library construction method, a page development method, an apparatus, a device and a storage medium. Background Art

[0002] In the traditional development model, developers usually rely only on basic components to develop the user interface (UI). Basic components are pre-built, most basic, and non-divisible reusable components with specific functions, such as button components and input box components. However, the functions of basic components are single. As business needs become increasingly complex, basic components are difficult to directly meet the complex and changing functional requirements of different business scenarios. For example, it is impossible to develop a form using only button components or only input box components. Multiple basic components such as input boxes, selection boxes, and buttons are required to develop a form. When interface development in different business scenarios needs to achieve the same functional requirements, it is necessary to repeatedly develop based on the basic components. This not only consumes a lot of time and manpower costs, but also leads to low efficiency in page development. Summary of the Invention

[0003] The embodiments of the present invention provide a component library construction method, a page development method, an apparatus, a device and a storage medium, which are used to solve the problem of low page development efficiency in the prior art.

[0004] In a first aspect, an embodiment of the present invention provides a component library construction method, comprising:

[0005] Generate a basic component based on the basic attribute information, generate a basic component identifier of the basic component, and generate basic component description information according to the basic component identifier and the basic attribute information;

[0006] Based on at least one basic component and general attribute information corresponding to the general type, encapsulate and generate a general component, generate a general component identifier of the general component, and generate general component description information according to the general component identifier and the general attribute information;

[0007] Encapsulate and generate a logical component based on at least one basic component, at least one common component, and logical attribute information corresponding to the logical type, generate a logical component identifier for the logical component, and generate logical component description information based on the logical component identifier and the logical attribute information;

[0008] Based on at least one basic component, at least one general component, at least one logical component and scene attribute information corresponding to the scene type, encapsulate and generate a scene component, generate a scene component identifier for the scene component, and generate scene component description information according to the scene component identifier and the scene attribute information;

[0009] Saving the basic component, the general component, the logic component, and the scene component to a component library;

[0010] Among them, the basic component description information, the general component description information, the logical component description information and the scene component description information are used to determine at least one required component and the component identifier of the at least one component, so as to import the at least one component according to the component identifier to render and generate the target page.

[0011] In a second aspect, an embodiment of the present invention provides a page development method, comprising:

[0012] Determine at least one required component and the component identifier corresponding to each of the at least one component in combination with the basic component description information, the general component description information, the logical component description information and the scene component description information; the at least one component includes a basic component, a general component, a logical component and / or a scene component; the basic component description information is generated based on the basic component identifier and basic attribute information; the general component description information is generated based on the general component identifier and general attribute information; the logical component description information is generated based on the logical component identifier and logical attribute information; the scene component description information is generated based on the scene component identifier and scene attribute information;

[0013] Importing the at least one component from a component library according to the component identifier corresponding to the at least one component; the component library includes at least one basic component, at least one general component, at least one logic component and at least one scenario component;

[0014] A target page is generated based on the at least one component rendering.

[0015] In a third aspect, an embodiment of the present invention provides a component library construction device, the device comprising:

[0016] A first generating module is configured to generate a basic component based on basic attribute information, generate a basic component identifier of the basic component, and generate basic component description information according to the basic component identifier and basic attribute information;

[0017] A second generation module is configured to encapsulate and generate a general component based on at least one basic component corresponding to the general type and general attribute information, generate a general component identifier for the general component, and generate general component description information according to the general component identifier and the general attribute information;

[0018] A third generation module is configured to encapsulate and generate a logical component based on at least one basic component, at least one common component, and logical attribute information corresponding to the logical type, generate a logical component identifier for the logical component, and generate logical component description information based on the logical component identifier and the logical attribute information;

[0019] a fourth generation module, configured to encapsulate and generate a scene component based on at least one basic component, at least one general component, at least one logical component, and scene attribute information corresponding to the scene type, generate a scene component identifier for the scene component, and generate scene component description information based on the scene component identifier and the scene attribute information;

[0020] A saving module, configured to save the basic component, the general component, the logic component, and the scene component to a component library;

[0021] Among them, the basic component description information, the general component description information, the logical component description information and the scene component description information are used to determine at least one required component and the component identifier of the at least one component, so as to import the at least one component according to the component identifier to render and generate the target page.

[0022] In a fourth aspect, an embodiment of the present invention provides a page development device, comprising:

[0023] A determination module is configured to determine at least one required component and a component identifier corresponding to each of the at least one component, based on basic component description information, general component description information, logical component description information, and scene component description information; the at least one component includes a basic component, a general component, a logical component, and / or a scene component; the basic component description information is generated based on the basic component identifier and basic attribute information; the general component description information is generated based on the general component identifier and general attribute information; the logical component description information is generated based on the logical component identifier and logical attribute information; and the scene component description information is generated based on the scene component identifier and scene attribute information;

[0024] An import module, configured to import the at least one component from a component library according to component identifiers corresponding to the at least one component; the component library includes at least one basic component, at least one general component, at least one logical component, and at least one scenario component;

[0025] A rendering module is used to generate a target page based on the at least one component rendering.

[0026] In a fifth aspect, an embodiment of the present invention provides an electronic device comprising a processor and a memory, wherein the memory is configured to store one or more computer instructions, wherein the one or more computer instructions, when executed by the processor, implement the component library construction method of the first aspect or the page development method of the second aspect. The electronic device may further comprise a communication interface for communicating with other devices or communication systems.

[0027] In the sixth aspect, an embodiment of the present invention provides a non-transitory machine-readable storage medium, on which executable code is stored. When the executable code is executed by a processor of an electronic device, the processor can at least implement the component library construction method in the first aspect or the page development method in the second aspect.

[0028] In a fifth aspect, an embodiment of the present invention provides a computer program product, which includes a computer program or instructions. When the computer program or instructions are executed by a processor, the processor is enabled to implement the component library construction method in the first aspect or the page development method in the second aspect.

[0029] In an embodiment of the present invention, a basic component is generated based on basic attribute information, a basic component identifier of the basic component is generated, and basic component description information is generated based on the basic component identifier and basic attribute information; a general component is encapsulated and generated based on at least one basic component corresponding to a general type and general attribute information, a general component identifier of the general component is generated, and general component description information is generated based on the general component identifier and general attribute information; a logical component is encapsulated and generated based on at least one basic component, at least one general component, and logical attribute information corresponding to a functional type, a logical component is encapsulated and generated, a logical component identifier of the logical component is generated, and general component description information is generated based on the logical component identifier and logical attribute information; a scene component is encapsulated and generated based on at least one basic component, at least one general component, at least one logical component, and scene attribute information corresponding to a scene type, a scene component identifier of the scene component is generated, and scene component description information is generated based on the scene component identifier and scene attribute information; the basic component, general component, logical component, and scene component are saved to a component library. The basic component description information, general component description information, logical component description information, and scene component description information are used to determine at least one required component and the component identifier of at least one component, so as to import at least one component according to the component identifier to render and generate a target page.

[0030] Among them, basic components can generate the most basic elements of the page, general components can realize general functions and are highly reusable, logical components can realize specific functional logic, and scenario components can integrate multiple logical functions for application in different scenarios. By generating multi-level components that realize different functions and saving them in the component library, centralized management of components is achieved. Required components can be imported from the component library and components of different levels can be combined. There is no need to repeat development based on basic components. Complete pages and page function modules can be developed quickly, improving development efficiency. In addition, this layered design reduces the coupling between components, making components more independent and easier to maintain. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, a brief introduction will be given below to the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0032] Figure 1 A flowchart of an embodiment of a component library construction method provided by an embodiment of the present invention;

[0033] Figure 2 A flowchart of an embodiment of a page development method provided by an embodiment of the present invention;

[0034] Figure 3 A schematic structural diagram of a component library construction device provided by an embodiment of the present invention;

[0035] Figure 4 A schematic structural diagram of a page development device provided by an embodiment of the present invention;

[0036] Figure 5 A schematic structural diagram of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0037] To make the objectives, technical solutions, and advantages of the embodiments of the present invention more clear, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings of the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. All other embodiments obtained by ordinary technicians in this field based on the embodiments of the present invention without making any creative efforts shall fall within the scope of protection of the present invention.

[0038] As described in the background technology, basic components are difficult to directly meet the complex and changeable functional requirements of different business scenarios. When interface development in different business scenarios needs to achieve the same functional requirements, it is necessary to repeatedly develop based on the basic components, which not only consumes a lot of time and manpower costs, but also leads to low efficiency in page development.

[0039] In order to solve the technical problem of low page development efficiency, the inventors have come up with the idea of ​​generating components with complex functions based on basic components for page development. Therefore, after a series of studies, the inventors have proposed the technical solution of the present invention. In an embodiment of the present invention, a basic component can be generated based on basic attribute information, a basic component identifier of the basic component can be generated, and basic component description information can be generated based on the basic component identifier and basic attribute information of the basic component; based on at least one basic component corresponding to a general type and general attribute information, a general component can be encapsulated and generated, a general component identifier of the general component can be generated, and general component description information can be generated based on the general component identifier and general attribute information of the general component; based on at least one basic component corresponding to a function type, at least one general component and logical attribute information, a logical component can be encapsulated and generated, a logical component identifier of the logical component can be generated, and general component description information can be generated based on the logical component identifier and logical attribute information of the logical component; based on at least one basic component corresponding to a scene type, at least one general component, at least one logical component and scene attribute information, a scene component can be encapsulated and generated, a scene component identifier of the scene component can be generated, and scene component description information can be generated based on the scene component identifier and scene attribute information of the scene component; the basic component, general component, logical component and scene component can be saved to a component library. Among them, the basic component description information, general component description information, logical component description information and scenario component description information are used to determine at least one required component and the component identification of at least one component, so as to import at least one component according to the component identification to render and generate the target page.

[0040] Among them, basic components can generate the most basic elements of the page, general components can realize general functions and are highly reusable, logical components can realize specific functional logic, and scenario components can integrate multiple logical functions for application in different scenarios. By generating multi-level components that realize different functions and saving them in the component library, centralized management of components is achieved. Required components can be imported from the component library and components of different levels can be combined. There is no need to repeat development based on basic components. Complete pages and page function modules can be developed quickly, improving development efficiency. In addition, this layered design reduces the coupling between components, making components more independent and easier to maintain.

[0041] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in the embodiments of the present invention are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with the relevant laws, regulations and standards of relevant countries and regions, and provide corresponding operation entrances for users to choose to authorize or refuse.

[0042] Some embodiments of the present invention are described in detail below with reference to the accompanying drawings. The following embodiments and the features and steps in the embodiments can be combined with each other unless they conflict with each other. Furthermore, the sequence of steps in the following method embodiments is provided for illustrative purposes only and is not intended to be a strict limitation.

[0043] Figure 1 A flowchart of a component library construction method provided in an embodiment of the present invention, which can be applied to a server, may include the following steps:

[0044] 101: Generate a basic component based on basic attribute information, generate a basic component identifier of the basic component, and generate basic component description information according to the basic component identifier and the basic attribute information.

[0045] Among them, basic components are pre-built, most basic, non-divisible, reusable components with specific functions, such as button components, input box components, check box components, label components, text components, icon components, and image components.

[0046] The basic attribute information may include configuration attribute information, method attribute information, life cycle information, side effect information and / or context information required for configuring the basic components.

[0047] Configuration property information may include, for example, the property name and property value type of the property item, wherein the specific property value of the property item may be left blank or use the default value. Alternatively, configuration property information may include, for example, the property name, property value, and property value type of the property item, that is, the configuration property information may also include specific property values. Optionally, the property name and property value type of the property item of the basic component may be pre-defined through props (properties), and then specific property values ​​may be passed in for the property item through props.

[0048] For example, the basic attribute information of a button component may include the attribute item "type" with a corresponding value of "surshape" and a String type, and the attribute item "size" with a corresponding value of "small" and a String type. Based on this basic attribute information, a small-surface button component can be generated.

[0049] The basic component identifier can be automatically generated or configured by the developer.

[0050] The basic component description information includes a basic component identifier and basic attribute information of the basic component. The basic component description information can clarify the attributes and functions of the basic component corresponding to the basic component identifier.

[0051] 102: Based on at least one basic component corresponding to the general type and the general attribute information, encapsulate and generate a general component, generate a general component identifier of the general component, and generate general component description information according to the general component identifier and the general attribute information.

[0052] The general property information may include configuration property information, method property information, life cycle information, side effect information and / or context information required for configuring the general component.

[0053] Universal component identifiers can be automatically generated or configured by the developer.

[0054] A generic component may be a component used to implement functions corresponding to a generic type. For example, it may include a form component that implements form functions, a list component that implements list functions, a dialog component that implements dialog functions, a tab component that implements tab functions, and a selector component that implements selector functions.

[0055] For example, the at least one basic component corresponding to the form type may include basic components such as an input box component, a button component, and a cell component.

[0056] Among them, optionally, the general attribute information may include the attribute value of the attribute item for any one of the at least one basic components. For example, if the attribute value of a certain attribute item in any basic component is empty or the default value, the attribute value of the attribute item may be included in the general attribute information, and the attribute value may be passed into the attribute item through props. Optionally, the general attribute information may also include the attribute name, attribute value and attribute value type corresponding to the attribute item not included in at least one basic component. The attribute name, attribute value and attribute value type corresponding to the attribute item corresponding to the attribute item may be added to the attribute information of the corresponding basic component to expand the function of the basic component. Optionally, the general attribute information may also include attribute information corresponding to a specific general function of the general component. The attribute information does not act on the basic component, but acts on the general component itself to supplement the functions that the basic component does not have.

[0057] Since the general component description information includes the general component identifier and the general attribute information of the general component, the general component description information can clearly define the attributes and functions of the general component corresponding to the general component identifier.

[0058] 103: Based on at least one basic component, at least one general component and logic attribute information corresponding to the logic type, encapsulate and generate a logic component, generate a logic component identifier of the logic component, and generate logic component description information according to the logic component identifier and the logic attribute information.

[0059] The logic attribute information may include configuration attribute information, method attribute information, life cycle information, side effect information and / or context information required for configuring the logic component.

[0060] Among them, at least one basic component and at least one common component generate a logic component. The basic component can be nested in the common component or can be independent of the common component.

[0061] Logical component identifiers can be automatically generated or configured by the developer.

[0062] A logic component may be a component that implements the function corresponding to the logic type. For example, it may include a login form component that implements the login form function, a product card component that implements the product card function, an order list component that implements the order list function, and an address selector component that implements the address selector function.

[0063] Optionally, the logical attribute information may include the attribute values ​​of the attribute items of any one of at least one basic component and at least one general component. For example, if the attribute value of a certain attribute item in any component is empty or a default value, the attribute value of the attribute item may be included in the logical attribute information, and the attribute value may be passed into the attribute item through props. Optionally, the logical attribute information may also include the attribute name, attribute value, and attribute value type corresponding to the attribute items not included in at least one basic component and at least one general component. The attribute name, attribute value, and attribute value type corresponding to the attribute item may be added to the attribute information of the corresponding basic component or general component to expand the function of the basic component or general component. Optionally, the logical attribute information may also include attribute information corresponding to the specific logical function of the logical component. The attribute information does not act on the basic component and the general component, but acts on the general component itself to supplement the functions that the basic component and the general component do not have.

[0064] For example, a login form component that implements the login form function can be generated based on common components such as the form container component and the field wrapper component, as well as basic components such as the input box component and the button component. For example, the logical attribute information can include the attribute value "Please enter a password" of the attribute item "placeholder" of the input box component to expand the attribute information of the input box component, and can include the attribute value "password" of the attribute item "label" of the field wrapper component, the attribute value "password" of the attribute item "name", and the attribute value {validationRules.password} of the attribute item "rules". The button component can be nested in the field wrapper component. In addition, the logical attribute information can also include attribute information corresponding to specific logical functions, such as attribute information corresponding to form validation rules and attribute information corresponding to submission processing rules.

[0065] The logical component description information includes a logical component identifier and logical attribute information of the logical component. The logical component description information can clarify the attributes and functions of the logical component corresponding to the logical component identifier.

[0066] 104: Based on at least one basic component, at least one general component, at least one logical component and scene attribute information corresponding to the scene type, encapsulate and generate a scene component, generate a scene component identifier of the scene component, and generate scene component description information according to the scene component identifier and the scene attribute information.

[0067] Scene component identifiers can be automatically generated or configured by the developer.

[0068] Among them, at least one basic component, at least one general component and at least one logical component generate a logical component. The basic component can be nested in the general component and / or the logical component, or it can be independent of the general component and / or the logical component. The general component can be nested in the logical component, or the general component can be independent of the logical component.

[0069] A scene component may refer to a component used to implement the function corresponding to the scene type, for example, a product list component that implements a product list function, a product details component that implements a product details function, and a data management component that implements a data management function.

[0070] For example, a product details component can be generated based on logical components such as product cards and general components such as tab components.

[0071] The scene attribute information may include configuration attribute information, method attribute information, life cycle information, side effect information and / or context information required for configuring the scene component.

[0072] Among them, optionally, the scene attribute information may include the attribute value of the attribute item of any one of at least one basic component, at least one general component, and at least one logical component. For example, if the attribute value of a certain attribute item in any component is empty or the default value, the attribute value of the attribute item may be included in the general attribute information, and the attribute value may be passed into the attribute item through props. Optionally, the scene attribute information may also include the attribute name, attribute value, and attribute value type corresponding to the attribute item not included in at least one basic component, at least one general component, and at least one logical component. The attribute name, attribute value, and attribute value type corresponding to the attribute item corresponding to the attribute item may be added to the attribute information of the corresponding component to expand the function of the component. Optionally, the scene attribute information may also include attribute information corresponding to a specific scene function of the scene component. The attribute information does not act on the basic component, the general component, and the logical component, but acts on the scene component itself to supplement the functions that the basic component, the general component, and the logical component do not have.

[0073] The scene component description information includes the scene component identifier and the scene attribute information of the scene component. The scene component description information can clearly define the attributes and functions of the scene component corresponding to the scene component identifier.

[0074] 105: Save basic components, common components, logic components, and scene components to the component library.

[0075] Among them, the basic component description information, general component description information, logical component description information and scenario component description information are used to determine at least one required component and the component identification of at least one component, so as to import at least one component according to the component identification to render and generate the target page.

[0076] In an embodiment of the present invention, the basic components can generate the most basic elements of the page, the general components can realize general functions with strong reusability, the logic components can realize specific functional logic, and the scene components can integrate multiple logical functions for application in different scenes. By generating multi-level components that realize different functions and saving them in the component library, centralized management of components is achieved. The required components can be imported from the component library and components of different levels can be combined. There is no need to repeat development based on the basic components. Complete pages and page function modules can be developed quickly, thereby improving development efficiency. In addition, this layered design reduces the coupling between components, making the components more independent and easier to maintain.

[0077] In addition, you can configure attribute values ​​for the attribute items of the visual display effects in basic components, general components, logical components, and scene components, so that when multiple pages are developed based on basic components, general components, logical components, or scene components, the style of multiple pages can be guaranteed to be consistent.

[0078] In some embodiments, the method may further determine style attributes corresponding to different themes, attribute names corresponding to the style attributes, and attribute values ​​corresponding to the style attributes, generate theme identifiers corresponding to the different themes, and save the theme identifiers, style attributes, and attribute names corresponding to the style attributes, and attribute values ​​corresponding to the style attributes to the component library. For example, the style attributes corresponding to the "daytime" theme include a color attribute, the attribute name corresponding to the color attribute is "color," and the attribute value is "white." The style attributes corresponding to the "nighttime" theme include a color attribute, the attribute name corresponding to the color attribute is "color," and the attribute value is "black."

[0079] Figure 2 This is a flow chart of a page development method provided by an embodiment of the present invention. The method can be applied to page development tools, such as front-end development frameworks such as React and Vue. The method may include the following steps:

[0080] 201: Determine at least one required component and a component identifier corresponding to each of the at least one component, by combining the basic component description information, the general component description information, the logical component description information, and the scenario component description information.

[0081] Among them, at least one component may include a basic component, a general component, a logic component and / or a scene component.

[0082] Among them, the basic component description information is generated based on the basic component identification and the basic attribute information of the basic component; the general component description information is generated based on the general component identification and the general attribute information of the general component; the logical component description information is generated based on the logical component identification and the logical attribute information of the logical component; the scene component description information is generated based on the scene component identification and the scene attribute information of the scene component.

[0083] Since the basic component description information can clarify the properties and functions of the basic component corresponding to the basic component identifier, the general component description information can clarify the properties and functions of the general component corresponding to the general component identifier, the logical component description information can clarify the properties and functions of the logical component corresponding to the logical component identifier, and the scene component description information can clarify the properties and functions of the scene component corresponding to the scene component identifier, based on the above description information, at least one corresponding component can be determined according to the required function.

[0084] The specific steps of generating basic components, general components, logic components and scene components and constructing the component library can be found in the description of the component library construction method embodiment above, and will not be elaborated here.

[0085] 202: Import at least one component from the component library according to the component identifier corresponding to the at least one component.

[0086] The component library includes at least one basic component, at least one general component, at least one logic component and at least one scene component.

[0087] 203: Generate a target page based on at least one component rendering.

[0088] In this embodiment, the basic components can generate the most basic elements of the page, the general components can implement general functions with strong reusability, the logic components can implement specific functional logic, and the scenario components can integrate multiple logical functions for application in different scenarios. You can import the required components from the component library and combine components at different levels. Without the need to repeatedly develop based on the basic components, you can quickly develop complete pages and page function modules, improving development efficiency. In addition, this layered design reduces the coupling between components, making the components more independent and easier to maintain.

[0089] In some embodiments, the component library further includes style attributes corresponding to different themes and attribute names and attribute values ​​corresponding to the style attributes.

[0090] Generating a target page based on at least one component rendering may include: responding to a theme import request, querying a target theme corresponding to the theme identifier from a component library according to a theme identifier in a theme switching request, determining at least one target style attribute corresponding to the target theme, and a target style attribute name and a target style attribute value corresponding to at least one target style attribute.

[0091] In response to the theme switching request, the initial attribute value of the target style attribute in at least one first target component to be switched is switched to the corresponding target style attribute value; and the target page is generated based on the re-rendering of at least one component.

[0092] For example, if the imported theme is "Daytime," the corresponding style attribute for the "Daytime" theme includes a color attribute, whose attribute name is "color" and whose attribute value is "white." At least one first target component contains a color attribute. Therefore, the initial attribute value of the color attribute in the at least one first target component can be replaced with the attribute value "white," so that the target page generated by rendering the at least one component conforms to the visual style of the theme.

[0093] In some embodiments, generating a target page based on rendering of at least one component may include: instantiating at least one component into at least one corresponding component object; rendering at least one component object into at least one corresponding page element; and generating the target page based on the at least one page element.

[0094] Among them, instantiating at least one component into a corresponding at least one component object can refer to instantiating at least one component into a corresponding DOM (Document Object Model) element, so that the component is converted into an element that can be understood and rendered by the browser, and then the DOM element corresponding to the at least one component can be rendered into a corresponding actual at least one page element, and a target page is generated based on the combination of at least one page element.

[0095] In some embodiments, the method may further include, in response to an update operation on a second target component in at least one component, re-rendering the second target component to generate a target page; in response to an uninstall operation on a third target component in at least one component, uninstalling the component object and page elements corresponding to the third target component.

[0096] Among them, the update operation of the first target component in at least one component can be caused by different trigger conditions, for example, the state change of the first target component may be caused by user interaction, or the first target component may receive a new property value passed by the parent component.

[0097] For the uninstallation operation of the second target component in at least one component, uninstalling the component object and page element corresponding to the second target component may refer to the DOM element and rendered page element corresponding to the second target component.

[0098] In some embodiments, instantiating at least one component into at least one corresponding component object may include: instantiating at least one component into at least one corresponding component object, and triggering at least one component-associated side effect.

[0099] Uninstalling the component object and the page element corresponding to the second target component may include: uninstalling the component object and the page element corresponding to the second target component, and uninstalling the side effects associated with the second target component.

[0100] Side effects can refer to operations that are not directly related to rendering but affect the program state, such as timers, event monitoring, and network requests. Side effects can be triggered when the relevant component is instantiated and uninstalled when the component object corresponding to the second target component and the page element are uninstalled, to prevent side effects from affecting subsequent behavior and ensure performance and stability.

[0101] In some embodiments, generating a target page based on rendering of at least one component may include: in the process of generating a target page based on rendering of at least one component, detecting that a user's interactive operation on the target page meets a trigger condition of a third target component, and preloading the third target component.

[0102] The triggering condition for preloading the third target component may be configured in the component library, or may be configured after the third target component is imported from the component library.

[0103] The triggering conditions for preloading may include, for example, scrolling events, mouse movement, clicks, and the like.

[0104] In some embodiments, to increase page loading speed and performance, generating a target page based on at least one component rendering may include code-splitting the at least one component, and loading the corresponding component on demand during the generation of the target page based on the at least one component rendering. For example, the component is only loaded when the user accesses it.

[0105] In addition, during the process of generating a target page based on at least one component rendering, the code can be statically analyzed to remove unused code and reduce unnecessary running overhead.

[0106] Figure 3 A schematic structural diagram of a component library construction device provided in an embodiment of the present invention, the device may include:

[0107] A first generating module is configured to generate a basic component based on the basic attribute information, generate a basic component identifier of the basic component, and generate basic component description information according to the basic component identifier and the basic attribute information of the basic component;

[0108] A second generation module is configured to encapsulate and generate a general component based on at least one basic component and general attribute information corresponding to the general type, generate a general component identifier for the general component, and generate general component description information based on the general component identifier and the general attribute information of the general component;

[0109] a third generation module, configured to encapsulate and generate a logical component based on at least one basic component, at least one common component, and logical attribute information corresponding to the logical type, and generate a logical component identifier for the logical component, and generate logical component description information based on the logical component identifier and the logical attribute information of the logical component;

[0110] a fourth generation module, configured to encapsulate and generate a scene component based on at least one basic component, at least one general component, at least one logical component, and scene attribute information corresponding to the scene type, and generate a scene component identifier for the scene component, and generate scene component description information based on the scene component identifier and the scene attribute information of the scene component;

[0111] The save module is used to save basic components, common components, logic components, and scene components to the component library;

[0112] Among them, the basic component description information, general component description information, logical component description information and scenario component description information are used to determine at least one required component and the component identification of at least one component, so as to import at least one component according to the component identification to render and generate the target page.

[0113] Figure 3 The component library building device shown can execute Figure 1 The component library construction method of the embodiment shown in the figure, for the parts not described in detail in this embodiment, please refer to the Figure 1 The implementation process and technical effects of this technical solution can be found in Figure 1 The description in the illustrated embodiment will not be repeated here.

[0114] Figure 4 A schematic diagram of the structure of a page development device provided in an embodiment of the present invention, the device may include:

[0115] Determination module 401 is used to determine at least one required component and the component identifier corresponding to at least one component, respectively, by combining basic component description information, general component description information, logical component description information, and scene component description information; the at least one component includes a basic component, a general component, a logical component, and / or a scene component; the basic component description information is generated based on the basic component identifier and the basic attribute information of the basic component; the general component description information is generated based on the general component identifier and the general attribute information of the general component; the logical component description information is generated based on the logical component identifier and the logical attribute information of the logical component; and the scene component description information is generated based on the scene component identifier and the scene attribute information of the scene component;

[0116] An import module 402 is configured to import at least one component from a component library according to a component identifier corresponding to at least one component; the component library includes at least one basic component, at least one general component, at least one logical component, and at least one scenario component;

[0117] The rendering module 403 is configured to generate a target page based on at least one component rendering.

[0118] Figure 4 The page development device shown can execute Figure 2 The page development method of the embodiment shown in the figure, for the part not described in detail in this embodiment, please refer to the Figure 2 The implementation process and technical effects of this technical solution can be found in Figure 2 The description in the illustrated embodiment will not be repeated here.

[0119] In one possible design, Figure 1 The component library construction method provided in the embodiment shown or Figure 2The page development method provided in the embodiment shown can be applied in an electronic device, such as Figure 5 As shown, the electronic device may include: a processor 51 and a memory 52. ​​The memory 52 is used to store data that supports the electronic device to execute Figure 1 The component library construction method provided in the embodiment shown or Figure 2 The program of the page development method provided in the illustrated embodiment is configured such that the processor 51 is configured to execute the program stored in the memory 52 .

[0120] The structure of the electronic device may further include a communication interface 53 for the electronic device to communicate with other devices or communication systems.

[0121] In addition, an embodiment of the present invention provides a computer storage medium for storing computer software instructions used by the above electronic device, which includes instructions for executing the above Figure 1 The component library construction method provided in the embodiment shown or Figure 2 The procedures involved in the page development method provided in the illustrated embodiment.

[0122] In addition, an embodiment of the present invention provides a computer program product. The computer program product includes a computer program or instructions. When the computer program or instructions are executed by a processor, the processor is enabled to implement the above Figure 1 The component library construction method provided in the embodiment shown or Figure 2 The steps or functions of the page development method provided in the illustrated embodiment.

[0123] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the various embodiments of the present invention.

Claims

1. A component library construction method, characterized in that: Applied to the server, including: Generate a basic component based on the basic attribute information, generate a basic component identifier of the basic component, and generate basic component description information according to the basic component identifier and the basic attribute information; Based on at least one basic component and general attribute information corresponding to the general type, encapsulate and generate a general component, generate a general component identifier of the general component, and generate general component description information according to the general component identifier and the general attribute information; Encapsulate and generate a logical component based on at least one basic component, at least one common component, and logical attribute information corresponding to the logical type, generate a logical component identifier for the logical component, and generate logical component description information based on the logical component identifier and the logical attribute information; Based on at least one basic component, at least one general component, at least one logical component and scene attribute information corresponding to the scene type, encapsulate and generate a scene component, generate a scene component identifier for the scene component, and generate scene component description information according to the scene component identifier and the scene attribute information; Saving the basic component, the general component, the logic component, and the scene component to a component library; Among them, the basic component description information, the general component description information, the logical component description information and the scene component description information are used to determine at least one required component and the component identifier of the at least one component, so as to import the at least one component according to the component identifier to render and generate the target page.

2. A page development method, characterized in that: include: Determine at least one required component and the component identifier corresponding to each of the at least one component in combination with the basic component description information, the general component description information, the logical component description information and the scene component description information; the at least one component includes a basic component, a general component, a logical component and / or a scene component; the basic component description information is generated based on the basic component identifier and basic attribute information; the general component description information is generated based on the general component identifier and general attribute information; the logical component description information is generated based on the logical component identifier and logical attribute information; the scene component description information is generated based on the scene component identifier and scene attribute information; Importing the at least one component from a component library according to the component identifier corresponding to the at least one component; the component library includes at least one basic component, at least one general component, at least one logic component and at least one scenario component; A target page is generated based on the at least one component rendering.

3. The method according to claim 2, characterized in that The component library also includes style attributes corresponding to different themes and attribute names and attribute values ​​corresponding to the style attributes; Generating a target page based on the at least one component rendering includes: In response to the theme import request, querying the target theme corresponding to the theme identifier from the component library according to the theme identifier in the theme switch request, and determining at least one target style attribute corresponding to the target theme and a target style attribute name and a target style attribute value corresponding to the at least one target style attribute; In response to the theme switching request, switching an initial attribute value of a target style attribute in at least one first target component to be switched to a corresponding target style attribute value; Re-rendering generates a target page based on the at least one component.

4. The method according to claim 2, characterized in that Generating a target page based on the at least one component rendering includes: Instantiating the at least one component into a corresponding at least one component object; Rendering the at least one component object into at least one corresponding page element; A target page is generated based on the at least one page element.

5. The method according to claim 4, characterized in that Also includes: In response to an update operation on a second target component among the at least one component, re-rendering the second target component to generate a target page; In response to an uninstallation operation on a third target component among the at least one component, the component object and page element corresponding to the third target component are uninstalled.

6. The method according to claim 5, characterized in that The instantiating the at least one component into the corresponding at least one component object comprises: Instantiating the at least one component into a corresponding at least one component object, and triggering a side effect associated with the at least one component; The uninstallation of the component object and page element corresponding to the third target component includes: Uninstall the component object and page element corresponding to the third target component, and uninstall the side effects associated with the second target component.

7. The method according to claim 2, characterized in that Generating a target page based on the at least one component rendering includes: During the process of generating a target page based on rendering of the at least one component, it is detected that the user's interactive operation on the target page meets the triggering condition of the third target component, and the third target component is preloaded.

8. A component library construction device, characterized in that: include: A first generating module is configured to generate a basic component based on basic attribute information, generate a basic component identifier of the basic component, and generate basic component description information according to the basic component identifier and the basic attribute information; A second generation module is configured to encapsulate and generate a general component based on at least one basic component and general attribute information corresponding to the general type, generate the general component identifier, and generate general component description information according to the general component identifier and the general attribute information of the general component; A third generation module is configured to encapsulate and generate a logical component based on at least one basic component, at least one common component, and logical attribute information corresponding to the logical type, generate a logical component identifier for the logical component, and generate logical component description information based on the logical component identifier and the logical attribute information; a fourth generation module, configured to encapsulate and generate a scene component based on at least one basic component, at least one general component, at least one logical component, and scene attribute information corresponding to the scene type, generate a scene component identifier for the scene component, and generate scene component description information based on the scene component identifier and the scene attribute information; A saving module, configured to save the basic component, the general component, the logic component, and the scene component to a component library; Among them, the basic component description information, the general component description information, the logical component description information and the scene component description information are used to determine at least one required component and the component identifier of the at least one component, so as to import the at least one component according to the component identifier to render and generate the target page.

9. A page development device, characterized in that: include: A determination module is configured to determine at least one required component and a component identifier corresponding to each of the at least one component, based on basic component description information, general component description information, logical component description information, and scene component description information; the at least one component includes a basic component, a general component, a logical component, and / or a scene component; the basic component description information is generated based on the basic component identifier and basic attribute information; the general component description information is generated based on the general component identifier and general attribute information; the logical component description information is generated based on the logical component identifier and logical attribute information; and the scene component description information is generated based on the scene component identifier and scene attribute information; An import module, configured to import the at least one component from a component library according to component identifiers corresponding to the at least one component; the component library includes at least one basic component, at least one general component, at least one logical component, and at least one scenario component; A rendering module is used to generate a target page based on the at least one component rendering.

10. An electronic device, characterized in that: include: A memory, a processor, and a communication interface; wherein the memory stores executable code, and when the executable code is executed by the processor, the processor executes the component library construction method according to claim 1 or the page development method according to any one of claims 2 to 7.

11. A non-transitory machine-readable storage medium, characterized in that The non-transitory machine-readable storage medium stores executable code, and when the executable code is executed by a processor of an electronic device, the processor executes the component library construction method according to claim 1 or the page development method according to any one of claims 2 to 7.

Images