A method, device, electronic device and storage medium for displaying page components

Abstract

The present application discloses a method, device, electronic device and storage medium for displaying page components, the method comprising: in a component library, periodically detecting the style data of components included in the current page; wherein the component library includes at least one component, and each component corresponds to at least one style; if a change in the style data is detected, determining the changed target style and the style name of the target style; based on the style name of the target style, generating resource data corresponding to the style data of the target style; associating the resource data with the target component determined in the component library to update the target component; and displaying the updated target component in the current display page. Thus, it is possible to modify a single component without modifying the entire page, reducing the complexity of the operation and improving the processing efficiency.

Description

Background Art

[0002] The display of a page usually includes the display of multiple components. For example, the current page includes multiple buttons and multiple icons. If the user wants to modify the style of some components, the existing modification logic can only modify the entire page code as a whole, and the page cannot automatically load the update of some components.

[0003] However, in this method, a large amount of data or codes need to be processed, the operation is complicated, and the processing efficiency is low. Summary of the invention

[0004] The embodiments of the present application provide a method, device, electronic device and storage medium for displaying page components, so that updates of some components can be automatically loaded without modifying the entire page, thereby reducing operation complexity and improving processing efficiency.

[0005] In a first aspect, an embodiment of the present application provides a method for displaying a page component, including:

[0006] In a component library, the style data of the components included in the current page are periodically detected; wherein the component library includes at least one component, and each component corresponds to at least one style;

[0007] If a change in the style data is detected, determining a target style after the change and a style name of the target style;

[0008] Based on the style name of the target style, generating resource data corresponding to the style data of the target style;

[0009] Associating the resource data with a target component determined in the component library to update the target component;

[0010] The updated target component is displayed in the currently displayed page.

[0011] In some exemplary embodiments, the resource data includes a style name of the target style and a set of attributes of the target style;

[0012] Associating the resource data with a target component determined in the component library to update the target component includes:

[0013] Determine the target component corresponding to the resource data based on the style name of the target style in the resource data and the correspondence between the preset style name and each component in the component library;

[0014] The attribute set of the target style in the resource data is associated with the target component to update the target component.

[0015] In some exemplary embodiments, resource data corresponding to the style data of the target style is generated in the following manner:

[0016] If the style code of the target style is implemented based on the iOS system, the resource data is determined to be a style name including a style header file name and an attribute set including a resource name;

[0017] If the style code of the target style is implemented based on the Android system, the resource data is determined to be a style name in XML format and a corresponding attribute set.

[0018] In some exemplary embodiments, after determining the target style after the change and the style name of the target style, the method further includes:

[0019] Updating the version number of the component library;

[0020] The associating the resource data with the target component determined in the component library comprises:

[0021] Determine the latest version of the component library according to the version number of the component library;

[0022] In the latest version of the component library, based on the style name in the resource data and the correspondence between the preset style name and each component in the component library, determine the target component corresponding to the resource data;

[0023] The resource data is associated with the target component.

[0024] In some exemplary embodiments, if an uploaded layer is detected, it is determined that the style data has changed; wherein the layer is generated in response to a user operation, and the layer includes a style name indicated by the user operation and style attributes and attribute values.

[0025] In some exemplary embodiments, if one of the following changes is satisfied, it is determined that the style data has changed:

[0026] Addition of attributes to a style, deletion of attributes from a style, or change of attribute values ​​of attributes from a style.

[0027] In a second aspect, an embodiment of the present application provides a display device for a page component, including:

[0028] The detection unit is configured to execute, in the component library, periodically detecting the style data of the components included in the current page; wherein the component library includes at least one component, and each component corresponds to at least one style;

[0029] a determining unit configured to determine a target style after the change and a style name of the target style if a change in the style data is detected;

[0030] a data generating unit configured to generate resource data corresponding to the style data of the target style based on the style name of the target style;

[0031] a component updating unit configured to perform associating the resource data with a target component determined in the component library to update the target component;

[0032] The display unit is configured to display the updated target component in the current display page.

[0033] In some exemplary embodiments, the resource data includes a style name of the target style and a set of attributes of the target style;

[0034] The component updating unit is specifically configured to execute:

[0035] Determine the target component corresponding to the resource data based on the style name of the target style in the resource data and the correspondence between the preset style name and each component in the component library;

[0036] The attribute set of the target style in the resource data is associated with the target component to update the target component.

[0037] In some exemplary embodiments, the data generating unit is configured to generate resource data corresponding to the style data of the target style in the following manner;

[0038] If the style code of the target style is implemented based on the iOS system, the resource data is determined to be a style name including a style header file name and an attribute set including a resource name;

[0039] If the style code of the target style is implemented based on the Android system, the resource data is determined to be a style name in XML format and a corresponding attribute set.

[0040] In some exemplary embodiments, the system further includes a version updating unit configured to, after determining the changed target style and the style name of the target style, execute:

[0041] Updating the version number of the component library;

[0042] The component updating unit is specifically configured to execute:

[0043] Determine the latest version of the component library according to the version number of the component library;

[0044] In the latest version of the component library, based on the style name in the resource data and the correspondence between the preset style name and each component in the component library, determine the target component corresponding to the resource data;

[0045] The resource data is associated with the target component.

[0046] In some exemplary embodiments, the determining unit is specifically configured to execute:

[0047] If an uploaded layer is detected, it is determined that the style data has changed; wherein the layer is generated in response to a user operation, and the layer includes a style name indicated by the user operation and attributes and attribute values ​​of the style.

[0048] In some exemplary embodiments, the determining unit is specifically configured to execute:

[0049] If one of the following changes is met, it is determined that the style data has changed:

[0050] Addition of attributes to a style, deletion of attributes from a style, or change of attribute values ​​of attributes from a style.

[0051] In a third aspect, an embodiment of the present application further provides an electronic device, comprising a processor and a memory for storing instructions executable by the processor; wherein the processor is configured to execute the instructions to implement any one of the methods provided in the first aspect of the present application.

[0052] In a fourth aspect, an embodiment of the present application further provides a computer-readable storage medium. When the instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute any method provided in the first aspect of the present application.

[0053] In a fifth aspect, an embodiment of the present application provides a computer program product, including a computer program / instructions, which, when executed by a processor, implements any of the methods provided in the first aspect of the present application.

[0054] The technical solution provided by the embodiments of the present application brings at least the following beneficial effects:

[0055] The present application proposes a method for displaying page components. By periodically detecting the style data of the components included in the current page in the component library, it is timely known whether the style data has changed. If the style data is detected to have changed, the target style after the change and the style name of the target style are first determined; since each style is identified by a unique style name, resource data corresponding to the style data of the target style can be generated based on the style name of the target style, so that users can directly use the resource data without additional workload; the resource data is associated with the target component determined in the component library to update the target component, and then the updated target component is displayed on the current page. During the whole process, the update of some components can be automatically loaded without modifying the entire page, which reduces the complexity of operation and improves processing efficiency.

[0056] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0058] Figure 1 A schematic diagram of an application scenario of a method for displaying a page component provided in an embodiment of the present application;

[0059] Figure 2 A flowchart of a method for displaying a page component provided in one embodiment of the present application;

[0060] Figure 3 A display interface diagram of a component editing provided by an embodiment of the present application;

[0061] Figure 4 A schematic diagram of a component and style change provided in an embodiment of the present application;

[0062] Figure 5 A flowchart of another method for displaying page components provided in one embodiment of the present application;

[0063] Figure 6 is a block diagram of a display device of a page component according to an exemplary embodiment;

[0064] Figure 7 The diagram is a schematic diagram of an electronic device showing a method for displaying a page component according to an exemplary embodiment. DETAILED DESCRIPTION

[0065] In order to enable ordinary persons in the art to better understand the technical solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings.

[0066] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present application described here can be implemented in an order other than those illustrated or described here. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present application. On the contrary, they are merely examples of devices and methods consistent with some aspects of the present application as detailed in the attached claims.

[0067] Below, some terms in the embodiments of the present application are explained to facilitate understanding by those skilled in the art.

[0068] (1) In the embodiments of the present application, the term "plurality" refers to two or more than two, and other quantifiers are similar.

[0069] (2) "and / or" describes the association relationship of the associated objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. The character " / " generally indicates that the associated objects are in an "or" relationship.

[0070] (3) Components are simple encapsulation of data and methods. Components can have their own properties and methods. Properties are simple accessors to component data, while methods are some simple and visible functions of components.

[0071] (4) Style refers to the collection of component attributes. That is, after the attributes are assigned, the combination of different attribute values ​​can form multiple styles.

[0072] (5) Attributes, which are descriptive characteristics of a component, such as color, size, and font size.

[0073] (6) Component management platform, which is a general term for the front-end and back-end integration of colors, styles, icons, fonts, etc. Its functions can be considered as a collection of functions that can be displayed, added, modified, packaged, etc. on the front-end web page.

[0074] (7) Layers are like films containing text or graphics, which are stacked one by one in order to form the final effect of the page; they can accurately position the elements on the page. You can add text, pictures, tables, plug-ins to a layer, and you can also nest layers in it.

[0075] The display of a page usually includes the display of multiple components. For example, the current page includes multiple buttons and multiple icons. If the user wants to modify the style of some components, the existing modification logic can only modify the entire page code as a whole, and the page cannot automatically load the update of some components.

[0076] However, in this method, a large amount of data or codes need to be processed, the operation is complicated, and the processing efficiency is low.

[0077] To this end, the present application provides a method for displaying page components, in which the method determines the changed target style and the style name of the target style by detecting the style data of the components included in the current page; then, based on the style name of the target style, generates resource data corresponding to the style data of the target style; associates the resource data with the target component determined in the component library to update the target component; and displays the updated target component in the current page. During the entire process, the user can automatically load updates to some components without modifying the entire page, which reduces the complexity of the operation and improves processing efficiency.

[0078] After introducing the design ideas of the embodiments of the present application, the following briefly introduces the application scenarios to which the technical solutions of the embodiments of the present application can be applied. It should be noted that the application scenarios introduced below are only used to illustrate the embodiments of the present application and are not limited. In specific implementation, the technical solutions provided by the embodiments of the present application can be flexibly applied according to actual needs.

[0079] refer to Figure 1 , which is a schematic diagram of an application scenario of the display method of the page component provided in an embodiment of the present application. The application scenario includes multiple terminal devices 101 (including terminal device 101-1, terminal device 101-2, ... terminal device 101-n) and a server 102. Among them, the terminal device 101 and the server 102 are connected via a wireless or wired network, and the terminal device 101 includes but is not limited to electronic devices such as desktop computers, mobile phones, mobile computers, tablet computers, media players, smart wearable devices, smart TVs, etc. The server 102 can be a server cluster or a cloud computing center composed of a server, several servers. The server 102 can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and basic cloud computing services such as big data and artificial intelligence platforms.

[0080] The server 102 periodically detects the style data of the components included in the current page in the component library; if the user 1 has a need to add a new style or modify a style, the corresponding operation is triggered, and the server 102 detects that the style data has changed, and then determines the changed target style and the style name of the target style; based on the style name of the target style, generates resource data corresponding to the style data of the target style; associates the resource data with the target component determined in the component library to update the target component, and then controls the target component to be displayed on the terminal device 101-1 according to the target style. In addition, the above process can also be completed and displayed by the terminal device.

[0081] The above process is described using user 1 as an example. In this process, components in other users' pages usually have the following two display logics: the first is that the display does not change; the second is that the updated target component of user 1 is synchronously displayed. The server can be pre-configured, and the display method in other users' pages is not limited here.

[0082] Of course, the method provided in the embodiment of the present application is not limited to Figure 1 The application scenarios shown can also be used in other possible application scenarios, and the embodiments of the present application are not limited thereto. Figure 1 The functions that can be implemented by each device in the application scenario shown will be described in the subsequent method embodiments, and will not be described in detail here.

[0083] To further illustrate the technical solution provided by the embodiment of the present application, this is described in detail below in conjunction with the accompanying drawings and specific implementation methods. Although the embodiment of the present application provides the method operation steps shown in the following embodiments or drawings, more or fewer operation steps may be included. In the steps where there is no necessary causal relationship logically, the execution order of these steps is not limited to the execution order provided by the embodiment of the present application.

[0084] Combine the following Figure 1 The application scenario shown illustrates the technical solution provided by the embodiment of the present application.

[0085] refer to Figure 2 The embodiment of the present application provides a method for displaying a page component. The method for displaying a page component can be implemented on a component management platform, such as by executing a terminal device integrated with the component management platform. The method for displaying a page component can at least include the following steps:

[0086] S201. Periodically detect style data of components included in a current page in a component library; wherein the component library includes at least one component, and each component corresponds to at least one style.

[0087] S202: If a change in the style data is detected, determine the target style after the change and the style name of the target style.

[0088] S203. Generate resource data corresponding to the style data of the target style based on the style name of the target style.

[0089] S204: Associating the resource data with the target component determined in the component library to update the target component.

[0090] S205. Display the updated target component in the current page.

[0091] The present application proposes a method for displaying page components. By periodically detecting the style data of the components included in the current page in the component library, it is timely known whether the style data has changed. If the style data is detected to have changed, the target style after the change and the style name of the target style are first determined; since each style is identified by a unique style name, resource data corresponding to the style data of the target style can be generated based on the style name of the target style, so that users can directly use the resource data without additional workload; the resource data is associated with the target component determined in the component library to update the target component, and then the updated target component is displayed on the current page. During the whole process, the update of some components can be automatically loaded without modifying the entire page, which reduces the complexity of operation and improves the processing efficiency of users.

[0092] In S201, at least one component is pre-stored in the component library, each component corresponds to at least one style, and each style is identified by a unique style name. For example, component A is a button, and its attributes include color, font size, background color, and border color. After assigning a value to each attribute, it is combined into a style, such as green + 14pt font size + background yellow + border color; component B is also a button, and its attributes include color, font size, and background color.

[0093] Usually, a page includes multiple components, and corresponding to the component library, the components included in the page are some components in the component library. Therefore, in the component library, the style data of the components included in the current page and whether the style data has changed are periodically detected.

[0094] Exemplarily, if one of the following changes is satisfied, it is determined that the style data has changed: the addition of an attribute in the style, the deletion of an attribute in the style, or the change of the attribute value of an attribute in the style. The addition of an attribute in the style means that the attribute is changed from color and font to color, font and font size, and the newly added attribute is font size; the deletion of an attribute in the style means that the attribute is changed from color, font and font size to color and font; the change of the attribute value of an attribute in the style means that the color is changed from green to red.

[0095] In the above embodiment, the change of style data is determined by detecting the addition, deletion or change of attribute value in the style, and then the change of the component is determined, thereby improving the accuracy of component change identification.

[0096] In S202, if it is detected that the style data has changed, a target style after the change and a style name of the target style are determined.

[0097] Specifically, in the actual application process, if an uploaded layer is detected, it can be determined that the style data in the component library has changed, wherein the layer is generated in response to a user operation, and the layer includes the style name indicated by the user operation and the attributes and attribute values ​​of the style.

[0098] For example, the user operation is that the user clicks the component edit button on the display page of the component management platform, and in the pop-up page, a layer is drawn. In the process of drawing the layer, the required style name and style attributes and attribute values ​​are input into the component management platform. In this way, when the uploaded layer is detected, it can be determined that the style data in the component library has changed.

[0099] In a specific example, you can upload layers via the Sketch plugin. Figure 3 , 31-33 are color configuration icons, 31 represents red, 32 represents green, and 33 represents yellow; 34 represents the layer displayed in the artboard; 35 is the configuration parameter area. In this example, the configuration parameters include width W, height H, horizontal coordinate X, vertical coordinate Y, transparency, fill color, border color, internal style, etc. Figure 3 This is just an example and does not constitute a specific limitation.

[0100] In a specific example, for example, the style name of the layer indicated by the user uploaded is a green rounded button, and the attributes and attribute values ​​are green + rounded corners + 8pt font size + width and height of 1 cm respectively.

[0101] The above embodiment can quickly and accurately detect changes in style data in the component library by detecting whether there is a layer uploaded, and then determine the specific content of the changed style data according to the style name indicated by the user operation included in the layer and the style attributes and attribute values.

[0102] In S203, based on the style name of the target style, resource data corresponding to the style data of the target style is generated.

[0103] The resource data includes the style name of the target style and the attribute set of the target style. Therefore, in the process of generating resource data, it can be implemented based on the style name of the target style. Exemplarily, the resource data can be presented in the form of style code so that the user can quickly and accurately determine the type and function of the resource data, thereby improving development efficiency.

[0104] In the actual application process, since the devices used by the final component may be devices with different systems, such as iOS phones or Android phones, in order to avoid the increase in workload caused by users converting style codes between different systems and to improve development efficiency, resource data corresponding to the style data of the target style can be generated in the following way:

[0105] (1) If the style code of the target style is implemented based on the iOS system, the resource data is determined to be a style name including a style header file name and a property set including a resource name. Considering the characteristics of components in the iOS system, in this case, the determined resource data should include not only the file name of the style header file, but also the property set of the resource name.

[0106] (2) If the style code of the target style is implemented based on the Android system, the resource data is determined to be a style name and a corresponding attribute set in XML format. Considering the characteristics of components in the Android system, in this case, the data types of the style name and the corresponding attribute set in the resource data are determined to be in XML format, and no format conversion is required, thereby improving development efficiency.

[0107] In the above embodiment, the changes in components caused by the changes in style data are to be applied to the user's terminal device, and the systems of the user's terminal device are usually different. Therefore, in order to improve development efficiency, in the process of generating resource data, resource data in corresponding formats are generated for the IOS system and the Android system respectively.

[0108] In step S204 , the resource data is associated with the target component determined in the component library to update the target component.

[0109] Exemplarily, the process can be implemented in the following manner: based on the style name of the target style in the resource data, and the correspondence between the preset style name and each component in the component library, determine the target component corresponding to the resource data; associate the attribute set of the target style in the resource data with the target component to update the target component.

[0110] Specifically, in the component library, the correspondence between the style name and the component is preset. Based on the preset relationship, the component corresponding to the style name can be found through the style name. Therefore, through the style name of the target style in the resource data and the corresponding relationship, the component corresponding to the resource data can be determined, and the component corresponding to the resource data is called the target component. Then the attribute set of the target style in the resource data is associated with the target component. For example, the attribute set of the target style in the resource data includes the color of the target component as red, and the original color of the target component is green. The association process is to change the color of the target component to red, thereby updating the target component. In general, the attribute set includes multiple attributes and corresponding attribute values, and the updated target component is displayed according to the attribute set.

[0111] In a specific example, for example, if the style name of the target style is rounded green button, the resource data contains the style code corresponding to "green + rounded corners + 8pt font size + 1cm width and height respectively", and components include buttons, favorites symbols, etc. Therefore, in order to determine the component type of the changed style, the style name is used for association so that the target component can be updated.

[0112] The above embodiment associates resource data with components by using style names as links, eliminating the need to search the entire component library, thereby improving component update efficiency.

[0113] In order to distinguish the changes in the data of the component library, the component library has different versions. For example, if there is a style change or a new style in the style of version 1.0.0, the component library is updated to version 1.0.1. Therefore, after determining the changed target style and the style name of the target style, the version of the component library can also be updated. In this way, in the process of associating resource data with the corresponding component, the latest version of the component library can be determined according to the version number of the component library. In the latest version of the component library, based on the style name in the resource data and the correspondence between the preset style name and each component in the component library, the target component corresponding to the resource data is determined. The specific association method can be found in the aforementioned embodiment.

[0114] As component libraries are constantly updated, multiple versions of component libraries usually appear. Therefore, this method adds an operation of determining the latest version of the component library by the version number of the component library, so that the association process is performed in the latest version of the component library. In the above embodiment, by updating the version number of the component library to associate the component, the component library is accurately located, the component update efficiency is improved, and the development efficiency is further improved.

[0115] In S205, after the target component is updated, the updated target component is displayed in the current page. For example, there are 5 components in the current page, 2 of which are updated, one update is that the color of the button of component 1 changes from red to green, and the other update is that the shape of component 2 changes from rounded corners to square corners.

[0116] In a specific example, Figure 4 A schematic diagram of a component and style change is shown, wherein adding attributes, deleting attributes, and changing attribute values ​​can all achieve style changes, and style changes correspond to component updates. After completing the style change, the style release can be completed; after completing the component update, the component release can be performed, and then the component library version and the resource data in the component library can be updated through JOSN transcoding, and the updated component library can be obtained. The updated component library includes built-in styles and newly added styles, as well as the version number of the updated component library.

[0117] In order to make the technical solution of this application easier to understand, a complete flowchart is used below for explanation. Figure 5 .

[0118] S501. If the component management platform detects that the style data has changed, it adds a new component and configures the component properties; or adds a new style under the component and sets the property value of the style; or modifies the property value of an existing style.

[0119] For example, create a component and configure its properties, such as color, size, font, rounded corners, and nested component style names. When configuring component properties in the component library, you can set the component appearance through the common interface.

[0120] S502, generating resource data in the form of style code; wherein, if the style code is implemented based on the iOS system, the resource data is determined to be a style name including a style header file name and an attribute set including the resource name; if the style code is implemented based on the Android system, the resource data is determined to be a style name in XML format and a corresponding attribute set.

[0121] For example, the code required for the client style is directly generated according to the preset rules, and a series of style header file names and resource names are automatically generated for the IOS system; a series of style codes are automatically generated for the Android system.

[0122] S503: Update the version number of the changed style data and submit the resource data to the remote repository, so that the component is rendered and displayed according to the resource data in the remote repository.

[0123] The embodiments of the present application can be applied to large revision projects (for example, in a project including a page of multiple components, multiple components need to be modified), and can realize the function of modifying the appearance of components in each business module. After the underlying modification, the user only needs to backtest the effect, and the amount of change is small; it allows users to independently modify the appearance style of components (such as obtaining style data of changes caused by user operations) without relying on development, and automatically generates style codes.

[0124] The following is an example scenario to explain the complete process. User A puts forward his own requirements on the component management platform by drawing layers. The presentation result of the requirements is that the style data has changed. The component management platform generates corresponding resource data based on the changed style data and the component type to which the changed style data belongs, such as style codes that can be directly used by the iOS system or the Android system, and then updates the version number of the original component library and submits the style code to the remote warehouse. The component management platform obtains the resource data, associates the style name with the target component determined in the component library, and then updates the target component. Finally, the updated target component is displayed on the current page, and the target component is quickly displayed.

[0125] In this way, business development uses the appearance generated by the style, and can directly modify the value of the attribute on the component management platform and update the new style data through the script. Business development does not require any development, that is, a new color. For example, the background color of a style of the original button is white, and when it is updated to red on the component management platform, only the dependent component library file needs to be updated, and the button will become red.

[0126] Figure 6 is a block diagram of a display device of a page component according to an exemplary embodiment, referring to Figure 6 The device includes a detection unit 61, a determination unit 62, a data generation unit 63, a component updating unit 64 and a display unit 65.

[0127] The detection unit 61 is configured to execute, in the component library, periodically detecting the style data of the components included in the current page; wherein the component library includes at least one component, and each component corresponds to at least one style;

[0128] The determining unit 62 is configured to determine a target style after the change and a style name of the target style if a change in the style data is detected;

[0129] The data generating unit 63 is configured to generate resource data corresponding to the style data of the target style based on the style name of the target style;

[0130] A component updating unit 64 is configured to perform associating the resource data with a target component determined in the component library to update the target component;

[0131] The display unit 65 is configured to display the updated target component in the current display page.

[0132] In some exemplary embodiments, the resource data includes a style name of a target style and a set of attributes of the target style;

[0133] The component updating unit 64 is specifically configured to execute:

[0134] Based on the style name of the target style in the resource data and the correspondence between the preset style name and each component in the component library, determine the target component corresponding to the resource data;

[0135] The property set of the target style in the resource data is associated with the target component to update the target component.

[0136] In some exemplary embodiments, the data generating unit 63 is configured to generate resource data corresponding to the style data of the target style in the following manner;

[0137] If the style code of the target style is implemented based on the iOS system, the resource data is determined to be a style name including a style header file name and an attribute set including a resource name;

[0138] If the style code of the target style is implemented based on the Android system, the resource data is determined to be a style name in XML format and a corresponding attribute set.

[0139] In some exemplary embodiments, the system further includes a version updating unit configured to, after determining the changed target style and the style name of the target style, execute:

[0140] Update the version number of the component library;

[0141] The component updating unit 64 is specifically configured to execute:

[0142] Determine the latest version of the component library based on the version number of the component library;

[0143] In the latest version of the component library, the target component corresponding to the resource data is determined based on the style name in the resource data and the correspondence between the preset style name and each component in the component library;

[0144] Associate resource data with target components.

[0145] In some exemplary embodiments, the determining unit 62 is specifically configured to execute:

[0146] If an uploaded layer is detected, it is determined that the style data has changed; wherein the layer is generated in response to a user operation, and the layer includes a style name indicated by the user operation and attributes and attribute values ​​of the style.

[0147] In some exemplary embodiments, the determining unit 62 is specifically configured to execute:

[0148] If one of the following changes is met, it is determined that the style data has changed:

[0149] Addition of attributes to a style, deletion of attributes from a style, or change of attribute values ​​of attributes from a style.

[0150] After introducing the method and device for displaying a page component according to an exemplary embodiment of the present application, next, an electronic device according to another exemplary embodiment of the present application is introduced.

[0151] Those skilled in the art will appreciate that various aspects of the present application may be implemented as a system, method or program product. Therefore, various aspects of the present application may be specifically implemented in the following forms, namely: a complete hardware implementation, a complete software implementation (including firmware, microcode, etc.), or a combination of hardware and software, which may be collectively referred to as "circuit", "module" or "system" herein.

[0152] In some possible implementations, the electronic device according to the present application may include at least one processor and at least one memory. The memory stores program code, and when the program code is executed by the processor, the processor executes the steps in the method for displaying a page component according to various exemplary implementations of the present application described above in this specification. For example, the processor may execute the steps in the method for displaying a page component.

[0153] Refer to the following Figure 7 The electronic device 130 according to this embodiment of the present application is described. Figure 7 The electronic device 130 shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0154] like Figure 7 As shown, the electronic device 130 is in the form of a general electronic device. The components of the electronic device 130 may include but are not limited to: the at least one processor 131, the at least one memory 132, and a bus 133 connecting different system components (including the memory 132 and the processor 131).

[0155] Bus 133 represents one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, a processor, or a local bus using any of a variety of bus architectures.

[0156] The memory 132 may include a readable medium in the form of a volatile memory, such as a random access memory (RAM) 1321 and / or a cache memory 1322 , and may further include a read-only memory (ROM) 1323 .

[0157] The memory 132 may also include a program / utility 1325 having a set (at least one) of program modules 1324, such program modules 1324 including but not limited to: an operating system, one or more application programs, other program modules, and program data, each of which or some combination may include an implementation of a network environment.

[0158] The electronic device 130 may also communicate with one or more external devices 134 (e.g., keyboards, pointing devices, etc.), may also communicate with one or more devices that enable a user to interact with the electronic device 130, and / or communicate with any device that enables the electronic device 130 to communicate with one or more other electronic devices (e.g., routers, modems, etc.). Such communication may be performed via an input / output (I / O) interface 135. Furthermore, the electronic device 130 may also communicate with one or more networks (e.g., a local area network (LAN), a wide area network (WAN), and / or a public network, such as the Internet) via a network adapter 136. As shown, the network adapter 136 communicates with other modules for the electronic device 130 via a bus 133. It should be understood that, although not shown in the figure, other hardware and / or software modules may be used in conjunction with the electronic device 130, including but not limited to: microcode, device drivers, redundant processors, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0159] In an exemplary embodiment, a computer-readable storage medium including instructions is also provided, such as a memory 132 including instructions, and the above instructions can be executed by the processor 131 to implement any method of displaying a page component as provided in the present application. Optionally, the computer-readable storage medium can be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.

[0160] In an exemplary embodiment, a computer program product is also provided, including a computer program / instruction, and when the computer program / instruction is executed by the processor 131, any method of the display method of the page component provided in the present application is implemented.

[0161] In an exemplary embodiment, various aspects of a method for displaying a page component provided by the present application may also be implemented in the form of a program product, which includes program code. When the program product is run on a computer device, the program code is used to enable the computer device to execute the steps of a method for displaying a page component according to various exemplary embodiments of the present application described above in this specification.

[0162] The program product may employ any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination thereof. More specific examples of readable storage media (a non-exhaustive list) include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof.

[0163] The program product for image zooming of the embodiment of the present application can adopt a portable compact disk read-only memory (CD-ROM) and include program code, and can be run on an electronic device. However, the program product of the present application is not limited to this. In this document, a readable storage medium can be any tangible medium containing or storing a program, which can be used by or in combination with an instruction execution system, an apparatus or a device.

[0164] A readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, wherein readable program code is carried. Such propagated data signals may take a variety of forms, including, but not limited to, electromagnetic signals, optical signals, or any suitable combination of the foregoing. A readable signal medium may also be any readable medium other than a readable storage medium, which may transmit, propagate, or transfer a program for use by or in conjunction with an instruction execution system, apparatus, or device.

[0165] The program code embodied on the readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.

[0166] The program code for performing the operations of the present application can be written in any combination of one or more programming languages, including object-oriented programming languages ​​such as Java, C++, etc., and also conventional procedural programming languages ​​such as "C" language or similar programming languages. The program code can be executed entirely on the user electronic device, partially on the user device, as an independent software package, partially on the user electronic device and partially on the remote electronic device, or entirely on the remote electronic device or server. In the case of a remote electronic device, the remote electronic device can be connected to the user electronic device through any type of network, including a local area network (LAN) or a wide area network (WAN), or can be connected to an external electronic device (for example, using an Internet service provider to connect through the Internet).

[0167] It should be noted that, although several units or subunits of the device are mentioned in the above detailed description, this division is merely exemplary and not mandatory. In fact, according to the embodiments of the present application, the features and functions of two or more units described above can be embodied in one unit. Conversely, the features and functions of one unit described above can be further divided into multiple units to be embodied.

[0168] In addition, although the operations of the method of the present application are described in a specific order in the drawings, this does not require or imply that the operations must be performed in this specific order, or that all the operations shown must be performed to achieve the desired results. Additionally or alternatively, some steps may be omitted, multiple steps may be combined into one step, and / or one step may be decomposed into multiple steps.

[0169] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented in one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that include computer-usable program code.

[0170] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable image scaling device to produce a machine, so that the instructions executed by the processor of the computer or other programmable image scaling device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0171] These computer program instructions may also be stored in a computer readable memory capable of directing a computer or other programmable image scaling device to operate in a specific manner, so that the instructions stored in the computer readable memory produce an article of manufacture including an instruction device, the instruction device being implemented in the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0172] These computer program instructions may also be loaded onto a computer or other programmable image scaling device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, whereby the instructions executed on the computer or other programmable device provide for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0173] Although the preferred embodiments of the present application have been described, those skilled in the art may make additional changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications falling within the scope of the present application.

[0174] Obviously, those skilled in the art can make various changes and modifications to the present application without departing from the spirit and scope of the present application. Thus, if these modifications and variations of the present application fall within the scope of the claims of the present application and their equivalents, the present application is also intended to include these modifications and variations.

Claims

1. A method for displaying a page component, characterized in that: include: In a component library, the style data of the components included in the current page are periodically detected; wherein the component library includes at least one component, and each component corresponds to at least one style; If a change in the style data is detected, determining a target style after the change and a style name of the target style; Based on the style name of the target style, generating resource data corresponding to the style data of the target style; wherein the resource data includes the style name of the target style and a set of attributes of the target style; Determine the target component corresponding to the resource data based on the style name of the target style in the resource data and the correspondence between the preset style name and each component in the component library; Associating the attribute set of the target style in the resource data with the target component to update the target component; The updated target component is displayed in the currently displayed page.

2. The method according to claim 1, characterized in that Generate resource data corresponding to the style data of the target style in the following manner: If the style code of the target style is implemented based on the iOS system, determining that the resource data is a style name including a style header file name and an attribute set including a resource name; If the style code of the target style is implemented based on the Android system, the resource data is determined to be a style name in XML format and a corresponding attribute set.

3. The method according to claim 1, characterized in that After determining the target style after the change and the style name of the target style, the method further includes: Updating the version number of the component library; The associating the resource data with the target component determined in the component library comprises: Determine the latest version of the component library according to the version number of the component library; In the latest version of the component library, based on the style name in the resource data and the correspondence between the preset style name and each component in the component library, determine the target component corresponding to the resource data; The resource data is associated with the target component.

4. The method according to claim 1, characterized in that: If an uploaded layer is detected, it is determined that the style data has changed; wherein the layer is generated in response to a user operation, and the layer includes a style name indicated by the user operation and attributes and attribute values ​​of the style.

5. The method according to any one of claims 1 to 4, characterized in that: If one of the following changes is met, it is determined that the style data has changed: Addition of attributes to a style, deletion of attributes from a style, or change of attribute values ​​of attributes in a style.

6. A display device for a page component, characterized in that: include: The detection unit is configured to execute in the component library and periodically detect the style data of the components included in the current page; wherein the component library includes at least one component, and each component corresponds to at least one style; a determining unit configured to determine a target style after the change and a style name of the target style if a change in the style data is detected; A data generating unit, configured to generate resource data corresponding to the style data of the target style based on the style name of the target style; wherein the resource data includes the style name of the target style and a set of attributes of the target style; A component updating unit is configured to determine the target component corresponding to the resource data based on the style name of the target style in the resource data and the correspondence between the preset style name and each component in the component library; associate the attribute set of the target style in the resource data with the target component to update the target component; The display unit is configured to display the updated target component in the current display page.

7. The device according to claim 6, characterized in that The data generating unit is configured to generate resource data corresponding to the style data of the target style in the following manner: If the style code of the target style is implemented based on the iOS system, determining that the resource data is a style name including a style header file name and an attribute set including a resource name; If the style code of the target style is implemented based on the Android system, the resource data is determined to be a style name in XML format and a corresponding attribute set.

8. The device according to claim 6, characterized in that The system further includes a version updating unit configured to, after determining the changed target style and the style name of the target style, execute: Updating the version number of the component library; The component updating unit is specifically configured to execute: Determine the latest version of the component library according to the version number of the component library; In the latest version of the component library, based on the style name in the resource data and the correspondence between the preset style name and each component in the component library, determine the target component corresponding to the resource data; The resource data is associated with the target component.

9. The device according to claim 6, characterized in that The determining unit is specifically configured to execute: If an uploaded layer is detected, it is determined that the style data has changed; wherein the layer is generated in response to a user operation, and the layer includes a style name indicated by the user operation and attributes and attribute values ​​of the style.

10. The device according to any one of claims 6 to 9, characterized in that: The determining unit is specifically configured to execute: If one of the following changes is met, it is determined that the style data has changed: Addition of attributes to a style, deletion of attributes from a style, or change of attribute values ​​of attributes in a style.

11. An electronic device, characterized in that: The invention comprises a processor and a memory for storing instructions executable by the processor; wherein the processor is configured to execute the instructions to implement the method according to any one of claims 1 to 5.

12. A computer-readable storage medium, characterized in that: When the instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to perform the method as claimed in any one of claims 1 to 5.

13. A computer program product comprising a computer program / instructions, characterized in that When the computer program / instructions are executed by a processor, the method of any one of claims 1 to 5 is implemented.

Images