Method and device for generating H5 page

Abstract

The invention provides an H5 page generation method and device, and the method comprises the steps: obtaining an initial design draft comprising a target layer; a marked design draft is obtained, the marked design draft is obtained by marking the target layer according to page component requirements, and the page component requirements are used for indicating configuration information of the target H5 page; analyzing the marked design draft through a layer analysis plug-in to obtain a domain specific language (DSL) file; and generating the target H5 page based on component template data matched with a domain specific language (DSL) file. According to the embodiment of the invention, the design manuscript is marked on the basis of page component requirements, the marked design manuscript is converted into the DSL file through the layer analysis plug-in, and the required H5 page is generated on the basis of the DSL file. Therefore, the embodiment of the invention provides a method for realizing automatic generation of the H5 page based on automatic layer analysis, and the development efficiency of the H5 page is improved.

Description

Technical Field

[0001] The present application relates to the technical field of web page development, and in particular to a method and device for generating an H5 page. Background Art

[0002] H5 pages refer to web pages developed based on HyperText Markup Language 5 (HTML5) technology. H5 pages are widely used due to their advantages such as convenient editing and maintenance, applicability to multiple devices, and easy dissemination.

[0003] The development cycle of an H5 page from conception to development is very short, which requires developers to develop a new H5 page in a short period of time. However, in the existing H5 page development process, the design department cuts the materials in the design draft and gives them to the operation department. The operation department uses the materials to perform relevant configuration in the active template editor. Errors may exist in the cross-departmental collaboration process and the configuration process, resulting in low efficiency of the existing H5 page development process. Summary of the invention

[0004] In view of this, the present application provides a method and device for generating an H5 page to improve the development efficiency of the H5 page.

[0005] The technical solution is as follows:

[0006] In a first aspect, an embodiment of the present application provides a method for generating an H5 page, the method comprising:

[0007] Obtaining an initial design draft, wherein the initial design draft includes a target layer;

[0008] Obtaining a marked design draft, wherein the marked design draft is obtained by marking the target layer according to the page component requirements, and the page component requirements are used to indicate the configuration information of the target H5 page;

[0009] Parsing the marked design draft through a layer parsing plug-in to obtain a domain specific language DSL file;

[0010] The target H5 page is generated based on component template data matching the domain specific language DSL file.

[0011] In an optional implementation, obtaining the marked design draft includes:

[0012] Determine the marking information according to the page component requirement, wherein the marking information includes component identification information and component configuration information of the target layer;

[0013] The layer name of the target layer is marked based on the marking information to obtain the marked design draft.

[0014] In an optional implementation, the layer parsing plug-in parses the marked design draft to obtain a domain specific language DSL file, including:

[0015] Obtaining a layer set corresponding to the marked design draft, wherein the layer set includes: marked layers and unmarked layers;

[0016] Merging unmarked layers in the layer set and converting each layer in the layer set into a smart object layer;

[0017] Unlocking the smart object layer in the layer set to obtain a preprocessed layer set;

[0018] The preprocessed layer set is parsed to obtain the domain specific language DSL file, where the domain specific language DSL file is used to indicate layer information of each layer in the preprocessed layer set.

[0019] In an optional implementation, parsing the preprocessed layer set to obtain the domain specific language DSL file includes:

[0020] Determine a layer to be parsed, wherein the layer to be parsed is obtained by traversing each layer in the preprocessed layer set;

[0021] In response to the layer to be parsed being a smart object layer, opening the layer to be parsed in a newly created window;

[0022] Obtaining layer parameter information of the layer to be parsed, wherein the layer parameter information includes a layer name and a layer color;

[0023] In response to the layer to be parsed being a marked layer, obtaining marking information of the layer to be parsed based on the layer name, and cropping the layer to be parsed based on layer size information of the layer to be parsed and component configuration information indicated by the marking information of the layer to be parsed, so as to obtain a target component layer;

[0024] The domain specific language DSL file is constructed based on the layer parameter information, the tag information of the layer to be parsed, and the target component layer.

[0025] In an optional implementation, before parsing the preprocessed layer set, the method further includes:

[0026] Backing up the marked design draft as the initial marked design draft;

[0027] In response to an exception in completing the construction of the domain specific language DSL file or parsing the preprocessed layer set, a design draft is rolled back based on the initial marked design draft.

[0028] In an optional implementation, generating the target H5 page based on component template data matching the domain specific language DSL file includes:

[0029] Determine component identification information of a target layer based on the domain specific language DSL file;

[0030] Matching a target component template based on component identification information of the target layer;

[0031] Acquire target component template data matching the configuration requirement of the target component template from the domain specific language DSL file, wherein the target component template data includes the target component layer;

[0032] Assembling the target template component based on the target component template data to obtain target component structured data;

[0033] The target H5 page is generated based on the target component structured data.

[0034] In a second aspect, an embodiment of the present application provides a device for generating an H5 page, the device comprising:

[0035] A design draft acquisition module, used to acquire an initial design draft, wherein the initial design draft includes a target layer;

[0036] The design draft acquisition module is further used to acquire a marked design draft, wherein the marked design draft is obtained by marking the target layer according to the page component requirements, and the page component requirements are used to indicate the configuration information of the target H5 page;

[0037] A plug-in parsing module, used for parsing the marked design draft through a layer parsing plug-in to obtain a domain specific language DSL file;

[0038] The page generation module is used to generate the target H5 page based on the component template data matching the domain specific language DSL file.

[0039] In an optional implementation, the design draft acquisition module includes:

[0040] A tag determination submodule, used to determine tag information according to the page component requirements, wherein the tag information includes component identification information and component configuration information of the target layer;

[0041] The layer marking submodule is used to mark the layer name of the target layer based on the marking information to obtain the marked design draft.

[0042] In an optional implementation, the plug-in parsing module includes:

[0043] A layer set acquisition submodule is used to acquire a layer set corresponding to the marked design draft, wherein the layer set includes: marked layers and unmarked layers;

[0044] A layer merging submodule, used for merging unmarked layers in the layer set and converting each layer in the layer set into a smart object layer;

[0045] A layer unlocking submodule, used for unlocking the smart object layer in the layer set to obtain a preprocessed layer set;

[0046] The layer parsing submodule is used to parse the preprocessed layer set to obtain the domain specific language DSL file, where the domain specific language DSL file is used to indicate the layer information of each layer in the preprocessed layer set.

[0047] In an optional implementation, the layer parsing submodule is specifically used to:

[0048] Determine a layer to be parsed, wherein the layer to be parsed is obtained by traversing each layer in the preprocessed layer set;

[0049] In response to the layer to be parsed being a smart object layer, opening the layer to be parsed in a newly created window;

[0050] Obtaining layer parameter information of the layer to be parsed, wherein the layer parameter information includes a layer name and a layer color;

[0051] In response to the layer to be parsed being a marked layer, obtaining marking information of the layer to be parsed based on the layer name, and cropping the layer to be parsed based on layer size information of the layer to be parsed and component configuration information indicated by the marking information of the layer to be parsed, so as to obtain a target component layer;

[0052] The domain specific language DSL file is constructed based on the layer parameter information, the tag information of the layer to be parsed, and the target component layer.

[0053] The above technical solution has the following beneficial effects:

[0054] The embodiment of the present application provides a method for generating an H5 page. When executing the method, an initial design draft including a target layer is obtained; then a marked design draft is obtained, wherein the marked design draft is obtained by marking the target layer according to the page component requirements, and the page component requirements are used to indicate the configuration information of the target H5 page; the marked design draft is parsed by a layer parsing plug-in to obtain a domain-specific language DSL file; and the target H5 page is generated based on component template data that matches the domain-specific language DSL file. The embodiment of the present application marks the design draft based on the page component requirements, and converts the marked design draft into a DSL file through a layer parsing plug-in. The DSL file can indicate the layer information in the design draft, thereby generating the required H5 page based on the DSL file. It can be seen that the embodiment of the present application provides a method for realizing automatic generation of H5 pages based on automatic layer parsing, thereby improving the development efficiency of H5 pages.

[0055] The embodiment of the present application also provides a device corresponding to the above method, which has the same beneficial effects as the above method. BRIEF DESCRIPTION OF THE DRAWINGS

[0056] In order to more clearly illustrate the technical solutions in this embodiment or the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described 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 paying creative work.

[0057] Figure 1 A schematic diagram of a flow chart of a method for generating an H5 page provided in an embodiment of the present application;

[0058] Figure 2 A flowchart of a method for obtaining a DSL file provided in an embodiment of the present application;

[0059] Figure 3 A schematic diagram of a flow chart of another method for generating an H5 page provided in an embodiment of the present application;

[0060] Figure 4 A schematic diagram of a flow chart of another method for generating an H5 page provided in an embodiment of the present application;

[0061] Figure 5 A schematic diagram of the structure of an H5 page generation device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0062] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0063] In order to improve the development efficiency of H5 pages, this application embodiment provides a method for generating H5 pages. Please refer to Figure 1 The method is shown as a flow chart, and the method may include:

[0064] Step S100: obtaining an initial design draft, where the initial design draft includes a target layer.

[0065] Specifically, the initial design draft can be a user interface (UI) design draft created based on Photoshop software, and the target layer is a layer with a marking requirement in the initial design draft, wherein the marking requirement corresponds to the material requirement in the H5 page. For example, there is a material requirement for a button in the H5 page, and layer 1 in the initial design has a matching button element, then layer 1 can be considered as a layer with a marking requirement.

[0066] It is understood that the initial design draft should include at least one layer.

[0067] Step S200: Obtain a marked design draft, where the marked design draft is obtained by marking the target layer according to the page component requirements, and the page component requirements are used to indicate the configuration information of the target H5 page.

[0068] Specifically, the target layer is marked according to the page component requirements, and the page component requirements can indicate the configuration information of the target H5 page. Among them, marking refers to assembling the marking information corresponding to the page component requirements into a string.

[0069] Optionally, the above step S200 specifically includes the following steps S201 to S202:

[0070] Step S201: Determine marking information according to page component requirements, where the marking information includes component identification information and component configuration information of the target layer.

[0071] The component identification information is used to uniquely identify the component, and the component configuration information is used to indicate the relevant configuration information of the component applied to the target H5 page. Exemplarily, it is presented in the form of a background image in the relevant component of the target H5 page.

[0072] Step S202: Mark the layer name of the target layer based on the marking information to obtain a marked design draft.

[0073] Specifically, the target layer can be marked by marking the name of the target layer. For example, the name of the unmarked layer is "Layer 1", and the name of the marked "Layer 1" is "^act≈share button≈button image≈2015≈image≈buttonImage≈act$^

Layer 1

[0074] Step S300: Parse the marked design draft through the layer parsing plug-in to obtain a domain specific language DSL file.

[0075] Specifically, the layer parsing plug-in provided by the implementation of this application can parse the design draft and convert the design draft into a domain-specific language (DSL) file. The layer parsing plug-in can parse the layer information of the design draft into a custom data structure, which is a DSL file. A DSL file is a programming language or scripting language that focuses on a specific field or task. DSL can provide a custom data structure to indicate the layer information of each layer in the marked design draft. Among them, the layer parsing plug-in can be developed by technicians based on parsing requirements.

[0076] In an alternative implementation, see Figure 2 A flow chart of a method for obtaining a DSL file is shown, the method comprising steps S201 to S204:

[0077] Step S201: obtaining a layer set corresponding to the marked design draft, the layer set including: marked layers and unmarked layers.

[0078] Among them, the layer set corresponding to the marked design draft may include multiple layers, some of these layers may be related to the material content required for the H5 page to be generated subsequently, and these layers belong to the marked layers; other layers may be irrelevant to the material content required for the H5 page to be generated subsequently, and these layers belong to the unmarked layers.

[0079] Step S202: Merge the unmarked layers in the layer set, and convert each layer in the layer set into a smart object layer.

[0080] Among them, since the unmarked layers are irrelevant to the material content required for the H5 page to be generated later, these unmarked layers are merged into one layer, and all layers in the layer set are converted to smart object layers. It can be understood that smart object layers refer to layers in Photoshop that contain image data in raster or vector images. Smart objects will retain the source content of the image and all its original characteristics and perform non-destructive transformations. Layers can be scaled, rotated, beveled, distorted, perspective transformed, or deformed without losing the original image data or reducing the quality, because the transformation does not affect the original data. Converting the layer merged by the unmarked layers into a smart object can avoid affecting other layers when parsing the layer, and when the layer needs to be operated later, the smart object layer is a separate layer. The smart object layer can be opened as a separate file to operate and obtain layer information.

[0081] Step S203: Unlock the smart object layer in the layer set to obtain a preprocessed layer set.

[0082] In order to parse and edit the layers, all smart object layers in the layer set need to be unlocked. It should be noted that the smart object layers in the layer set may have been unlocked originally, so it is not necessary to perform this step and directly obtain the pre-processed layer set.

[0083] Step S204: Parse the preprocessed layer set to obtain a domain specific language DSL file, where the domain specific language DSL file is used to indicate layer information of each layer in the preprocessed layer set.

[0084] The preprocessed layer set is parsed using a layer parsing plug-in to obtain a domain specific language DSL file that can indicate layer information of each layer in the layer set.

[0085] Specifically, in an optional implementation, the above step S304 may specifically include: determining a layer to be parsed, where the layer to be parsed is obtained by traversing each layer in a preprocessed layer set; in response to the layer to be parsed being a smart object layer, opening the layer to be parsed in a newly created window; obtaining layer parameter information of the layer to be parsed, where the layer parameter information includes a layer name and a layer color; in response to the layer to be parsed being a marked layer, obtaining marking information of the layer to be parsed based on the layer name, and cropping the layer to be parsed based on the layer size information of the layer to be parsed and the component configuration information indicated by the marking information of the layer to be parsed to obtain a target component layer; and constructing a domain specific language DSL file based on the layer parameter information, the marking information of the layer to be parsed, and the target component layer.

[0086] Specifically, poll and traverse each layer in the preprocessed layer set, and parse each layer. First, determine the layer to be parsed corresponding to the current round. Since the layer to be parsed is a smart object layer, open the layer to be parsed in a newly created window and perform subsequent parsing work, which will not affect other layers.

[0087] Then, the layer parameter information of the layer to be parsed is obtained, the layer parameter information includes the layer name and the layer color, wherein the layer parameter information may also include the layer size information;

[0088] Next, for the case where the layer to be parsed is a marked layer, since the marking of the layer is specifically to mark the marking information on the layer name, the marking information of the layer to be parsed can be obtained based on the layer name, and the layer to be parsed can be cropped based on the layer size information of the layer to be parsed and the component configuration information indicated by the marking information of the layer to be parsed to obtain the target component layer, wherein the layer size information of the layer to be parsed includes the height information, width information of the layer to be parsed and the boundary information of the layer to be parsed in the current canvas. If the component configuration information indicated by the marking information of the layer to be parsed is to convert this layer into a picture, and subsequently use the picture as the background picture of the button (using the above example), at this time, the layer to be parsed can be cropped based on the height information, width information of the layer to be parsed and the boundary information of the layer to be parsed in the current canvas to obtain the target component layer (i.e., the background picture of the button).

[0089] Finally, a domain-specific language DSL file is constructed based on the layer parameter information including layer name, layer color, tag information of the layer to be parsed, and the target component layer obtained by cutting. Therefore, the DSL file provides a data storage structure that can fully contain the content of each layer, providing rich and detailed information for the subsequent generation of H5 pages.

[0090] In an optional implementation, before parsing the preprocessed layer set, the embodiment of the present application can also back up the marked design draft as an initial marked design draft; in response to an exception in completing the construction of the domain-specific language DSL file or parsing the preprocessed layer set, the design draft is rolled back based on the initial marked design draft.

[0091] It is understandable that in the embodiment of the present application, before parsing the layer set, the status is recorded first, and the initial markup design draft is backed up. Later, after the parsing is completed or when an abnormal situation occurs in the parsing, it can be traced back to the initial state to avoid the loss of the original manuscript.

[0092] Step S400: Generate a target H5 page based on component template data matching a domain specific language DSL file.

[0093] Specifically, the domain-specific language DSL file can indicate the layer information of each layer in the design draft. The H5 page can be composed of various components. Therefore, the corresponding component template data can be matched based on the component identification information of the layer in the DSL file, thereby generating the target H5 page.

[0094] In an alternative implementation, see Figure 3 A schematic flow chart of another method for generating an H5 page is shown, and the method may specifically include the following steps S301 to S305:

[0095] Step S301: Determine component identification information of a target layer based on a domain specific language DSL file.

[0096] Among them, the target layer is the layer with marking requirements in the initial design draft, that is, the target layer has the material information required in the H5 page. The marking information of the target layer is stored in the DSL file, and the marking information includes component identification information. The component identification information is used to uniquely identify the component corresponding to the target layer.

[0097] Step S302: Match the target component template based on the component identification information of the target layer.

[0098] Specifically, the component identification information based on the target layer is matched with the corresponding target component template in the H5 page. It can be understood that the H5 page template is composed of various component templates, and different component templates are set with different identification information. The corresponding component template can be matched from the H5 page template based on the component identification information corresponding to the target layer, that is, the target component template. The target component template includes the functional code framework of the component. For example, the button component template includes the code framework corresponding to the function triggered by the button component, and the button component template also needs to further improve other contents in the component, such as the color and background image corresponding to the button component, so as to execute the next step.

[0099] Step S303: acquiring target component template data matching the configuration requirements of the target component template from the domain specific language DSL file, wherein the target component template data includes a target component layer.

[0100] Specifically, the configuration requirements of the target component template refer to how to complete the content in the template of the target component, for example, the color and background image corresponding to the target component template. If the DSL file contains the identification information corresponding to the target component template, it means that the DSL file also stores the target component template data matching the configuration requirements of the target component template, wherein the target component template data includes the target component layer. Optionally, the target component template data may also include other parameters such as style and color.

[0101] Step S304: Assemble the target template component based on the target component template data to obtain target component structured data.

[0102] After obtaining the target component template data corresponding to the target template component, the target template component can be further improved based on the target component template data, and the required materials or elements can be integrated and assembled into the target template component to obtain the target component structured data. Optionally, the target component structured data can include Schema data.

[0103] It should be noted that Schema data is a data document written in Extensible Markup Language (XML), which can describe and organize the structure and relationship of data. It can contain database objects such as tables, views, indexes, sequences, synonyms, procedures, functions and packages.

[0104] Step S305: Generate a target H5 page based on the target component structured data.

[0105] Among them, the target component structured data can be seamlessly integrated into the program, and the program can parse these structured data into page content that users can directly operate on the mobile terminal, that is, the target H5 page. Therefore, by matching, extracting and assembling the parsed data of the design draft, a page that meets the operation requirements of mobile terminal users is automatically generated, allowing users to operate conveniently on mobile devices.

[0106] Combine the following Figure 4 A flow chart of another method for generating an H5 page is shown, wherein:

[0107] First, the design department designs a UI interface in Photoshop, which corresponds to the H5 page to be generated. Secondly, each layer in the design draft is marked by modifying the layer name to mark the corresponding component information. Thirdly, based on the analysis of the layer parsing plug-in, the DSL file corresponding to the design draft is obtained, and the DSL file is uploaded to a unified management platform. Then, the operation department can obtain the corresponding DSL file from the management platform and select the component template of the required H5 page. Finally, based on the matching and integration of the DSL file and the component template, the required H5 page is generated.

[0108] In summary, the present application embodiment provides a method for generating an H5 page, which has the following advantages:

[0109] First, it accelerates the speed of launching activities. The operation department can quickly build various activity templates and generate corresponding H5 pages for rapid launch. Not only can new activities be launched faster, but also market changes can be responded to more flexibly, achieving faster marketing response speed.

[0110] Second, reduce the activity configuration error rate. Through precise matching of plug-ins, automated data extraction and standardized processes, configuration errors caused by human factors are greatly reduced. This means higher configuration accuracy and consistency, reduced risk of errors, and improved activity stability and reliability.

[0111] Third, improve the standardization of activity configuration. The optimization of this process also helps to standardize the activity configuration process. By formulating standardized configuration specifications, we can ensure that each activity is configured according to best practices and specific standards. This standardization can improve the efficiency of team collaboration and reduce the time and effort required for subsequent processing and maintenance of activities.

[0112] Corresponding to the above method, the present application embodiment also provides a device for generating an H5 page, see Figure 5 , shows a schematic diagram of the structure of the device, the device may include:

[0113] A design draft acquisition module 501 is used to acquire an initial design draft, where the initial design draft includes a target layer;

[0114] The design draft acquisition module 501 is also used to acquire the marked design draft, where the marked design draft is obtained by marking the target layer according to the page component requirements, and the page component requirements are used to indicate the configuration information of the target H5 page;

[0115] A plug-in parsing module 502 is used to parse the marked design draft through a layer parsing plug-in to obtain a domain specific language DSL file;

[0116] The page generation module 503 is used to generate a target H5 page based on the component template data matching the domain specific language DSL file.

[0117] In an optional implementation, the design draft acquisition module 501 includes:

[0118] The tag determination submodule is used to determine the tag information according to the page component requirements, and the tag information includes the component identification information and component configuration information of the target layer;

[0119] The layer marking submodule is used to mark the layer name of the target layer based on the marking information to obtain a marked design draft.

[0120] In an optional implementation, the plug-in parsing module 502 includes:

[0121] The layer set acquisition submodule is used to acquire the layer set corresponding to the marked design draft, and the layer set includes: marked layers and unmarked layers;

[0122] The layer merging submodule is used to merge the unmarked layers in the layer set and convert each layer in the layer set into a smart object layer;

[0123] The layer unlocking submodule is used to unlock the smart object layer in the layer set to obtain a preprocessed layer set;

[0124] The layer parsing submodule is used to parse the preprocessed layer set to obtain a domain specific language DSL file, where the domain specific language DSL file is used to indicate the layer information of each layer in the preprocessed layer set.

[0125] In an optional implementation, the layer parsing submodule is specifically used to:

[0126] Determine the layer to be parsed, and the layer to be parsed is obtained by traversing each layer in the preprocessed layer set;

[0127] In response to the layer to be parsed being a smart object layer, opening the layer to be parsed in a newly created window;

[0128] Get the layer parameter information of the layer to be parsed, which includes the layer name and layer color;

[0129] In response to the layer to be parsed being a marked layer, obtaining marking information of the layer to be parsed based on the layer name, and cropping the layer to be parsed based on layer size information of the layer to be parsed and component configuration information indicated by the marking information of the layer to be parsed, so as to obtain a target component layer;

[0130] A domain-specific language DSL file is constructed based on the layer parameter information, the tag information of the layer to be parsed, and the target component layer.

[0131] In an optional implementation, the device further includes:

[0132] A backup module, used to back up the marked design draft as the initial marked design draft;

[0133] The rollback module is used to roll back the design draft based on the initial marked design draft in response to an exception in completing the construction of the domain specific language DSL file or parsing the preprocessed layer set.

[0134] In an optional implementation, the page generation module 503 includes:

[0135] An information determination submodule, used to determine component identification information of a target layer based on a domain specific language DSL file;

[0136] The template matching submodule is used to match the target component template based on the component identification information of the target layer;

[0137] The template data acquisition submodule is used to acquire target component template data matching the configuration requirements of the target component template from the domain specific language DSL file, where the target component template data includes a target component layer;

[0138] A component data assembly submodule, used for assembling a target template component based on the target component template data to obtain target component structured data;

[0139] The page generation submodule is used to generate the target H5 page based on the target component structured data.

[0140] It should be noted that the steps executed by each module in the H5 page generation device provided in the embodiment of the present application and the related technical features correspond to the method provided in the embodiment of the application. The description of the device part can be found in the embodiment of the aforementioned method part and will not be repeated here.

[0141] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0142] Those skilled in the art can understand that the flowchart shown in the figure is only an example in which the embodiments of the present application can be implemented, and the scope of application of the embodiments of the present application is not limited by any aspect of the flowchart.

[0143] In the several embodiments provided in the present application, it should be understood that the disclosed methods, devices and equipment can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some communication interfaces, and the indirect coupling or communication connection of the device or unit can be electrical, mechanical or other forms.

[0144] The units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. In addition, each functional unit in each embodiment of the present application may be integrated into a processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0145] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art or the part of the technical solution, can be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the methods described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0146] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present application. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to the embodiments shown herein, but will conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for generating an H5 page, characterized in that: The method comprises: Obtaining an initial design draft, wherein the initial design draft includes a target layer; Obtaining a marked design draft, wherein the marked design draft is obtained by marking the target layer according to the page component requirements, and the page component requirements are used to indicate the configuration information of the target H5 page; Parsing the marked design draft through a layer parsing plug-in to obtain a domain specific language DSL file; The target H5 page is generated based on component template data matching the domain specific language DSL file.

2. The method according to claim 1, characterized in that The obtained marked design draft includes: Determine the marking information according to the page component requirement, wherein the marking information includes component identification information and component configuration information of the target layer; The layer name of the target layer is marked based on the marking information to obtain the marked design draft.

3. The method according to claim 2, characterized in that The layer parsing plug-in parses the marked design draft to obtain a domain specific language DSL file, including: Obtaining a layer set corresponding to the marked design draft, wherein the layer set includes: marked layers and unmarked layers; Merging unmarked layers in the layer set and converting each layer in the layer set into a smart object layer; Unlocking the smart object layer in the layer set to obtain a preprocessed layer set; The preprocessed layer set is parsed to obtain the domain specific language DSL file, where the domain specific language DSL file is used to indicate layer information of each layer in the preprocessed layer set.

4. The method according to claim 3, characterized in that The step of parsing the preprocessed layer set to obtain the domain specific language DSL file includes: Determine a layer to be parsed, wherein the layer to be parsed is obtained by traversing each layer in the preprocessed layer set; In response to the layer to be parsed being a smart object layer, opening the layer to be parsed in a newly created window; Obtaining layer parameter information of the layer to be parsed, wherein the layer parameter information includes a layer name and a layer color; In response to the layer to be parsed being a marked layer, obtaining marking information of the layer to be parsed based on the layer name, and cropping the layer to be parsed based on layer size information of the layer to be parsed and component configuration information indicated by the marking information of the layer to be parsed, so as to obtain a target component layer; The domain specific language DSL file is constructed based on the layer parameter information, the tag information of the layer to be parsed, and the target component layer.

5. The method according to claim 3 or 4, characterized in that: Before parsing the preprocessed layer set, the method further includes: Backing up the marked design draft as the initial marked design draft; In response to an exception in completing the construction of the domain specific language DSL file or parsing the preprocessed layer set, a design draft is rolled back based on the initial marked design draft.

6. The method according to claim 3 or 4, characterized in that: The generating the target H5 page based on the component template data matching the domain specific language DSL file includes: Determine component identification information of a target layer based on the domain specific language DSL file; Matching a target component template based on component identification information of the target layer; Acquire target component template data matching the configuration requirement of the target component template from the domain specific language DSL file, wherein the target component template data includes the target component layer; Assembling the target template component based on the target component template data to obtain target component structured data; The target H5 page is generated based on the target component structured data.

7. A device for generating an H5 page, characterized in that: The device comprises: A design draft acquisition module, used to acquire an initial design draft, wherein the initial design draft includes a target layer; The design draft acquisition module is further used to acquire a marked design draft, wherein the marked design draft is obtained by marking the target layer according to the page component requirements, and the page component requirements are used to indicate the configuration information of the target H5 page; A plug-in parsing module, used for parsing the marked design draft through a layer parsing plug-in to obtain a domain specific language DSL file; The page generation module is used to generate the target H5 page based on the component template data matching the domain specific language DSL file.

8. The device according to claim 7, characterized in that The design draft acquisition module includes: A tag determination submodule, used to determine tag information according to the page component requirements, wherein the tag information includes component identification information and component configuration information of the target layer; The layer marking submodule is used to mark the layer name of the target layer based on the marking information to obtain the marked design draft.

9. The device according to claim 8, characterized in that The plug-in parsing module includes: A layer set acquisition submodule is used to acquire a layer set corresponding to the marked design draft, wherein the layer set includes: marked layers and unmarked layers; A layer merging submodule, used for merging unmarked layers in the layer set and converting each layer in the layer set into a smart object layer; A layer unlocking submodule, used for unlocking the smart object layer in the layer set to obtain a preprocessed layer set; The layer parsing submodule is used to parse the preprocessed layer set to obtain the domain specific language DSL file, where the domain specific language DSL file is used to indicate the layer information of each layer in the preprocessed layer set.

10. The device according to claim 9, characterized in that The layer parsing submodule is specifically used for: Determine a layer to be parsed, wherein the layer to be parsed is obtained by traversing each layer in the preprocessed layer set; In response to the layer to be parsed being a smart object layer, opening the layer to be parsed in a newly created window; Obtaining layer parameter information of the layer to be parsed, wherein the layer parameter information includes a layer name and a layer color; In response to the layer to be parsed being a marked layer, obtaining marking information of the layer to be parsed based on the layer name, and cropping the layer to be parsed based on layer size information of the layer to be parsed and component configuration information indicated by the marking information of the layer to be parsed, so as to obtain a target component layer; The domain specific language DSL file is constructed based on the layer parameter information, the tag information of the layer to be parsed, and the target component layer.

Images