A method and system for generating display styles

By identifying the graphics in the display style picture and matching components from the component library, and combining and generating style files, the problem of inefficient development of multi-client display styles is solved, and code reuse and multi-platform application are realized.

CN113761438BActive Publication Date: 2025-02-21BEIJING WODONG TIANJUN INFORMATION TECH CO LTD +1
View PDF 2 Cites 0 Cited by

Patent Information

Application Number
CN202110212623.5
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2021-02-25
Publication Date
2025-02-21
Estimated Expiration
2041-02-25

AI Technical Summary

Technical Problem

When updating or adding new display styles, you need to develop code for IOS and Android clients separately, resulting in a large amount of workload and a large amount of code overlap, making development efficiency inefficient.

Method used

By identifying the graphics in the picture containing the display styles, determining the matching components from the component library, and combining these components to generate style files, the style generation process is simplified and the reuse of code is realized.

Benefits of technology

It realizes the efficiency of the generation of display styles and reuse of code. It is suitable for multiple clients (such as IOS and Android), avoids duplicate development and improves development efficiency.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN113761438B_ABST
    Figure CN113761438B_ABST
Patent Text Reader

Abstract

The present invention discloses a method and system for generating a display style, and relates to the field of computer technology. A specific implementation of the method includes: obtaining a picture containing a display style; identifying a graphic in the picture to determine a component matching the graphic from a component library; combining the components to generate a style file corresponding to the display style; and providing the style file to the client in response to a page generation request sent by a client, so that the client performs page display according to the style file. This implementation avoids repeated development of style codes and improves the development efficiency of style codes.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method and system for generating a display style. Background Art

[0002] A well-planned display style plays a key role in enabling users to quickly obtain information and improving user experience. Therefore, it is often necessary to continuously update or add new display styles based on user needs.

[0003] Currently, when updating or adding new display styles, for different clients, such as IOS client and Android client, it is necessary to develop their own codes separately to update or generate the display style, which is a large workload; and each time a new or updated style is added or updated, it is necessary to develop new corresponding code, especially when different application systems have the same display style, there is a lot of overlap in the developed code, and the development efficiency is low. Summary of the invention

[0004] In view of this, an embodiment of the present invention provides a method and system for generating a display style, which can generate a style file by combining components, simplifying the style generation process, and has universality, realizing code reuse, avoiding repeated development, and improving the generation efficiency of display styles.

[0005] To achieve the above object, according to a first aspect of an embodiment of the present invention, a method for generating a display style is provided, comprising:

[0006] Get the image containing the display style;

[0007] Recognize the graphics in the picture to determine the components matching the graphics from the component library;

[0008] Combining the components to generate a style file corresponding to the display style;

[0009] In response to a page generation request sent by a client, the style file is provided to the client, so that the client displays the page according to the style file.

[0010] Optionally, the identifying the graphic in the picture to determine a component matching the graphic from a component library includes:

[0011] Obtain one or more of the following graphic information: color value of the graphic, font in the graphic, graphic size, width and height of the graphic, and relative position of the graphic;

[0012] A component matching the graphic is determined from a component library according to the graphic information.

[0013] Optionally, combining the components to generate a style file corresponding to the display style includes:

[0014] According to the relative positions of the graphics, the components matching all the graphics are stored in temporary variables in order;

[0015] The temporary variables are compiled into a binary file and encrypted to generate the style file.

[0016] Optionally, it also includes:

[0017] Before identifying the graphics in the picture, determine whether there is a business scenario corresponding to the display style in the cloud configuration platform:

[0018] If it does not exist, create a corresponding business scenario for the display style;

[0019] If so, continue to determine whether there is an application version number corresponding to the display style in the business scenario, so as to obtain the application version number corresponding to the display style if the version number does not exist.

[0020] Optionally, creating a corresponding business scenario for the display style includes:

[0021] Generate a business number corresponding to the business scenario;

[0022] Configure one or more of the following information corresponding to the business number: business scenario name, application system to which the business scenario belongs, and application module to which the business scenario belongs.

[0023] Optionally, it also includes: configuring one or more of the following information for the style file to determine whether to provide the style file to the client according to the configured information: user whitelist, AB experiment range, unavailable operating system version, unavailable terminal type.

[0024] Optionally, in response to a page generation request sent by a client, providing the style file to the client so that the client displays the page according to the style file includes:

[0025] Receiving an HTTP request sent by the client, wherein the HTTP request indicates a service number and an application version number;

[0026] Query the style file corresponding to the business number and the application version number;

[0027] The style file is sent to the client, so that the client parses the style file and renders the business data for display.

[0028] To achieve the above object, according to a second aspect of an embodiment of the present invention, a method for generating a display style is provided, comprising:

[0029] Sending a page generation request to a cloud configuration platform storing a style file corresponding to the display style, wherein the page generation request indicates the style file to be obtained;

[0030] Receiving a style file returned by the cloud configuration platform; the style file is generated by combining one or more components, and the components match the graphics in the picture containing the display style;

[0031] Parse the style file to display the page.

[0032] To achieve the above-mentioned purpose, according to a third aspect of an embodiment of the present invention, a cloud configuration platform for generating display styles is provided, comprising: an image acquisition module, an image recognition module, a style file generation module, and a style file providing module; wherein:

[0033] The picture acquisition module is used to acquire pictures containing display styles;

[0034] The picture recognition module is used to recognize the graphics in the picture to determine the components matching the graphics from the component library;

[0035] The style file generating module is used to combine the components to generate a style file corresponding to the display style;

[0036] The style file providing module is used to provide the style file to the client in response to a page generation request sent by the client, so that the client displays the page according to the style file.

[0037] Optionally, the identifying the graphic in the picture to determine a component matching the graphic from a component library includes:

[0038] Obtain one or more of the following graphic information: color value of the graphic, font in the graphic, graphic size, width and height of the graphic, and relative position of the graphic;

[0039] A component matching the graphic is determined from a component library according to the graphic information.

[0040] Optionally, combining the components to generate a style file corresponding to the display style includes:

[0041] According to the relative positions of the graphics, the components matching all the graphics are stored in temporary variables in order;

[0042] The temporary variables are compiled into a binary file and encrypted to generate the style file.

[0043] Optionally, it also includes: a business scenario creation module; wherein,

[0044] The business scenario creation module is used to determine whether there is a business scenario corresponding to the display style in the cloud configuration platform before identifying the graphics in the picture:

[0045] If it does not exist, create a corresponding business scenario for the display style;

[0046] If so, continue to determine whether there is an application version number corresponding to the display style in the business scenario, so as to obtain the application version number corresponding to the display style if the version number does not exist.

[0047] Optionally, creating a corresponding business scenario for the display style includes:

[0048] Generate a business number corresponding to the business scenario;

[0049] Configure one or more of the following information corresponding to the business number: business scenario name, application system to which the business scenario belongs, and application module to which the business scenario belongs.

[0050] Optionally, the business scenario creation module is further used to:

[0051] The style file is configured with one or more of the following information to determine whether to provide the style file to the client according to the configured information: user whitelist, AB experiment range, unavailable operating system version, and unavailable terminal type.

[0052] Optionally, in response to a page generation request sent by a client, providing the style file to the client so that the client displays the page according to the style file includes:

[0053] Receiving an HTTP request sent by the client, wherein the HTTP request indicates a service number and an application version number;

[0054] Query the style file corresponding to the business number and the application version number;

[0055] The style file is sent to the client, so that the client parses the style file and renders the business data for display.

[0056] To achieve the above-mentioned purpose, according to a fourth aspect of an embodiment of the present invention, a client for generating a display style is provided, comprising: a request sending module, a style file receiving module, and a style display module; wherein:

[0057] The request sending module is used to send a page generation request to a cloud configuration platform storing a style file corresponding to a display style, wherein the page generation request indicates the style file to be obtained;

[0058] The style file receiving module is used to receive the style file returned by the cloud configuration platform; the style file is generated by combining one or more components, and the components match the graphics in the picture containing the display style;

[0059] The style display module is used to parse the style file to display the page.

[0060] To achieve the above-mentioned purpose, according to a fifth aspect of an embodiment of the present invention, a system for generating a display style is provided, including a cloud configuration platform and a client; wherein:

[0061] The cloud configuration platform is used to obtain a picture containing a display style; identify the graphics in the picture to determine the components matching the graphics from a component library; combine the components to generate a style file corresponding to the display style; the client is used to send a page generation request to the cloud configuration platform, and obtain the style file of the cloud configuration platform in response to the page generation request; and parse the style file for page display.

[0062] To achieve the above-mentioned purpose, according to the sixth aspect of an embodiment of the present invention, there is provided an electronic device for generating a display style, comprising: one or more processors; a storage device for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement any of the methods described in the above-mentioned method for generating a display style.

[0063] To achieve the above-mentioned purpose, according to a seventh aspect of an embodiment of the present invention, a computer-readable medium is provided, on which a computer program is stored, and when the program is executed by a processor, any of the methods described in the above-mentioned method for generating a display style is implemented.

[0064] An embodiment of the above invention has the following advantages or beneficial effects: by identifying the graphics in the style picture, one or more components matching the graphics are determined, and then a style file is generated by combining the components, thereby simplifying the style generation process; and the method for generating the display style can be applied to both IOS clients and Android clients, and is universal; in addition, through the form of components, the style code is reused, the repeated development of the style code is avoided, and the development efficiency of the style code is improved.

[0065] The further effects of the above-mentioned non-conventional optional manner will be described below in conjunction with the specific implementation manner. BRIEF DESCRIPTION OF THE DRAWINGS

[0066] The accompanying drawings are used to better understand the present invention and do not constitute an improper limitation of the present invention.

[0067] Figure 1 is a schematic diagram of the main process of a method for generating a display style applied to a cloud configuration platform according to an embodiment of the present invention;

[0068] Figure 2 is a schematic diagram of the main process of another method for generating a display style applied to a cloud configuration platform according to an embodiment of the present invention;

[0069] Figure 3 is a schematic diagram of the main process of a method for generating a display style applied to a client according to an embodiment of the present invention;

[0070] Figure 4 is a schematic diagram of main modules of a cloud configuration platform according to an embodiment of the present invention;

[0071] Figure 5 is a schematic diagram of main modules of a client according to an embodiment of the present invention;

[0072] Figure 6 is a schematic diagram of the main structure of a display style generation system according to an embodiment of the present invention;

[0073] Figure 7 is an exemplary system architecture diagram to which embodiments of the present invention may be applied;

[0074] Figure 8 It is a schematic diagram of the structure of a computer system of a terminal device or a server suitable for implementing an embodiment of the present invention. DETAILED DESCRIPTION

[0075] The following is a description of exemplary embodiments of the present invention in conjunction with the accompanying drawings, including various details of the embodiments of the present invention to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those of ordinary skill in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for clarity and conciseness, the description of well-known functions and structures is omitted in the following description.

[0076] Figure 1 FIG. 1 is a schematic diagram of the main process of a method for generating a display style applied to a cloud configuration platform according to an embodiment of the present invention. Figure 1 As shown, the method may specifically include the following steps:

[0077] Step S101, obtaining a picture containing a display style, wherein the display style includes but is not limited to the page layout, page color, page font, etc. used by the business direction when displaying the browsing page to the user, and the picture containing the display style refers to the design draft provided by the visual developer, etc.

[0078] Step S102, identifying the graphics in the image to determine a component matching the graphics from a component library.

[0079] Specifically, the identifying of the graphics in the image to determine the components matching the graphics from the component library includes: obtaining one or more of the following graphic information: the color value of the graphic, the font in the graphic, the size of the graphic, the width and height of the graphic, and the relative position of the graphic; determining the components matching the graphic from the component library based on the graphic information. In other words, a pre-established and continuously enriched component library is maintained in the cloud configuration platform, and each component corresponds to a style code to represent an element or graphic such as a button, a text or a table in the image. In this way, the display style code can be quickly developed by dragging components without distinguishing between IOS clients and Android clients, which is universal; and the same component can be used for the development of different display style codes, avoiding repeated code development and improving code development efficiency.

[0080] Step S103: combining the components to generate a style file corresponding to the display style.

[0081] Specifically, the combination of the components to generate a style file corresponding to the display style includes: according to the relative positions of the graphics, the components matching all the graphics are stored in temporary variables in order; the temporary variables are compiled into a binary file and encrypted to generate the style file. It can be understood that since different graphics in the display style picture have fixed relative positions, after matching each graphic in the picture to the corresponding component library in turn, it is necessary to combine the components according to the relative position of the graphics and other information to form the corresponding display style code. Based on this, the style file is generated by compressing the display style code into binary and encrypting it, which ensures the security of the style file during transmission. Specific encryption methods that can be used include but are not limited to asymmetric encryption and symmetric encryption.

[0082] Step S104, in response to the page generation request sent by the client, providing the style file to the client, so that the client displays the page according to the style file.

[0083] It is understandable that the display styles required for different business scenarios (search result page, product details browsing page, etc.), different application APPs or different versions of the same APP may be the same, and there may be multiple different display styles corresponding to the same business scenario or application APP. Therefore, in order to accurately find or locate the corresponding display style, it is necessary to distinguish and manage the display style with the application version number according to the business scenario involved in the actual application of the display style. Specifically, it also includes: before identifying the graphics in the picture, determine whether there is a business scenario corresponding to the display style in the cloud configuration platform: if not, create a corresponding business scenario for the display style; if so, continue to determine whether there is an application version number corresponding to the display style in the business scenario, so as to obtain the application version number corresponding to the display style when the version number does not exist. Among them, the application version number refers to Android V8.4.0, IOS V7.9.0, etc.

[0084] More specifically, the creation of a corresponding business scenario for the display style includes: generating a business number corresponding to the business scenario; configuring one or more of the following information corresponding to the business number: business scenario name, application system to which the business scenario belongs, and application module to which the business scenario belongs. Among them, the business number refers to an identifier generated according to predefined rules, corresponding to the display style in the business scenario, and used to distinguish different display styles, such as a string composed of numbers, letters, special symbols, etc. The application system to which the business scenario belongs refers to different applications, such as an application system for shopping, an application system for travel, an application system for entertainment, etc. The application module to which the business scenario belongs refers to a functional module provided in the application system for users to use, such as a search module, a classification module, and a sales ranking module in a shopping application system. The business scenario refers to the specific business scenario involved under the application module, such as a search results page, a live broadcast scene, a result sorting page, a product details browsing page, etc.

[0085] On this basis, when the client sends a page generation request to obtain a style file, the corresponding style file can be quickly queried according to the parameters such as the business number indicated by the page generation request. Specifically, an HTTP request sent by the client is received, and the HTTP request indicates the business number and the application version number; the style file corresponding to the business number and the application version number is queried; the style file is sent to the client, so that the client parses the style file and renders the business data for display.

[0086] In an optional implementation, it also includes: configuring one or more of the following information for the style file to determine whether to provide the style file to the client according to the configured information: user whitelist, AB experiment range, unavailable operating system version, unavailable terminal type. Among them, the user whitelist indicates one or more users who can use the display style. The AB experiment range indicates one or more users who can use the display style when AB testing two or more different display styles in the same business scenario. Specifically, AB testing is to make two (A / B) or more (A / B / n) versions for the Web or App interface or process, and let the visitor groups (target population) with the same (similar) components randomly access these versions in the same time dimension, and analyze and evaluate the version with the best user experience based on the user experience data and business data collected from each group and formally adopt it. Unavailable operating system versions refer to different operating systems such as Android or IOS that use display styles abnormally or cannot use display styles normally. Unavailable terminal types refer to client models that use display styles abnormally or cannot use display styles normally, such as Huawei, Honor, Xiaomi, Redmi, etc.

[0087] On this basis, when the style file is configured with an unavailable operating system version, before the style file is sent to the client, it also includes: determining whether the operating system version corresponding to the client is an unavailable operating system version, so as not to send the style file to the client when the operating system version corresponding to the client is an unavailable operating system version.

[0088] Furthermore, in the case where the style file is configured with an unavailable terminal type, before the style file is sent to the client, it also includes: determining whether the terminal type corresponding to the client is an unavailable terminal type, so that the style file is not sent to the client when the terminal type corresponding to the client is an unavailable operation terminal type.

[0089] Furthermore, when there are multiple style files corresponding to the business number and the application version number, and the style file is configured with a user whitelist or an AB experiment range, a style file is determined from the multiple style files according to the user whitelist or the AB experiment range and sent to the client.

[0090] In this way, in the actual management and maintenance of the display style, by setting information such as the user whitelist or the AB experiment range, the user's use of the display style is tested in a small range, so that the optimal display style can be determined, avoiding the problem of poor user experience caused by a large number of users directly using the newly generated display style or the updated display style. In addition, by setting unavailable operating system versions and unavailable terminal types, it is avoided that the style file is further sent to the client corresponding to the operating system version or terminal type that uses the display style abnormally, so that the client user can no longer use the abnormal display style, but can only use the pre-update or historical display style, realizing disaster recovery for abnormal display styles and further improving the user experience.

[0091] Based on the above embodiment, by identifying the graphics in the style image, one or more components matching the graphics are determined, and then a style file is generated by combining the components, thereby simplifying the style generation process; and the method for generating the display style can be applied to both IOS clients and Android clients, and is universal; in addition, through the form of components, the style code is reused, the repeated development of the style code is avoided, and the development efficiency of the style code is improved.

[0092] See also Figure 2 Based on the above embodiment, the embodiment of the present invention provides another method for generating a display style applied to a configuration platform, and the method specifically includes the following steps:

[0093] Step S201, obtaining a picture containing a display style.

[0094] Step S202, determine whether there is a business scenario corresponding to the display style in the cloud configuration platform. If not, continue to execute the following step S203; if yes, continue to execute the following step S204.

[0095] Step S203: creating a corresponding business scenario for the display style.

[0096] Specifically, a business number corresponding to the business scenario is generated; and one or more of the following information corresponding to the business number is configured: the business scenario name, the application system to which the business scenario belongs, and the application module to which the business scenario belongs.

[0097] Step S204, continue to determine whether there is an application version number corresponding to the display style in the business scenario. If yes, continue to execute the following step S206; if not, continue to execute the following step S205.

[0098] Step S205, obtaining the application version number corresponding to the display style.

[0099] Specifically, the application version number corresponding to the display style can be obtained by direct input by R&D personnel. In addition, information such as user whitelist and AB implementation range can also be configured. In addition, in the entire display style management and maintenance, if the client encounters an abnormality when using the display style, information such as unavailable operating system version and unavailable terminal type can also be configured.

[0100] Step S206, identifying the graphics in the image to determine a component matching the graphics from a component library.

[0101] Specifically, one or more of the following graphic information is obtained: color value of the graphic, font in the graphic, graphic size, width and height of the graphic, and relative position of the graphic; and a component matching the graphic is determined from a component library according to the graphic information.

[0102] Step S207: combining the components to generate a style file corresponding to the display style.

[0103] Specifically, according to the relative positions of the graphics, the components matching all the graphics are stored in temporary variables in order; the temporary variables are compiled into binary files and encrypted to generate the style file.

[0104] Step S208: receiving an HTTP request sent by the client, wherein the HTTP request indicates a service number and an application version number.

[0105] Step S209, querying the style file corresponding to the business number and the application version number.

[0106] Step S210: Send the style file to the client, so that the client displays the page by parsing the style file.

[0107] In addition, in the case where the style file is configured with an unavailable operating system version, before the style file is sent to the client, it also includes: determining whether the operating system version corresponding to the client is an unavailable operating system version, so as not to send the style file to the client if the operating system version corresponding to the client is an unavailable operating system version.

[0108] Furthermore, in the case where the style file is configured with an unavailable terminal type, before the style file is sent to the client, it also includes: determining whether the terminal type corresponding to the client is an unavailable terminal type, so that the style file is not sent to the client when the terminal type corresponding to the client is an unavailable operation terminal type.

[0109] Furthermore, when there are multiple style files corresponding to the business number and the application version number, and the style file is configured with a user whitelist or an AB experiment range, a style file is determined from the multiple style files according to the user whitelist or the AB experiment range and sent to the client.

[0110] See also Figure 3 Based on the above embodiment, an embodiment of the present invention provides a method for generating a display style applied to a client, and the method may specifically include the following steps:

[0111] Step S301: Send a page generation request to a cloud configuration platform storing a style file corresponding to a display style, wherein the page generation request indicates a style file to be obtained.

[0112] Preferably, the page generation request sent in this embodiment is an HTTP request, and the HTTP request can indicate the style file to be obtained through parameters such as a business number and an application version number.

[0113] Step S302, receiving the style file returned by the server; the style file is generated by combining one or more components, and the components match the graphics in the picture containing the display style.

[0114] Step S303, parsing the style file to display the page.

[0115] It is understandable that since the style file is an encrypted binary file, after the client obtains the corresponding style file, it can decrypt the style file using the decryption method corresponding to the encrypted style file, and then render the corresponding business data for display based on parsing the style file to form the page layout. It is worth noting that in the process of the client obtaining the style file from the server, the client also needs to obtain the corresponding business data from the server where the business data is stored for display.

[0116] See also Figure 4 Based on the above embodiments, the embodiment of the present invention provides a cloud configuration platform 400 for generating display styles, including: an image acquisition module 401, an image recognition module 403, a style file generation module 404, and a style file providing module 405; wherein,

[0117] The picture acquisition module 401 is used to acquire pictures containing display styles;

[0118] The picture recognition module 403 is used to recognize the graphics in the picture to determine the components matching the graphics from the component library;

[0119] The style file generating module 404 is used to combine the components to generate a style file corresponding to the display style;

[0120] The style file providing module 405 is used to provide the style file to the client in response to a page generation request sent by the client, so that the client displays the page according to the style file.

[0121] In an optional embodiment, the identifying of the graphic in the image to determine a component matching the graphic from a component library includes: obtaining one or more of the following graphic information: the color value of the graphic, the font in the graphic, the size of the graphic, the width and height of the graphic, and the relative position of the graphic; and determining a component matching the graphic from a component library based on the graphic information.

[0122] In an optional embodiment, combining the components to generate a style file corresponding to the display style includes: storing the components matching all the graphics in order into temporary variables according to the relative positions of the graphics; compiling the temporary variables into a binary file and encrypting it to generate the style file.

[0123] In an optional implementation, it further includes: a business scenario creation module 402; wherein,

[0124] The business scenario creation module is used to determine whether there is a business scenario corresponding to the display style in the cloud configuration platform before identifying the graphics in the picture: if not, create a corresponding business scenario for the display style; if so, continue to determine whether there is an application version number corresponding to the display style under the business scenario, so as to obtain the application version number corresponding to the display style when the version number does not exist.

[0125] In an optional implementation, creating a corresponding business scenario for the display style includes: generating a business number corresponding to the business scenario; configuring one or more of the following information corresponding to the business number: business scenario name, application system to which the business scenario belongs, and application module to which the business scenario belongs.

[0126] In an optional implementation, the business scenario creation module 402 is further configured to:

[0127] The style file is configured with one or more of the following information to determine whether to provide the style file to the client according to the configured information: user whitelist, AB experiment range, unavailable operating system version, and unavailable terminal type.

[0128] In an optional embodiment, in response to a page generation request sent by the client, the style file is provided to the client so that the client displays the page according to the style file, including: receiving an HTTP request sent by the client, the HTTP request indicating a business number and an application version number; querying a style file corresponding to the business number and the application version number; and sending the style file to the client so that the client parses the style file and renders the business data for display.

[0129] In an optional embodiment, the style file providing module is also used to, when the style file is configured with an unavailable operating system version, determine whether the operating system version corresponding to the client is an unavailable operating system version before sending the style file to the client, so as not to send the style file to the client when the operating system version corresponding to the client is an unavailable operating system version.

[0130] In an optional embodiment, the style file providing module is also used to, when the style file is configured with an unavailable terminal type, determine whether the terminal type corresponding to the client is an unavailable terminal type before sending the style file to the client, so as not to send the style file to the client when the terminal type corresponding to the client is an unavailable operation terminal type.

[0131] In an optional implementation, the style file providing module is further used to:

[0132] When there are multiple style files corresponding to the service number and the application version number, and the style file is configured with a user whitelist or an AB experiment range, a style file is determined from the multiple style files according to the user whitelist or the AB experiment range and sent to the client.

[0133] See also Figure 5 Based on the above embodiments, the embodiment of the present invention provides a client 500 for generating a display style, including: a request sending module 501, a style file receiving module 502, and a style display module 503; wherein,

[0134] The request sending module 501 is used to send a page generation request to a cloud configuration platform storing a style file corresponding to a display style, wherein the page generation request indicates the style file to be obtained;

[0135] The style file receiving module 502 is used to receive the style file returned by the cloud configuration platform; the style file is generated by combining one or more components, and the components match the graphics in the picture containing the display style;

[0136] The style display module 503 is used to parse the style file to display the page.

[0137] See also Figure 6 Based on the above embodiments, the embodiment of the present invention provides a display style generation system 600, including a cloud configuration platform 400 and a client 500; wherein,

[0138] The cloud configuration platform 400 is used to obtain a picture containing a display style; identify a graphic in the picture to determine a component matching the graphic from a component library; and combine the components to generate a style file corresponding to the display style;

[0139] The client 500 is used to send a page generation request to the cloud configuration platform, and in response to the page generation request, obtain a style file of the cloud configuration platform; and parse the style file to display the page.

[0140] Figure 7 An exemplary system architecture 700 is shown to which the method for generating a presentation style or the apparatus for generating a presentation style according to the embodiments of the present invention can be applied.

[0141] like Figure 7 As shown, system architecture 700 may include terminal devices 701, 702, 703, network 704 and server 705. Network 704 is used to provide a medium for communication links between terminal devices 701, 702, 703 and server 705. Network 704 may include various connection types, such as wired, wireless communication links or optical fiber cables, etc.

[0142] Users can use terminal devices 701, 702, and 703 to interact with server 705 through network 704 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 701, 702, and 703, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, etc.

[0143] The terminal devices 701 , 702 , and 703 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop computers, and desktop computers.

[0144] The server 705 may be a server that provides various services, such as a background management server that provides support for shopping websites browsed by users using the terminal devices 701, 702, and 703. The background management server may analyze and process the received display style acquisition request and other data, and feed back the processing results (such as style files) to the terminal device.

[0145] It should be noted that the method for generating a display style provided in the embodiment of the present invention is generally executed by the server 705 , and accordingly, the device for generating a display style is generally arranged in the server 705 .

[0146] It should be understood that Figure 7 The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be provided according to implementation requirements.

[0147] Reference below Figure 8 , which shows a schematic diagram of the structure of a computer system 800 of a terminal device suitable for implementing an embodiment of the present invention. Figure 8 The terminal device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.

[0148] like Figure 8 As shown, the computer system 800 includes a central processing unit (CPU) 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 part 808 into a random access memory (RAM) 803. In the RAM 803, various programs and data required for the operation of the system 800 are also stored. The CPU 801, the ROM 802, and the RAM 803 are connected to each other via a bus 804. An input / output (I / O) interface 805 is also connected to the bus 804.

[0149] The following components are connected to the I / O interface 805: an input section 806 including a keyboard, a mouse, etc.; an output section 807 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 808 including a hard disk, etc.; and a communication section 809 including a network interface card such as a LAN card, a modem, etc. The communication section 809 performs communication processing via a network such as the Internet. A drive 810 is also connected to the I / O interface 805 as needed. A removable medium 811, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 810 as needed, so that a computer program read therefrom is installed into the storage section 808 as needed.

[0150] In particular, according to the embodiments disclosed in the present invention, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present invention include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication part 809, and / or installed from the removable medium 811. When the computer program is executed by the central processing unit (CPU) 801, the above-mentioned functions defined in the system of the present invention are executed.

[0151] It should be noted that the computer-readable medium shown in the present invention may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-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 of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present invention, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, device or device. In the present invention, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries a computer-readable program code. This propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer-readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

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

[0153] The modules involved in the embodiments of the present invention may be implemented by software or hardware. The modules described may also be provided in a processor. For example, they may be described as follows: a processor includes an image acquisition module, an image recognition module, a style file generation module, and a style file providing module. The names of these modules do not, in some cases, constitute limitations on the modules themselves. For example, the image acquisition module may also be described as a "module for acquiring images containing display styles."

[0154] As another aspect, the present invention also provides a computer-readable medium, which may be included in the device described in the above embodiment; or may exist independently without being assembled into the device. The above computer-readable medium carries one or more programs, and when the above one or more programs are executed by a device, the device includes: obtaining a picture containing a display style; identifying a graphic in the picture to determine a component matching the graphic from a component library; combining the components to generate a style file corresponding to the display style; and providing the style file to the client in response to a page generation request sent by the client, so that the client displays the page according to the style file.

[0155] According to the technical solution of the embodiment of the present invention, by identifying the graphics in the style image, one or more components matching the graphics are determined, and then the style file is generated by combining the components, thereby simplifying the style generation process; and the method for generating the display style can be applied to both IOS clients and Android clients, and is universal; in addition, through the form of components, the style code is reused, the repeated development of the style code is avoided, and the development efficiency of the style code is improved.

[0156] The above specific implementations do not constitute a limitation on the protection scope of the present invention. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may occur depending on design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A method for generating a display style, characterized in that: include: Get the image containing the display style; Identifying the graphics in the image to determine a component matching the graphics from a component library, including: obtaining one or more of the following graphic information: a color value of the graphic, a font in the graphic, a graphic size, a width and a height of the graphic, and a relative position of the graphic; determining a component matching the graphic from a component library according to the graphic information; wherein each component corresponds to a style code; Combining the components to generate a style file corresponding to the display style; In response to a page generation request sent by a client, the style file is provided to the client, so that the client displays the page according to the style file.

2. The method for generating a display style according to claim 1, characterized in that: The combining the components to generate a style file corresponding to the display style includes: According to the relative positions of the graphics, the components matching all the graphics are stored in temporary variables in order; The temporary variables are compiled into a binary file and encrypted to generate the style file.

3. The method for generating a display style according to claim 1, characterized in that: Also includes: Before identifying the graphics in the picture, determine whether there is a business scenario corresponding to the display style in the cloud configuration platform: If it does not exist, create a corresponding business scenario for the display style; If so, continue to determine whether there is an application version number corresponding to the display style in the business scenario, so as to obtain the application version number corresponding to the display style if the version number does not exist.

4. The method for generating a display style according to claim 3, characterized in that: The creating a corresponding business scenario for the display style includes: Generate a business number corresponding to the business scenario; Configure one or more of the following information corresponding to the business number: business scenario name, application system to which the business scenario belongs, and application module to which the business scenario belongs.

5. The method for generating a display style according to claim 4, characterized in that: Also includes: The style file is configured with one or more of the following information to determine whether to provide the style file to the client according to the configured information: user whitelist, AB experiment range, unavailable operating system version, and unavailable terminal type.

6. The method for generating a display style according to claim 5, characterized in that: The step of providing the style file to the client in response to the page generation request sent by the client, so that the client displays the page according to the style file, includes: Receiving an HTTP request sent by the client, wherein the HTTP request indicates a service number and an application version number; Query the style file corresponding to the business number and the application version number; The style file is sent to the client, so that the client parses the style file and renders the business data for display.

7. A method for generating a display style, characterized in that: include: Sending a page generation request to a cloud configuration platform storing a style file corresponding to the display style, wherein the page generation request indicates the style file to be obtained; Receive the style file returned by the cloud configuration platform; the style file is generated by combining one or more components, and the components match the graphics in the picture containing the display style; wherein the components are obtained by the following steps: obtaining one or more of the following graphic information: the color value of the graphic, the font in the graphic, the size of the graphic, the width and height of the graphic, and the relative position of the graphic; determining the component matching the graphic from the component library according to the graphic information; wherein each component corresponds to a style code; Parse the style file to display the page.

8. A cloud configuration platform for generating display styles, characterized in that: include: Image acquisition module, image recognition module, style file generation module, style file providing module; wherein, The picture acquisition module is used to acquire pictures containing display styles; The image recognition module is used to recognize the graphics in the image to determine the components matching the graphics from the component library, including: obtaining one or more of the following graphic information: the color value of the graphic, the font in the graphic, the graphic size, the width and height of the graphic, and the relative position of the graphic; determining the components matching the graphic from the component library according to the graphic information; wherein each component corresponds to a style code; The style file generating module is used to combine the components to generate a style file corresponding to the display style; The style file providing module is used to provide the style file to the client in response to a page generation request sent by the client, so that the client displays the page according to the style file.

9. A client for generating a display style, characterized in that: include: Request sending module, style file receiving module, style display module; among them, The request sending module is used to send a page generation request to a cloud configuration platform storing a style file corresponding to a display style, wherein the page generation request indicates the style file to be obtained; The style file receiving module is used to receive the style file returned by the cloud configuration platform; the style file is generated by combining one or more components, and the components match the graphics in the picture containing the display style; wherein the components are obtained by the following steps: obtaining one or more of the following graphic information: the color value of the graphic, the font in the graphic, the size of the graphic, the width and height of the graphic, and the relative position of the graphic; determining the component matching the graphic from the component library according to the graphic information; wherein each component corresponds to a style code; The style display module is used to parse the style file to display the page.

10. A display style generation system, characterized in that: Including cloud configuration platform and client; The cloud configuration platform is used to obtain a picture containing a display style; identify a graphic in the picture to determine a component matching the graphic from a component library, including: obtaining one or more of the following graphic information: a color value of the graphic, a font in the graphic, a graphic size, a width and a height of the graphic, and a relative position of the graphic; determining a component matching the graphic from a component library according to the graphic information; wherein each component corresponds to a style code; and combining the components to generate a style file corresponding to the display style; The client is used to send a page generation request to the cloud configuration platform, and in response to the page generation request, obtain a style file of the cloud configuration platform; and parse the style file to display the page.

11. An electronic device for generating a display style, characterized in that: include: one or more processors; a 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 method according to any one of claims 1 to 6.

12. A computer readable medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 6 is implemented.

Citation Information

Patent Citations

  • Page and page configuration file generation method, device, terminal device and medium

    CN109460276A

  • Code generation method of application page and related equipment

    CN111324352A