Component configuration method, display method, device, equipment, storage medium and product

Abstract

The invention provides a component configuration method and device, a display method and device, equipment, a storage medium and a product, and relates to the technical field of computers. The component configuration method comprises the steps that in a component configuration page of a target page component, a component example diagram corresponding to a target page component template and configuration items of configurable component elements are displayed, the target page component template comprises style data of the configurable component elements, and the configuration items comprise configuration identifiers and configuration input areas; the component example graph comprises example element content corresponding to a configuration identifier, obtaining configuration element content corresponding to the configuration identifier according to a configuration operation input based on the configuration input area, generating element configuration information according to a corresponding relationship between the configuration identifier and the configuration element content, and generating a component configuration identifier according to a binding relationship between the target page component template and the element configuration information. By adopting the technical scheme, the assembly configuration efficiency can be effectively improved.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and in particular to component configuration methods, display methods, apparatus, devices, storage media, and products. Background Technology

[0002] Page components are the basic building blocks of a page. In specific application scenarios, page components can carry business data.

[0003] Currently, the components corresponding to each business function in the client need to be independently developed by developers with R&D capabilities according to the actual needs of the business side. As the business functions of the client become increasingly rich, the development cost increases significantly, efficiency is low, and it is not easy to maintain. In addition, the communication cost between developers and relevant personnel such as the business side's operations personnel is high, and the completed components are fixed and lack flexibility. Summary of the Invention

[0004] This disclosure provides component configuration methods, apparatus, devices, storage media, and products, enabling flexible configuration of page components.

[0005] In a first aspect, embodiments of this disclosure provide a component configuration method, including:

[0006] The component configuration page of the target page component to be configured displays a component example image corresponding to the target page component template and configuration items of the configurable component elements in the target page component template. The component configuration page is the front-end page of the component configuration platform, the target page component template is the page component template corresponding to the target page component, the target page component template includes style data of the configurable component elements, the configuration items include configuration identifiers and configuration input areas, and the component example image includes the example element content corresponding to the configuration identifier.

[0007] Based on the configuration operation input in the configuration input area, the configuration element content corresponding to the configuration identifier is obtained, wherein the configuration element content is associated with the business data of the target business to which the target page component belongs;

[0008] The element configuration information of the configurable component element is generated based on the correspondence between the configuration identifier and the content of the configuration element;

[0009] Based on the binding relationship between the target page component template and the element configuration information, a component configuration identifier for the target page component is generated, wherein the component configuration identifier is used by the client to display the target page component according to the component configuration identifier.

[0010] Secondly, embodiments of this disclosure provide a component display method, including:

[0011] Obtain the component configuration identifier of the target page component to be displayed;

[0012] According to the component configuration identifier, the corresponding target page component template and the element configuration information of the configurable component elements in the target page component template are obtained from the component configuration platform, wherein the target page component template includes the style data of the configurable component elements;

[0013] The configuration element content corresponding to the configurable component element is obtained according to the element configuration information, and the associated business data is obtained according to the configuration element content, wherein the associated business data is the business data of the target business to which the target page component belongs;

[0014] The target page component template is loaded into the page, and the target page component is rendered and displayed based on the style data of the configurable component elements in the target page component template and the obtained business data.

[0015] Thirdly, embodiments of this disclosure also provide a component configuration apparatus, including:

[0016] The display module is used to display, on the component configuration page of the target page component to be configured, a component example image corresponding to the target page component template and configuration items of the configurable component elements in the target page component template. The component configuration page is the front-end page of the component configuration platform, the target page component template is the page component template corresponding to the target page component, the target page component template includes style data of the configurable component elements, the configuration items include configuration identifiers and configuration input areas, and the component example image includes the example element content corresponding to the configuration identifier.

[0017] The configuration content acquisition module is used to acquire the configuration element content corresponding to the configuration identifier based on the configuration operation input based on the configuration input area, wherein the configuration element content is associated with the business data of the target business to which the target page component belongs;

[0018] The configuration information generation module is used to generate element configuration information of the configurable component element according to the correspondence between the configuration identifier and the content of the configuration element;

[0019] The configuration identifier generation module is used to generate a component configuration identifier for the target page component based on the binding relationship between the target page component template and the element configuration information. The component configuration identifier is used by the client to display the target page component based on the component configuration identifier.

[0020] Fourthly, embodiments of this disclosure also provide a component display device, including:

[0021] The configuration identifier acquisition module is used to obtain the component configuration identifier of the target page component to be displayed;

[0022] The configuration acquisition module is used to acquire the corresponding target page component template and the element configuration information of the configurable component elements in the target page component template from the component configuration platform according to the component configuration identifier, wherein the target page component template includes the style data of the configurable component elements;

[0023] The business data acquisition module is used to acquire the configuration element content corresponding to the configurable component element according to the element configuration information, and acquire the associated business data according to the configuration element content, wherein the associated business data is the business data of the target business to which the target page component belongs;

[0024] The component display module is used to load the target page component template into the page, and render and display the target page component based on the style data of the configurable component elements in the target page component template and the obtained business data.

[0025] Fifthly, embodiments of this disclosure also provide an electronic device, the electronic device comprising:

[0026] One or more processors;

[0027] Storage device for storing one or more programs.

[0028] When the one or more programs are executed by the one or more processors, the one or more processors implement the methods provided in the embodiments of this disclosure.

[0029] In a sixth aspect, embodiments of this disclosure also provide a storage medium containing computer-executable instructions, which, when executed by a computer processor, are used to perform the methods provided in embodiments of this disclosure.

[0030] In a seventh aspect, embodiments of this disclosure also provide a computer program product, including a computer program that, when executed by a processor, implements the component configuration method provided in embodiments of this disclosure.

[0031] The component configuration scheme provided in this embodiment displays a component example diagram corresponding to the target page component to be configured and configuration items of configurable component elements in the target page component template in the component configuration page, which serves as the front-end page of the component configuration platform. The target page component template includes style data of configurable component elements, and the configuration items include configuration identifiers and configuration input areas. The component example diagram includes example element content corresponding to the configuration identifier. Based on the configuration operation input in the configuration input area, the configuration element content corresponding to the configuration identifier is obtained. The configuration element content is associated with the business data of the target business to which the target page component belongs. The element configuration information of the configurable component element is generated according to the correspondence between the configuration identifier and the configuration element content. The component configuration identifier is generated according to the binding relationship between the target page component template and the element configuration information. The component configuration identifier is used by the client to display the target page component based on the component configuration identifier. By adopting the above technical solution, component templates after element-based decomposition are pre-built, and component example diagrams and configuration items of the component templates are displayed on the front-end page. This allows non-developers such as business operations staff to easily configure the configurable elements in the components through a visual configuration page, reducing the workload of repetitive development by developers. Furthermore, the configured components are more in line with the needs of the corresponding business, improving the flexibility of component development and effectively improving component configuration efficiency.

[0032] The component display scheme provided in this disclosure involves obtaining the component configuration identifier of the target page component to be displayed, retrieving the corresponding target page component template and element configuration information of the configurable component elements in the target page component template from the component configuration platform based on the component configuration identifier, wherein the target page component template includes style data of the configurable component elements, obtaining the configuration element content corresponding to the configurable component elements based on the element configuration information, and obtaining the associated business data based on the configuration element content. The associated business data is the business data of the target business to which the target page component belongs, loading the target page component template on the page, and rendering and displaying the target page component based on the style data of the configurable component elements in the target page component template and the obtained business data. By adopting the above technical solution, the client does not need to store the code of the page component locally. When a page component needs to be displayed, the corresponding target page component template and element configuration information of the configurable component elements are obtained from the component configuration platform based on the component configuration identifier, and the associated business data is obtained based on the obtained element configuration information. Then, the target page component template is loaded, and the target page component is rendered and displayed based on the style data and the obtained business data. This can reduce the client package size while displaying page components flexibly and accurately. Attached Figure Description

[0033] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent when taken in conjunction with the accompanying drawings and the following detailed description. Throughout the drawings, the same or similar reference numerals denote the same or similar elements. It should be understood that the drawings are schematic, and the originals and elements are not necessarily drawn to scale.

[0034] Figure 1 This is a flowchart illustrating a component configuration method provided in an embodiment of the present disclosure;

[0035] Figure 2 This is a schematic diagram of a component configuration page provided in an embodiment of the present disclosure;

[0036] Figure 3 This is a flowchart illustrating another component configuration method provided in an embodiment of the present disclosure;

[0037] Figure 4 This is a schematic diagram of page interaction provided in an embodiment of the present disclosure;

[0038] Figure 5 A flowchart illustrating a component display method provided in an embodiment of this disclosure;

[0039] Figure 6 This is a schematic diagram of the structure of a component configuration device provided in an embodiment of the present disclosure;

[0040] Figure 7 This is a schematic diagram of the structure of a component display device provided in an embodiment of the present disclosure;

[0041] Figure 8 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this disclosure. Detailed Implementation

[0042] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.

[0043] It should be understood that the steps described in the method embodiments of this disclosure may be performed in different orders and / or in parallel. Furthermore, the method embodiments may include additional steps and / or omit the steps shown. The scope of this disclosure is not limited in this respect.

[0044] The term "comprising" and its variations as used herein are open-ended inclusions, meaning "including but not limited to". The term "based on" means "at least partially based on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". Definitions of other terms will be given in the description below.

[0045] It should be noted that the concepts of "first" and "second" mentioned in this disclosure are used only to distinguish different devices, modules or units, and are not used to limit the order of functions performed by these devices, modules or units or their interdependencies.

[0046] It should be noted that the terms "a" and "a plurality of" used in this disclosure are illustrative rather than restrictive, and those skilled in the art should understand that, unless otherwise expressly indicated in the context, they should be understood as "one or more".

[0047] Figure 1 This is a schematic diagram of a component configuration process provided by an embodiment of the present disclosure. This embodiment of the present disclosure is applicable to situations where business-related personnel, such as operators, configure business-related components through the front-end page of a component configuration platform. The method can be executed by a component configuration device, which can be implemented in the form of software and / or hardware. Optionally, it can be implemented by an electronic device, such as a mobile terminal, a mobile phone, a laptop, a tablet computer, or a personal digital assistant, or a device such as a personal computer (PC).

[0048] like Figure 1 As shown, the method includes:

[0049] Step 101: On the component configuration page of the target page component to be configured, display the component example image corresponding to the target page component template and the configuration items of the configurable component elements in the target page component template. The component configuration page is the front-end page of the component configuration platform, the target page component template is the page component template corresponding to the target page component, the target page component template includes the style data of the configurable component elements, the configuration items include configuration identifiers and configuration input areas, and the component example image includes the example element content corresponding to the configuration identifier.

[0050] In this embodiment, the specific type of page component is not limited. For example, it can be an information container component in the information flow, or a pop-up component. For ease of explanation, the pop-up component will be used as an example below.

[0051] In related technologies, the components corresponding to each business function in the client need to be independently developed by developers with R&D capabilities according to the actual needs of the business side. This is costly, inefficient, and difficult to maintain. Furthermore, the communication costs between developers and relevant personnel such as the business side's operations staff are high. The completed components are fixed and lack flexibility.

[0052] In this embodiment, the style and data of page components are separated. Based on the reusability and structural freedom of page components, page components are broken down into elements to obtain multiple preset elements. These preset elements can be understood as the smallest granular element of the page component's content. Elements are combined using a flexible construction method to pre-build page component templates (also called component style protocols or component style templates). Non-developers, such as operators, can configure one or more preset elements (configurable component elements) through the front-end page of the component configuration platform. The specific construction method of the page component template is not limited. For example, a canvas construction platform can be provided, allowing users to freely combine elements using drag-and-drop and basic element configuration functions to obtain the desired page component template. Preset elements can be divided into fixed component elements (i.e., elements not supported by the front-end page of the component configuration platform) and configurable component elements. For preset elements that allow secondary content editing, configurable attributes are added, such as an attribute item a = b, where a represents the item identifier of the configurable attribute item, and b represents the item value of the configurable attribute item as editable. Optionally, all preset elements can be configurable component elements to further enhance the flexibility of component configuration. The page component template can include style data for the preset elements, such as element size, relative position within the component, number of rows and / or columns of child elements, and spacing between child elements. If the preset elements include fixed component elements, the page component template includes not only the style data of the fixed component elements but also their content data. The specific type of the content data is not limited and can be built according to the characteristics of the fixed component elements. For example, the content data can include images, text, supported triggering operations, and the events triggered by those operations.

[0053] For example, the component configuration platform is a platform added to this embodiment of the disclosure for business users such as operations personnel or product managers (hereinafter collectively referred to as platform users) to implement the component configuration scheme. When platform users have a need to add new business components, they can create a page component to be configured through the front-end page of the component configuration platform, denoted as the target page component. The component configuration page of the target page component displays a component example image corresponding to the page component template (denoted as the target page component template) and the configuration items of the configurable component elements in the target page component template. The component example image is a reference effect image shown to platform users of the page component that can be configured using the page component template.

[0054] For example, the component configuration platform can parse the target page component template, determine configurable component elements from the parsing results, such as finding the preset element with attribute a = b, determining the corresponding configuration identifier based on the element identifier of the configurable component element, and generating a configuration form containing at least one configuration item based on the configuration identifier. Each configuration identifier corresponds to one configuration item. Here, the element identifier can be understood as a unique identifier of the configurable component element stored in the component configuration platform, and the configuration identifier can be understood as a visual identifier that corresponds to the element identifier and is displayed on the component configuration page. For example, the element identifier is c.[d]_[e], where c is a character used to represent the characteristics of the element identifier, d is a character used to represent the type of the configurable component element, such as text type, and e is a character used to distinguish different elements of the same type, which can be represented by a number, for example. For example, if an element identifier is c.d1_1, d1 represents the text type, and the corresponding configuration identifier can be configuration 3-text, where 3 can represent the sequence number of the configuration item in the configuration form.

[0055] For example, the component example diagram includes example element content corresponding to the configuration identifier of the configurable component element. Platform users can easily locate the position of the configurable component element in the target component and view the reference display effect of the configurable component element by viewing the component example diagram. The example element content can be set according to the business function corresponding to the configuration project, such as the function of doubling the number of coupons, the function of expanding the amount, the function of discounting the amount, or the function of interactive tasks, etc.

[0056] Figure 2 This is a schematic diagram of a component configuration page provided in an embodiment of this disclosure, taking a pop-up component as an example, such as... Figure 2As shown, the component configuration page 201 displays the component example diagram 202 corresponding to the target page component template, as well as the configuration item 203 of the configurable component element in the target page component template. The configuration item 203 includes a configuration identifier 204 and a configuration input area 205. Taking the business function corresponding to the configuration item 203 as the card quantity doubling function as an example, the component example diagram 202 includes the example element content "already doubled by 1.4 times" corresponding to the configuration identifier 204.

[0057] Step 102: Based on the configuration operation input in the configuration input area, obtain the configuration element content corresponding to the configuration identifier, wherein the configuration element content is associated with the business data of the target business to which the target page component belongs.

[0058] For example, platform users can configure each configurable component element according to actual business needs. Configuration operations can include file upload operations, object selection operations, and text input operations, etc., without specific limitations. Based on the platform user's configuration operations, the content of the configuration element corresponding to the configuration identifier can be obtained, such as the uploaded file related to business data (specifically, the background image in the business data), the selected fields of business data, or the input text content, etc.

[0059] Step 103: Generate the element configuration information of the configurable component element according to the correspondence between the configuration identifier and the configuration element content.

[0060] For example, a configuration identifier is bound to the corresponding configuration element content to generate an element configuration information. Each configurable component element corresponds to one element configuration information. The configuration identifier corresponds to the element identifier, and the element configuration information can specifically include the correspondence between the element identifier and the corresponding configuration element content.

[0061] Step 104: Generate a component configuration identifier for the target page component based on the binding relationship between the target page component template and the element configuration information. The component configuration identifier is used by the client to display the target page component based on the component configuration identifier.

[0062] For example, the template identifier of the target page component template is bound to the generated element configuration information, and the component configuration identifier of the target page component is generated according to the binding relationship. This allows the client to obtain the corresponding target page component template and element configuration information based on the component configuration identifier when it needs to display the target page component, and then render and display the target page component.

[0063] The component configuration method of this disclosure pre-builds a component template after element-based decomposition, and displays the component example diagram and configuration items of the component template on the front-end page. This allows non-developers such as business operators to conveniently configure the configurable elements in the component through a visual configuration page, reducing the workload of repetitive development by developers. It also makes the configured component more in line with the needs of the corresponding business, improves the flexibility of component development, and effectively improves the efficiency of component configuration.

[0064] In some embodiments, the component configuration page of the target page component to be configured displays a component example image corresponding to the target page component template and configuration items of configurable component elements in the target page component template. This includes: displaying a set of candidate page component templates corresponding to the target business to which the target page component belongs in the component configuration page; and, in response to a selection operation on the target page component template, displaying a component example image corresponding to the target page component template and configuration items of configurable component elements in the target page component template in the component configuration page, wherein the target page component template is one of the candidate page component templates in the set of candidate page component templates. Therefore, for the same business, multiple page component templates can be provided for platform users to choose from, further improving the flexibility of page component configuration. Platform users can select and configure templates that meet their expectations according to actual business needs. Furthermore, page component templates for different businesses can be isolated at the business level, improving template selection efficiency.

[0065] Figure 3 This is a flowchart illustrating another component configuration method provided in an embodiment of the present disclosure. The embodiments of the present disclosure are optimized based on the various optional solutions in the above embodiments. Specifically, the method includes the following steps:

[0066] Step 301: On the component configuration page of the target page component to be configured, display the collection of candidate page component templates corresponding to the target business to which the target page component belongs.

[0067] For example, a business selection control can be displayed on a preset page. In response to the triggering operation of the business selection control, a set of alternative businesses is displayed. In response to the triggering operation targeting a specific alternative business, the target alternative business is identified as the target business. In response to the new configuration operation, the component configuration page of the target page component to be configured is displayed. In response to the template set display operation, the set of candidate page component templates corresponding to the target business to which the target page component belongs is displayed on the component configuration page of the target page component to be configured. For example, the set of candidate page component templates can be displayed in the form of a drop-down list, where each list item is the template name and / or a thumbnail of a component example image of a candidate page component template, facilitating quick selection of the target page component template by the user.

[0068] Step 302: In response to the selection operation for the target page component template, the component configuration page displays the component example image corresponding to the target page component template and the configuration items of the configurable component elements in the target page component template.

[0069] For example, using the target page component as a pop-up component, the configurable component elements include at least one of a background image element, a text element, and a control element. The control element can be an element that supports triggering, such as... Figure 2 Use it immediately button.

[0070] Step 303: In response to the trigger operation for the configuration input area, display a set of candidate configuration content, wherein the candidate configuration content in the set of candidate configuration content has a corresponding relationship with the business data field of the target business to which the target page component belongs.

[0071] For example, for a target business, a set of candidate configuration content can be pre-defined for the configuration identifiers of all or some of the configurable component elements, and each candidate configuration content in the set of candidate configuration content has a corresponding relationship with the business data field of the target business.

[0072] For example, the candidate configuration content can be set according to the meaning of the business data fields of the target business. For example, for a certain business function, there may be multiple business data fields related to the business function. The corresponding candidate configuration content can be set according to the meaning of the multiple business data fields, such as "field meaning 1", "field meaning 2" and "field meaning 3", etc., specifically such as "xx ratio", "xx quantity" or "xx base".

[0073] Figure 4 This is a schematic diagram of page interaction provided in an embodiment of the present disclosure, such as... Figure 4As shown, after the user triggers the down arrow in the configuration input area corresponding to Configuration 3-Text, a set of candidate configuration content is displayed. Taking the business function corresponding to Configuration 3-Text as the coupon quantity doubling function as an example, the meanings of multiple business fields related to this coupon quantity doubling function may include doubling ratio, doubling quantity, and doubling base. Therefore, the corresponding candidate configuration content may include, for example, Figure 4 The options shown are "Doubling Ratio," "Doubling Quantity," and "Doubling Base." The candidate configuration content corresponds to the business data fields of the target business. Taking "Doubling Ratio" as an example, the corresponding business data field contains the specific doubling ratio value, such as 5 times. The content of the business data field may change dynamically according to actual business conditions. By establishing the correspondence between candidate configuration content and business data fields, the configuration elements in the configured components can be dynamically updated based on changes in the business data field content. This makes the component content of the page components more flexible, eliminating the need to redevelop the page components when business data changes, achieving the effect of dynamically updating page components to follow changes in business data.

[0074] Step 304: In response to the selection operation for the target candidate configuration content, obtain the target business data field corresponding to the target candidate configuration content, and determine the target business data field as the configuration element content corresponding to the configuration identifier, wherein the target candidate configuration content is a candidate configuration content in the candidate configuration content set.

[0075] For example, such as Figure 4 As shown, the candidate configuration content set is displayed in the form of a drop-down list. When a platform user clicks on a candidate configuration content, it is confirmed that a selection operation for that candidate configuration content has been received. The candidate configuration content is then identified as the target candidate configuration content, and the target business data field corresponding to the target candidate configuration content is obtained. The target business data field is then identified as the configuration element content corresponding to the configuration identifier.

[0076] Step 305: Generate the element configuration information of the configurable component element based on the correspondence between the configuration identifier and the configuration element content.

[0077] Step 306: Generate the component configuration identifier of the target page component based on the binding relationship between the target page component template and the element configuration information.

[0078] The component configuration method provided in this disclosure pre-defines a set of candidate configuration contents for the configuration identifier of the configurable component element for the target service. Each candidate configuration content in the set corresponds to a business data field of the target service, enabling platform users to conveniently perform configuration operations on the configurable component element by inputting the selection operation of the candidate configuration contents, thereby further improving the component configuration efficiency.

[0079] Optionally, before generating the component configuration identifier of the target page component based on the binding relationship between the target page component template and the element configuration information, the method further includes: in response to a preset preview operation, displaying a component preview image of the target page component on the component configuration page. This enables the component configuration platform to have component preview capabilities, allowing platform users to more intuitively view the component configuration effect before publishing the component. Only after the component configuration effect meets expectations is the generation of a component configuration identifier for client use triggered.

[0080] Figure 5 This is a flowchart illustrating a component display method provided in an embodiment of the present disclosure. This embodiment is applicable to situations where page components are displayed on a client side. The method can be executed by a component configuration device, which can be implemented in software and / or hardware. Optionally, it can be implemented by an electronic device, such as a mobile terminal like a mobile phone, laptop, tablet, or personal digital assistant, or a device like a personal computer (PC).

[0081] Step 501: Obtain the component configuration identifier of the target page component to be displayed.

[0082] For example, when developing a client installation package or an upgrade package, developers can write the component configuration identifier into the files of the installation package or upgrade package. Taking Android applications as an example, it can be written into the Android application package (APK) file, without needing to include the code files of the page components in the package file, thus reducing the size of the client package. When it is necessary to display the target page component, the component configuration identifier of the target page component is obtained from the local machine.

[0083] Optionally, the client can add logic to determine whether to obtain the component configuration identifier. That is, when the target page component needs to be displayed, the client can read the content of the preset determination identifier to determine whether to use the component display logic in the client to display the target page component or to display the target page component by obtaining the component configuration identifier, thereby further improving the flexibility of the target page component display.

[0084] Step 502: Obtain the corresponding target page component template and the element configuration information of the configurable component elements in the target page component template from the component configuration platform according to the component configuration identifier, wherein the target page component template includes the style data of the configurable component elements.

[0085] For example, after obtaining the component configuration identifier, the component configuration identifier can be sent to the component configuration platform to request the target page component template corresponding to the component configuration identifier and the element configuration information of the configurable component elements in the target page component template.

[0086] Step 503: Obtain the configuration element content corresponding to the configurable component element according to the element configuration information, and obtain the associated business data according to the configuration element content, wherein the associated business data is the business data of the target business to which the target page component belongs.

[0087] For example, the element configuration information may include the correspondence between element identifiers and corresponding configuration element content. For each configurable component element, the corresponding configuration element content is matched from the element configuration information based on the element identifier of the configurable component element, and the associated business data is obtained based on the configuration element content.

[0088] Optionally, the configuration element content can be, for example, a business data field. Based on the configuration element content, the field content of the business data field can be obtained. This field content is used as the obtained associated business data. The target page component can be displayed based on the latest business data field content, achieving the effect of dynamic updates of the page component following changes in business data.

[0089] Step 504: Load the target page component template into the page, and render and display the target page component based on the style data of the configurable component elements in the target page component template and the obtained business data.

[0090] For example, a renderer can be integrated into the client's page, using the renderer to load the target page component template, and rendering and displaying the target page component based on the style data of the configurable component elements in the target page component template and the obtained business data.

[0091] Optionally, if the target page component template also includes fixed component elements, then after loading the target page component template, the target page component is rendered and displayed based on the style data of the configurable component elements in the target page component template, the obtained business data, and the style data and element content data of the fixed component elements.

[0092] The component display method provided in this disclosure does not require the client to store the code of the page component locally. When the page component needs to be displayed, the corresponding target page component template and the element configuration information of the configurable component element are obtained from the component configuration platform according to the component configuration identifier. The associated business data is obtained based on the obtained element configuration information, the target page component template is loaded, and the target page component is rendered and displayed based on the style data and the obtained business data. This method can display page components flexibly and accurately while reducing the client package size.

[0093] Figure 6 This is a schematic diagram of the structure of a component configuration device provided in an embodiment of the present disclosure, as shown below. Figure 6 As shown, the device includes:

[0094] The display module 601 is used to display, on the component configuration page of the target page component to be configured, a component example image corresponding to the target page component template and configuration items of the configurable component elements in the target page component template. The component configuration page is the front-end page of the component configuration platform, the target page component template is the page component template corresponding to the target page component, the target page component template includes style data of the configurable component elements, the configuration items include configuration identifiers and configuration input areas, and the component example image includes the example element content corresponding to the configuration identifier.

[0095] The configuration content acquisition module 602 is used to acquire the configuration element content corresponding to the configuration identifier based on the configuration operation input based on the configuration input area, wherein the configuration element content is associated with the business data of the target business to which the target page component belongs;

[0096] The configuration information generation module 603 is used to generate element configuration information of the configurable component element according to the correspondence between the configuration identifier and the configuration element content;

[0097] The configuration identifier generation module 604 is used to generate a component configuration identifier for the target page component based on the binding relationship between the target page component template and the element configuration information. The component configuration identifier is used by the client to display the target page component based on the component configuration identifier.

[0098] The component configuration device provided in this embodiment pre-builds a component template after element-based decomposition, and displays the component example diagram and configuration items of the component template on the front-end page. This allows non-developers such as business operators to conveniently configure the configurable elements in the component through a visual configuration page, reducing the workload of repetitive development by developers, and making the configured component more in line with the needs of the corresponding business, improving the flexibility of component development, and effectively improving the efficiency of component configuration.

[0099] Optionally, the configuration content acquisition module includes:

[0100] The candidate configuration content set display unit is used to display the candidate configuration content set in response to the trigger operation of the configuration input area, wherein the candidate configuration content in the candidate configuration content set has a corresponding relationship with the business data field of the target business to which the target page component belongs;

[0101] The configuration content acquisition unit is used to, in response to the selection operation for the target candidate configuration content, acquire the target business data field corresponding to the target candidate configuration content, and determine the target business data field as the configuration element content corresponding to the configuration identifier, wherein the target candidate configuration content is a candidate configuration content in the candidate configuration content set.

[0102] Optional, the display modules include:

[0103] The first display unit is used to display a set of candidate page component templates corresponding to the target business to which the target page component belongs in the component configuration page of the target page component to be configured;

[0104] The second display unit is used to respond to the selection operation of the target page component template, and to display the component example image corresponding to the target page component template and the configuration items of the configurable component elements in the target page component template in the component configuration page, wherein the target page component template is a candidate page component template in the candidate page component template set.

[0105] Optionally, the target page component is a pop-up component, and the configurable component elements include at least one of background image elements, text elements, and control elements.

[0106] The component configuration apparatus provided in this disclosure can execute the component configuration method provided in any embodiment of this disclosure, and has the corresponding functional modules and beneficial effects of the execution method.

[0107] Figure 7 This is a schematic diagram of the structure of a component display device provided in an embodiment of this disclosure, as shown below. Figure 7 As shown, the device includes:

[0108] Configuration identifier acquisition module 701 is used to acquire the component configuration identifier of the target page component to be displayed;

[0109] The configuration acquisition module 702 is used to acquire the corresponding target page component template and the element configuration information of the configurable component elements in the target page component template from the component configuration platform according to the component configuration identifier, wherein the target page component template includes the style data of the configurable component elements;

[0110] The business data acquisition module 703 is used to acquire the configuration element content corresponding to the configurable component element according to the element configuration information, and acquire the associated business data according to the configuration element content, wherein the associated business data is the business data of the target business to which the target page component belongs;

[0111] The component display module 704 is used to load the target page component template in the page, and render and display the target page component based on the style data of the configurable component elements in the target page component template and the acquired business data.

[0112] The component display device provided in this embodiment does not require the client to store the code of the page component locally. When it is necessary to display the page component, it obtains the corresponding target page component template and the element configuration information of the configurable component element from the component configuration platform according to the component configuration identifier, and obtains the associated business data based on the obtained element configuration information. Then, it loads the target page component template and renders and displays the target page component based on the style data and the obtained business data. This can reduce the client package size while displaying the page component flexibly and accurately.

[0113] The component display device provided in this disclosure can execute the component configuration method provided in any embodiment of this disclosure, and has the corresponding functional modules and beneficial effects of the execution method.

[0114] It is worth noting that the various units and modules included in the above-mentioned device are only divided according to functional logic, but are not limited to the above division, as long as the corresponding functions can be realized; in addition, the specific names of each functional unit are only for easy differentiation and are not used to limit the protection scope of the embodiments of this disclosure.

[0115] Figure 8 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this disclosure. Reference is made below. Figure 8 It illustrates an electronic device suitable for implementing embodiments of the present disclosure (e.g., Figure 8The diagram below shows the structure of the terminal device or server 800. The terminal device in this embodiment may include, but is not limited to, mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), and vehicle terminals (e.g., vehicle navigation terminals), as well as fixed terminals such as digital TVs and desktop computers. Figure 8 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of the embodiments disclosed herein.

[0116] like Figure 8 As shown, the electronic device 800 may include a processing device (e.g., a central processing unit, a graphics processing unit, etc.) 801, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 802 or a program loaded from a storage device 808 into a random access memory (RAM) 803. The RAM 803 also stores various programs and data required for the operation of the electronic device 800. The processing device 801, ROM 802, and RAM 803 are interconnected via a bus 804. An edit / output (I / O) interface 805 is also connected to the bus 804.

[0117] Typically, the following devices can be connected to I / O interface 805: input devices 806 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 807 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 808 including, for example, magnetic tapes, hard disks, etc.; and communication devices 809. Communication device 809 allows electronic device 800 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 8 An electronic device 800 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively.

[0118] In particular, according to embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this disclosure include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device 809, or installed from a storage device 808, or installed from a ROM 802. When the computer program is executed by a processing device 801, it performs the functions defined in the methods of embodiments of this disclosure.

[0119] The names of messages or information exchanged between multiple devices in the embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of such messages or information.

[0120] The electronic device provided in this embodiment and the component configuration method provided in the above embodiments belong to the same inventive concept. Technical details not described in detail in this embodiment can be found in the above embodiments, and this embodiment has the same beneficial effects as the above embodiments.

[0121] This disclosure provides a computer storage medium storing a computer program that, when executed by a processor, implements the component configuration method provided in the above embodiments.

[0122] This disclosure provides a computer program product, including a computer program that, when executed by a processor, implements the component configuration method provided in the above embodiments.

[0123] It should be noted that the computer-readable medium described in this disclosure can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this disclosure, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in connection with an instruction execution system, apparatus, or device. In this disclosure, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium can be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wires, optical fibers, RF (radio frequency), etc., or any suitable combination thereof.

[0124] The aforementioned computer-readable medium may be included in the aforementioned electronic device; or it may exist independently and not assembled into the electronic device.

[0125] The aforementioned computer-readable medium carries one or more programs, which, when executed by the electronic device, cause the electronic device to implement the component configuration method and / or component display method provided in the embodiments of this disclosure.

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

[0127] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0128] The units described in the embodiments of this disclosure can be implemented in software or in hardware. The name of a module does not necessarily limit the module itself; for example, a configuration identifier acquisition module can also be described as "a module that acquires the component configuration identifier of the target page component to be displayed".

[0129] The functions described above in this document can be performed, at least in part, by one or more hardware logic components. For example, exemplary types of hardware logic components that can be used, without limitation, include: Field Programmable Gate Arrays (FPGAs), Application-Specific Integrated Circuits (ASICs), Application Standard Products (ASSPs), System-on-Chip (SoCs), Complex Programmable Logic Devices (CPLDs), and so on.

[0130] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0131] The above description is merely a preferred embodiment of this disclosure and an explanation of the technical principles employed. Those skilled in the art should understand that the scope of this disclosure is not limited to technical solutions formed by specific combinations of the above-described technical features, but should also cover other technical solutions formed by arbitrary combinations of the above-described technical features or their equivalents without departing from the above-described concept. For example, technical solutions formed by substituting the above features with (but not limited to) technical features disclosed in this disclosure that have similar functions.

[0132] Furthermore, while the operations are described in a specific order, this should not be construed as requiring these operations to be performed in the specific order shown or in a sequential order. In certain environments, multitasking and parallel processing may be advantageous. Similarly, while several specific implementation details are included in the above discussion, these should not be construed as limiting the scope of this disclosure. Certain features described in the context of individual embodiments may also be implemented in combination in a single embodiment. Conversely, various features described in the context of a single embodiment may also be implemented individually or in any suitable sub-combination in multiple embodiments.

[0133] Although the subject matter has been described using language specific to structural features and / or methodological logic, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or actions described above. Rather, the specific features and actions described above are merely illustrative examples of implementing the claims.

Claims

1. A component configuration method, characterized in that, The method includes: The component configuration page of the target page component to be configured displays a component example image corresponding to the target page component template and configuration items of the configurable component elements in the target page component template. The component configuration page is the front-end page of the component configuration platform, the target page component template is the page component template corresponding to the target page component, the target page component template includes style data of the configurable component elements, the configuration items include configuration identifiers and configuration input areas, and the component example image includes the example element content corresponding to the configuration identifier. Based on the configuration operation input in the configuration input area, the configuration element content corresponding to the configuration identifier is obtained, wherein the configuration element content is associated with the business data of the target business to which the target page component belongs; The element configuration information of the configurable component element is generated based on the correspondence between the configuration identifier and the content of the configuration element; Based on the binding relationship between the target page component template and the element configuration information, a component configuration identifier for the target page component is generated, wherein the component configuration identifier is used by the client to display the target page component according to the component configuration identifier.

2. The method according to claim 1, characterized in that, The step of obtaining the configuration element content corresponding to the configuration identifier based on the configuration operation input based on the configuration input area includes: In response to a trigger operation on the configuration input area, a set of candidate configuration content is displayed, wherein the candidate configuration content in the set of candidate configuration content corresponds to the business data field of the target business to which the target page component belongs; In response to the selection operation for the target candidate configuration content, the target business data field corresponding to the target candidate configuration content is obtained, and the target business data field is determined as the configuration element content corresponding to the configuration identifier, wherein the target candidate configuration content is a candidate configuration content in the candidate configuration content set.

3. The method according to claim 1, characterized in that, The component configuration page of the target page component to be configured displays a sample image of the component corresponding to the target page component template and the configuration items of the configurable component elements in the target page component template, including: The component configuration page of the target page component to be configured displays a set of candidate page component templates corresponding to the target business to which the target page component belongs; In response to the selection operation for the target page component template, the component configuration page displays the component example image corresponding to the target page component template and the configuration items of the configurable component elements in the target page component template, wherein the target page component template is a candidate page component template in the candidate page component template set.

4. The method according to any one of claims 1-3, characterized in that, The target page component is a pop-up component, and the configurable component elements include at least one of background image elements, text elements, and control elements.

5. A component display method, characterized in that, The method includes: Obtain the component configuration identifier of the target page component to be displayed; According to the component configuration identifier, the corresponding target page component template and the element configuration information of the configurable component elements in the target page component template are obtained from the component configuration platform, wherein the target page component template includes the style data of the configurable component elements; The configuration element content corresponding to the configurable component element is obtained according to the element configuration information, and the associated business data is obtained according to the configuration element content, wherein the associated business data is the business data of the target business to which the target page component belongs; The target page component template is loaded into the page, and the target page component is rendered and displayed based on the style data of the configurable component elements in the target page component template and the obtained business data.

6. A component configuration device, characterized in that, include: The display module is used to display, on the component configuration page of the target page component to be configured, a component example image corresponding to the target page component template and configuration items of the configurable component elements in the target page component template. The component configuration page is the front-end page of the component configuration platform, the target page component template is the page component template corresponding to the target page component, the target page component template includes style data of the configurable component elements, the configuration items include configuration identifiers and configuration input areas, and the component example image includes the example element content corresponding to the configuration identifier. The configuration content acquisition module is used to acquire the configuration element content corresponding to the configuration identifier based on the configuration operation input based on the configuration input area, wherein the configuration element content is associated with the business data of the target business to which the target page component belongs; The configuration information generation module is used to generate element configuration information of the configurable component element according to the correspondence between the configuration identifier and the content of the configuration element; The configuration identifier generation module is used to generate a component configuration identifier for the target page component based on the binding relationship between the target page component template and the element configuration information. The component configuration identifier is used by the client to display the target page component based on the component configuration identifier.

7. A component display device, characterized in that, include: The configuration identifier acquisition module is used to obtain the component configuration identifier of the target page component to be displayed; The configuration acquisition module is used to acquire the corresponding target page component template and the element configuration information of the configurable component elements in the target page component template from the component configuration platform according to the component configuration identifier, wherein the target page component template includes the style data of the configurable component elements; The business data acquisition module is used to acquire the configuration element content corresponding to the configurable component element according to the element configuration information, and acquire the associated business data according to the configuration element content, wherein the associated business data is the business data of the target business to which the target page component belongs; The component display module is used to load the target page component template into the page, and render and display the target page component based on the style data of the configurable component elements in the target page component template and the obtained business data.

8. An electronic device, characterized in that, The electronic device includes: One or more processors; Storage device for storing one or more programs. When the one or more programs are executed by the one or more processors, the one or more processors implement the component configuration method as described in any one of claims 1-5.

9. A storage medium containing computer-executable instructions, characterized in that, The computer-executable instructions, when executed by a computer processor, are used to perform the component configuration method as described in any one of claims 1-5.

10. A computer program product, characterized in that, Includes a computer program that, when executed by a processor, implements the component configuration method as described in any one of claims 1-5.

Images