Customized page development method, device, electronic device and readable storage medium

Abstract

The present application discloses a method, device, electronic device and readable storage medium for developing customized pages, which are applied to the field of computer technology. The method for developing customized pages includes: determining the initial page corresponding to the project to be customized and the module to be rendered of the initial page based on the obtained project customization request carrying an environment variable switch, wherein the environment variable switch is used to characterize the changes in the usage environment of the target functional component in different customized pages; determining the target rendering position of the target functional component corresponding to the initial page in the module to be rendered based on the environment variable switch and the preset component rendering file; rendering the target functional component to the target rendering position to obtain the target customized page of the project to be customized. The present application solves the technical problem of low development efficiency of customized pages.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method, device, electronic device, and readable storage medium for developing customized pages. Background Art

[0002] With the continuous development of computer technology, more and more industries choose to build visual pages by combining multiple components. Taking the monitoring screen as an example, the current market is roughly divided into visual monitoring screens and customized monitoring screens. Among them, customized monitoring screens have become the user's more popular choice because they fit the user's usage scenarios or have specific attributes. However, compared with the visual monitoring screen, which only requires dragging and dropping functional components, the development of customized monitoring screens requires a higher level of technology. At the same time, during the development process, the same functional component may be located in different areas of the page in different customized projects, which leads to duplication of work in the development of different customized projects for the same functional component. Therefore, the current development efficiency of customized pages is low. Summary of the Invention

[0003] The main purpose of this application is to provide a method, device, electronic device and readable storage medium for developing customized pages, aiming to solve the technical problem of low efficiency in developing customized pages in the prior art.

[0004] To achieve the above objectives, the present application provides a method for developing a customized page, the method comprising:

[0005] Determining, based on the obtained project customization request carrying an environment variable switch, an initial page corresponding to the project to be customized and a module to be rendered on the initial page, wherein the environment variable switch is used to represent changes in the usage environment of the target functional component in different customized pages;

[0006] Determine the target rendering position of the target functional component corresponding to the initial page in the module to be rendered according to the environment variable switch and the preset component rendering file;

[0007] The target functional component is rendered to the target rendering position to obtain a target customization page for the item to be customized.

[0008] To achieve the above-mentioned purpose, the present application further provides a device for developing a customized page, the device comprising:

[0009] A page determination module is configured to determine, based on an acquired project customization request carrying an environment variable switch, an initial page corresponding to the project to be customized and a module to be rendered for the initial page, wherein the environment variable switch is used to represent changes in the usage environment of the target functional component in different customized pages;

[0010] A position determination module, configured to determine a target rendering position of a target functional component corresponding to the initial page in the module to be rendered based on the environment variable switch and the preset component rendering file;

[0011] A rendering module is used to render the target functional component to the target rendering position to obtain a target customization page of the item to be customized.

[0012] The present application also provides an electronic device, which includes: a memory, a processor, and a program of the customized page development method stored in the memory and runnable on the processor. When the program of the customized page development method is executed by the processor, the steps of the customized page development method as described above can be implemented.

[0013] The present application also provides a computer-readable storage medium, on which is stored a program for implementing a method for developing a customized page. When the program for the method for developing a customized page is executed by a processor, the steps of the method for developing a customized page as described above are implemented.

[0014] The present application also provides a computer program product, including a computer program, which implements the steps of the above-mentioned customized page development method when executed by a processor.

[0015] The present application provides a method, apparatus, electronic device, and readable storage medium for developing a customized page. Specifically, the present application first determines an initial page corresponding to a project to be customized and a module to be rendered on the initial page based on an acquired project customization request carrying an environment variable switch, wherein the environment variable switch is used to characterize changes in the usage environment of a target functional component in different customized pages. This achieves the purpose of dividing the initial page into multiple rendering modules based on the project request when receiving the project customization request. At the same time, when the project customization request carries an environment variable switch, it also indicates that the project to be customized needs to render the target functional component in a certain module to be rendered on the initial page. Furthermore, based on the environment variable switch and a preset component rendering file, a target rendering position of the target functional component corresponding to the initial page in the module to be rendered is determined. Furthermore, since the environment variable switch is used to characterize changes in the usage environment of the target functional component in different customized pages, this achieves the purpose of determining the specific rendering position of the target functional component on the initial page through the environment variable switch and the preset component rendering file. Furthermore, the target functional component is rendered to the target rendering position to obtain a target customized page for the project to be customized, thereby completing the construction of the target functional component on the target customized page. Since there is an environment variable switch in the project customization request, that is, the target functional component only changes in the usage environment in the project to be customized, and then the specific rendering position of the target functional component in the project to be customized can be determined through the environment variable switch and the preset component rendering component, and then the target functional component is rendered to the specific rendering position, and finally the target customization page of the project to be customized is obtained. When the usage environment of the target functional component changes in different customization projects, for example, the target functional component is located in different areas of the page in different customization projects, etc., the environment variable switch and the preset rendering file can be used to configure the target functional component to meet the purpose of the usage environment of the project customization request, instead of repeating the development work for the target functional component itself in different customization projects. This overcomes the technical defect in the existing technology that repeated development of the same functional component leads to repetitive work in the development process of different customization projects, thereby improving the development efficiency of customized pages. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0017] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0018] Figure 1 This is a flowchart of the first embodiment of the method for developing a customized page for this application;

[0019] Figure 2 This is a schematic diagram of the partial rendering styles of the module Z to be rendered and two target functional components in the development method of the customized page for this application;

[0020] Figure 3 This is a flowchart of the second embodiment of the method for developing a customized page for this application;

[0021] Figure 4 This is a schematic diagram of the device structure of the hardware operating environment involved in the method for developing a customized page in an embodiment of the present application.

[0022] The purpose, features and advantages of this application will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0023] To make the above-mentioned objects, features, and advantages of the present invention more clearly understood, 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 some of the embodiments of the present invention, not all of them. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making any creative efforts shall fall within the scope of protection of the present invention.

[0024] Example 1

[0025] First of all, it should be understood that for existing customized projects, there are usually different customized projects that use the same functional components, but the usage environment of the functional components in different customized projects has changed. For example, assuming that the customized project is a customized monitoring screen, customized project A and customized project B both use the functional component of chart component c. Due to different company business and scenario requirements, customized project A places the chart component c on the left side of the customized page, and customized project B places the chart component c on the right side of the customized page. In the existing page development technology, developers usually develop code for icon component c in different positions for customized project A and customized project B, which leads to repetitive work for developers during the development process, and thus makes the development efficiency of customized page development low. Therefore, there is an urgent need for a method to improve the development efficiency of customized pages.

[0026] The embodiment of the present application provides a method for developing a customized page. In the first embodiment of the method for developing a customized page of the present application, referring to Figure 1 , the method for developing the customized page includes:

[0027] Step S10: determining an initial page corresponding to the project to be customized and a module to be rendered on the initial page based on the obtained project customization request carrying an environment variable switch, wherein the environment variable switch is used to represent changes in the usage environment of the target functional component in different customized pages;

[0028] Step S20: determining the target rendering position of the target functional component corresponding to the initial page in the to-be-rendered module according to the environment variable switch and the preset component rendering file;

[0029] In this embodiment, it should be noted that the project development request is a development request for a customized page of a front-end project. The front-end project can specifically be composed of one or more customized pages. The project development request is specifically sent by the user through a terminal device equipped with the customized page development method. The terminal device can specifically be a server or a personal terminal, etc. The customized page is a front-end page. The development process of the front-end page usually starts with the product outputting a requirement document, and then the designer designs the UI view effect based on the requirement document to obtain a page design draft. Then the front-end developer develops the front-end page according to the page design draft, and after debugging the relevant interfaces, it is finally presented to the user through a browser or other means. The customized page includes one or more functional components.

[0030] In addition, it should be noted that after receiving a project customization request sent by the user through the terminal device, an initial page without content can be generated on the front-end application development platform where the user and the terminal device interact, that is, the initial page. The initial page can specifically be a blank hypertext markup language page, or it can be a template page that meets the user's customization requirements. The project to be customized is a front-end project waiting for customized page development, and the modules to be rendered are different position modules of the initial page of the functional component waiting to be rendered. In an implementable manner, the customized page is a large monitoring screen, and the modules to be rendered include the top position, the left position, the middle position and the right position, wherein the display size of the modules in different positions is determined according to user needs, and the fixation and movement of the modules to be rendered are also determined by user needs, which is not limited here.

[0031] In addition, it should be noted that the environment variable switch is configured by the user according to the functional component, and is used to characterize the changes in the usage environment of the target functional component in different customized pages, wherein the target functional component is a functional component developed by the front-end personnel in the previous project customization process, that is, the target functional component can be one or more in the development process of the customized page of the project to be customized. The functional component itself does not change, only the usage environment changes, such as the display position of the customized page of the project to be customized changes, etc. The functional component can be a chart component, a title component, and a table component, etc. For example, the chart component may include a bar chart, a column chart, a line chart, a pie chart, etc., wherein the style, text box, color and other attributes of the functional component are determined according to the actual needs of the user and are not limited here. For example, in an implementable manner, the target functional component is a title component. In the developed customized project, the title component is displayed in the top area of ​​the customized page, and in the project to be customized, it needs to be displayed in the left area, then the title component is the target functional component.

[0032] In addition, it should be noted that the preset component rendering file is used to store the rendering information of the target functional component, which can be one or more. The rendering information is determined by the environment variable switch, and can specifically include rendering name information, rendering location information, rendering category information and rendering association information. For any preset component rendering file, it includes rendering name information and rendering location information. The rendering name information is a unique identifier that distinguishes a certain target functional component from other target functional components, and is used to characterize the specific function of the target functional component. If the specific functions are consistent, they can also be distinguished by the specific characterization information of the component. The rendering location information is used to characterize the target The specific display position of the functional component in the module to be rendered on the initial page, the rendering category information is used to characterize the number of the target functional components, specifically one or more, and the rendering association information is used to characterize the existence of an association relationship between the modules to be rendered on the initial page. In one implementable manner, it is assumed that the target functional component X is displayed in the module to be rendered x, and the target functional component Y is displayed in the module to be rendered y, wherein the target functional component X is used to display the device list, and the target functional component Y is the map corresponding to the device sub-list of the device list. When the text information in the target functional component X changes, the target functional component Y also changes accordingly to the map area corresponding to the device sub-list.

[0033] As an example, steps S10 to S20 include: obtaining a customized page development request for a front-end project with an environment variable switch input by a user, and generating an initial page of the project to be customized and a module to be rendered of the initial page based on the development request, wherein the initial page is one and the module to be rendered is one or more; and determining the target rendering position of the target functional component corresponding to the initial page in the module to be rendered based on the environment variable switch and the preset component rendering file.

[0034] The step of determining the target rendering position of the target functional component corresponding to the initial page in the module to be rendered according to the environment variable switch and the preset component rendering file includes:

[0035] Step A10: parsing the environment variable switch to obtain the function component name of the target function component to be imported into the initial page;

[0036] Step A20: determining, based on the functional component name, a module to be rendered corresponding to the target functional component in the preset component rendering file;

[0037] Step A30 : determining a target rendering position of the target functional component in the to-be-rendered module according to the rendering category information of the preset component rendering file.

[0038] In this embodiment, it should be noted that the functional component name is a unique identifier that distinguishes a functional component from other functional components, and is used to characterize the specific function of the functional component, which can be one or more. For a customized page that needs to render multiple functional components, it includes target functional components and non-target functional components in the rendering process, wherein the non-target functional components are functional components that have not been developed by the front-end developer in the previous project customization process. The component name of any target functional component and the component name of any non-target functional component can be the functional component name. Writing the functional component name to the preset component rendering file is the rendering location information.

[0039] In addition, it should be noted that the target rendering position is the specific rendering position of the target functional component in the module to be rendered. In one feasible method, assuming that the size of the target functional component is 3cm*4cm, the module to be rendered is 6cm*8cm, and there is only one target functional component in the module to be rendered, then any continuous 3cm*4cm in the module to be rendered can be the target rendering position.

[0040] As an example, steps A10 to A30 include: parsing the environment variable switch according to a preset function packaging tool to obtain the function component name of the target function component imported into the initial page, wherein the preset function packaging tool can be webpack, Rollup, Snowpack, etc.; according to the function component name, determining the module to be rendered corresponding to the target function component in the preset component rendering file; according to the rendering category information of the preset component rendering file, determining the target rendering position of the target function component in the module to be rendered.

[0041] The rendering category information includes first rendering category information and second rendering category information, and the step of determining the target rendering position of the target functional component in the to-be-rendered module according to the rendering category information of the preset component rendering file includes:

[0042] Step B10: If the rendering category information is the first rendering category information, selecting a first preset rendering position as the target rendering position in the module to be rendered according to the component size of the target functional component;

[0043] Step B20: If the rendering category information is the second rendering category information, determining the target rendering position of the target functional component according to the component positioning rule of the module to be rendered.

[0044] In this embodiment, it should be noted that the first preset rendering position is a rendering position corresponding to the component size of the target functional component selected within the size range of the module to be rendered, and the rendering category information includes first rendering category information and second rendering category information, wherein the first rendering category information is used to characterize that there is only one target functional component in the module to be rendered, and the second rendering category information is used to characterize that there are multiple target functional components in the module to be rendered. When there are multiple target functional components in the module to be rendered, it is necessary to select a non-conflicting rendering position for each target functional component within the size range of the module to be rendered, that is, the component positioning rule is used to locate the rendering positions of multiple target functional components within the size range of the module to be rendered. For example, in an implementable manner, assuming that the size of the module to be rendered z is 9cm*9cm, the second rendering category information characterizes that there are two target functional components in the module to be rendered z, wherein the size of the target functional component v is 2cm*3cm, and the size of the target functional component n is 3cm*4cm. Figure 2 , Figure 2This is a schematic diagram of some rendering styles of the module to be rendered Z and the two target functional components. That is, within the size range of the module to be rendered Z, the specific rendering positions of the target functional component n and the target functional component v can be accurately located according to the sizes of the target functional component n and the target functional component v and the component positioning rules to ensure the independence of different styles.

[0045] As an example, steps B10 to B20 include: if the rendering category information is rendering category information used to characterize the rendering of a single target functional component in the corresponding module to be rendered, then based on the component size of the target functional component, a first preset rendering position is selected in the module to be rendered as the target rendering position; if the rendering category information is rendering category information used to characterize the rendering of multiple target functional components in the corresponding module to be rendered, then based on the component size of the target functional component, the module to be rendered corresponding to the multiple target functional components and the component positioning rule, the target rendering position of each target functional component is determined.

[0046] The step of determining the module to be rendered corresponding to the target functional component in the preset component rendering file according to the functional component name includes:

[0047] Step C10, using the functional component name as an index, searching a preset component rendering file library to obtain the preset component rendering file;

[0048] Step C20 : determining the module to be rendered corresponding to the target functional component according to the corresponding relationship between the rendering position information of the preset component rendering file and the module identifier of the module to be rendered.

[0049] In this embodiment, it should be noted that the preset component rendering file library is used to store preset rendering files, which can specifically be a mapping table. For the same target functional file, a mapping table can be constructed based on the one-to-one correspondence between the rendering name information and the preset component rendering file. When the preset component rendering file library is queried using the functional component name of the target functional component as an index, a unique preset component file can be queried.

[0050] In addition, it should be noted that since there are one or more modules to be rendered on the initial page, a different module identifier is defined for each module to be rendered, and the module identifier is needed to further determine the module to be rendered corresponding to the target functional component on the initial page. Therefore, the module identifier is used to determine the module to be rendered corresponding to the target functional component on the initial page, which can specifically be a slot.

[0051] As an example, steps C10 to C20 include: using the functional component name as an index, querying the preset component rendering file library to obtain the preset component rendering file; obtaining a preset number of modules to be rendered for the initial page based on the preset component rendering position information, selecting a target module identifier from the preset module identifier library, and obtaining a target module to be rendered, wherein the preset module identifier library is used to store a preset number of module identifiers of modules to be rendered, the target module identifier is the module identifier of the module to be rendered by the target functional component, and the target module to be rendered is the module to be rendered corresponding to the target functional component.

[0052] Step S30: Render the target functional component to the target rendering position to obtain a target customization page for the item to be customized.

[0053] In this embodiment, it should be noted that the target customized page is generated by rendering the functional components to the corresponding position, that is, the target customized page may include the target functional components and non-target functional components, or may only include the target functional components.

[0054] As an example, step S30 includes: if the functional component corresponding to the initial page is the target functional component, the target functional component is rendered to the target rendering position to obtain the target customized page of the item to be customized; if the functional component corresponding to the initial page is the target functional component and the non-target component, the target functional component and the non-target functional component are respectively rendered to the corresponding target rendering positions to obtain the target customized page, wherein both the target functional component and the non-target functional component can be one or more.

[0055] The target functional component includes a first target functional component and a second target functional component, and the step of rendering the target functional component to the target rendering position to obtain the target customization page of the item to be customized includes:

[0056] Step D10: If the target functional component is the first target functional component, rendering the first target functional component to the target rendering position to obtain a first target customization page of the item to be customized;

[0057] Step D20, if the target functional component is the second target functional component, when it is detected that the target functional component is rendered to the target rendering position, the associated functional component of the second target functional component is rendered to the associated rendering position of the associated rendering module of the module to be rendered, and the second target customization page of the item to be customized is obtained.

[0058] In this embodiment, it should be noted that the first target functional component is a target functional component without an associated rendering module, and the second target functional component is a target functional component with an associated rendering module. Whether there is an association between the modules to be rendered on the initial page is determined by the content represented by the functional components in each module to be rendered. In an implementable manner, assuming that the module to be rendered m corresponding to the target functional component is associated with the module to be rendered n on the initial page, the module to be rendered n is an associated rendering module, wherein the module to be rendered n may contain a functional component, a target functional component, or a collection of functional components or target functional components.

[0059] As an example, steps D10 to D20 include: if the target functional component is a target functional component without an associated rendering module, rendering the first target functional component to the target rendering position to obtain a first target customization page of the item to be customized, wherein the first target customization page is used to represent a target customization page in which there is no association between rendering modules; if the target functional component is a functional component with an associated rendering module, when it is detected that the target functional component is rendered to the target rendering position, rendering the associated functional component of the second target functional component to the associated rendering position of the associated rendering module of the module to be rendered to obtain a second target customization page of the item to be customized, wherein the associated functional component can be a functional component, a target functional component, or a collection of functional components or target functional components, and the second target customization page is used to represent a target customization page in which there is an association between rendering modules.

[0060] The method for developing the customized page further includes:

[0061] Step E10: Obtain a preset number of functional components and an initial page, wherein the initial page includes at least one preset rendering module having a module identifier;

[0062] Step E20: Rendering each of the functional components in each of the preset rendering modules to obtain rendering information of each of the functional components;

[0063] Step E30 , generating preset component rendering files corresponding to the respective rendering information, and integrating the preset component rendering files into a preset component rendering file library.

[0064] As an example, steps E10 to E30 include: obtaining a preset number of functional components and an initial page, wherein the initial page includes at least one preset rendering module with a module identifier; rendering each of the functional components in each of the preset rendering modules to obtain rendering information of each of the functional components; generating each preset component rendering file corresponding to each of the rendering information, and integrating each of the preset component rendering files into a preset component rendering file library. Since the preset component rendering file library contains a preset component rendering file corresponding to the target functional file, the use environment of the target functional file can be directly switched through the environment variable switch, thereby achieving the purpose of reducing repeated development of the target functional component, and thus laying the foundation for improving the development efficiency of customized pages.

[0065] An embodiment of the present application provides a method for developing a customized page, that is, the present application first determines an initial page corresponding to the project to be customized and a module to be rendered of the initial page based on an acquired project customization request carrying an environment variable switch, wherein the environment variable switch is used to characterize changes in the usage environment of a target functional component in different customized pages, that is, when a project customization request is received, the initial page is divided into multiple rendering modules according to the project request. At the same time, when the project customization request carries an environment variable switch, it also indicates that the project to be customized needs to render the target functional component in a certain module to be rendered on the initial page; and then, based on the environment variable switch and a preset component rendering file, the target rendering position of the target functional component corresponding to the initial page in the module to be rendered is determined. That is, since the environment variable switch is used to characterize changes in the usage environment of the target functional component in different customized pages, the specific rendering position of the target functional component in the initial page is determined through the environment variable switch and the preset component rendering file, and then the target functional component is rendered to the target rendering position to obtain the target customized page of the project to be customized, thereby completing the construction of the target functional component in the target customized page. Since there is an environment variable switch in the project customization request, that is, the target functional component only changes in the usage environment in the project to be customized, and then the specific rendering position of the target functional component in the project to be customized can be determined through the environment variable switch and the preset component rendering component, and then the target functional component is rendered to the specific rendering position, and finally the target customization page of the project to be customized is obtained. When the usage environment of the target functional component changes in different customization projects, for example, the target functional component is located in different areas of the page in different customization projects, etc., the environment variable switch and the preset rendering file can be used to configure the target functional component to meet the purpose of the usage environment of the project customization request, instead of repeating the development work for the target functional component itself in different customization projects. This overcomes the technical defect in the existing technology that repeated development of the same functional component leads to repetitive work in the development process of different customization projects, thereby improving the development efficiency of customized pages.

[0066] Example 2

[0067] Further, refer to Figure 3 In another embodiment of the present application, the same or similar contents as those in the above-mentioned embodiment 1 can be referred to the above description and will not be described in detail. On this basis, before the step of rendering the target functional component to the target rendering position to obtain the target customized page of the item to be customized, the method for developing the customized page further includes:

[0068] Step F10, detecting whether there is rendering-related information in the preset component rendering file corresponding to the target functional component;

[0069] Step F20: If yes, then obtain the associated rendering module of the module to be rendered according to the rendering associated information;

[0070] In step F30 , according to the target rendering position of the target functional component, the associated rendering module selects a second preset rendering position as an associated rendering position, wherein the associated rendering position is a rendering position of a functional component associated with the target functional component.

[0071] In this embodiment, it should be noted that since there may or may not be rendering-related information in the preset component rendering file, after obtaining the preset component rendering file corresponding to the target functional component, it is necessary to detect whether there is rendering-related information in the preset component rendering file corresponding to the target functional component to determine whether there is an associated functional component in the target functional component, wherein the associated functional component is used to represent the functional component waiting to be rendered in the associated rendering module of the target functional component to be rendered.

[0072] As an example, steps F10 to F30: detect whether there is rendering association information in the preset component rendering file corresponding to the target functional component; if it is detected that there is rendering association information in the preset component rendering file corresponding to the target functional component, obtain the associated rendering module of the module to be rendered based on the rendering association information; based on the target rendering position of the target functional component, select a second preset rendering position as the associated rendering position in the associated rendering module, wherein the associated rendering position is the rendering position of the associated functional component of the target functional component.

[0073] An embodiment of the present application provides a customized page rendering method, that is, detecting whether there is rendering association information in the preset component rendering file corresponding to the target functional component; if so, obtaining the associated rendering module of the module to be rendered based on the rendering association information; selecting a second preset rendering position as the associated rendering position in the associated rendering module based on the target rendering position of the target functional component, wherein the associated rendering position is the rendering position of the associated functional component of the target functional component. The embodiment of the present application detects whether there is an association relationship between the modules to be rendered of the initial page through the rendering association information in the preset component rendering file, and then performs associated rendering of the functional components between the modules to be rendered when there is an association relationship between the modules to be rendered, thereby overcoming the technical defect of separately rendering different modules to be rendered of the initial page in the prior art, and thus laying the foundation for improving the development efficiency of customized pages.

[0074] Example 3

[0075] The embodiment of the present application further provides a device for developing a customized page, the device comprising:

[0076] A page determination module is configured to determine, based on an acquired project customization request carrying an environment variable switch, an initial page corresponding to the project to be customized and a module to be rendered for the initial page, wherein the environment variable switch is used to represent changes in the usage environment of the target functional component in different customized pages;

[0077] A position determination module, configured to determine a target rendering position of a target functional component corresponding to the initial page in the module to be rendered based on the environment variable switch and the preset component rendering file;

[0078] A rendering module is used to render the target functional component to the target rendering position to obtain a target customization page of the item to be customized.

[0079] Optionally, the location determination module is further configured to:

[0080] Parsing the environment variable switch to obtain a function component name of a target function component imported into the initial page;

[0081] Determine, in the preset component rendering file, a module to be rendered corresponding to the target functional component according to the functional component name;

[0082] According to the rendering category information of the preset component rendering file, a target rendering position of the target functional component is determined in the to-be-rendered module.

[0083] Optionally, the location determination module is further configured to:

[0084] Using the functional component name as an index, query the preset component rendering file library to obtain the preset component rendering file;

[0085] The module to be rendered corresponding to the target functional component is determined according to the corresponding relationship between the rendering position information of the preset component rendering file and the module identifier of the module to be rendered.

[0086] Optionally, the rendering category information includes first rendering category information and second rendering category information, and the position determination module is further configured to:

[0087] If the rendering category information is the first rendering category information, selecting a first preset rendering position as the target rendering position in the to-be-rendered module according to the component size of the target functional component;

[0088] If the rendering category information is the second rendering category information, a target rendering position of the target functional component is determined according to the component positioning rule of the module to be rendered.

[0089] Optionally, the target functional component includes a first target functional component and a second target functional component, and the position determination module is further configured to:

[0090] If the target functional component is the first target functional component, rendering the first target functional component to the target rendering position to obtain a first target customization page of the item to be customized;

[0091] If the target functional component is the second target functional component, when it is detected that the target functional component is rendered to the target rendering position, the associated functional component of the second target functional component is rendered to the associated rendering position of the associated rendering module of the module to be rendered to obtain the second target customization page of the item to be customized.

[0092] Optionally, the customized page development device is further used to:

[0093] Detect whether there is rendering-related information in the preset component rendering file corresponding to the target functional component;

[0094] If yes, then obtaining the associated rendering module of the module to be rendered according to the rendering associated information;

[0095] According to the target rendering position of the target functional component, the associated rendering module selects a second preset rendering position as the associated rendering position, wherein the associated rendering position is the rendering position of the associated functional component of the target functional component.

[0096] Optionally, the customized page development device is further used to:

[0097] Obtaining a preset number of functional components and an initial page, wherein the initial page includes at least one preset rendering module having a module identifier;

[0098] Rendering each of the functional components in each of the preset rendering modules to obtain rendering information of each of the functional components;

[0099] Generate preset component rendering files corresponding to the rendering information one by one, and integrate the preset component rendering files into a preset component rendering file library.

[0100] The customized page development device provided by the present invention utilizes the customized page development method of the aforementioned embodiment to solve the technical problem of low customized page development efficiency. Compared with the prior art, the beneficial effects of the customized page development device provided by the embodiment of the present invention are the same as those of the customized page development method provided by the aforementioned embodiment. Other technical features of the customized page development device are the same as those disclosed in the aforementioned embodiment and are not further described here.

[0101] Example 4

[0102] An embodiment of the present invention provides an electronic device, which includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the customized page development method in the above-mentioned embodiment one.

[0103] Reference below Figure 4 , which shows a schematic diagram of the structure of an electronic device suitable for implementing the embodiments of the present disclosure. The electronic devices in the embodiments of the present disclosure may include, but are not limited to, mobile terminals such as mobile phones, laptop computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), in-vehicle terminals (e.g., in-vehicle navigation terminals), and fixed terminals such as digital TVs and desktop computers. Figure 4 The electronic device shown is only an example and should not limit the functions and scope of use of the embodiments of the present disclosure.

[0104] like Figure 4 As shown, the electronic device may include a processing device (such as a central processing unit, a graphics processing unit, etc.), which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) or a program loaded from a storage device into a random access memory (RAM). In the RAM, various programs and data required for the operation of the electronic device are also stored. The processing device, ROM, and RAM are connected to each other via a bus. An input / output (I / O) interface is also connected to the bus.

[0105] Typically, the following systems can be connected to the I / O interface: input devices such as a touch screen, touchpad, keyboard, mouse, image sensor, microphone, accelerometer, gyroscope, etc.; output devices such as a liquid crystal display (LCD), speaker, vibrator, etc.; storage devices such as a magnetic tape, hard disk, etc.; and communication devices. The communication device can allow the electronic device to communicate with other devices wirelessly or by wire to exchange data. Although the figures show electronic devices with various systems, it should be understood that it is not required to implement or have all of the systems shown. More or fewer systems may be implemented or have instead.

[0106] In particular, according to an embodiment of the present disclosure, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network via a communication device, or installed from a storage device, or installed from a ROM. When the computer program is executed by a processing device, the above-mentioned functions defined in the method of the embodiment of the present disclosure are performed.

[0107] The electronic device provided by the present invention employs the customized page development method of the above-mentioned embodiment, thereby resolving the technical problem of low efficiency in customized page development. Compared with the prior art, the beneficial effects of the electronic device provided by the embodiment of the present invention are the same as those of the customized page development method provided by the above-mentioned embodiment, and the other technical features of the electronic device are the same as those disclosed in the above-mentioned embodiment method, and are not further described here.

[0108] It should be understood that various parts of the present disclosure can be implemented with hardware, software, firmware or a combination thereof. In the description of the above embodiments, specific features, structures, materials or characteristics can be combined in any one or more embodiments or examples in an appropriate manner.

[0109] The above description is merely a specific embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any modifications or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in the present invention should be included in the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be based on the scope of protection of the claims.

[0110] Example 5

[0111] This embodiment provides a computer-readable storage medium having computer-readable program instructions stored thereon, and the computer-readable program instructions are used to execute the method for developing a customized page in the above-mentioned embodiment 1.

[0112] The computer-readable storage medium provided in the embodiment of the present invention can be, for example, a USB flash drive, but is not limited to electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, systems or devices, or any combination thereof. More specific examples of computer-readable storage media can include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In this embodiment, the computer-readable storage medium can be any tangible medium that contains or stores a program that can be used by or in combination with an instruction execution system, system or device. The program code contained on the computer-readable storage medium can be transmitted using any appropriate medium, including but not limited to: wires, optical cables, RF (radio frequency), etc., or any suitable combination thereof.

[0113] The computer-readable storage medium may be included in the electronic device, or may exist independently without being incorporated into the electronic device.

[0114] The above-mentioned computer-readable storage medium carries one or more programs. When the above-mentioned one or more programs are executed by an electronic device, the electronic device: determines the initial page corresponding to the project to be customized and the module to be rendered of the initial page based on the obtained project customization request carrying the environment variable switch, wherein the environment variable switch is used to characterize the changes in the usage environment of the target functional component in different customized pages; determines the target rendering position of the target functional component corresponding to the initial page in the module to be rendered based on the environment variable switch and the preset component rendering file; renders the target functional component to the target rendering position to obtain the target customized page of the project to be customized.

[0115] Computer program code for performing the operations of the present disclosure may be written in one or more programming languages, or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a stand-alone software package, partially on the user's computer and partially on a remote computer, or entirely on the remote computer or server. In cases involving a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., through the Internet using an Internet service provider).

[0116] The flow charts and block diagrams in the accompanying drawings illustrate the possible implementation architecture, functions and operations of the system, method and computer program product according to various embodiments of the present invention. In this regard, each box in the flow chart or block diagram can represent a module, program segment, or a part of code, and the module, program segment, or a part of code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order than that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flow chart, and the combination of the boxes in the block diagram and / or flow chart, can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0117] The modules involved in the embodiments described in this disclosure may be implemented in software or hardware, wherein the name of a module does not necessarily limit the unit itself.

[0118] The computer-readable storage medium provided by the present invention stores computer-readable program instructions for executing the aforementioned method for developing customized pages, thereby resolving the technical problem of low efficiency in developing customized pages. Compared to the prior art, the beneficial effects of the computer-readable storage medium provided by the embodiments of the present invention are similar to those of the method for developing customized pages provided by the aforementioned embodiments, and are not further elaborated here.

[0119] Example 6

[0120] The present application also provides a computer program product, including a computer program, which implements the steps of the above-mentioned customized page development method when executed by a processor.

[0121] The computer program product provided by this application solves the technical problem of low efficiency in developing customized pages. Compared with the prior art, the beneficial effects of the computer program product provided by the embodiment of the present invention are the same as the beneficial effects of the customized page development method provided by the above embodiment, and will not be repeated here.

[0122] The above are only preferred embodiments of the present application and do not limit the patent scope of the present application. Any equivalent structure or equivalent process transformation made using the contents of the present application specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent processing scope of the present application.

Claims

1. A method for developing a customized page, characterized in that: The method for developing the customized page includes: Determine, based on the obtained project customization request carrying the environment variable switch, an initial page corresponding to the project to be customized and a module to be rendered on the initial page, wherein the environment variable switch is used to characterize changes in the usage environment of the target functional component in different customized pages; during the development of the customized page for the project to be customized, the target functional component itself does not change, but the usage environment changes; Determining the target rendering position of the target functional component corresponding to the initial page in the to-be-rendered module based on the environment variable switch and the preset component rendering file; wherein the preset component rendering file is used to store rendering information of the target functional component, the rendering information being determined by the environment variable switch, and the rendering information including the functional component name, rendering position information, and rendering category information; The step of determining the target rendering position of the target functional component corresponding to the initial page in the to-be-rendered module according to the environment variable switch and the preset component rendering file includes: Parsing the environment variable switch to obtain a functional component name of a target functional component to be imported into the initial page; querying a preset component rendering file library based on the functional component name to obtain a preset component rendering file; determining a module to be rendered corresponding to the target functional component based on a correspondence between rendering position information in the preset component rendering file and a module identifier of the module to be rendered; determining a target rendering position of the target functional component in the module to be rendered based on rendering category information in the preset component rendering file; Rendering the target functional component to the target rendering position to obtain a target customization page for the item to be customized; Before the step of rendering the target functional component to the target rendering position to obtain the target customized page of the item to be customized, the method for developing the customized page further includes: Detect whether there is rendering association information in the preset component rendering file corresponding to the target functional component; if so, obtain the associated rendering module of the module to be rendered based on the rendering association information; based on the target rendering position of the target functional component, select a second preset rendering position as the associated rendering position in the associated rendering module, wherein the associated rendering position is the rendering position of the associated functional component of the target functional component.

2. The method for developing a customized page according to claim 1, wherein: The rendering category information includes first rendering category information and second rendering category information. The step of determining the target rendering position of the target functional component in the to-be-rendered module according to the rendering category information of the preset component rendering file comprises: If the rendering category information is the first rendering category information, selecting a first preset rendering position as the target rendering position in the module to be rendered based on the component size of the target functional component, wherein the first rendering category information is used to indicate that there is a target functional component in the module to be rendered; If the rendering category information is the second rendering category information, the target rendering position of the target functional component is determined according to the component positioning rule of the module to be rendered, wherein the second rendering category is used to indicate that there are multiple target functional components in the module to be rendered.

3. The method for developing a customized page according to claim 1, wherein: The target functional component includes a first target functional component and a second target functional component, The step of rendering the target functional component to the target rendering position to obtain the target customization page of the item to be customized includes: If the target functional component is the first target functional component, rendering the first target functional component to the target rendering position to obtain a first target customization page of the item to be customized, wherein the first target functional component is a target functional component that does not have an associated rendering module; If the target functional component is the second target functional component, when it is detected that the target functional component is rendered to the target rendering position, the associated functional component of the second target functional component is rendered to the associated rendering position of the associated rendering module of the module to be rendered, and the second target customization page of the item to be customized is obtained, wherein the second target functional component is a target functional component with an associated rendering module.

4. The method for developing a customized page according to any one of claims 1 to 3, wherein: The method for developing the customized page further includes: Obtaining a preset number of functional components and an initial page, wherein the initial page includes at least one preset rendering module having a module identifier; Rendering each of the functional components in each of the preset rendering modules to obtain rendering information of each of the functional components; Generate preset component rendering files corresponding to the rendering information one by one, and integrate the preset component rendering files into a preset component rendering file library.

5. A device for developing customized pages, characterized in that: The customized page development device includes: A page determination module is configured to determine, based on an acquired project customization request carrying an environment variable switch, an initial page corresponding to the project to be customized and a module to be rendered for the initial page, wherein the environment variable switch is used to characterize changes in the usage environment of a target functional component in different customized pages; during the development of a customized page for the project to be customized, the target functional component itself remains unchanged, but its usage environment changes; A position determination module, configured to determine, based on the environment variable switch and the preset component rendering file, a target rendering position of a target functional component corresponding to the initial page in the module to be rendered; wherein the preset component rendering file is used to store rendering information of the target functional component, the rendering information being determined by the environment variable switch and including functional component name, rendering position information, and rendering category information; The position determination module is further configured to parse the environment variable switch to obtain a function component name of a target function component to be imported into the initial page; query a preset component rendering file library based on the function component name to obtain a preset component rendering file; determine a module to be rendered corresponding to the target function component based on a correspondence between rendering position information in the preset component rendering file and a module identifier of the module to be rendered; and determine a target rendering position of the target function component in the module to be rendered based on rendering category information in the preset component rendering file; A rendering module, configured to render the target functional component to the target rendering position to obtain a target customization page for the item to be customized; The customized page development device is further used to detect whether there is rendering association information in the preset component rendering file corresponding to the target functional component; if so, obtaining the associated rendering module of the module to be rendered based on the rendering association information; and selecting a second preset rendering position as the associated rendering position in the associated rendering module based on the target rendering position of the target functional component, wherein the associated rendering position is the rendering position of the associated functional component of the target functional component.

6. An electronic device, characterized in that: The electronic device comprises: at least one processor; and, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the steps of the method for developing a customized page according to any one of claims 1 to 4.

7. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a program for implementing a method for developing a customized page, and the program for implementing a method for developing a customized page is executed by a processor to implement the steps of the method for developing a customized page as claimed in any one of claims 1 to 4.

Images