Component generation method and device, storage medium and program product

Abstract

The invention provides a component generation method and device, a storage medium and a program product, and belongs to the technical field of computers. The method comprises the following steps: displaying a component preview area in a component editing page of a target application; in response to a component adding operation triggered on the component editing page, displaying candidate component elements; in response to a selection operation on a target component element in the candidate component elements, displaying element contents of the target component element in the component preview area; and in response to an editing completion operation triggered on the component editing page, displaying a component containing the element content of the target component element. By adopting the method and the device, the application convenience of the target application is improved.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technologies, and particularly to a component generation method, device, storage medium, and program product. Background Art

[0002] Various application programs are usually installed on current terminals to implement different functions. For example, music application programs, video application programs, and so on.

[0003] Each time certain information of an application program needs to be viewed, it is necessary to first click to open the application program and then find the interface where the information is located before the information can be viewed.

[0004] When certain information is used frequently, it is cumbersome to open the application program and find the interface where the information is located each time. Summary of the Invention

[0005] The present disclosure provides a component generation method that can improve the application convenience of a target application. The technical solution is as follows:

[0006] In a first aspect, a component generation method is provided. The method includes:

[0007] Display a component preview area on a component editing page of a target application;

[0008] In response to a component addition operation triggered on the component editing page, display candidate component elements;

[0009] In response to a selection operation on a target component element among the candidate component elements, display the element content of the target component element in the component preview area;

[0010] In response to an editing completion operation triggered on the component editing page, display a component including the element content of the target component element.

[0011] In a possible implementation manner, before displaying the component preview area on the component editing page of the target application, the method further includes:

[0012] In response to a component setting operation on the target application, display a setting interface in the target application, where multiple component generation options are displayed in the setting interface, and different component generation options correspond to component templates of different sizes;

[0013] In response to a selection operation on a target component generation option among the multiple component generation options, display a component editing page corresponding to the target component generation option, and display a component template corresponding to the target component generation option in the component preview area.

[0014] In a possible implementation, the component template includes at least one component setting area;

[0015] The method further includes:

[0016] In response to a component addition operation triggered on the component editing page, determine a target component setting area among at least one component setting area currently displayed in the component preview area;

[0017] The displaying the element content of the target component element in the component preview area in response to a selection operation on the target component element among the candidate component elements includes:

[0018] In response to a selection operation on the target component element among the candidate component elements, display the element content of the target component element in the target component setting area.

[0019] In a possible implementation, the method further includes:

[0020] In response to a template switching operation triggered in the component preview area, switch and display different component templates in the component preview area, where the number and arrangement of the component setting areas included in the different component templates are different.

[0021] In a possible implementation, the switching and displaying different component templates in the component preview area in response to a template switching operation triggered in the component preview area includes:

[0022] In response to a swiping operation in the component preview area in a target direction, switch and display different component templates in the component preview area.

[0023] In a possible implementation, an addition icon is displayed in each component setting area;

[0024] The determining a target component setting area among at least one component setting area displayed in the component preview area in response to a component addition operation triggered on the component editing page includes:

[0025] In response to a triggering operation on the addition icon in the selected component setting area, determine the selected component setting area as the target component setting area.

[0026] In a possible implementation, an addition option is displayed on the component editing page;

[0027] The determining a target component setting area among at least one component setting area displayed in the component preview area in response to a component addition operation triggered on the component editing page includes:

[0028] In response to a triggering operation on the addition option, in at least one component setting area that is currently displayed in the component preview area and where no target component element is displayed, the first component setting area in the preset order is determined as the target component setting area according to the preset order.

[0029] In a possible implementation, a delete icon is displayed at a preset position of the target component element displayed in the component setting area;

[0030] The method further includes:

[0031] In response to a triggering operation on the delete icon corresponding to the target component element displayed in the selected target component setting area, the target component element in the selected target component setting area is cancelled from being displayed.

[0032] In a possible implementation, the method further includes:

[0033] When multiple target component elements are displayed in the component preview area, in response to a transposition operation on two target component elements among the multiple target component elements, the positions of the two target component elements in the component setting area of the component template are exchanged.

[0034] In a possible implementation, the step of, in response to a transposition operation on two target component elements among the multiple target component elements, exchanging the positions of the two target component elements in the component setting area of the component template includes:

[0035] In response to a long - press operation on one of the two target component elements and a drag operation of dragging the one target component element to the position of the other target component element, the positions of the two target component elements in the component setting area of the component template are exchanged.

[0036] In a possible implementation, the method further includes:

[0037] In response to a selection operation on a target component element among the candidate component elements, a custom editing window of the target component element is displayed on the component editing page;

[0038] In response to a custom editing operation triggered in the custom editing window, the element content of the target component element in the component preview area is updated.

[0039] In a possible implementation, the step of, in response to an editing completion operation triggered on the component editing page, displaying a component including the element content of the target component element includes:

[0040] In response to an edit completion operation triggered on the component editing page, perform a minimization setting on the target application, return to display the system desktop, and display a component containing the element content of the target component element on the system desktop.

[0041] In a possible implementation manner, after displaying the component containing the element content of the target component element, the method further includes:

[0042] In response to a component replacement operation on the target interface where the component is located, display a component selection page in the target application, and synchronously display the component currently displayed on the target interface on the component selection page;

[0043] In response to a component switching operation triggered on the component selection page, switch and display stored different components on the component selection page;

[0044] In response to a selection operation on the component currently displayed on the component option page, replace and display the component displayed on the target interface with the component currently displayed on the component option page.

[0045] In a possible implementation manner, a delete option is displayed on the component selection page;

[0046] The method further includes:

[0047] In response to a trigger operation on the delete option, cancel storing the component currently displayed on the component selection page.

[0048] In a second aspect, a component generation device is provided, and the device includes:

[0049] A first display module, configured to display a component preview area on a component editing page of a target application;

[0050] A display module, configured to display candidate component elements in response to a component addition operation triggered on the component editing page;

[0051] A second display module, configured to display the element content of the target component element in the component preview area in response to a selection operation on the target component element among the candidate component elements;

[0052] A component display module, configured to display a component containing the element content of the target component element in response to an edit completion operation triggered on the component editing page.

[0053] In a third aspect, a computer device is provided, and the computer device includes a processor and a memory. At least one instruction is stored in the memory, and the instruction is loaded and executed by the processor to implement the operations performed by the component generation method.

[0054] In a fourth aspect, a computer-readable storage medium is provided, in which at least one instruction is stored, and the instruction is loaded and executed by a processor to implement the operations performed by the component generation method.

[0055] In a fifth aspect, a computer program product is provided, which includes at least one instruction, and the at least one instruction is loaded and executed by a processor to implement the operations performed by the component generation method.

[0056] The beneficial effects brought by the technical solutions provided in this disclosure are as follows: In the solutions mentioned in this disclosure, a user can generate the element content of certain information in a target application in the form of a component and display it on an interface that is more convenient to view. In this way, when the user needs to view this information, they can directly view it through the component without having to search in the target application again, thereby improving the application convenience of the target application. BRIEF DESCRIPTION OF THE DRAWINGS

[0057] To more clearly illustrate the technical solutions in the embodiments of this disclosure, the following will briefly introduce the drawings required for the description of the embodiments. Obviously, the following drawings are only some embodiments of this disclosure. For those of ordinary skill in the art, without creative efforts, other drawings can be obtained based on these drawings.

[0058] Figure 1 is a flowchart of a component generation method provided by an embodiment of this disclosure;

[0059] Figure 2 is a schematic diagram of a component editing page provided by an embodiment of this disclosure;

[0060] Figure 3 is a schematic diagram of a component addition page provided by an embodiment of this disclosure;

[0061] Figure 4 is a schematic diagram of a component editing page provided by an embodiment of this disclosure;

[0062] Figure 5 is a schematic diagram of a component editing page provided by an embodiment of this disclosure;

[0063] Figure 6 is a schematic diagram of a system desktop provided by an embodiment of this disclosure;

[0064] Figure 7 is a schematic diagram of a component editing page provided by an embodiment of this disclosure;

[0065] Figure 8 is a schematic diagram of a component editing page provided by an embodiment of this disclosure;

[0066] Figure 9 It is a schematic diagram of a component editing page provided by an embodiment of the present disclosure;

[0067] Figure 10 It is a schematic diagram of a component editing page provided by an embodiment of the present disclosure;

[0068] Figure 11 It is a schematic diagram of a component editing page provided by an embodiment of the present disclosure;

[0069] Figure 12 It is a schematic diagram of a component editing page provided by an embodiment of the present disclosure;

[0070] Figure 13 It is a schematic diagram of a component selection page provided by an embodiment of the present disclosure;

[0071] Figure 14 It is a schematic structural diagram of a component generation device provided by an embodiment of the present disclosure;

[0072] Figure 15 It is a schematic block diagram of a terminal provided by an embodiment of the present disclosure;

[0073] Figure 16 It is a schematic block diagram of a server provided by an embodiment of the present disclosure. Detailed implementation manners

[0074] To make the objectives, technical solutions, and advantages of the present disclosure clearer, the following will further describe the embodiments of the present disclosure in detail with reference to the accompanying drawings.

[0075] An embodiment of the present disclosure provides a component generation method, which can be implemented by a computer device. The computer device can be a terminal and a server, etc. The terminal can be a desktop computer, a notebook computer, a tablet computer, a mobile phone, etc.

[0076] The computer device can include a processor, a memory, a communication component, etc.

[0077] The processor can be a central processing unit (CPU). The processor can be used to read instructions and process data. For example, in the component editing page of the target application, display a component preview area, display candidate component elements in response to a component addition operation triggered in the component preview area, display the element content of the target component element in the component preview area in response to a selection operation on the target component element in the candidate component elements, display a component including the element content of the target component element in response to an editing completion operation triggered on the component editing page, and so on.

[0078] The memory can be various volatile memories or non-volatile memories, such as solid state disks (SSDs), dynamic random access memories (DRAMs), etc. The memory can be used for data storage. For example, storing data corresponding to a target application, storing data corresponding to a component editing page, storing data of the element content of a target component element displayed in a component preview area, storing data of a component containing the element content of a target component element that is displayed, and so on.

[0079] The communication component can be a wired network connector, a wireless fidelity (WiFi) module, a Bluetooth module, a cellular network communication module, etc. The communication component can be used for data transmission with other devices.

[0080] A target application can be installed in the computer device. The target application can be of any reasonable type. For example, the target application can be a music application, a video application, a lifestyle application, etc. Through the component generation method provided by the embodiments of the present disclosure, information that is frequently used in the target application is generated in the form of a component and displayed on an interface that is convenient for the user to view. In this way, the user can directly perform operations such as viewing on this interface.

[0081] Figure 1 is a flowchart of a component generation method provided by the embodiments of the present disclosure. Refer to Figure 1 This embodiment includes:

[0082] 101. Display a component preview area on the component editing page of the target application.

[0083] In implementation, a target application is set in the computer device. When the user wants to generate a component corresponding to the target application, the user can open the component editing page in the target application. Refer to Figure 2 This component editing page displays a component preview area. The user can perform operations on the component editing page to implement the generation of the component, and the generated component will be displayed in the preview form in the component preview area so that the user can view the situation of the component designed by himself / herself in real time, which facilitates the user's next operation and also enhances the user's operation interest.

[0084] 102. In response to a component addition operation triggered on the component editing page, display candidate component elements.

[0085] In implementation, after the component editing page is opened, the user can perform a component addition operation on the component editing page. When the computer device detects this component addition operation, a component addition page can be displayed. Refer toFigure 3 On the component addition page, multiple candidate component elements are displayed.

[0086] Different candidate component elements are used to indicate the types of element contents that the component to be generated by the user will display, and they can be set according to the type of the target application.

[0087] In a possible implementation, the target application can be a music application. The multiple candidate component elements can include a basic block and a function block. Among them, the basic block can be a component linked to the system of the computer device, that is, system components of the computer device can be added through the options of this basic block. The function block can be an element set in the target application, and unique elements in the target application can be added through the options of this function block.

[0088] Furthermore, the multiple candidate component elements can be at least one of a memo, a picture, guess you like, a vinyl record player, a celebrity card, desktop lyrics, and couple sharing. Among them, the memo and the picture belong to the above-mentioned basic blocks, and guess you like, the vinyl record player, the celebrity card, desktop lyrics, and couple sharing belong to the above-mentioned function blocks.

[0089] Among them, the memo is used to add the established or newly established memo in the computer device to the component to be generated; the picture is to add the picture in the computer device to the component to be generated; guess you like is used to add the elements guessed by the target application according to the user's historical behavior that the user likes to the component to be generated. For example, through guess you like, the recommended songs can be added to the component to be generated; the vinyl record player is to add the liked songs to the component to be generated; the celebrity card is to add the picture of the liked or collected celebrity card to the component to be generated; desktop lyrics are to synchronously display the lyrics being played in the component to be generated; couple sharing is to display the element information of couple sharing in the target application in the component to be generated.

[0090] Of course, the candidate component elements can be custom-selected according to the system settings of the computer device and the settings of the target application. The embodiments of the present disclosure do not make specific limitations on this.

[0091] 103. In response to the selection operation of the target component element among the candidate component elements, display the element content of the target component element in the component preview area.

[0092] In implementation, when the user determines the desired element among the multiple candidate component elements, the candidate component element can be selected as the target component element for the selection operation. When the computer device detects the selection operation of the target component element, it will return to display the component editing page, and display the element content of the target component element in the component preview area of the component editing page.

[0093] Refer to Figure 4 , when the user selects a candidate component element in Figure 3 - a written memo in the memo as the target component element, Figure 4 the component preview area in Figure 4 can display the element content in the memo, that is, display

[0094] Or, refer to Figure 5 , when the user selects a candidate component element in Figure 3 - a stored picture in the picture as the target component element, Figure 4 the component preview area in Figure 4 can display the element content in the picture, that is, display

[0095] For the case where the element content of the target component element in Figure 4 is displayed on the far right of the component preview area, and the case where there are element contents of two target component elements in Figure 5 the component preview area, they will be introduced in detail later and will not be elaborated here.

[0096] 104. In response to the completion-of-editing operation triggered on the component editing page, display the component containing the element content of the target component element.

[0097] In implementation, when the user adds the required element content in the component preview area through the above steps 101 - 103, if the element content displayed in the current component preview area already meets the user's requirements, the user can perform a completion-of-editing operation on the component editing page. When the computer device detects the user's completion-of-editing operation, it can control the element content in the component preview area to be displayed in the target interface set by the user in the form of a component.

[0098] In this way, the user can directly view the desired information (i.e., the above element content) on the target interface without having to search again in the target application, improving the application convenience of the target application.

[0099] In the embodiments of the present disclosure, the target interface displayed by the component can be the system desktop of the computer device (refer to Figure 6 ), or it can be a preset interface of the target application. The preset interface can be the main interface of the target application or other sub-interfaces, etc. The embodiments of the present disclosure do not limit this, and the user can set it according to needs.

[0100] In a possible implementation, when the target interface displayed by the component is the system desktop of the computer device, the display method may be: in response to the completion operation triggered on the component editing page, perform a minimization setting on the target application, return to display the system desktop, and display on the system desktop a component containing the element content of the target component element.

[0101] In implementation, when the computer device detects the user's completion operation, the component editing page of the target application currently displayed can be minimized, and the system desktop of the computer device can be displayed, and the generated component is displayed at a preset position on the system desktop.

[0102] In another possible implementation, when the target interface displayed by the component is a preset interface of the target application, the display method may be: in response to the completion operation triggered on the component editing page, display the preset interface of the target application, and display on the preset interface a component containing the element content of the target component element.

[0103] In implementation, when the computer device detects the user's completion operation, trigger the display of the preset interface of the target application, and display the generated component at a preset position on the preset interface.

[0104] In the embodiments of the present disclosure, other display contents may also be set in the target application so that the user can perform various different operations on the component to be generated, thereby being used to perfect the component. Next, the possible display contents set in the target application and the corresponding operations of the user will be introduced:

[0105] In a possible implementation, the method for opening the component editing page in the target application in step 101 may be as follows:

[0106] In response to the component setting operation on the target application, display the setting interface in the target application, where multiple component generation options are displayed in the setting interface, and different component generation options correspond to component templates of different sizes; in response to the selection operation on the target component generation option among the multiple component generation options, display the component editing page corresponding to the target component generation option, and display the component template corresponding to the target component generation option in the component preview area.

[0107] In implementation, the user can perform a component setting operation after opening the target application, thereby triggering the display of the setting interface in the target application, where the component setting operation may include search operations, click operations, and so on.

[0108] There are multiple component generation options displayed in the setting interface. The difference between these multiple component generation options is that they can set component templates of different sizes. Users can select component generation options according to the size of the component they want to generate. After determining the target component generation option they want to select, they can select it to trigger the display of the component editing page corresponding to the target component generation option. In the component preview area of ​​the component editing page, the component template of the size corresponding to the target component generation option is displayed, where the selection operation can be a user's click operation or gesture operation, etc.

[0109] In an embodiment of the present disclosure, the plurality of component generation options may include a medium component generation option and a large component generation option, and the size of the component template corresponding to the medium component generation option is smaller than the size of the component template of the large component generation option.

[0110] When the user wants to generate a medium-sized component, he can select the medium-sized component generation option as the target component generation option to trigger the display of the component editing page corresponding to the medium-sized component generation option. Figure 2 , Figure 7 and Figure 8 , Figure 2 , Figure 7 and Figure 8 The components shown are all component editing pages corresponding to the medium-sized component generation option. The medium-sized component template is displayed in the component preview area of ​​the component editing page.

[0111] When the user wants to generate a large-sized component, he can select the large-sized component generation option as the target component generation option to trigger the display of the component editing page corresponding to the large-sized component generation option. Figure 9 , Figure 10 and Figure 11 , Figure 9 , Figure 10 and Figure 11 The components shown are all component editing pages corresponding to the large component generation option. The large-sized component templates are displayed in the component preview area of ​​the component editing page.

[0112] It can be understood that in addition to the above-mentioned medium component generation option and large component generation option, the component generation option can also include small component generation option, medium and small component generation option, medium and large component generation option, etc., which can be set according to needs, and the embodiments of the present disclosure are not limited to this.

[0113] For further information, see Figure 2 , Figures 7 - 11, the component template may include at least one component setting area, and each component addition area is used to add the element content of a target component element. In this way, when there are multiple component setting areas in the component template, the generated component by the user can display the element content of multiple target component elements, thereby enhancing the application interest and convenience of the target application.

[0114] Correspondingly, the component generation method provided by the embodiments of the present disclosure may further include the following steps:

[0115] In response to a component addition operation triggered on the component editing page, determine a target component setting area in at least one component setting area currently displayed in the component preview area.

[0116] In implementation, when the computer device detects a component addition operation performed by the user on the component editing page, in addition to displaying candidate component elements, it will also determine a target component setting area in at least one component setting area included in the component template currently displayed in the component preview area. The target component setting area is the component setting area in which element content will be added among the component setting areas that have not yet added element content.

[0117] After determining the target component setting area, correspondingly, the processing method of step 103 may be: in response to a selection operation on the target component element among the candidate component elements, display the element content of the target component element in the target component setting area.

[0118] In implementation, when the computer device detects a selection operation on the target component element by the user, it will return to display the component editing page and display the element content of the target component element in the target component setting area in the component preview area. In this way, the operation of adding element content at one component setting area in the component template is completed.

[0119] In a possible implementation manner, there may be multiple component templates, and the number and arrangement of component setting areas included in different component templates are different. For example, Figure 2 the shown component template includes two component setting areas arranged side by side left and right, Figure 7 the shown component template includes only one component setting area, Figure 8 the shown component template includes 5 component setting areas arranged as shown in Figure 8 the shown arrangement.

[0120] Correspondingly, the component generation method provided by the embodiments of the present disclosure may further include the following steps:

[0121] In response to a template switching operation triggered in the component preview area, switch and display different component templates in the component preview area.

[0122] In implementation, different component generation options can correspond to multiple component templates, that is, multiple component templates can be set for the same size, and the number and arrangement of component setting areas included in multiple component templates of the same size can be different. For example, Figure 2 、 Figure 7 and Figure 8 show multiple component templates of medium size, Figure 9 、 Figure 10 and Figure 11 show multiple component templates of large size.

[0123] When the computer device detects a selection operation of a target component generation option, a component editing page corresponding to the target component generation option is displayed, and one of the component templates corresponding to the target component generation option is displayed in the component preview area of the component editing page. At this time, the user can perform a template switching operation in the component preview area. When the computer device detects the template switching operation performed by the user, another component template corresponding to the target component generation option can be switched and displayed in the component preview area.

[0124] Through the above method, the user can view multiple component templates corresponding to the target component generation option in the component preview area. When a component template is selected, the template switching operation can be stopped, and the component template currently displayed in the component preview area is the component template selected by the user.

[0125] In the embodiments of the present disclosure, the method of switching and displaying different component templates through the template switching operation can be: in response to a swiping operation in the component preview area in the target direction, different component templates are switched and displayed in the component preview area.

[0126] In implementation, when the user wants to switch and display the component template in the component preview area, the user can perform a swiping operation in the component preview area in the target direction. The computer device detects the swiping operation performed by the user, and different component templates are switched and displayed in the component preview area.

[0127] It can be understood that when the user is performing a swiping operation, if the swiping operation has a component in the target direction and the swiping distance of the component in the target direction is greater than the preset swiping distance, it means that the computer device can detect the swiping operation in the target direction.

[0128] Among them, the target direction can be the left - right direction when the user faces the computer device, or it can also be the up - down direction when the user faces the computer device, etc. The embodiments of the present disclosure do not limit this.

[0129] In an embodiment of the present disclosure, a method for switching and displaying different component templates through a template switching operation may also be: a template switching display option is displayed on a component editing page, and in response to a triggering operation of the template switching display option, different component templates are switched and displayed in a component preview area.

[0130] In implementation, a template switching display option may be displayed in the component editing page. When a user is not satisfied with the component template currently displayed in the component preview area and wants to switch to try other component templates, the user may click on the template switching display option. Each time the user clicks, the computer device may detect the user's click operation, thereby triggering the switching display of different component templates in the component preview area.

[0131] In this way, the user can display and view multiple component templates through any of the above operations, which improves the fun and convenience of the component generation process of the target application and enhances the user experience.

[0132] In one possible implementation, see Figure 2 , an add icon is displayed in each component setting area, and accordingly, a method for determining a target component setting area in one or more component setting areas included in a component template may be as follows:

[0133] In response to a trigger operation on an add icon in a selected component setting area, the selected component setting area is determined as a target component setting area.

[0134] In implementation, the user can select the target component setting area from one or more component setting areas included in the currently displayed component template. An add icon is displayed in each component setting area. When the computer device detects that the user has triggered an add icon, it indicates that the user has selected the component setting area corresponding to the add icon as the target component setting area.

[0135] For example, for Figure 2 For the component template shown, the component template includes two component setting areas arranged on the left and right. The user can first click the add icon in the component setting area on the right, and then add the target component element in the component setting area on the right. Figure 4 Then, click the Add icon in the Component Settings area on the left, and then add the target component element in the Component Settings area on the left. Figure 5 .

[0136] In this way, users can choose the operation order of the component setting area according to their own preferences and needs, which improves the fun and convenience of the target application in the component generation process and improves the user experience.

[0137] In the embodiments of the present disclosure, in addition to adding by oneself through the above-mentioned added icons, other determination methods can also be set. Refer to Figure 2 , an addition option is displayed on the component editing page. Correspondingly, the method for determining the target component setting area in one or more component setting areas included in the component template can be as follows:

[0138] In response to a triggering operation on the addition option, in at least one component setting area currently displayed in the component preview area and without the target component element being displayed, in a preset order, the first component setting area in the preset order is determined as the target component setting area.

[0139] In implementation, each component template corresponds to a preset order of the component setting areas included in the component template. When a user wants to add a target component element to the component template, the user can click the addition option on the component editing page. When the computer device detects the triggering operation of the addition option, it will first obtain the preset order of the currently displayed component template, and then in this preset order, determine the first position of the component setting area where the target component element has not been added. This first component setting area is the target component setting area.

[0140] For example, for Figure 2 the shown component template, the component template includes two component setting areas arranged left and right. In the preset order corresponding to the component template, the component setting area set on the left is first, and the component setting area set on the right is second. Therefore, when the target component element has not been added to both component setting areas, when the user clicks the addition option, the component setting area set on the left will be determined as the target component setting area. After the target component element is added to the component setting area set on the left, when the user clicks the addition option again, the component setting area set on the right will be determined as the target component setting area.

[0141] In this way, the user can fill all the component setting areas in the component template with the target component elements according to the preset order corresponding to the component template, improving the convenience and interest when the user operates, and further improving the user experience.

[0142] In a possible implementation manner, refer to Figure 4 , a delete icon is displayed at the preset position of the target component element displayed in the component setting area. This preset position can be the corner position of the target component element, etc. The embodiments of the present disclosure do not limit this.

[0143] Correspondingly, the component generation method provided by the embodiments of the present disclosure may further include the following steps:

[0144] In response to a triggering operation on the delete icon corresponding to the target component element displayed in the selected target component setting area, the display of the target component element in the selected target component setting area is cancelled.

[0145] In implementation, when a target component element is added to the target component setting area, a delete icon is displayed at the preset position of the target component element. A corresponding delete icon is displayed at the preset position of each target component element added to each component setting area in the component template. Refer to Figure 5 , and delete icons are displayed at the preset positions of both target component elements.

[0146] When the user adds a target component element and is not satisfied with it later, the user can click the delete icon corresponding to the target component element. When the computer device detects the triggering operation of the delete icon, it cancels the display of the target component element corresponding to the delete icon, so that no element content is displayed in the component setting area corresponding to the target component element. In this way, the user can re-add a target component element to this component setting area.

[0147] In this way, when the user is not satisfied with the added target component element, the user can delete it and re-add it, which improves the setting diversity of the target application, improves the convenience and interest of the user during operation, and further improves the user experience.

[0148] In the embodiments of the present disclosure, in addition to deleting through the above-mentioned delete icon, other deletion methods can also be set, and the method can be as follows:

[0149] In response to a long-press operation on the target component element displayed in the selected target component setting area, an operation option table is displayed. A delete option is displayed in the operation option table. In response to the triggering operation of the delete option, the display of the target component element in the selected target component setting area is cancelled.

[0150] In implementation, when the user adds a target component element and is not satisfied with it later, the user can long-press the position where the target component element is located to trigger the display of an operation option table. A delete option can be displayed in the operation option table. When the user clicks the delete option, the computer device detects the triggering operation of the delete option, and thus cancels the display of the target component element in the selected target component setting area, so that no element content is displayed in the component setting area corresponding to the target component element. In this way, the user can re-add a target component element to this component setting area.

[0151] Of course, the method for deleting the target component element displayed in the component setting area can also be other reasonable methods, and the embodiments of the present disclosure do not limit this.

[0152] In a possible implementation manner, the component generation method provided by the embodiments of the present disclosure may further include the following steps:

[0153] When there are multiple target component elements displayed in the component preview area, in response to a transposition operation on two of the multiple target component elements, exchange the positions of the two target component elements in the component setting area of the component template.

[0154] In implementation, when the user adds corresponding target component elements in multiple component setting areas in the component template, if the user wants to exchange the positions of two of the target component elements after viewing the currently displayed content in the component preview area, a transposition operation on the two target component elements can be performed. When the computer device detects the transposition operation on the two target component elements, it can exchange the positions of the two target component elements in the component setting area of the component template.

[0155] Further, the method of exchanging positions may be: in response to a long-press operation on one of the two target component elements and a drag operation of dragging one of the target component elements to the position of the other target component element, exchange the positions of the two target component elements in the component setting area of the component template.

[0156] In implementation, when the user wants to exchange the positions of two target component elements, the user can first long-press the position where one of the target component elements is located, and after the long-press, drag the target component element to the position of the other target component element. When the computer device detects the above transposition operation, it will exchange the positions between the two target component elements.

[0157] In the embodiments of the present disclosure, in addition to the method, other exchange methods may be set, and the method may be as follows:

[0158] In response to a long-press operation on one of the two target component elements, display an operation option table, where a transposition option is displayed in the operation option table. In response to a trigger operation on the transposition option, display a prompt message on the component editing page, where the content of the prompt message includes selecting the target component elements to be transposed. In response to a selection operation on the other target component element, exchange the positions of the two target component elements in the component setting area of the component template.

[0159] In implementation, when a user wants to swap the positions of two target component elements, the user can first long-press on the position where one of the target component elements is located, which will trigger the display of an operation option table. Then, the user can click on the swap option in the operation option table of this one of them, indicating that the user wants to change the position of this one of the target component elements. When the computer device detects the trigger operation of the swap option, it will trigger the display of a prompt message, and the content displayed on this prompt message is "Select the target component element to be swapped", which is used to prompt the user to select another target component element for swapping positions. The user can select another target component element as needed. When the computer device detects the click operation on this other target component element, it will trigger the swapping of the positions between this one of the target component elements and the other target component element mentioned above.

[0160] Of course, in addition to the two swapping methods listed above, it can also be other reasonable methods, and the embodiments of the present disclosure do not limit this.

[0161] In a possible implementation manner, the component generation method provided by the embodiments of the present disclosure may further include the following steps:

[0162] In response to the selection operation on the target component element in the candidate component elements, a custom editing window of the target component element is displayed in the component editing page; in response to the custom editing operation triggered in the custom editing window, the element content of the target component element in the component preview area is updated.

[0163] In implementation, when the computer device detects the selection operation of the user on the target component element in the candidate component elements, while displaying the element content of the target component element in the component preview area, it will also display the custom editing window of this target component element in the component editing page, see Figure 12 .

[0164] Then, the user can perform custom editing on the element content of the target component element in this custom editing window. The computer device will obtain these custom editing operations, and then update the element content of the target component element displayed in the component preview area with these custom editing contents.

[0165] For example, see Figure 12 , Figure 12 where the target component element is a memo. At this time, the user can customize and edit the text content of this memo in the custom editing window.

[0166] The embodiments of the present disclosure do not specifically limit the custom editing operations of the target component element. For example, when the target component element is a picture, the user can perform different filter operations on the picture in the custom editing window, or add various decorative images to the picture, etc.

[0167] In a possible implementation, refer to Figure 4 , the component editing page also displays a completion option. Correspondingly, the processing method in step 104 can be: in response to the triggering operation of the completion option, display a component containing the element content of the target component element.

[0168] In implementation, when the user has added the corresponding target component element, the user can click the completion option, thereby triggering the display of a component containing the element content of the target component element.

[0169] When a component template is set in the component preview area, when there is at least one target component element not displayed in at least one component setting area in the component template, it indicates that the component template has not been filled yet. At this time, the completion option can be set to an inoperable state, and even if the user clicks the completion option, no triggering operation will occur. When corresponding target component elements are displayed in all the multiple component setting areas included in the component template, the completion option is set to an operable state, and the user can perform a triggering operation by clicking the completion option.

[0170] In the embodiments of the present disclosure, the computer device stores each generated component. When the user replaces the component currently displayed on the target interface, the following processing can be performed:

[0171] In response to the component replacement operation on the target interface where the component is located, display a component selection page in the target application, and on the component selection page, synchronously display the component currently displayed on the target interface; in response to the component switching operation triggered on the component selection page, switch and display the stored different components in the component option page; in response to the selection operation on the component currently displayed on the component selection page, replace the component displayed on the target interface with the component currently displayed on the component option page.

[0172] In implementation, when the user replaces the component currently displayed on the target interface, the user can perform a component replacement operation on the target interface, thereby triggering the display of the component selection page in the target application. Refer to Figure 13 , and the component currently displayed on the target interface is synchronously displayed on the component selection page.

[0173] Then, the user can perform a component switching operation on the component selection page, thereby triggering the switching and display of other stored components in the component option page. The user can perform the component switching operation multiple times until seeing the component to be replaced. When the component displayed on the component selection page is the component the user wants to replace, the user can perform a selection operation on the component. When the computer device detects the selection operation, it will replace the component displayed on the target interface with the component currently displayed on the component option page.

[0174] Among them, there are various possibilities for the replacement operation. For example, it can be a long - press operation on a component on the target interface, etc. The embodiments of the present disclosure do not limit this.

[0175] There are also various component switching operations. For example, the component switching operation can be a swiping operation in the component selection interface in a preset direction, etc. The embodiments of the present disclosure do not limit this.

[0176] In a possible implementation manner, referring to Figure 13 , a deletion option is displayed on the component selection page. Correspondingly, the component generation method provided by the embodiments of the present disclosure may further include the following steps:

[0177] In response to the triggering operation of the deletion option, cancel the storage of the component currently displayed on the component selection page.

[0178] In practice, when the user views each stored component on the component selection page, if the user wants to stop storing a certain component to save storage space, the user can click the deletion option when the component is displayed on the component selection page, so as to cancel the storage of the component, and the component will no longer be displayed on the subsequent component selection page.

[0179] All of the above - mentioned alternative technical solutions can be combined arbitrarily to form alternative embodiments of the present disclosure, which will not be elaborated one by one here.

[0180] In the solutions mentioned in the embodiments of the present disclosure, the user can generate the element content of some information in the target application into the form of a component and display it on a more convenient - to - view interface. In this way, when the user needs to view this information, the user can directly view it through the component without having to search in the target application again, thereby improving the application convenience of the target application.

[0181] The embodiments of the present disclosure provide a component generation device. This device can be the computer device in the above - mentioned embodiments, such as Figure 14 shown, and the device includes:

[0182] A first display module 1410, configured to display a component preview area on the component editing page of the target application;

[0183] A display module 1420, configured to display candidate component elements in response to a component addition operation triggered on the component editing page;

[0184] A second display module 1430, configured to display the element content of the target component element in the component preview area in response to a selection operation on the target component element in the candidate component elements;

[0185] A component display module 1440, which is configured to display a component including the element content of the target component element in response to an edit completion operation triggered on the component editing page.

[0186] In a possible implementation, the first display module 1410 is further configured to:

[0187] In response to a component setting operation on the target application, display a setting interface in the target application, where a plurality of component generation options are displayed in the setting interface, and different component generation options correspond to component templates of different sizes;

[0188] In response to a selection operation on a target component generation option among the plurality of component generation options, display a component editing page corresponding to the target component generation option, and display a component template corresponding to the target component generation option in the component preview area.

[0189] In a possible implementation, the component template includes at least one component setting area;

[0190] The display module 1420 is further configured to:

[0191] In response to a component addition operation triggered on the component editing page, determine a target component setting area in at least one component setting area currently displayed in the component preview area;

[0192] The second display module 1430 is configured to:

[0193] In response to a selection operation on a target component element among the candidate component elements, display the element content of the target component element in the target component setting area.

[0194] In a possible implementation, the second display module 1430 is further configured to:

[0195] In response to a template switching operation triggered in the component preview area, switch and display different component templates in the component preview area, where the number and arrangement of the component setting areas included in the different component templates are different.

[0196] In a possible implementation, the second display module 1430 is configured to:

[0197] In response to a swiping operation in the component preview area in a target direction, switch and display different component templates in the component preview area.

[0198] In a possible implementation, an add icon is displayed in each component setting area;

[0199] The display module 1420 is used for:

[0200] In response to a triggering operation on the add icon in the selected component setting area, determining the selected component setting area as the target component setting area.

[0201] In a possible implementation, an add option is displayed in the component editing page;

[0202] The display module 1420 is used for:

[0203] In response to a triggering operation on the add option, in at least one component setting area currently displayed in the component preview area and without a target component element displayed, determining the first component setting area in the preset order as the target component setting area according to the preset order.

[0204] In a possible implementation, a delete icon is displayed at the preset position of the target component element displayed in the component setting area;

[0205] The second display module 1430 is further used for:

[0206] In response to a triggering operation on the delete icon corresponding to the target component element displayed in the selected target component setting area, canceling the display of the target component element in the selected target component setting area.

[0207] In a possible implementation, the second display module 1430 is further used for:

[0208] When multiple target component elements are displayed in the component preview area, in response to a transposition operation on two of the multiple target component elements, swapping the positions of the two target component elements in the component setting area of the component template.

[0209] In a possible implementation, the second display module 1430 is used for, including:

[0210] In response to a long-press operation on one of the two target component elements and a drag operation of dragging the one target component element to the position of the other target component element, swapping the positions of the two target component elements in the component setting area of the component template.

[0211] In a possible implementation, the second display module 1430 is further used for:

[0212] In response to a selection operation on a target component element among the candidate component elements, displaying a custom editing window of the target component element in the component editing page;

[0213] In response to a custom editing operation triggered in the custom editing window, update the element content of the target component element in the component preview area.

[0214] In a possible implementation, the display module 1440 is configured to:

[0215] In response to an editing completion operation triggered on the component editing page, perform a minimization setting on the target application, return to display the system desktop, and display a component including the element content of the target component element on the system desktop.

[0216] In a possible implementation, the component display module 1440 is further configured to:

[0217] In response to a component replacement operation on the target interface where the component is located, display a component selection page in the target application, and synchronously display the component currently displayed on the target interface on the component selection page;

[0218] In response to a component switching operation triggered on the component selection page, switch and display stored different components on the component selection page;

[0219] In response to a selection operation on the component currently displayed on the component option page, replace the component displayed on the target interface with the component currently displayed on the component option page.

[0220] In a possible implementation, a delete option is displayed on the component selection page;

[0221] The component display module 1440 is further configured to:

[0222] In response to a trigger operation on the delete option, cancel the storage of the component currently displayed on the component selection page.

[0223] It should be noted that: when the component generation device provided in the above embodiments generates a component, only the division of the above functional modules is used for illustration. In actual applications, the above functions can be allocated to different functional modules according to needs, that is, the internal structure of the device is divided into different functional modules to complete all or part of the functions described above. In addition, the component generation device provided in the above embodiments and the component generation method embodiments belong to the same concept. For the specific implementation process, refer to the method embodiments, which will not be elaborated here.

[0224] Figure 15The block diagram of the terminal 1500 provided by an exemplary embodiment of the present disclosure is shown. The terminal may be the computer device in the above embodiment. The terminal 1500 may be: a smart phone, a tablet computer, an MP3 player (Moving Picture Experts Group Audio Layer III), an MP4 (Moving Picture Experts Group Audio Layer IV) player, a laptop computer or a desktop computer. The terminal 1500 may also be referred to by other names such as user equipment, portable terminal, laptop terminal, desktop terminal, etc.

[0225] Generally, the terminal 1500 includes: a processor 1501 and a memory 1502.

[0226] The processor 1501 may include one or more processing cores, such as a 4-core processor, an 8-core processor, etc. The processor 1501 may be implemented in at least one hardware form of DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), PLA (Programmable Logic Array). The processor 1501 may also include a main processor and a co-processor. The main processor is a processor for processing data in the wake state, also known as the CPU (Central Processing Unit); the co-processor is a low-power processor for processing data in the standby state. In some embodiments, the processor 1501 may be integrated with a GPU (Graphics Processing Unit), and the GPU is responsible for the rendering and drawing of the content to be displayed on the display screen. In some embodiments, the processor 1501 may further include an AI (Artificial Intelligence) processor, and the AI processor is used to process the computational operations related to machine learning.

[0227] The memory 1502 may include one or more computer-readable storage media, and the computer-readable storage media may be non-transitory. The memory 1502 may also include high-speed random access memory, as well as non-volatile memory, such as one or more disk storage devices, flash storage devices. In some embodiments, the non-transitory computer-readable storage media in the memory 1502 is used to store at least one instruction, and the at least one instruction is used to be executed by the processor 1501 to implement the component generation method provided in the method embodiments of the present disclosure.

[0228] In some embodiments, the terminal 1500 may further optionally include: a peripheral device interface 1503 and at least one peripheral device. The processor 1501, the memory 1502, and the peripheral device interface 1503 may be connected through a bus or signal lines. Each peripheral device may be connected to the peripheral device interface 1503 through a bus, signal lines, or a circuit board. Specifically, the peripheral device includes at least one of a radio frequency circuit 1504, a display screen 1505, a camera 1506, an audio circuit 1507, a positioning component 1508, and a power supply 1509.

[0229] The peripheral device interface 1503 can be used to connect at least one peripheral device related to I / O (input / output) to the processor 1501 and the memory 1502. In some embodiments, the processor 1501, the memory 1502, and the peripheral device interface 1503 are integrated on the same chip or circuit board; in some other embodiments, any one or two of the processor 1501, the memory 1502, and the peripheral device interface 1503 can be implemented on a separate chip or circuit board, and this embodiment does not limit this.

[0230] The radio frequency circuit 1504 is used to receive and transmit RF (radio frequency) signals, also known as electromagnetic signals. The radio frequency circuit 1504 communicates with a communication network and other communication devices through electromagnetic signals. The radio frequency circuit 1504 converts an electrical signal into an electromagnetic signal for transmission, or converts a received electromagnetic signal into an electrical signal. Optionally, the radio frequency circuit 1504 includes: an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a user identity module card, and so on. The radio frequency circuit 1504 can communicate with other terminals through at least one wireless communication protocol. The wireless communication protocol includes but is not limited to: a metropolitan area network, each generation of mobile communication networks (2G, 3G, 4G, and 5G), a wireless local area network, and / or a WiFi (wireless fidelity) network. In some embodiments, the radio frequency circuit 1504 may further include a circuit related to NFC (near field communication), and this disclosure does not limit this.

[0231] The display screen 1505 is used to display the UI (user interface). The UI may include graphics, text, icons, videos, and any combination thereof. When the display screen 1505 is a touch display screen, the display screen 1505 also has the ability to collect touch signals on or above the surface of the display screen 1505. The touch signals can be input as control signals to the processor 1501 for processing. At this time, the display screen 1505 can also be used to provide virtual buttons and / or a virtual keyboard, also known as soft buttons and / or a soft keyboard. In some embodiments, there may be one display screen 1505, which is disposed on the front panel of the terminal 1500; in other embodiments, there may be at least two display screens 1505, which are respectively disposed on different surfaces of the terminal 1500 or are in a foldable design; in still other embodiments, the display screen 1505 may be a flexible display screen, which is disposed on a curved surface or a folding surface of the terminal 1500. Even further, the display screen 1505 can also be set to an irregular non-rectangular shape, that is, a special-shaped screen. The display screen 1505 can be prepared using materials such as LCD (liquid crystal display) and OLED (organic light-emitting diode).

[0232] The camera module 1506 is used to collect images or videos. Optionally, the camera module 1506 includes a front camera and a rear camera. Generally, the front camera is disposed on the front panel of the terminal, and the rear camera is disposed on the back of the terminal. In some embodiments, there are at least two rear cameras, which are any one of a main camera, a depth-of-field camera, a wide-angle camera, and a telephoto camera, to implement functions such as background blurring by fusing the main camera and the depth-of-field camera, panoramic shooting by fusing the main camera and the wide-angle camera, and VR (virtual reality) shooting functions or other fused shooting functions. In some embodiments, the camera module 1506 may further include a flash. The flash can be a single-color-temperature flash or a dual-color-temperature flash. A dual-color-temperature flash refers to a combination of a warm-light flash and a cold-light flash, which can be used for light compensation under different color temperatures.

[0233] The audio circuit 1507 may include a microphone and a speaker. The microphone is used to collect sound waves of the user and the environment, and convert the sound waves into electrical signals for input to the processor 1501 for processing, or input to the radio frequency circuit 1504 to achieve voice communication. For the purpose of stereo collection or noise reduction, there may be multiple microphones, which are respectively arranged at different parts of the terminal 1500. The microphone may also be an array microphone or an omnidirectional collection microphone. The speaker is used to convert the electrical signal from the processor 1501 or the radio frequency circuit 1504 into sound waves. The speaker may be a traditional thin film speaker or a piezoelectric ceramic speaker. When the speaker is a piezoelectric ceramic speaker, it can not only convert the electrical signal into audible sound waves for humans, but also convert the electrical signal into inaudible sound waves for humans for uses such as ranging. In some embodiments, the audio circuit 1507 may further include a headphone jack.

[0234] The positioning component 1508 is used to locate the current geographical location of the terminal 1500 to implement navigation or LBS (location based service). The positioning component 1508 may be a positioning component based on GPS (global positioning system), Beidou system, GLONASS system or Galileo system.

[0235] The power supply 1509 is used to supply power to each component in the terminal 1500. The power supply 1509 may be alternating current, direct current, a disposable battery or a rechargeable battery. When the power supply 1509 includes a rechargeable battery, the rechargeable battery may support wired charging or wireless charging. The rechargeable battery may also be used to support fast charging technology.

[0236] In some embodiments, the terminal 1500 further includes one or more sensors 1510. The one or more sensors 1510 include but are not limited to: an acceleration sensor 1511, a gyroscope sensor 1512, a pressure sensor 1513, a fingerprint sensor 1514, an optical sensor 1515 and a proximity sensor 1516.

[0237] The acceleration sensor 1511 can detect the magnitude of acceleration on the three coordinate axes of the coordinate system established with the terminal 1500. For example, the acceleration sensor 1511 can be used to detect the components of the gravitational acceleration on the three coordinate axes. The processor 1501 can control the display screen 1505 to display the user interface in a landscape view or a portrait view according to the gravitational acceleration signal collected by the acceleration sensor 1511. The acceleration sensor 1511 can also be used for collecting game or user's motion data.

[0238] The gyroscope sensor 1512 can detect the body direction and rotation angle of the terminal 1500. The gyroscope sensor 1512 can cooperate with the acceleration sensor 1511 to collect the 3D actions of the user on the terminal 1500. Based on the data collected by the gyroscope sensor 1512, the processor 1501 can implement the following functions: motion sensing (such as changing the UI according to the user's tilting operation), image stabilization during shooting, game control, and inertial navigation.

[0239] The pressure sensor 1513 can be disposed on the side frame of the terminal 1500 and / or the lower layer of the display screen 1505. When the pressure sensor 1513 is disposed on the side frame of the terminal 1500, it can detect the holding signal of the user on the terminal 1500, and the processor 1501 can identify the left or right hand or perform a quick operation according to the holding signal collected by the pressure sensor 1513. When the pressure sensor 1513 is disposed on the lower layer of the display screen 1505, the processor 1501 can control the operable controls on the UI interface according to the pressure operation of the user on the display screen 1505. The operable controls include at least one of a button control, a scroll bar control, an icon control, and a menu control.

[0240] The fingerprint sensor 1514 is used to collect the fingerprint of the user. The processor 1501 can identify the user's identity according to the fingerprint collected by the fingerprint sensor 1514, or the fingerprint sensor 1514 can identify the user's identity according to the collected fingerprint. When the identified user identity is a trusted identity, the processor 1501 authorizes the user to perform relevant sensitive operations, and the sensitive operations include unlocking the screen, viewing encrypted information, downloading software, making payments, and changing settings, etc. The fingerprint sensor 1514 can be disposed on the front, back, or side of the terminal 1500. When there is a physical button or a manufacturer's logo on the terminal 1500, the fingerprint sensor 1514 can be integrated with the physical button or the manufacturer's logo.

[0241] The optical sensor 1515 is used to collect the ambient light intensity. In one embodiment, the processor 1501 can control the display brightness of the display screen 1505 according to the ambient light intensity collected by the optical sensor 1515. Specifically, when the ambient light intensity is high, the display brightness of the display screen 1505 is increased; when the ambient light intensity is low, the display brightness of the display screen 1505 is decreased. In another embodiment, the processor 1501 can also dynamically adjust the shooting parameters of the camera module 1506 according to the ambient light intensity collected by the optical sensor 1515.

[0242] The proximity sensor 1516, also known as a distance sensor, is usually disposed on the front panel of the terminal 1500. The proximity sensor 1516 is used to collect the distance between the user and the front of the terminal 1500. In one embodiment, when the proximity sensor 1516 detects that the distance between the user and the front of the terminal 1500 is gradually decreasing, the processor 1501 controls the display screen 1505 to switch from the lit state to the off state; when the proximity sensor 1516 detects that the distance between the user and the front of the terminal 1500 is gradually increasing, the processor 1501 controls the display screen 1505 to switch from the off state to the lit state.

[0243] Those skilled in the art can understand that Figure 15 the structure shown in does not limit the terminal 1500, and may include more or fewer components than shown, or combine some components, or adopt a different component arrangement.

[0244] Figure 16 is a schematic structural diagram of a server provided by an embodiment of the present disclosure. The server 1600 may vary greatly due to different configurations or performances, and may include one or more processors (central processing units, CPUs) 1601 and one or more memories 1602. Among them, at least one instruction is stored in the memory 1602, and the at least one instruction is loaded and executed by the processor 1601 to implement the methods provided by the above-mentioned various method embodiments. Of course, the server may also have components such as wired or wireless network interfaces, keyboards, and input / output interfaces for input / output. The server may also include other components for implementing device functions, which will not be elaborated here.

[0245] In an exemplary embodiment, a computer-readable storage medium is also provided. For example, a memory including instructions, and the above instructions can be executed by a processor in the terminal to complete the component generation method in the above embodiment. The computer-readable storage medium may be non-transitory. For example, the computer-readable storage medium may be a ROM (read-only memory), a RAM (random access memory), a CD-ROM, a magnetic tape, a floppy disk, and an optical data storage device, etc.

[0246] Those of ordinary skill in the art can understand that all or part of the steps of implementing the above embodiments can be completed by hardware, or can be completed by instructing relevant hardware through a program. The program can be stored in a computer-readable storage medium, and the above-mentioned storage medium can be a read-only memory, a disk, or an optical disc, etc.

[0247] It should be noted that the information (including but not limited to user device information, user personal information, etc.), data (including but not limited to data for analysis, stored data, displayed data, etc.), and signals (including but not limited to signals transmitted between user terminals and other devices, etc.) involved in this disclosure are all authorized by the user or fully authorized by all parties, and the collection, use, and processing of relevant data need to comply with the relevant laws, regulations, and standards of relevant countries and regions. For example, the "component editing page", "target component element", "element content of the target component element", "component addition operation", etc. involved in this disclosure are all obtained under full authorization.

[0248] The above are only optional embodiments of the present disclosure and are not intended to limit the present disclosure. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principle of the present disclosure shall be included in the protection scope of the present disclosure.

Claims

1. A component generation method, characterized in that: The method comprises: Display a component preview area in the component edit page of the target application; In response to a component adding operation triggered on the component editing page, displaying candidate component elements; In response to a selection operation on a target component element from among the candidate component elements, displaying element content of the target component element in the component preview area; In response to an edit completion operation triggered on the component edit page, a component including element content of the target component element is displayed.

2. The method according to claim 1, characterized in that Before displaying the component preview area in the component editing page of the target application, the method further includes: In response to a component setting operation on the target application, a setting interface in the target application is displayed, wherein the setting interface displays a plurality of component generation options, and different component generation options correspond to component templates of different sizes; In response to a selection operation of a target component generation option among the multiple component generation options, a component editing page corresponding to the target component generation option is displayed, and a component template corresponding to the target component generation option is displayed in the component preview area.

3. The method according to claim 2, characterized in that The component template includes at least one component setting area; The method further comprises: In response to a component adding operation triggered on the component editing page, determining a target component setting area in at least one component setting area currently displayed in the component preview area; In response to the selection operation of the target component element among the candidate component elements, displaying the element content of the target component element in the component preview area includes: In response to a selection operation on a target component element among the candidate component elements, element content of the target component element is displayed in the target component setting area.

4. The method according to claim 3, characterized in that The method further comprises: In response to a template switching operation triggered in the component preview area, different component templates are switched and displayed in the component preview area, wherein the different component templates include component setting areas with different quantities and arrangements.

5. The method according to claim 4, characterized in that In response to the template switching operation triggered in the component preview area, switching and displaying different component templates in the component preview area includes: In response to a swiping operation in the component preview area in a target direction, different component templates are switched and displayed in the component preview area.

6. The method according to claim 3, characterized in that An add icon is displayed in each component setting area; In response to the component adding operation triggered on the component editing page, determining a target component setting area in at least one component setting area displayed in the component preview area includes: In response to a triggering operation on an add icon in a selected component setting area, the selected component setting area is determined as the target component setting area.

7. The method according to claim 3, characterized in that The component editing page displays an add option; In response to the component adding operation triggered on the component editing page, determining a target component setting area in at least one component setting area displayed in the component preview area includes: In response to the triggering operation of the add option, in at least one component setting area currently displayed in the component preview area and not displaying the target component element, the first component setting area in the preset order is determined as the target component setting area in accordance with a preset order.

8. The method according to claim 3, characterized in that A delete icon is displayed at a preset position of the target component element displayed in the component setting area; The method further comprises: In response to a triggering operation on a deletion icon corresponding to a target component element displayed in a selected target component setting area, the target component element in the selected target component setting area is undisplayed.

9. The method according to claim 3, characterized in that: The method further comprises: When a plurality of target component elements are displayed in the component preview area, in response to a transposition operation on two target component elements among the plurality of target component elements, positions of the component setting areas of the two target component elements in the component template are exchanged.

10. The method according to claim 9, characterized in that The step of exchanging positions of component setting areas of two target component elements in the component template in response to a transposition operation on two target component elements among the plurality of target component elements comprises: In response to a long press operation on one of the two target component elements and a drag operation of dragging the one target component element to the position of the other target component element, the positions of the two target component elements in the component setting area in the component template are exchanged.

11. The method according to claim 1, characterized in that: The method further comprises: In response to a selection operation on a target component element from among the candidate component elements, displaying a custom editing window of the target component element in the component editing page; In response to the custom editing operation triggered in the custom editing window, the element content of the target component element in the component preview area is updated.

12. The method according to claim 1, characterized in that The step of displaying a component including the element content of the target component element in response to an edit completion operation triggered on the component edit page comprises: In response to an edit completion operation triggered on the component editing page, the target application is minimized, the system desktop is returned to display, and a component containing the element content of the target component element is displayed on the system desktop.

13. The method according to claim 1, characterized in that After displaying the component containing the element content of the target component element, the method further includes: In response to a component replacement operation on a target interface where the component is located, displaying a component selection page in the target application, and synchronously displaying the component currently displayed on the target interface on the component selection page; In response to a component switching operation triggered on the component selection page, switching and displaying stored, different components on the component selection page; In response to a selection operation on a component currently displayed in the component option page, the component displayed in the target interface is replaced with the component currently displayed in the component option page.

14. The method according to claim 13, characterized in that The component selection page is displayed with a delete option; The method further comprises: In response to the triggering operation of the delete option, the component currently displayed on the component selection page is cancelled from storage.

15. A computer device, characterized in that: The computer device includes a processor and a memory, wherein the memory stores at least one instruction, and the at least one instruction is loaded and executed by the processor to implement the operation performed by the component generation method according to any one of claims 1 to 14.

16. A computer-readable storage medium, characterized in that: The storage medium stores at least one instruction, and the at least one instruction is loaded and executed by the processor to implement the operation performed by the component generation method according to any one of claims 1 to 14.

17. A computer program product, characterized in that The computer program product includes at least one instruction, and the at least one instruction is loaded and executed by a processor to implement the operation performed by the component generation method according to any one of claims 1 to 14.

Images