Code file generation method and device, computer equipment and storage medium

Abstract

The embodiment of the invention discloses a code file generation method and device, computer equipment and a storage medium, and belongs to the technical field of computers. The method comprises the steps that a page configuration interface is displayed, the page configuration interface comprises a page configuration area and a component display area, the page configuration area is used for configuring a page, and a component identifier corresponding to a component used for generating the page is displayed in the component display area; in response to a dragging operation of dragging a first component identifier to the page configuration area, rendering a first component corresponding to the first component identifier in the page configuration area, the first component identifier being any component identifier displayed in the component display area; and in response to a saving operation on the rendered component in the page configuration area, generating a code file of the page based on the rendered component in the page configuration area. According to the embodiment of the invention, a visual page development mode is provided, and the page development efficiency is improved.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of computer technology, and in particular to a code file generation method, device, computer equipment and storage medium. Background Art

[0002] With the development of computer technology, web pages or applications are becoming more and more popular with users. A web page or a page in an application corresponds to a code file, and based on the code file of the page in the web page or the application, the page in the web page or the application can be rendered. At present, when developing a code file for a page, developers need to manually write the code file, but this method has low development efficiency. Summary of the invention

[0003] The embodiment of the present application provides a code file generation method, device, computer equipment and storage medium, which can improve development efficiency. The technical solution is as follows:

[0004] In one aspect, a method for generating a code file is provided, the method comprising:

[0005] Display a page configuration interface, the page configuration interface includes a page configuration area and a component display area, the page configuration area is used to configure the page, and the component display area displays component identifiers corresponding to components used to generate the page;

[0006] In response to a dragging operation of dragging a first component identifier to the page configuration area, rendering a first component corresponding to the first component identifier in the page configuration area, wherein the first component identifier is any component identifier displayed in the component display area;

[0007] In response to a save operation on the rendered components in the page configuration area, a code file of the page is generated based on the rendered components in the page configuration area.

[0008] On the other hand, a code file generation device is provided, the device comprising:

[0009] A display module, used for displaying a page configuration interface, wherein the page configuration interface includes a page configuration area and a component display area, wherein the page configuration area is used for configuring the page, and the component display area displays component identifiers corresponding to components used for generating the page;

[0010] a rendering module, configured to render a first component corresponding to the first component identifier in the page configuration area in response to a dragging operation of dragging a first component identifier to the page configuration area, wherein the first component identifier is any component identifier displayed in the component display area;

[0011] The generating module is used for generating a code file of the page based on the rendered components in the page configuration area in response to a save operation on the rendered components in the page configuration area.

[0012] In a possible implementation, the rendering module is used to render the first component in the page configuration area in response to the drag operation based on the property file and the logic code file corresponding to the first component identifier.

[0013] In another possible implementation, the display module is further configured to display a property configuration area in the page configuration interface when the first component is selected, wherein the property configuration area displays property information of the first component;

[0014] The rendering module is further configured to, in response to an adjustment operation on the attribute information of the first component, re-render the first component in the page configuration area based on the adjusted attribute information.

[0015] In another possible implementation, the attribute information includes multiple attribute entries; the rendering module is used to respond to an adjustment operation on any attribute entry in the attribute information, and based on the adjusted attribute entry, update the attribute corresponding to the attribute entry in the first component in the page configuration area.

[0016] In another possible implementation, the rendering module is used to respond to a data binding operation on any attribute entry in the attribute information, and when the data corresponding to the data binding operation belongs to the data format indicated by the attribute file of the first component, bind the data corresponding to the data binding operation to the attribute entry, and update the attribute corresponding to the attribute entry in the first component in the page configuration area based on the data bound to the attribute entry.

[0017] In another possible implementation, the display module is used to display attribute information of the first component in the attribute configuration area based on the attribute file of the first component when the first component is selected, and the attribute information includes attribute entries corresponding to the attributes recorded in the attribute file.

[0018] In another possible implementation, the rendering module is also used to render a second component corresponding to the second component identifier in the first component in response to a dragging operation of dragging the second component identifier into the first component when the slot function of the first component has been enabled, and the second component identifier is any component identifier in the component display area except the first component identifier.

[0019] In another possible implementation, the property file for rendering the first component includes an open function; and the device further includes:

[0020] The display module is further configured to display attribute information of the third component in the attribute configuration area included in the page configuration interface when the third component has been rendered in the page configuration area and the third component is selected, wherein the attribute information of the third component includes a behavior attribute entry;

[0021] An association module is used to associate the behavior attribute indicated by the behavior attribute entry with any function function in the property file of the first component in response to an association operation, and associate the behavior attribute with the function function. The third component is used to call the function function when the behavior corresponding to the behavior attribute is triggered.

[0022] In another possible implementation, the display module is used to display the page configuration interface in response to an access operation to the page configuration interface; obtain at least one property file; and display the component identifier contained in each property file in a component display area contained in the page configuration interface.

[0023] In another possible implementation, the display module is used to display component identifiers belonging to the same category in the same area in the component display area based on the category to which the component identifiers contained in each property file belong.

[0024] In another possible implementation, the generation module is used to generate the code file of the page in response to a save operation on the rendered components in the page configuration area, based on the relationship between the rendered components in the page configuration area, the property files of the rendered components, and the logic code files.

[0025] In another possible implementation, the rendering module is further configured to render the page based on the code file in response to a loading instruction for the code file.

[0026] On the other hand, a computer device is provided, comprising a processor and a memory, wherein at least one computer program is stored in the memory, and the at least one computer program is loaded and executed by the processor to implement the operations performed by the code file generation method described in the above aspects.

[0027] On the other hand, a computer-readable storage medium is provided, in which at least one computer program is stored. The at least one computer program is loaded and executed by a processor to implement the operations performed by the code file generation method described in the above aspects.

[0028] On the other hand, a computer program product is provided, including a computer program, wherein when the computer program is executed by a processor, the operations performed by the code file generation method described in the above aspects are implemented.

[0029] The embodiment of the present application provides a method for visually developing pages, in which the component identifiers corresponding to the components used to generate the page are displayed in the page configuration interface. The user can drag the component identifiers in the page configuration interface to assemble a new page using the components used to generate the page, and then obtain the code file of the new page. During the process of configuring the page, the display effect of the configured page can be viewed in real time to avoid errors in the configured page. There is no need to repeatedly modify the code file, and there is no need to manually write the code file of the page, thereby improving the efficiency of page development. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0031] Figure 1 It is a structural diagram of an implementation environment provided by an embodiment of the present application;

[0032] Figure 2 is a flow chart of a code file generation method provided by an embodiment of the present application;

[0033] Figure 3 is a flow chart of a code file generation method provided by an embodiment of the present application;

[0034] Figure 4 is a schematic diagram of a page provided in an embodiment of the present application;

[0035] Figure 5 is a schematic diagram of a page configuration interface provided in an embodiment of the present application;

[0036] Figure 6 is a schematic diagram of another page configuration interface provided in an embodiment of the present application;

[0037] Figure 7 is a schematic diagram of an attribute configuration area provided in an embodiment of the present application;

[0038] Figure 8 is a flowchart of another code file generation method provided by an embodiment of the present application;

[0039] Fig. 9is a flowchart of another code file generation method provided in an embodiment of the present application;

[0040] Fig.10 It is a structural schematic diagram of a code file generating device provided in an embodiment of the present application;

[0041] Fig.11 It is a structural schematic diagram of another code file generating device provided in an embodiment of the present application;

[0042] Fig.12 is a schematic diagram of the structure of a terminal provided in an embodiment of the present application;

[0043] Fig.13 It is a structural diagram of a server provided in an embodiment of the present application. DETAILED DESCRIPTION

[0044] In order to make the objectives, technical solutions and advantages of the embodiments of the present application clearer, the implementation methods of the present application will be further described in detail below in conjunction with the accompanying drawings.

[0045] The terms "first", "second", "third", etc. used in this application may be used herein to describe various concepts, but unless otherwise specified, these concepts are not limited by these terms. These terms are only used to distinguish one concept from another. For example, a first component can be referred to as a second component, and similarly, a second component can be referred to as a first component without departing from the scope of this application.

[0046] The terms "at least one", "a plurality", "each", and "any" used in this application include one, two or more, a plurality includes two or more, each refers to each of the corresponding plurality, and any refers to any one of the plurality. For example, a plurality of components includes three components, and each refers to each of the three components, and any refers to any one of the three components, which can be the first component, the second component, or the third component.

[0047] It should be noted that the data (including but not limited to component identifiers, component attribute files and logic code files, page code files, etc.) and signals involved in this application are all authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with relevant laws, regulations and standards of relevant countries and regions. For example, the attribute files and logic code files of the components involved in this application are obtained with full authorization.

[0048] The code file generation method provided in the embodiment of the present application can be executed by a computer device. Optionally, the computer device is a terminal or a server. Optionally, the server is an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms. Server. Optionally, the terminal is a smart phone, a tablet computer, a laptop computer, a desktop computer, a smart speaker, a smart watch, an intelligent voice interaction device, a smart home appliance, and a car terminal, etc., but is not limited to this.

[0049] In some embodiments, the computer program involved in the embodiments of the present application may be deployed and executed on one computer device, or on multiple computer devices located at one location, or on multiple computer devices distributed at multiple locations and interconnected by a communication network. Multiple computer devices distributed at multiple locations and interconnected by a communication network can constitute a blockchain system.

[0050] Figure 1 is a schematic diagram of an implementation environment provided by an embodiment of the present application. Figure 1 , the implementation environment includes a terminal 101 and a server 102. The terminal 101 and the server 102 are connected via a wireless or wired network.

[0051] The server 102 is used to provide services for the page configuration interface. The terminal 101 can access the page configuration interface by interacting with the server 102, so that the user can configure the required page through the page configuration interface displayed by the terminal 101, and then the server 102 generates the page code file based on the configured page.

[0052] Optionally, the page configuration interface is a page in an application, the server 102 is used to provide services for the application, and the terminal 101 is installed with the application. Optionally, the application is an application in the operating system of the terminal 101, or an application provided by a third party. For example, the application is a page configuration application, and the page configuration application has a page configuration function. Of course, the page configuration application can also have other functions, such as page browsing or game functions. The terminal 101 can access the page configuration interface through the application, so that the user can configure the required page through the page configuration interface displayed by the terminal 101.

[0053] Figure 2 This is a flow chart of a code file generation method provided by an embodiment of the present application. Taking the method as an example, Figure 2As shown, the method includes:

[0054] 201. The terminal displays a page configuration interface, which includes a page configuration area and a component display area. The page configuration area is used to configure the page, and the component display area displays component identifiers corresponding to components used to generate the page.

[0055] In the embodiment of the present application, the page configuration interface is a page used to configure pages, that is, the page configuration interface displayed by the user through the terminal. The required pages can be configured in the page configuration interface, and then the code file of the configured page can be generated.

[0056] Among them, the page configuration area is a part of the page configuration interface, which is an area for configuring the page. The page is an arbitrary page, for example, a page is an H5 (HTML5, a language description method for building web page content) page, a PC (Personal Computer, personal computer device) end page or a small program page. When the user configures the required page through the page configuration interface displayed by the terminal, components can be added in the page configuration area, and the required page is composed of the added components. That is, when the user configures the required page through the page configuration interface displayed by the terminal, the display style of the page currently being configured can be displayed in real time in the page configuration area.

[0057] The component display area is a partial area of ​​the page configuration interface. The component identification displayed in the component display area indicates the component used to generate the page. The component can be used to constitute various parts of the page. The component is equivalent to a page component, and is also equivalent to a reusable code block. In an embodiment of the present application, different components are rendered in the page configuration area using component identification, and then the rendered components constitute the page required by the user. One or more component identifications are displayed in the component display area, and different component identifications refer to different components. The component identification can be represented in any form, for example, the component identification is represented in the form of a component name, or, in the form of an icon, or in the form of a component name and an icon.

[0058] 202. In response to a dragging operation of dragging a first component identifier to a page configuration area, the terminal renders a first component corresponding to the first component identifier in the page configuration area, where the first component identifier is any component identifier displayed in the component display area.

[0059] In an embodiment of the present application, a user can drag any component identifier in the component display area to the page configuration area through the page configuration interface displayed by the terminal to render the component corresponding to the dragged component identifier. This process is the process of adding the rendered component to the page being configured. The rendered component is an integral part of the page being configured. At this time, the page configuration area can display the display style of the page currently being configured so that the user can check the display effect of the configured page in time.

[0060] The dragging operation of dragging the first component identifier to the page configuration area is equivalent to the operation of adding the first component corresponding to the first component identifier in the page configuration area, and is also equivalent to the operation of adding the first component to the page currently being configured.

[0061] 203. In response to the save operation on the rendered components in the page configuration area, the terminal generates a code file of the page based on the rendered components in the page configuration area.

[0062] The code file is used to describe the page, and the code file contains the code for rendering the page. The code file of the page can be any type of code file. For example, the code file is a DSL (Domain Specific Language) file. DSL is a programming language specially used to solve problems in a specific domain, with strong expressiveness and concise syntax.

[0063] In an embodiment of the present application, the components rendered in the page configuration area can constitute the page currently being configured. At this time, the display effect of the components rendered in the page configuration area is the display effect of the page currently being configured. Once a save operation on the rendered components is detected, which is equivalent to detecting a save operation on the page currently being configured, a page code file is generated based on the components rendered in the page configuration area, so that the configured page can be displayed based on the code file later. The page displayed based on the code file is composed of the components rendered in the page configuration area, that is, the page displayed based on the code file has the same effect as the page displayed in the page configuration area during the configuration of the page.

[0064] The embodiment of the present application provides a method for visually developing pages, in which the component identifiers corresponding to the components used to generate the page are displayed in the page configuration interface. The user can drag the component identifiers in the page configuration interface to assemble a new page using the components used to generate the page, and then obtain the code file of the new page. During the process of configuring the page, the display effect of the configured page can be viewed in real time to avoid errors in the configured page. There is no need to repeatedly modify the code file, and there is no need to manually write the code file of the page, thereby improving the efficiency of page development.

[0065] exist Figure 2 On the basis of the illustrated embodiment, in the embodiment of the present application, the attribute information of the rendered components in the page configuration area can also be adjusted to achieve personalized configuration of the page. The specific process is detailed in the following embodiment.

[0066] Figure 3 This is a flow chart of a code file generation method provided by an embodiment of the present application. Taking the method as an example, Figure 3 As shown, the method includes:

[0067] 301. In response to an access operation to a page configuration interface, the terminal displays the page configuration interface, where the page configuration interface includes a page configuration area and a component display area, and the page configuration area is used to configure a page.

[0068] In the embodiment of the present application, the user can access the page configuration interface through the terminal, and then the page configuration interface is displayed by the terminal, so that a new page can be configured in the page configuration interface later.

[0069] In one possible implementation, step 301 includes: the terminal sends an access request to the server in response to an access operation to the page configuration interface, the access request carries the identifier of the page configuration interface, the server sends the data of the page configuration interface to the terminal based on the access request, the terminal receives the data, and displays the page configuration interface based on the data.

[0070] Among them, the server is used to provide services for the page configuration interface. The page configuration interface can be a page in an application or a web page. Optionally, when the page configuration interface is a page in an application, the server provides services for the application; or, when the page configuration interface is a web page, the server provides services for the web page. The identifier of the page configuration interface can be represented in any form, for example, the identifier of the page configuration interface is the name, serial number or URL of the page configuration interface. The data of the page configuration interface is data used to render the page configuration interface, so that the terminal can render the page configuration interface based on the data of the page configuration interface.

[0071] In an embodiment of the present application, the server is used to provide services for the page configuration interface. When the terminal accesses the page configuration interface, it can obtain the data of the page configuration interface by interacting with the server, and then render the page configuration interface to achieve interface access.

[0072] 302. The terminal obtains at least one property file, and displays a component identifier included in each property file in a component display area included in a page configuration interface.

[0073] Among them, different property files are used to describe different components. In an embodiment of the present application, each component corresponds to a property file, and the property file is used to describe the properties of the corresponding component. Optionally, the property file is used to describe the properties open to the corresponding component, that is, to describe the properties that can be configured for the corresponding component, so that in the subsequent process of configuring any page, when rendering any component, the properties described in the property file of the rendered component can be personalized.

[0074] In an embodiment of the present application, each property file is used to describe a component for generating a page, and the property file contains the component identifier of the corresponding component. The component identifier contained in each property file is displayed in the component display area included in the page configuration interface to display the component that can be used to generate the page, so that the user can configure the page based on the component identifier displayed in the component display area to ensure the convenience of page configuration.

[0075] In one possible implementation, the process of obtaining at least one property file includes: a page configuration interface is associated with at least one property file, each property file is used to describe a component for generating a page, and when the page configuration interface is displayed, the property file associated with the page configuration interface can be obtained so that the component identifier corresponding to the developed component for generating the page can be displayed in the component display area contained in the page configuration interface, so that the user can use the component corresponding to the displayed component identifier when configuring a page.

[0076] Optionally, the method of obtaining the property file includes: the terminal obtains at least one property file from the server.

[0077] In an embodiment of the present application, the server is used to provide services for the page configuration interface, and the server stores a property file associated with the page configuration interface. When the terminal accesses the page configuration interface, the server not only sends data for rendering the page configuration interface to the terminal, but also sends the property file associated with the page configuration interface to the terminal, so that when the terminal subsequently renders the page configuration interface, it can display the component identifier corresponding to the developed component used to generate the page.

[0078] In a possible implementation, the process of displaying component identifiers in the component display area includes: based on the categories to which the component identifiers contained in each property file belong, displaying component identifiers belonging to the same category in the same area in the component display area.

[0079] In an embodiment of the present application, each property file contains a category to which a component identifier belongs, and the category indicates the category to which the component corresponding to the component identifier belongs. Therefore, in the component display area, the component identifiers are displayed according to the categories to which the component identifiers belong, so that the user can improve the display effect of the component identifiers in the component display area based on the component identifiers displayed in the component display area or the categories to which the component identifiers belong.

[0080] The categories are divided in any form, for example, the categories are divided according to the purpose of the components, or the categories are divided according to the data volume of the components.

[0081] Optionally, the property file includes a component identifier and a category identifier corresponding to the component identifier, wherein the category identifier indicates the component to which the component identifier belongs. The category identifier can be represented in any form, for example, the category identifier is represented in the form of a purpose name or a serial number.

[0082] Optionally, the component display area displays a category identifier, and each category identifier corresponds to a display area, and the component identifiers belonging to the category indicated by the category identifier are displayed in the corresponding display area.

[0083] In an embodiment of the present application, the component display area includes a display area corresponding to each category identifier, and the component identifier belonging to the category indicated by the category identifier is displayed in the corresponding display area to achieve classified display of the component identifier to enhance the classified display effect of the component identifier.

[0084] It should be noted that the embodiment of the present application is described by taking the terminal obtaining the property file as an example, while in another embodiment, when the terminal accesses the page configuration interface, it interacts with the server that provides services for the page configuration interface, and the server traverses the property file associated with the page configuration interface, obtains the component identifier contained in the property file, and sends the data and component identifier used to render the page configuration interface to the terminal, so that the terminal renders the page configuration interface based on the data used to render the page configuration interface, and displays the component identifier in the component display area. Optionally, the server will obtain the component identifier and the corresponding category identifier contained in the property file, and send the category identifier and the component identifier corresponding to each category identifier to the terminal, so that the terminal can display the component identifier in the component display area according to the component identifier corresponding to each category identifier.

[0085] It should be noted that the embodiment of the present application uses a component file to display a page configuration interface as an example for explanation, while in another embodiment, there is no need to execute the above steps 301-302, but other methods are adopted to display the page configuration interface.

[0086] 303. In response to the dragging operation of dragging the first component identifier to the page configuration area, the terminal renders the first component in the page configuration area based on the property file and logic code file corresponding to the first component identifier, where the first component identifier is any component identifier displayed in the component display area.

[0087] In an embodiment of the present application, each component identifier in the component display area included in the page configuration interface corresponds to a property file and a logic code file. The property file is used to describe the properties of the component, and the logic code file contains the logic for implementing the component. When the terminal detects a dragging operation of dragging the first component identifier to the page configuration area, the first component can be rendered in the page configuration area based on the property file and the logic code file of the first component identifier to ensure the accuracy of the component rendering.

[0088] In the embodiment of the present application, the developed component corresponds to a property file and a logic code file. When configuring a certain page, if a drag operation of dragging the first component identifier to the page configuration area is detected, the component can be rendered based on the property file and logic code file corresponding to the component. The component's open properties are defined in the component's property file, so that when the user configures the page through the terminal, he can not only directly use the developed component, but also adjust the component's open properties to achieve personalized settings of the component, and then achieve personalized configuration of the page.

[0089] In one possible implementation, the logic code file of a component includes the functional functions of the component, and the properties contained in the property file of the component are the input parameters of the functional functions of the component. In the process of rendering the component based on the property file and the logic code file of the component, the properties defined in the property file are used as the input parameters of the functional functions in the logic code file, and then the component is rendered.

[0090] It should be noted that the embodiment of the present application is described using the property file and logic code file corresponding to the component identifier as an example. In another embodiment, there is no need to execute the above step 304, but other methods are adopted. In response to the dragging operation of dragging the first component identifier to the page configuration area, the first component corresponding to the first component identifier is rendered in the page configuration area.

[0091] 304. When the first component is selected, the terminal displays a property configuration area in the page configuration interface, and the property configuration area displays property information of the first component.

[0092] In an embodiment of the present application, when the first component has been rendered in the page configuration area, the attribute information of the first component can be adjusted to achieve personalized display of the first component.

[0093] The property configuration area is used to display the property information of the selected component. When any component rendered in the page configuration area is selected, the property information of the selected component can be displayed in the property configuration area.

[0094] In a possible implementation, the page configuration interface always displays a property configuration area. When no component rendered in the page configuration area is selected, the property configuration area displays empty content. When any component rendered in the page configuration area is selected, the property information of the selected component can be displayed in the property configuration area. Alternatively, the property configuration area is displayed only when any component in the page configuration area is selected, and the property information of the selected component is displayed in the property configuration area.

[0095] In one possible implementation, step 304 includes: when the first component is selected, based on the property file of the first component, displaying property information of the first component in the property configuration area, the property information including property entries corresponding to the properties recorded in the property file.

[0096] In an embodiment of the present application, the property file indicates multiple properties of a component. When the property information of the first component is displayed in the property configuration area, the corresponding property entry can be displayed according to each property in the property file, so that the user can adjust any property entry in the property configuration area to adjust the properties of the first component, thereby ensuring the convenience of property adjustment.

[0097] Among them, the attribute entries can be displayed in any form. Optionally, the attribute entries are displayed in the form of controls, that is, the attribute entries in the attribute information of the first component are displayed in the form of controls in the attribute configuration area, so that the user can modify the attributes of the first component by triggering the displayed controls through the terminal.

[0098] For example, an attribute entry includes an attribute name and an input box, and the input box is used to input the attribute value of the attribute indicated by the attribute name. For another example, an attribute entry includes an attribute name, a selection button and the name of each selection button, and the user can modify the attribute indicated by the attribute name by selecting a button through the terminal.

[0099] 305. In response to the adjustment operation on the attribute information of the first component, the terminal re-renders the first component in the page configuration area based on the adjusted attribute information.

[0100] In an embodiment of the present application, when the first component has been rendered in the page configuration area, the attribute information of the selected first component can be displayed so as to adjust the attribute information of the first component. After the attribute information of the first component is adjusted, the first component currently displayed in the page configuration area does not match the adjusted attribute information. Based on the adjusted attribute information, the first component is re-rendered in the page configuration area so that the first component displayed in the page configuration area always matches the attribute information of the first component, thereby ensuring the accuracy of the displayed component.

[0101] In one possible implementation, the attribute information includes multiple attribute entries; step 305 includes: in response to an adjustment operation on any attribute entry in the attribute information, based on the adjusted attribute entry, updating the attribute corresponding to the attribute entry in the first component in the page configuration area.

[0102] The adjusted attribute entry is used to describe any attribute of the component, for example, the adjusted attribute entry is used to describe the theme color of the component, or to describe the color of the font in the component, etc. After the user adjusts any displayed attribute entry through the terminal, the attributes of the rendered component in the page configuration area can be updated in real time based on the adjusted attribute entry, so that the attributes of the component match the adjusted attribute entry, and there is no need to re-render based on multiple attribute entries of the component, which saves the resources occupied by re-rendering the component and can also ensure the accuracy of the displayed component.

[0103] Optionally, the process of updating the property entries of the first component includes: in response to a data binding operation on any property entry in the property information, when the data corresponding to the data binding operation belongs to the data format indicated by the property file of the first component, binding the data corresponding to the data binding operation to the property entry, and updating the property corresponding to the property entry in the first component in the page configuration area based on the data bound to the property entry.

[0104] In an embodiment of the present application, the property file of the first component indicates a data format that the first component can adapt, that is, the first component can use data belonging to this data format for rendering and display. In the process of adjusting the properties of the first component, when binding a certain property entry of the first component to any data, if the data format to which the data belongs is the data format defined in the property file of the first component, indicating that the data belongs to a data format adapted by the first component, the data can be bound to the property entry of the first component, that is, the data is used as the attribute indicated by the attribute entry, and therefore, the attribute indicated by the attribute entry in the first component is adjusted based on the data to ensure the accuracy of the rendered component.

[0105] The data can be any data. For example, the first component is a table component, any attribute entry of the first component indicates the header display style of the table component, and the data is used to describe a header display style. When the data belongs to a data format adapted by the first component, the first component is updated in the page configuration area so that the header of the updated first component is the same as the header display style described by the data.

[0106] It should be noted that the embodiment of the present application only describes the creation of a first component and adjustment of the attribute information of the first component as an example. In another embodiment, according to the line number steps 303-305, other components can be rendered in the page configuration area to enrich the components contained in the page being configured, and then enrich the content contained in the page.

[0107] It should be noted that the embodiment of the present application is described by taking the adjustment of the attribute information of the component based on the rendered component as an example, while in another embodiment, there is no need to perform the above steps 304-305, and only the initially rendered component is used to generate the page.

[0108] 306. In response to the save operation on the rendered components in the page configuration area, the terminal generates a code file for the page based on the relationship between the rendered components in the page configuration area, the property files of the rendered components, and the logic code files.

[0109] In an embodiment of the present application, the page composed of components rendered in the page configuration area is the page required by the user. Since the rendered components in the page configuration area may have multiple relationships, such as parallel relationships or nested relationships, once the terminal detects the save operation of the rendered components in the page configuration area, it generates a code file for the page based on the relationship between the rendered components in the page configuration area, the property files of the rendered components, and the logic code files, so that the code in the code file of the page matches the relationship between the rendered components to ensure the accuracy of the code file.

[0110] In one possible implementation, step 306 includes: when the attribute information of any rendered component is adjusted, the terminal generates a page code file in response to a save operation on the rendered component in the page configuration area, based on the relationship between the rendered components in the page configuration area, the adjusted attribute information of the rendered components, and the logic code file.

[0111] In an embodiment of the present application, when components are rendered in the page configuration area, when the attribute information of any rendered component is modified, only the attribute information of the first component rendered in the page configuration area is modified, and the modified attribute information is cached, and the attribute file of the first component is not modified, so as to ensure the commonality of the stored attribute files and logic code files.

[0112] It should be noted that the embodiment of the present application only generates the code file of the page according to the relationship between the rendered components, combined with the component property files and logic code files. In another embodiment, there is no need to execute the above step 306, but other methods are adopted to generate the code file of the page based on the rendered components in the page configuration area in response to the save operation of the rendered components in the page configuration area.

[0113] The embodiment of the present application provides a method of visually developing pages, in which the component identifiers corresponding to the components used to generate the pages are displayed in the page configuration interface. The user drags the component identifiers in the page configuration interface to assemble a new page using the components used to generate the page, and then obtains the code file of the new page. In the process of configuring the page, the display effect of the configured page can be viewed in real time to avoid errors in the configured page, without the need to repeatedly modify the code file, and without the need to manually write the code file of the page, thereby improving the efficiency of page development. In addition, the solution provided by the embodiment of the present application allows non-professional developers to create and modify applications, reducing the demand for professional developers and saving development time and development costs.

[0114] Moreover, by classifying and standardizing components, the reusability and scalability of components are achieved, and the development efficiency and page quality are improved. When the application page is developed in the above manner, the page creation efficiency is improved by quickly creating and modifying the page, thereby improving the application creation efficiency and accelerating the application launch time.

[0115] In an embodiment of the present application, when the first component has been rendered in the page configuration area, the attribute information of the selected first component can be displayed so as to adjust the attribute information of the first component. After the attribute information of the first component is adjusted, the first component currently displayed in the page configuration area does not match the adjusted attribute information. Based on the adjusted attribute information, the first component is re-rendered in the page configuration area so that the first component displayed in the page configuration area always matches the attribute information of the first component, thereby ensuring the accuracy of the displayed component.

[0116] It should be noted that the above Figure 3 The embodiment shown only illustrates the creation of the first component in the page configuration interface as an example. In another embodiment, other components can be added to the page configuration interface, and the code file of the page is subsequently generated based on the components rendered in the page configuration interface, so that the page subsequently rendered based on the code file is the same as the page composed of the components rendered in the page configuration interface.

[0117] In one possible implementation, the method also includes: when the slot function of the first component has been enabled, in response to a dragging operation of dragging the second component identifier into the first component, rendering a second component corresponding to the second component identifier in the first component, the second component identifier being any component identifier in the component display area except the first component identifier.

[0118] Among them, the slot function indicates whether other components can be inserted into the component, that is, whether other components can be added to the component. In an embodiment of the present application, when the slot function is turned on in the component, other components can be configured in the component, and when the slot function is not turned on in the component, other components cannot be configured in the component. When the slot function is turned on in the component, a dragging operation of dragging the second component identifier to the first component is detected, and the second component corresponding to the second component identifier is rendered in the first component, so that the second component is nested in the first component, so that the second component is displayed in the second component, which can enrich the configuration method of the page to ensure the diversity of the page.

[0119] Optionally, when the slot function is not enabled for the first component, in response to a dragging operation of dragging the second component identifier into the first component, a failure reminder is displayed, indicating that the slot function is not enabled for the first component and that components cannot be added to the first component.

[0120] In an embodiment of the present application, the rendered component in the page configuration area may not have the slot function enabled, and other components cannot be added to the component without the slot function enabled. Therefore, when other components are dragged to the component without the slot function enabled, a failure reminder is displayed to remind the user that the component addition failed, so that the user can know the reason for the failure and then configure the page in other ways, thereby improving the user experience.

[0121] In one possible implementation, a property file for rendering a first component includes an opened function function; the method also includes: when a third component has been rendered and selected in a page configuration area, displaying property information of the third component in a property configuration area included in a page configuration interface, the property information of the third component includes a behavior property entry; in response to an operation of associating a behavior property indicated by the behavior property entry with any function function in the property file of the first component, the behavior property is associated with the function function, and the third component is used to call the function function when the behavior corresponding to the behavior property is triggered.

[0122] In the embodiment of the present application, the component's property file also includes an open function function, and the component's open function function can be called by other components. The behavior attribute entry of the third component is associated with any function function in the property file of the first component. When the third component triggers the behavior corresponding to the behavior attribute indicated by the property entry, the associated function function can be called, realizing the association relationship between different components in the same page, enriching the configuration method of the page, and improving the user experience.

[0123] The function function opened by the first component can be any function function, for example, the function function opened by the first component is a function function for calling a record, or a function function for refreshing the first component. The behavior attribute of the third component indicates any behavior, for example, if the third component is a button, the behavior attribute of the third component indicates a click behavior.

[0124] It should be noted that the above Figures 2 to 3 The embodiment shown is described by taking the code file of a page as an example, after the code file of the page is obtained, the page can also be rendered based on the code file. That is, the method further includes: in response to a loading instruction for the code file, rendering the page based on the code file.

[0125] In an embodiment of the present application, after obtaining the code file of the page, that is, the page development is completed, the page can be rendered based on the code file to display the page. The page rendered based on the code file is the same as the page composed of components rendered in the page configuration interface, thereby ensuring the accuracy of the displayed page.

[0126] For example, the code file contains: page ID (Identity Document, globally unique code); page name; path; Props Schema (property schema); the property files of each component contained in the page and the code in the logic code file. Figure 4 As shown, the page includes the project group code, project group name, included projects and corresponding input boxes, a return button, a save button, etc.

[0127] Optionally, the process of rendering the page includes: parsing the code file of the page based on a parsing engine to render the page.

[0128] The parsing engine is used to parse the code file to render the page. The code file obtained according to the solution provided in the embodiment of the present application can be applied to different devices and browsers, that is, the page can be rendered by the parsing engine in any device or browser, reducing compatibility issues.

[0129] It should be noted that the code file generation method provided in the embodiment of the present application can be applied to a low-code platform, which is a platform for developing applications, and the low-code platform contains developed components for generating pages. The terminal can display the page configuration interface through the code platform, and then can implement the solution of developing the code file of the page through the code platform. By providing the developed components by the code platform, that is, providing encapsulated general components, the page can be developed in a visual way through the code platform, and the way in which the encapsulated general components are managed by the code platform can make the generated code easy to maintain and update.

[0130] The process of developing components in the code platform includes: developers develop visual components on the low-code platform through secondary abstraction of existing UI (UserInterface) libraries and components, that is, develop general page components. By using existing UI libraries and components, the user experience of the application can be improved. By classifying and standardizing the developed components, abstracting the components, and by classifying the display page effects of a certain industry, abstracting the components, the reusability and extensibility of the components are achieved. For example, most management system pages are based on tables, forms, groups, trees, and Tab (label) pages. Developers abstract these components, attach functions, and obtain components for generating pages, that is, application orchestration components. The developed application orchestration components will be displayed in the component display area on the left side of the page configuration interface. Users can drag the components in the component display area to the page configuration area in the page configuration interface by dragging and dropping to assemble the page through the page components provided by the low-code platform.

[0131] When developing a component for generating a page, a property file and a logic code file of the page will be developed. The property file includes fields for describing component properties, and the logic code file includes logic codes for implementing the component. Optionally, the property file includes a first property sub-file and a second property sub-file. Among them, the first property sub-file is used to describe the basic properties of the component, for example, the basic properties include ID, name, component, category, desc (descriptive information of the component), ICON, Visible (whether the component is visible), display (display type of the component), etc., wherein component is used to describe the information of the component instance, Visible indicates whether the component is displayed in the component display area, and display indicates the component display type, for example, display includes block (block element) and inline (inline element). The second property sub-file is used to describe the properties of the component opening, that is, to describe the properties that the component can be configured. The second property sub-file is equivalent to the component's behavior information file. The second property sub-file includes Props Schema, Slots (slot properties), Events (event binding capabilities supported by the component), Methods (function properties) and Data Source Structure (data format). Props Schema indicates the properties that are open to the component, that is, the properties that can be configured for the component. For example, Props Schema indicates the name of the component, layout mode, main body color, behavior action, title length of the component, display type of the component, whether the component is paginated, the number of rows displayed per page in the component, the field name of the component, the button in the component, the data source associated with the component, the selection model of the component, etc. For another example, the code segment defined by Props Schema includes Type (type); Fields (domain): ID, Type, Title (title), default (a method field). Slots indicates whether the component has the slot function enabled. When the component has the slot function enabled, other components can be configured in the component; when the component does not have the slot function enabled, other components cannot be configured in the component. For example, the code segment defined by Slots includes: ID, Type, ref (slot reference). For example, the code segment of Event definition includes: ID, name, arguments (method parameters). Methods indicate the behavior of the component, that is, the function that indicates the component can be called by other components. For example, the code segment of Methods definition includes ID, Title (title), description, arguments, return Value (method return parameter).Data Source Structure indicates the format that the data used by the component must meet, that is, the component can only call or load data that meets this data format.

[0132] For example, the contents of the properties file of the navigation component are as follows: ID: tablelist (table list); Name: table list; Category (category): general function module; Icon (Icon): xx address; Active icon (active icon): xxx address; Visible: Yes; Props Schema: [****]; Slots: [****]; Methods: [****]; Data SourceStructure: [****].

[0133] In an embodiment of the present application, when a property file of a component is developed, the main structure of the component is configured in a logic code file, and the main structure includes three parts: a JS (logic) part, an HTML (structure) part, and a CSS (effect) part.

[0134] The first part is HTML (structure), which is equivalent to the view part of the component. <template>The code block configures the view part of the component to describe how the component is displayed. <template>In the code block, you can configure the Slots field in the component's properties file, that is, in <template>Put in the code block <uc-slot / > , to realize the slot function of the component.

[0135] The second part is the JS (logic) part, which is equivalent to the interaction logic or business logic. <script>代码块配置组件的逻辑部分的代码。在<script>代码块中能够配置components(组成部分)、Props Schema、Data Source Structure、Mounted(加载)和Methods。其中，components用于指示调用的子组件声明，也即是，指示当前的组件能够调用其他组件的声明。Mounted用于指示当前的组件加载时触发执行的函数。<script>代码块中的Props Schema与组件的属性文件中的Props Schema的对应，Methods与组件的属性文件中的Methods对应，而data与组件的属性文件中Data Source Structure中所声明的数据格式对应。也即是，组件的属性文件中的Props Schema、Methods、Data Source Structure相当于逻辑部分的输入参数。

[0136] 第三部分为CSS(效果)部分，第三部分用于配置组件的样式效果、颜色、字体等，在<style>代码块中配置组件的视图部分的代码。例如，在<style>代码块中能够配置组件的宽、高或overflow(溢出)属性等。

[0137] 按照上述过程开发出组件的属性文件和逻辑代码文件后，将组件的属性文件和逻辑代码文件存储至低码平台中编排组件库对应的存储地址，即可实现将组件上传至低码平台的编排组件库中，编排组件库包含的组件均为已开发完成的组件，能够用于生成页面。

[0138] 另外，在上述所示的实施例的基础上，本申请实施例提供的代码文件生成方法包括：

[0139] 在页面配置的过程中，终端显示的页面配置界面如图5或图6所示，页面配置界面的左侧显示有组件显示区，组件显示区分类显示各个组件，组件显示区中显示有各个类别名称及每个类别名称下组件的图标及名称。页面配置界面的中间显示有页面配置区，页面配置区中显示有当前已渲染出来的组件。在选中页面配置区中的任一组件的情况下，在页面配置界面的右侧显示出属性配置区，属性配置区中显示有组件的属性信息，用户能够通过终端显示的属性配置区，对选中的组件的属性信息进行配置。如图6和图7所示，属性配置区中显示有组件的通用属性和基础属性，通用属性包括组件名称以及对应的输入框，在输入框中能够更改组件名称。在属性配置区中的基础属性中，能够配置组件的布局方式；能够配置组件的主题颜色，如跟随全局显示、蓝色或绿色等；能够配置组件的加载事件，如加载时间为调用接口或变量赋值等；能够配置组件的标题长度；以组件为表单组件为例，还能够配置表单渲染数据的序号，是否将表单组件中输入的数据撑满行显示等，能够配置表单项类型，如表单项类型为下拉框，能够配置表单组件是否显示搜索，能够配置表单组件是否分页、在分页的情况下每页显示的行数、是否显示顶部功能区、是否显示顶部操作按钮等；还能够配置组件接口选项字段绑定，如数据值和显示名字段的绑定值；还能够在组件中添加底部操作按钮，并设置底部操作按钮的名称；还能够为组件关联数据源，如关联模型、接口或变量等；还能够配置页卡组件的选择模型，如单元或多选等；还能配置表单组件中每列表格的主题名称和宽度等。另外，在配置页面的过程中，还能够以输入表达式的方式来配置页面，也即是直接输入代码来对页面进行配置。

[0140] 在上述所示的实施例的基础上，本申请实施例还提供了一种代码文件生成方法的流程图，如图8和图9所示，该方法包括：

[0141] 步骤1、开发者基于传统的UI组件库中的组件，开发出可视化的、用于生成页面的组件，将组件上传至低码平台。

[0142] 步骤2、产品经理或运营者能够通过终端登录低码平台，终端通过低码平台提供的页面配置界面，按照本申请实施例提供的方式，采取拖拽的方式，利用组件在页面配置区中组成所需的页面。

[0143] 步骤3、产品经理或运营者通过终端触发对页面配置区中已配置出的页面的保存操作，基于页面配置区中已渲染的组件，生成页面的代码文件。

[0144] 基于上述所示的实施例，在得到页面的代码文件后，能够应用于多种场景，例如，应用于应用开发场景，按照本申请实施例提供的方式，开发出应用包含的多个页面的代码文件，而后再由开发人员基于多个页面的代码文件开发出应用，节省了开发应用所需的时间。

[0145] 图10是本申请实施例提供的一种代码文件生成装置的结构示意图，如图10所示，该装置包括：

[0146] 显示模块1001，用于显示页面配置界面，页面配置界面包括页面配置区及组件显示区，页面配置区用于配置页面，组件显示区中显示有用于生成页面的组件对应的组件标识；

[0147] 渲染模块1002，用于响应于将第一组件标识拖动至页面配置区的拖动操作，在页面配置区中渲染出第一组件标识对应的第一组件，第一组件标识为组件显示区中显示的任一组件标识；

[0148] 生成模块1003，用于响应于对页面配置区中已渲染的组件的保存操作，基于页面配置区中已渲染的组件，生成页面的代码文件。

[0149] 在一种可能实现方式中，渲染模块1002，用于响应于拖动操作，基于第一组件标识对应的属性文件及逻辑代码文件，在页面配置区中渲染出第一组件。

[0150] 在另一种可能实现方式中，显示模块1001，还用于在选中第一组件的情况下，在页面配置界面中显示属性配置区，属性配置区中显示有第一组件的属性信息；

[0151] 渲染模块1002，还用于响应于对第一组件的属性信息的调整操作，基于调整后的属性信息，在页面配置区中重新渲染出第一组件。

[0152] 在另一种可能实现方式中，属性信息包括多个属性条目；渲染模块1002，用于响应于对属性信息中任一属性条目的调整操作，基于调整后的属性条目，在页面配置区中更新第一组件中与属性条目对应的属性。

[0153] 在另一种可能实现方式中，渲染模块1002，用于响应于对属性信息中任一属性条目的数据绑定操作，在数据绑定操作对应的数据属于第一组件的属性文件指示的数据格式的情况下，将数据绑定操作对应的数据与属性条目绑定，基于属性条目绑定的数据，在页面配置区中更新第一组件中与属性条目对应的属性。

[0154] 在另一种可能实现方式中，显示模块1001，用于在选中第一组件的情况下，基于第一组件的属性文件，在属性配置区中显示第一组件的属性信息，属性信息包括属性文件中记录的属性对应的属性条目。

[0155] 在另一种可能实现方式中，渲染模块1002，还用于在第一组件已开启插槽功能的情况下，响应于将第二组件标识拖动至第一组件中的拖动操作，在第一组件中渲染出第二组件标识对应的第二组件，第二组件标识为组件显示区中除第一组件标识以外的任一组件标识。

[0156] 在另一种可能实现方式中，用于渲染第一组件的属性文件包括已开放的功能函数；如图11所示，装置还包括：

[0157] 显示模块1001，还用于在页面配置区中已渲染出第三组件、选中第三组件的情况下，在页面配置界面包含的属性配置区中，显示第三组件的属性信息，第三组件的属性信息包括行为属性条目；

[0158] 关联模块1004，用于响应于将行为属性条目指示的行为属性与第一组件的属性文件中任一功能函数的关联操作，将行为属性与功能函数关联，第三组件用于在触发行为属性对应的行为的情况下，调用功能函数。

[0159] 在另一种可能实现方式中，显示模块1001，用于响应于对页面配置界面的访问操作，显示页面配置界面；获取至少一个属性文件；在页面配置界面包含的组件显示区中，显示每个属性文件包含的组件标识。

[0160] 在另一种可能实现方式中，显示模块1001，用于基于每个属性文件包含的组件标识所属的类别，在组件显示区中，将属于同一类别的组件标识显示在同一区域内。

[0161] 在另一种可能实现方式中，生成模块1003，用于响应于对页面配置区中已渲染的组件的保存操作，基于页面配置区中已渲染的组件之间的关系、已渲染的组件的属性文件及逻辑代码文件，生成页面的代码文件。

[0162] 在另一种可能实现方式中，渲染模块1002，还用于响应于对代码文件的加载指令，基于代码文件渲染出页面。

[0163] 需要说明的是：上述实施例提供的代码文件生成装置，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将计算机设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的代码文件生成装置与代码文件生成方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

[0164] 本申请实施例还提供了一种计算机设备，该计算机设备包括处理器和存储器，存储器中存储有至少一条计算机程序，该至少一条计算机程序由处理器加载并执行以实现上述实施例的代码文件生成方法所执行的操作。

[0165] 可选地，计算机设备提供为终端。图12示出了本申请一个示例性实施例提供的终端1200的结构框图。终端1200包括有：处理器1201和存储器1202。

[0166] 处理器1201可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器1201可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field-Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器1201也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器1201可以集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器1201还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

[0167] 存储器1202可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器1202还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器1202中的非暂态的计算机可读存储介质用于存储至少一个计算机程序，该至少一个计算机程序用于被处理器1201所执行以实现本申请中方法实施例提供的代码文件生成方法。

[0168] 在一些实施例中，终端1200还可选包括有：外围设备接口1203和至少一个外围设备。处理器1201、存储器1202和外围设备接口1203之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口1203相连。具体地，外围设备包括：射频电路1204、显示屏1205、摄像头组件1206、音频电路1207和电源1208中的至少一种。

[0169] 外围设备接口1203可被用于将I / O(Input / Output，输入 / 输出)相关的至少一个外围设备连接到处理器1201和存储器1202。在一些实施例中，处理器1201、存储器1202和外围设备接口1203被集成在同一芯片或电路板上；在一些其他实施例中，处理器1201、存储器1202和外围设备接口1203中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。

[0170] 射频电路1204用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路1204通过电磁信号与通信网络以及其他通信设备进行通信。射频电路1204将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路1204包括：天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路1204可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：万维网、城域网、内联网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和 / 或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路1204还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本申请对此不加以限定。

[0171] 显示屏1205用于显示UI(User Interface，用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏1205是触摸显示屏时，显示屏1205还具有采集在显示屏1205的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器1201进行处理。此时，显示屏1205还可以用于提供虚拟按钮和 / 或虚拟键盘，也称软按钮和 / 或软键盘。在一些实施例中，显示屏1205可以为一个，设置在终端1200的前面板；在另一些实施例中，显示屏1205可以为至少两个，分别设置在终端1200的不同表面或呈折叠设计；在另一些实施例中，显示屏1205可以是柔性显示屏，设置在终端1200的弯曲表面上或折叠面上。甚至，显示屏1205还可以设置成非矩形的不规则图形，也即异形屏。显示屏1205可以采用LCD(Liquid Crystal Display，液晶显示屏)、OLED(Organic Light-EmittingDiode，有机发光二极管)等材质制备。

[0172] 摄像头组件1206用于采集图像或视频。可选地，摄像头组件1206包括前置摄像头和后置摄像头。前置摄像头设置在终端的前面板，后置摄像头设置在终端的背面。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality，虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中，摄像头组件1206还可以包括闪光灯。闪光灯可以是单色温闪光灯，也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，可以用于不同色温下的光线补偿。

[0173] 音频电路1207可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器1201进行处理，或者输入至射频电路1204以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在终端1200的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器1201或射频电路1204的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路1207还可以包括耳机插孔。

[0174] 电源1208用于为终端1200中的各个组件进行供电。电源1208可以是交流电、直流电、一次性电池或可充电电池。当电源1208包括可充电电池时，该可充电电池可以是有线充电电池或无线充电电池。有线充电电池是通过有线线路充电的电池，无线充电电池是通过无线线圈充电的电池。该可充电电池还可以用于支持快充技术。

[0175] 本领域技术人员可以理解，图12中示出的结构并不构成对终端1200的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

[0176] 可选地，计算机设备提供为服务器。图13是本申请实施例提供的一种服务器的结构示意图，该服务器1300可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(Central Processing Units，CPU)1301和一个或一个以上的存储器1302，其中，存储器1302中存储有至少一条计算机程序，至少一条计算机程序由处理器1301加载并执行以实现上述各个方法实施例提供的方法。当然，该服务器还可以具有有线或无线网络接口、键盘及输入输出接口等部件，以便进行输入输出，该服务器还可以包括其他用于实现设备功能的部件，在此不做赘述。

[0177] 本申请实施例还提供了一种计算机可读存储介质，该计算机可读存储介质中存储有至少一条计算机程序，该至少一条计算机程序由处理器加载并执行以实现上述实施例的代码文件生成方法所执行的操作。

[0178] 本申请实施例还提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现如上述实施例的代码文件生成方法所执行的操作。

[0179] 本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

[0180] 以上所述仅为本申请实施例的可选实施例，并不用以限制本申请实施例，凡在本申请实施例的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。< / script> < / template> < / template> < / template>

Claims

1. A code file generation method, characterized in that: The method comprises: Display a page configuration interface, the page configuration interface includes a page configuration area and a component display area, the page configuration area is used to configure the page, and the component display area displays component identifiers corresponding to components used to generate the page; In response to a dragging operation of dragging a first component identifier to the page configuration area, rendering a first component corresponding to the first component identifier in the page configuration area, wherein the first component identifier is any component identifier displayed in the component display area; In response to a save operation on the rendered components in the page configuration area, a code file of the page is generated based on the rendered components in the page configuration area.

2. The method according to claim 1, characterized in that: In response to the dragging operation of dragging the first component identifier to the page configuration area, rendering the first component corresponding to the first component identifier in the page configuration area includes: In response to the drag operation, the first component is rendered in the page configuration area based on the property file and the logic code file corresponding to the first component identifier.

3. The method according to claim 1, characterized in that In response to the saving operation of the rendered components in the page configuration area, before generating the code file of the page based on the rendered components in the page configuration area, the method further includes: When the first component is selected, a property configuration area is displayed in the page configuration interface, and the property information of the first component is displayed in the property configuration area; In response to an adjustment operation on the attribute information of the first component, the first component is re-rendered in the page configuration area based on the adjusted attribute information.

4. The method according to claim 3, characterized in that The attribute information includes a plurality of attribute entries; in response to the adjustment operation on the attribute information of the first component, re-rendering the first component in the page configuration area based on the adjusted attribute information includes: In response to an adjustment operation on any attribute entry in the attribute information, based on the adjusted attribute entry, the attribute corresponding to the attribute entry in the first component is updated in the page configuration area.

5. The method according to claim 4, characterized in that In response to the adjustment operation on any attribute entry in the attribute information, updating the attribute corresponding to the attribute entry in the first component in the page configuration area based on the adjusted attribute entry includes: In response to a data binding operation on any attribute entry in the attribute information, when the data corresponding to the data binding operation belongs to the data format indicated by the attribute file of the first component, the data corresponding to the data binding operation is bound to the attribute entry, and based on the data bound to the attribute entry, the attribute corresponding to the attribute entry in the first component is updated in the page configuration area.

6. The method according to claim 3, characterized in that When the first component is selected, a property configuration area is displayed in the page configuration interface, and the property configuration area displays property information of the first component, including: When the first component is selected, attribute information of the first component is displayed in the attribute configuration area based on the attribute file of the first component, and the attribute information includes attribute entries corresponding to the attributes recorded in the attribute file.

7. The method according to claim 1, characterized in that In response to the saving operation of the rendered components in the page configuration area, before generating the code file of the page based on the rendered components in the page configuration area, the method further includes: When the slot function of the first component has been enabled, in response to a dragging operation of dragging a second component identifier into the first component, a second component corresponding to the second component identifier is rendered in the first component, and the second component identifier is any component identifier in the component display area except the first component identifier.

8. The method according to claim 1, characterized in that The property file for rendering the first component includes an open function; in response to the dragging operation of dragging the first component identifier to the page configuration area, after rendering the first component corresponding to the first component identifier in the page configuration area, the method further includes: In the case where the third component has been rendered in the page configuration area and the third component is selected, the attribute information of the third component is displayed in the attribute configuration area included in the page configuration interface, and the attribute information of the third component includes a behavior attribute entry; In response to an operation of associating the behavior attribute indicated by the behavior attribute entry with any function in the property file of the first component, the behavior attribute is associated with the function function, and the third component is used to call the function function when the behavior corresponding to the behavior attribute is triggered.

9. The method according to any one of claims 1 to 8, characterized in that: The display page configuration interface includes: In response to an access operation to the page configuration interface, displaying the page configuration interface; Get at least one properties file; In the component display area included in the page configuration interface, the component identification included in each property file is displayed.

10. The method according to claim 9, characterized in that In the component display area included in the page configuration interface, the component identification included in each property file is displayed, including: Based on the category to which the component identifiers contained in each property file belong, in the component display area, the component identifiers belonging to the same category are displayed in the same area.

11. The method according to any one of claims 1 to 8, characterized in that: The step of generating a code file of the page based on the rendered components in the page configuration area in response to a save operation on the rendered components in the page configuration area includes: In response to a save operation on the rendered components in the page configuration area, a code file for the page is generated based on the relationship between the rendered components in the page configuration area, the property files of the rendered components, and the logic code files.

12. The method according to any one of claims 1 to 8, characterized in that: After generating the code file of the page based on the rendered components in the page configuration area in response to the save operation on the rendered components in the page configuration area, the method further includes: In response to the instruction to load the code file, the page is rendered based on the code file.

13. A code file generating device, characterized in that: The device comprises: A display module, used for displaying a page configuration interface, wherein the page configuration interface includes a page configuration area and a component display area, wherein the page configuration area is used for configuring the page, and the component display area displays component identifiers corresponding to components used for generating the page; a rendering module, configured to render a first component corresponding to the first component identifier in the page configuration area in response to a dragging operation of dragging a first component identifier to the page configuration area, wherein the first component identifier is any component identifier displayed in the component display area; The generating module is used for generating a code file of the page based on the rendered components in the page configuration area in response to a save operation on the rendered components in the page configuration area.

14. A computer device, characterized in that: The computer device includes a processor and a memory, wherein at least one computer program is stored in the memory, and the at least one computer program is loaded and executed by the processor to implement the operations performed by the code file generation method according to any one of claims 1 to 12.

15. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores at least one computer program, and the at least one computer program is loaded and executed by a processor to implement the operations performed by the code file generation method according to any one of claims 1 to 12.

16. A computer program product comprising a computer program, characterized in that When the computer program is executed by a processor, the operations performed by the code file generation method according to any one of claims 1 to 12 are implemented.

Images