CN108345456A - Page code generation method, device, computer equipment and storage medium - Google Patents

Page code generation method, device, computer equipment and storage medium Download PDF

Info

Publication number
CN108345456A
CN108345456A CN201810187899.0A CN201810187899A CN108345456A CN 108345456 A CN108345456 A CN 108345456A CN 201810187899 A CN201810187899 A CN 201810187899A CN 108345456 A CN108345456 A CN 108345456A
Authority
CN
China
Prior art keywords
page
code
page elements
elements
design
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201810187899.0A
Other languages
Chinese (zh)
Inventor
段然
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ping An Puhui Enterprise Management Co Ltd
Original Assignee
Ping An Puhui Enterprise Management Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Ping An Puhui Enterprise Management Co Ltd filed Critical Ping An Puhui Enterprise Management Co Ltd
Priority to CN201810187899.0A priority Critical patent/CN108345456A/en
Publication of CN108345456A publication Critical patent/CN108345456A/en
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop

Abstract

This application involves a kind of page code generation method, device, computer equipment and storage mediums.Method includes：It receives the design to target pages to ask, Exhibition Design window is asked according to design, design window includes page editing area and multiple thumbnail icons；The drag operation to thumbnail icon is captured, the corresponding element code of dragged thumbnail icon is obtained, the corresponding page elements of thumbnail icon are generated based on element code；Page elements are added to the corresponding position in page editing area according to drag operation, record the order of addition of page elements；When receiving page preservation instruction, instruction, which is preserved, according to the page obtains preset template code, according to the order of addition of multiple page elements in page editing area, the corresponding element code of multiple page elements is added separately to template code, target pages and corresponding page code are obtained, target pages and page code are stored.Page development efficiency can be improved using this method.

Description

Page code generation method, device, computer equipment and storage medium
Technical field
This application involves field of computer technology, are set more particularly to a kind of page code generation method, device, computer Standby and storage medium.
Background technology
With the development of Internet technology, a large amount of software products come into being.Page development is that software product is entirely developed Mostly important one of the link of process, such as the APP pages, Web page exploitation.Traditional page development process approximately as： Design engineer carries out Pages Design and obtains design drawing；Reconstruct engineer carries out design drawing to cut figure, writes page code, such as HTML (hypertext markup language) codes and CSS (stacking style table) code etc..
The page is usually made of multiple page elements, such as button, picture, text box.But traditional design engineer exists When carrying out Pages Design using image processing softwares such as PS (Photoshop), the display for paying close attention to each page elements constantly is needed A variety of attributes such as position, alignment thereof make the reduction of Pages Design efficiency.Meanwhile it reconstructing engineer and needing to carry out hand to design drawing It is dynamic to cut figure and write code, but also page development efficiency reduces.
Invention content
Based on this, it is necessary in view of the above technical problems, provide a kind of page code that can improve page development efficiency Generation method, device, computer equipment and storage medium.
A kind of page code generation method, the method includes：It receives the design to target pages to ask, be set according to described Meter request Exhibition Design window, the design window includes page editing area and multiple thumbnail icons；Capture is to the thumbnail Target drag operation obtains the corresponding element code of dragged thumbnail icon, and the breviary is generated based on the element code The corresponding page elements of icon；The page elements are added to the corresponding positions in the page editing area according to the drag operation It sets, records the order of addition of the page elements；When receiving page preservation instruction, instruction is preserved according to the page and is obtained Preset template code corresponds to multiple page elements according to the order of addition of multiple page elements in the page editing area Element code be added separately to the template code, the target pages and corresponding page code are obtained, to the target The page and the page code are stored.
In one of the embodiments, before capture is to the drag operation of the thumbnail icon, further include：It receives to mesh Mark the similar pages inquiry request of the page；According to the similar pages inquiry request, obtains multiple pages in target database and pluck It is shown；When getting the selected operation to the page abstract, respective page is obtained according to the selected operation and is plucked The corresponding detailed page and page code are wanted, the detailed page is added to the page editing area, by the page generation of acquisition Code is used as the template code.
The page elements are added to by the page editing area according to the drag operation in one of the embodiments, Corresponding position include：According to the drag operation, obtain the page elements the page editing area target location；Inspection It surveys the target location and whether there is other page elements；If in the presence of, two page elements corresponding to the target location into Row compatibility checks；When compatibility checks by when, the page elements are added to the target location in the page editing area； When compatibility checks fail, generation forbids addition to prompt.
Two page elements corresponding to the target location carry out compatibility checks packet in one of the embodiments, It includes：According to the compatibility relation between preset multiple element type；The element type includes a variety of page elements；Described in acquisition The corresponding compatible element type of other page elements；Detect whether dragged page elements belong to the compatible member Plain type；If belonging to, judgement compatibility checks pass through；According to the compatibility relation by corresponding two pages in the target location Figure layer relationship between element determines coordination or subordinate relation；Based on the figure layer relationship to dragged page elements pair The element code answered changes；It is described that the corresponding element code of multiple page elements is added to the template code packet It includes：Element code after the corresponding change of multiple page elements is added to the template code.
The element code includes one or more property parameters in one of the embodiments,；Multiple pages are first Corresponding element code is added to before the template code element respectively, further includes：The corresponding attribute of the page elements is obtained to match Operation is set, corresponding property parameters in the element code are changed according to attribute configuration operation；After change Element code regenerate respective page element；The corresponding element code of multiple page elements is added to the template The step of code includes：Element code after the corresponding change of multiple page elements is added to the template code.
The attribute configuration operation includes color modification operation in one of the embodiments,；The property parameters include Color parameter；According to the attribute configuration operation to corresponding property parameters in the element code change including：According to The color modification operation picks up color device child window in design window displaying；It obtains in the initial face for picking up the input of color device child window Color parameter；The color device child window that picks up includes colour disk；The initial color parameters are converted into colour disk positional parameter；According to described Colour disk positional parameter positions color of object in the colour disk；The corresponding color of object parameter of the color of object is obtained, according to The color of object parameter changes corresponding color parameter in the element code.
The method further includes in one of the embodiments,：A marking code is distributed for the page code；It obtains The corresponding storage address link of the page code, the marking code is linked with the storage address and is associated；According to The storage address link generates Quick Response Code, and the Quick Response Code is pushed to reconstruct terminal；Make the reconstruct terminal according to Quick Response Code obtains corresponding page code, is optimized to the page code.
A kind of page code generating means, described device include：Element display module sets target pages for receiving Meter request asks Exhibition Design window according to the design, and the design window includes page editing area and multiple thumbnail icons； Element pulls module, for capturing the drag operation to the thumbnail icon, obtains the corresponding element of dragged thumbnail icon Code generates the corresponding page elements of the thumbnail icon based on the element code；According to the drag operation by the page Surface element is added to the corresponding position in the page editing area, records the order of addition of the page elements；Code generation module, For when receiving page preservation instruction, preserving instruction according to the page and obtaining preset template code, according to the page The corresponding element code of multiple page elements is added separately to the mould by the order of addition of multiple page elements in the editing area of face Plate code obtains the target pages and corresponding page code, is stored to the target pages and the page code.
A kind of computer equipment, including memory and processor, the memory are stored with computer program, the processing Device realizes following steps when executing the computer program：It receives the design to target pages to ask, be asked according to the design Exhibition Design window, the design window include page editing area and multiple thumbnail icons；The thumbnail icon is dragged in capture Operation is dragged, the corresponding element code of dragged thumbnail icon is obtained, the thumbnail icon pair is generated based on the element code The page elements answered；The page elements are added to the corresponding position in the page editing area according to the drag operation, are remembered Record the order of addition of the page elements；When receiving page preservation instruction, instruction acquisition is preserved according to the page and is preset Template code, according to the order of addition of multiple page elements in the page editing area, by the corresponding member of multiple page elements Plain code is added separately to the template code, the target pages and corresponding page code is obtained, to the target pages And the page code is stored.
A kind of computer readable storage medium, is stored thereon with computer program, and the computer program is held by processor Following steps are realized when row：It receives the design to target pages to ask, Exhibition Design window is asked according to the design, it is described to set It includes page editing area and multiple thumbnail icons to count window；The drag operation to the thumbnail icon is captured, is obtained dragged The corresponding element code of thumbnail icon generates the corresponding page elements of the thumbnail icon based on the element code；According to institute The corresponding position that the page elements are added to the page editing area by drag operation is stated, the addition of the page elements is recorded Sequentially；When receiving page preservation instruction, instruction is preserved according to the page and obtains preset template code, according to the page The corresponding element code of multiple page elements is added separately to the mould by the order of addition of multiple page elements in the editing area of face Plate code obtains the target pages and corresponding page code, is stored to the target pages and the page code.
Above-mentioned page code generation method, device, computer equipment and storage medium, design terminal are sent out according to related personnel The design to target pages risen is asked, and can show the design window including page editing area and multiple thumbnail icons；Pass through Designer is captured to the drag operation of thumbnail icon, the corresponding element code of dragged thumbnail icon can be obtained；It is based on The element code can generate the corresponding page elements of the thumbnail icon；It, can be by the page according to the drag operation Surface element is added to the corresponding position in the page editing area, and determines the order of addition of the page elements；According to receiving The page preserve instruction, preset template code can be obtained；According to the addition of multiple page elements in the page editing area Sequentially, the corresponding element code of multiple page elements can be added separately to the template code, to obtain the target The page and corresponding page code.Due to page elements be based on element code dynamic generation, and element code have it is preset View logic, page elements need to only be drawn to page editing area by designer, you can the target pages that splicing is needed, Page development efficiency can be improved.While carrying out Pages Design complete page code exploitation, eliminate reconstruct personnel into Row cuts figure and from the cumbersome of zero_time holding, can improve page development efficiency.
Description of the drawings
Fig. 1 is the application scenario diagram of page code generation method in one embodiment；
Fig. 2 is the flow diagram of page code generation method in one embodiment；
Fig. 3 is the interface schematic diagram of design window in page code generation method in one embodiment；
Fig. 4 is the structure diagram of page code generating means in one embodiment；
Fig. 5 is the internal structure chart of one embodiment Computer equipment.
Specific implementation mode
It is with reference to the accompanying drawings and embodiments, right in order to make the object, technical solution and advantage of the application be more clearly understood The application is further elaborated.It should be appreciated that specific embodiment described herein is only used to explain the application, not For limiting the application.
Page code generation method provided by the present application, can be applied in application environment as shown in Figure 1.Wherein, if Meter terminal 102 is communicated with server 104 by network.Reconstruct terminal 106 is communicated with server 104 by network. Wherein, design terminal 102 can be, but not limited to be various personal computers, laptop, intelligent hand with reconstruct terminal 106 Machine, tablet computer and portable wearable device, server 104 can be formed with the either multiple servers of independent server Server cluster realize.Pages Design tool has been run in design terminal 102.Designer can be in design terminal 102 The design of the application program page (hereinafter referred to as " target pages ") is carried out using Pages Design tool.
Design terminal 102 receives the design to target pages and asks, and Exhibition Design window is asked according to design.Design window Including page editing area and multiple thumbnail icons.Design terminal 102 captures the drag operation to thumbnail icon, obtains dragged The corresponding element code of thumbnail icon generates the corresponding page elements of thumbnail icon based on element code, will according to drag operation Page elements are added to the corresponding position in page editing area, record the order of addition of page elements.Designer can be according to upper It states mode and adds multiple page elements in page editing area, when designing completion, the save button in design window can be clicked. Design terminal 102 obtains preset template code, according to multiple pages in page editing area when receiving page preservation instruction The corresponding element code of multiple page elements is added separately to template code by the order of addition of element, obtain target pages and Target pages and page code are locally stored or are sent to server and stored by corresponding page code.Design is eventually End 102 generates pushed information also according to the storage address of target pages and page code, and pushed information is sent to reconstruct terminal 106 so that reconstruct terminal 106 can carry out page development on the basis of the page code that Pages Design tool automatically generates, Improve page development efficiency.Above-mentioned Pages Design process, page elements are and the element codes based on element code dynamic generation A variety of attributes of page elements are configured in advance, designer only needs bold page elements to be drawn to page editing Area, you can the target pages that splicing is needed greatly improve page development efficiency.
In one embodiment, as shown in Fig. 2, providing a kind of page code generation method, it is applied to Fig. 1 in this way In design terminal for illustrate, include the following steps：
Step 202, it receives the design to target pages to ask, Exhibition Design window is asked according to the design, it is described to set It includes page editing area and multiple thumbnail icons to count window.
The Pages Design tool for generating target pages and corresponding page code has been run in design terminal.The page is set Meter tool can be interface-oriented programming, with can support it is arbitrary realize the corresponding interface method technological frame, as React, The UI frames such as Vue, Angular improve the autgmentability of Pages Design tool.Before carrying out page development, related personnel can be with Initial configuration is carried out to the technological frame for specifically needing to use.
Tool storage room is deployed in Pages Design tool.A variety of thumbnail icons and corresponding element generation have been preset in tool storage room Code.Thumbnail icon and corresponding element code can be that developer extracts in the service code of multiple history APP and obtains, and It is pre-configured in Pages Design tool.Wherein, thumbnail icon can be the page elements pair that Pages Design process may be used The thumbnail answered, such as button, text box, picture or table.It should be noted that thumbnail icon for facilitate designer into Row searches preview, not editable；And page elements be with the same or analogous control of thumbnail icon shape, can edit.Element Code can be the basic logic code for showing the corresponding page elements of thumbnail icon.The corresponding element of different thumbnail icons Code can be different.Element code includes a variety of property parameters, such as font, color, size or alignment thereof, and phase may be implemented The view effect answered.It is readily appreciated that, different view effect that there are many same page elements possibility, thus the same thumbnail A variety of corresponding element codes can be arranged in mark.The parameter value of property parameters can be preset acquiescence in each element code Value.
When needing to develop some target pages, designer can start Pages Design tool in design terminal and carry out page It designs in face.Design terminal receives designer and is asked by the design to target pages that start-up operation triggers, and is asked according to design Seek Exhibition Design window.As shown in figure 3, design window includes function menu area, element preview region and page editing area etc..Function Menu area includes multiple function buttons, such as save button, setting button etc..Page editing area is for accommodating multiple page elements. Element preview region includes multiple thumbnail icons.Thumbnail icon is searched for convenience, multiple thumbnail icons can be carried out Classification, such as media class thumbnail icon, prompt class thumbnail icon and editor's class thumbnail icon.For the ease of more accurately positioning Thumbnail icon can be directed to each thumbnail icon and corresponding icon mark, such as icon title is arranged.Thumbnail icon is convenient for design Personnel carry out intuitive preview, consequently facilitating the lookup of thumbnail icon, and then improve page development efficiency.
Step 204, capture obtains dragged thumbnail icon corresponding element generation to the drag operation of the thumbnail icon Code generates the corresponding page elements of the thumbnail icon based on the element code.
Designer can choose the thumbnail after finding the thumbnail icon of needs by the modes such as pulling or double-clicking Mark, you can the corresponding page elements of the thumbnail icon are added to page editing area.Specifically, when capturing mouse to some contracting When sketch map target clicking operation or finger are to the touch operation of some thumbnail icon, whether design terminal detects the thumbnail icon right Answer a variety of sub- thumbnail icons for realizing different views effect.As shown in figure 3, when chosen thumbnail icon is realized not there are a variety of With view effect sub- thumbnail icon when, then design terminal shows sub-icon displaying in chosen thumbnail icon position Frame.Sub-icon display frames include multiple sub- thumbnail icons and corresponding icon mark.Designer can be in sub-icon display frames Further selection is more nearly the sub- thumbnail icon of oneself demand so that designer to selected sub- thumbnail icon it is not necessary to modify Or desired view effect is can reach under less modification, page development efficiency can be further increased.
Step 206, the page elements are added to the corresponding position in the page editing area according to the drag operation, Record the order of addition of the page elements.
Design terminal obtains corresponding element code according to chosen thumbnail icon or sub- thumbnail icon, based on acquisition The element code arrived generates corresponding page elements.The page elements of generation are added to the page by design terminal according to drag operation The corresponding position of editing area.It is readily appreciated that, when designer is selected thumbnail icon by modes such as double-clicks, design The page elements of generation can be added to page editing area default location by terminal according to clicking operation, further according to designer into The page elements of generation are moved to the corresponding position in page editing area by the drag operation of one step.Designer can be according to above-mentioned Mode adds multiple page elements to page editing area successively, and records the order of addition of each page elements.
Pages Design tool presets multiple element type and its between figure layer relationship.Each element type includes a variety of Page elements.Figure layer relationship refers to overlying relation of two page elements in page editing area of successively addition.Design is eventually End determines the element type belonging to each page elements in page editing area according to preset multiple element type；According to pre- If multiple element type between figure layer relationship, determine each page elements in page editing area and other page elements it Between figure layer relationship.
Step 208, when receiving page preservation instruction, instruction is preserved according to the page and obtains preset template generation Code, according to the order of addition of multiple page elements in the page editing area, by the corresponding element code point of multiple page elements It is not added to the template code, obtains the target pages and corresponding page code, to the target pages and the page Face code is stored.
After the addition for completing whole demand page elements, target pages design finishes, and designer can pass through click Save button in design window preserves target pages.Design terminal is to receive save button clicking operation corresponding After the page preserves instruction, instruction is preserved according to the page and obtains preset template code, according to each page member in page editing area The figure layer relationship of element and other page elements, changes the corresponding element code of respective page element, by multiple pages member Element code after the corresponding change of element is added separately to template code.Template code is for showing a complete page object The basic logic code in face.In other words, block code includes the identical partial code that can be used in different page codes, such as Page definition statement etc..The block code that the design different target page uses may be the same or different.
The block code for being added to multiple element codes is labeled as the corresponding page code of target pages by design terminal, will Target pages and corresponding page code are locally stored or are sent to server and stored.In another embodiment, Design terminal generates pushed information also according to the storage address of target pages and page code, and pushed information is sent to reconstruct eventually End has been developed with the notice reconstruct personnel targets page and has been finished.Reconstruct personnel can be by reconstructing terminal-pair Pages Design tool certainly The dynamic page code generated optimizes, and obtains desired page code.In other words, reconstruct personnel only need to be in Pages Design tool Page development is carried out on the basis of the page code automatically generated, improves page development efficiency.
In the present embodiment, design terminal is asked according to the design to target pages that related personnel initiates, and can show packet Include the design window in page editing area and multiple thumbnail icons；It, can by capture designer to the drag operation of thumbnail icon To obtain the corresponding element code of dragged thumbnail icon；Based on the element code, the thumbnail icon pair can be generated The page elements answered；According to the drag operation, the page elements can be added to the corresponding positions in the page editing area It sets, and determines the order of addition of the page elements；Instruction is preserved according to the page received, preset template generation can be obtained Code；It, can be by multiple page elements corresponding element generation according to the order of addition of multiple page elements in the page editing area Code is added separately to the template code, to obtain the target pages and corresponding page code.Since page elements are Based on element code dynamic generation, and element code has preset view logic, and designer only needs bold by the page Element is drawn to page editing area, you can the target pages that splicing is needed can improve page development efficiency.Carrying out page The exploitation that page code is completed while face is designed eliminates reconstruct personnel and cut figure and from the cumbersome of zero_time holding, Ke Yiti High page development efficiency.
In one embodiment, before capture is to the drag operation of the thumbnail icon, further include：It receives to page object The similar pages inquiry request in face；According to the similar pages inquiry request, target database obtain multiple page abstracts into Row displaying；When getting the selected operation to the page abstract, respective page abstract pair is obtained according to the selected operation The detailed page is added to the page editing area by the detailed page and page code answered, and the page code of acquisition is made For the template code.
Server disposition target database.Design terminal generates the corresponding page abstract of target pages, by target pages And corresponding page abstract and page code are associated, and target pages, page abstract and the page code after association are stored To target database.Page abstract can be corresponding thumbnail of target pages etc..
When designer carries out target pages design, can in advance in target data library inquiry with the presence or absence of identical or Other similar pages, and if it exists, can be then designed on the basis of other pages.Specifically, designer can be with Button initiation similar pages inquiry request is inquired by clicking similar pages in design window, design terminal is looked into according to similar pages It askes request and obtains multiple page abstracts in target database, the page abstract got is shown, so as to designer couple Page abstract carries out preview, and then searches whether there is page abstract similar with the target pages of exploitation it is expected.When exist with It is expected that when the similar page abstract of target pages of exploitation, designer can select the page abstract, design terminal After getting to the selected operation of the page abstract, the corresponding detailed page of respective page abstract is obtained according to selected operation And page code.The detailed page is target pages.The detailed page got is added to page editing area by design terminal, will The page code of acquisition is as template code.Designer can be adjusted multiple page elements in page editing area, such as Modification is increased newly or is deleted.Design terminal is operated according to adjustment, and new element code is added in corresponding module code or is deleted There is element code, obtains target pages and corresponding page code.
It is worth noting that, designer can be managed tool storage room by the way that button is arranged, new thumbnail is realized Mark and corresponding element code it is newly-increased, to continuous expansion tool library.It is readily appreciated that, with thumbnail icon and correspondence in tool storage room The continuous accumulation of element code, corresponding page development efficiency will be promoted constantly.
In the present embodiment, design terminal stores different target pages and corresponding page code to server disposition Target database can provide reusable source code subsequently to carry out the exploitation of other target pages, improve page development efficiency. It only obtains the small page abstract of data volume to be shown, data acquisition efficiency can be improved, can also reduce and design terminal is provided The occupancy in source.
In one embodiment, the page elements are added to the phase in the page editing area according to the drag operation The position is answered to include：According to the drag operation, obtain the page elements the page editing area target location；Detection institute It states target location and whether there is other page elements；If in the presence of two page elements corresponding to the target location carry out simultaneous Capacitive verifies；When compatibility checks by when, the page elements are added to the target location in the page editing area；When simultaneous When capacitive verification failure, generation forbids addition to prompt.
When there are the drag operations of new added pages element in page editing area, or the dragging of page elements is added to some When operation, design terminal is according to drag operation or drag operation, target location of the acquisition respective page element in page editing area. Target location refers to final display location of the page elements in page editing area.Design terminal is newly-increased or mobile by page elements To before target location, which is detected with the presence or absence of other page elements.When there are other pages for target location When surface element, design terminal according to preset multiple element type and its between compatibility relation it is two corresponding to target location Page elements carry out compatibility checks.When compatibility checks by when, then allow newly-increased or drag, design terminal will be newly-increased or be moved Dynamic page elements are added to the target location in page editing area.When compatibility checks fail, then forbids newly-increased or drag, it is raw It is prompted at addition is forbidden.
In the present embodiment, some page elements is increased newly in page editing area, or page elements have been added to some and have been carried out When dragging, target location is detected with the presence or absence of other page elements automatically, it is automatic right when there are other page elements Corresponding two page elements in target location carry out compatibility checks, need the moment to pay close attention to the page compared to traditional approach designer Whether the newly-increased or dragging of element is reasonable, only need to page elements be courageously drawn to page editing area, can improve the page and examine Development efficiency.
In one embodiment, two page elements progress compatibility checks corresponding to the target location include：Root According to the compatibility relation between preset multiple element type；The element type includes a variety of page elements；Obtain it is described other The corresponding compatible element type of page elements；Detect whether dragged page elements belong to the compatible element class Type；If belonging to, judgement compatibility checks pass through；According to the compatibility relation by corresponding two page elements in the target location Between figure layer relationship determine coordination or subordinate relation；It is corresponding to dragged page elements based on the figure layer relationship Element code changes；It is described the corresponding element code of multiple page elements is added to the template code to include： Element code after the corresponding change of multiple page elements is added to the template code.
Pages Design tool presets multiple element type and its between compatibility relation, in other words, each element type With corresponding compatible one or more element types.Each element type includes a variety of page elements.When target location is deposited In other page elements, design terminal determines the corresponding element type of corresponding two page elements in target location, root According to preset multiple element type and its between compatibility relation, obtain the already present page elements in target location are corresponding can be simultaneous The element type of appearance, detection increases newly or whether the page elements of dragging belong to the compatible element type.If belonging to, design is eventually End judgement compatibility checks pass through；Conversely, judgement compatibility checks failure.
The figure layer relationship between two kinds of element types of arbitrary phase compatibility has also been preset in Pages Design tool.Figure layer relationship Refer to overlying relation of two page elements in page editing area of successively addition, including coordination and subordinate relation. Wherein, coordination refers to that two page elements belong to same figure layer.Subordinate relation refers to that two page elements belong to different figures Layer, and the page elements first added given tacit consent to are lower figure layer, the page elements added afterwards are upper figure layer.It is readily appreciated that, designer The figure layer relationship between page elements can also be freely arranged in member according to actual demand.
Design terminal determines the member belonging to each page elements in page editing area according to preset multiple element type Plain type；According to the figure layer relationship between preset multiple element type, determine each page elements in page editing area with Figure layer relationship between other page elements.Design terminal is based on figure layer relationship to the corresponding member of page elements that is newly-increased or dragging Plain code changes.In other words, determining figure layer relationship is added to corresponding element generation by design terminal in a manner of code Code, or to being modified in element code for characterizing the code of figure layer relationship.Design terminal distinguishes multiple page elements Element code after corresponding change is added to template code, obtains the corresponding page code of target pages.
In the present embodiment, by pre-set multiple element type and its between compatibility relation, and it is arbitrary mutually compatible Two kinds of element types between figure layer relationship, corresponding to target location two page elements can carry out compatible school automatically It tests, and determines the figure layer relationship of two page elements.It, can be automatic according to the figure layer relationship between the page elements automatically determined Respective element code is changed, so as to improve page development efficiency.
In one embodiment, the element code includes one or more property parameters；Divide by multiple page elements Other corresponding element code is added to before the template code, further includes：Obtain the corresponding attribute configuration behaviour of the page elements Make, corresponding property parameters in the element code are changed according to attribute configuration operation；Based on the member after change Plain code regenerates respective page element；The corresponding element code of multiple page elements is added to the template code The step of include：Element code after the corresponding change of multiple page elements is added to the template code.
After page elements are dragged to page editing area, if the view effect of page elements is deposited with desired view effect In deviation, setting can be re-started with the property parameters of page elements.Join specifically, element code includes one or more attributes Number.The parameter value of each property parameters can be preset default value.As shown in figure 3, design terminal captures in page editing area When being operated to the attribute configuration to some page elements, area is adjusted in design window display parameters according to attribute configuration operation.Ginseng Number adjustment area includes the corresponding one or more property parameters of preset respective page element and corresponding parametric values input frame.Design Personnel can be adjusted the parameter value of one of property parameters in parameter adjustment area.In another embodiment, in order to Improve page development efficiency, a kind of page elements can pre-set it is a variety of to element code, meet different views as possible The demand of effect so that the view effect for the page elements that designer selectes and desired view effect are smaller, to each The parameter value of the property parameters of page elements needs less adjustment.
Design terminal changes corresponding property parameters in respective element code according to the parameter value after adjustment.Change speech It, the parameter value after adjustment is mapped to the position that corresponding property parameters in element code correspond to default value by design terminal.If Meter personnel need to only be adjusted the parameter value of property parameters in design window, without understanding element code, reduce attribute ginseng The setting threshold of numerical value.Design terminal regenerates respective page element based on the element code after change, so as to designer Can in time preview change after page elements view effect, and then accurate judgement setting parameter value it is whether suitable.Design Element code after the corresponding change of multiple page elements is added to template code by terminal, and it is corresponding to obtain target pages Page code.
It, can be according to desired view effect to after page elements are dragged to page editing area in the present embodiment The property parameters of addition page elements are reset, and while improving page development efficiency, can meet Pages Design Individual demand.
In one embodiment, the attribute configuration operation includes color modification operation；The property parameters include color Parameter；According to the attribute configuration operation to corresponding property parameters in the element code change including：According to described Color modification operation picks up color device child window in design window displaying；It obtains in the priming color ginseng for picking up the input of color device child window Number；The color device child window that picks up includes colour disk；The initial color parameters are converted into colour disk positional parameter；According to the colour disk Positional parameter positions color of object in the colour disk；The corresponding color of object parameter of the color of object is obtained, according to described Color of object parameter changes corresponding color parameter in the element code.
Designer needs to set different page elements to different colors.But in traditional image processing process, only It is selective by presetting the color of limited quantity, number of colors is limited, reduces the color mark accuracy rate of page elements.For It solves the above problems, the present embodiment Pages Design tool realizes the accurate setting of color using color device colour disk is set.Specifically, page Face design tool, which has prestored, picks up color device drafting script.It is for drawing the code file for picking up color device window to pick up color device and draw script. Design terminal capture operation is changed to the colors of page elements when, operation changed according to color generate and pick up the drafting of color device and refer to Enable, according to pick up color device draw instruction load pick up color device draw script, according to load pick up color device draw script drafting pick up color device The color device child window that picks up of drafting is shown by window.It picks up and is provided with parameter input frame parameter submitting button in color device child window, For design terminal when listening to parameter submitting button and being clicked, it is defeated in parameter input frame that designer in color device child window is picked up in acquisition The color parameter entered.
Pages Design tool presets many kinds of parameters type and corresponding format.Parameter type can be RGBA parameters, HSB Parameter or HEX parameters.Wherein, in RGBA, R expressions are red (Red), and G is indicated green (Green), and B indicates blue blue, A expression Transparency (Alpha)；In HSB, H (Hue) indicates that form and aspect, S (Saturation) indicate that saturation degree, B (Brightness) indicate Brightness；It is #FFB6C1 that HEX parameters, which are by the HEX parameters of the code of hexadecimal representation color, such as lightpink,；The purple of orchid The HEX parameters of color are #DA70D6.Design terminal passes through the matched format of color parameter institute for identifying with getting, identification acquisition The parameter type of the color parameter arrived.
Pages Design tool has also preset the corresponding colour disk positional parameter transformational relation of many kinds of parameters type.Design is eventually End inquires colour disk corresponding with the parameter type determined and positions transformational relation after determining the parameter type of color parameter, according to The colour disk positional parameter transformational relation inquired converts color parameter, obtains colour disk positional parameter.Colour disk positional parameter The coordinate parameters for being color type in colour disk.It picks up in color device child window and is also provided with colour disk.Design terminal turns color parameter After being changed to colour disk positional parameter, position is determined in the colour disk for picking up color device child window according to colour disk positional parameter, from colour disk really Fixed position, which goes out, extracts corresponding color, and it is color of object to extract color.Design terminal obtains the corresponding mesh of the color of object Color parameter is marked, corresponding color parameter in element code is changed according to color of object parameter.
In the present embodiment, color device child window is picked up in design window displaying, it can be according to the color parameter of input in colour disk Color of object is positioned, provides that more colors are selective, the accuracy for choosing color of object is improved, also improves to the page Element carries out the accuracy rate of color modification.
In one embodiment, this method further includes：A marking code is distributed for the page code；Obtain the page The corresponding storage address link of face code, the marking code is linked with the storage address and is associated；It is deposited according to described Storage address chain delivers a child into Quick Response Code, and the Quick Response Code is pushed to reconstruct terminal；Make the reconstruct terminal according to the Quick Response Code Corresponding page code is obtained, the page code is optimized.
Marking code is to be capable of the information of one page code of unique identification, such as Code Number.Design terminal is by the page Code and corresponding marking code are associated, to after association page code and marking code be locally stored, obtain phase The storage address link answered, marking code and the link of corresponding storage address are associated.It can be quick in order to reconstruct personnel Ground gets page code, and design terminal generates Quick Response Code according to the corresponding storage address link of page code, later will be two-dimentional Code is pushed to corresponding reconstruct terminal, convenient for that can get corresponding page code subsequently through scanning the two-dimensional code.
In another embodiment, design terminal by after association page code and marking code be sent to server.Clothes Business device by after association page code and marking code store to target database, obtain the link of corresponding storage address, will generation Code mark and the link of corresponding storage address are associated.Server generates two according to the corresponding storage address link of page code Code is tieed up, Quick Response Code is pushed to corresponding reconstruct terminal later.
In the present embodiment, after being stored to page code, is linked according to storage address and generate Quick Response Code, and will be two-dimentional Code is pushed to corresponding reconstruct terminal, facilitates reconstruct personnel can be by scanning the two-dimensional code quick obtaining to page code.
It should be understood that although each step in the flow chart of Fig. 2 is shown successively according to the instruction of arrow, this A little steps are not that the inevitable sequence indicated according to arrow executes successively.Unless expressly state otherwise herein, these steps It executes there is no the limitation of stringent sequence, these steps can execute in other order.Moreover, at least part in Fig. 2 Step may include that either these sub-steps of multiple stages or stage are executed in synchronization to multiple sub-steps It completes, but can execute at different times, the execution sequence in these sub-steps or stage is also not necessarily to be carried out successively, But it can either the sub-step of other steps or at least part in stage execute in turn or alternately with other steps.
In one embodiment, as shown in figure 4, providing a kind of page code generating means, including：Element display module 402, element pulls module 404 and code generation module 406, wherein：
Element display module 402 asks Exhibition Design for receiving the design request to target pages according to the design Window, the design window include page editing area and multiple thumbnail icons；
Element pulls module 404, for capturing the drag operation to the thumbnail icon, obtains dragged thumbnail icon Corresponding element code generates the corresponding page elements of the thumbnail icon based on the element code；It is grasped according to the dragging Make the corresponding position that the page elements are added to the page editing area, records the order of addition of the page elements；
Code generation module 406, for when receiving page preservation instruction, preserving instruction according to the page and obtaining in advance If template code, it is according to the order of addition of multiple page elements in the page editing area, multiple page elements are corresponding Element code is added separately to the template code, the target pages and corresponding page code is obtained, to the page object Face and the page code are stored.
In one embodiment, which further includes similar pages enquiry module 408, for receiving the phase to target pages It is asked like page interrogation；According to the similar pages inquiry request, obtains multiple page abstracts in target database and be shown； When getting the selected operation to the page abstract, it is corresponding in detail that respective page abstract is obtained according to the selected operation The detailed page is added to the page editing area, using the page code of acquisition as the mould by the page and page code Plate code.
In one embodiment, element pulls module 404 and is additionally operable to, according to the drag operation, obtain the page elements Target location in the page editing area；It detects the target location and whether there is other page elements；If in the presence of to described Corresponding two page elements in target location carry out compatibility checks；When compatibility checks by when, the page elements are added Add to the target location in the page editing area；When compatibility checks fail, generation forbids addition to prompt.
Element pulls module 404 and is additionally operable to according between preset multiple element type in one of the embodiments, Compatibility relation；The element type includes a variety of page elements；Obtain the corresponding compatible element of other described page elements Type；Detect whether dragged page elements belong to the compatible element type；If belonging to, judgement compatibility checks are logical It crosses；The figure layer relationship between corresponding two page elements in the target location is determined into coordination according to the compatibility relation Or subordinate relation；The dragged corresponding element code of page elements is changed based on the figure layer relationship；Code building Module 406 is additionally operable to the element code after the corresponding change of multiple page elements being added to the template code.
In one embodiment, the element code includes one or more property parameters；The device further includes that element is compiled Module 410 is collected, for obtaining the corresponding attribute configuration operation of the page elements, is operated to the member according to the attribute configuration Corresponding property parameters change in plain code；Respective page element is regenerated based on the element code after change；Code Generation module 406 is additionally operable to the element code after the corresponding change of multiple page elements being added to the template code.
In one embodiment, the attribute configuration operation includes color modification operation；The property parameters include color Parameter；Element editor module 410 is additionally operable to pick up color device child window in design window displaying according to color modification operation； It obtains in the initial color parameters for picking up the input of color device child window；The color device child window that picks up includes colour disk；By the priming color Parameter Switch is colour disk positional parameter；According to the colour disk positional parameter color of object is positioned in the colour disk；Described in acquisition The corresponding color of object parameter of color of object；Code generation module 406 is additionally operable to according to the color of object parameter to the member Corresponding color parameter changes in plain code.
The device further includes code pushing module 412 in one of the embodiments, for being distributed for the page code One marking code；The corresponding storage address link of the page code is obtained, by the marking code and the storage address Link is associated；It is linked according to the storage address and generates Quick Response Code, the Quick Response Code is pushed into reconstruct terminal；Make described It reconstructs terminal and corresponding page code is obtained according to the Quick Response Code, the page code is optimized.
Specific about page code generating means limits the limit that may refer to above for page code generation method Fixed, details are not described herein.Modules in above-mentioned page code generating means can fully or partially through software, hardware and its It combines to realize.Above-mentioned each module can be embedded in or in the form of hardware independently of in the processor in computer equipment, can also It is stored in a software form in the memory in computer equipment, in order to which processor calls the above modules of execution corresponding Operation.
In one embodiment, a kind of computer equipment is provided, which can be terminal, internal structure Figure can be as shown in Figure 5.The computer equipment includes the processor connected by system bus, memory, network interface, display Screen and input unit.Wherein, the processor of the computer equipment is for providing calculating and control ability.The computer equipment is deposited Reservoir includes non-volatile memory medium, built-in storage.The non-volatile memory medium is stored with operating system and computer journey Sequence.The built-in storage provides environment for the operation of operating system and computer program in non-volatile memory medium.The calculating The network interface of machine equipment is used to communicate by network connection with external terminal.When the computer program is executed by processor with Realize a kind of page code generation method.The display screen of the computer equipment can be that liquid crystal display or electric ink are shown Screen, the input unit of the computer equipment can be the touch layer covered on display screen, can also be on computer equipment shell Button, trace ball or the Trackpad of setting can also be external keyboard, Trackpad or mouse etc..
It will be understood by those skilled in the art that structure shown in Fig. 5, is only tied with the relevant part of application scheme The block diagram of structure does not constitute the restriction for the computer equipment being applied thereon to application scheme, specific computer equipment May include either combining certain components than more or fewer components as shown in the figure or being arranged with different components.
In one embodiment, a kind of computer equipment, including memory and processor are provided, which is stored with Computer program, the processor realize following steps when executing computer program：The design to target pages is received to ask, according to Exhibition Design window is asked in the design, and the design window includes page editing area and multiple thumbnail icons；Capture is to described The drag operation of thumbnail icon obtains the corresponding element code of dragged thumbnail icon, and institute is generated based on the element code State the corresponding page elements of thumbnail icon；The page elements are added to the page editing area according to the drag operation Corresponding position records the order of addition of the page elements；When receiving page preservation instruction, referred to according to page preservation It enables and obtains preset template code, according to the order of addition of multiple page elements in the page editing area, by multiple pages member The corresponding element code of element is added separately to the template code, the target pages and corresponding page code is obtained, to institute It states target pages and the page code is stored.
In one embodiment, following steps are also realized when processor executes computer program：It receives to target pages Similar pages inquiry request；According to the similar pages inquiry request, obtains multiple page abstracts in target database and opened up Show；When getting the selected operation to the page abstract, it is corresponding that respective page abstract is obtained according to the selected operation The detailed page and page code, are added to the page editing area, using the page code of acquisition as institute by the detailed page State template code.
In one embodiment, following steps are also realized when processor executes computer program：According to the drag operation, Obtain the page elements the page editing area target location；The target location is detected with the presence or absence of other pages member Element；If in the presence of two page elements corresponding to the target location carry out compatibility checks；When compatibility checks by when, The page elements are added to the target location in the page editing area；When compatibility checks fail, generation is forbidden adding Prompt.
In one embodiment, following steps are also realized when processor executes computer program：According to preset a variety of members Compatibility relation between plain type；The element type includes a variety of page elements；It is corresponding to obtain other described page elements Compatible element type；Detect whether dragged page elements belong to the compatible element type；If belonging to, judgement Compatibility checks pass through；According to the compatibility relation by the figure layer relationship between corresponding two page elements in the target location Determine coordination or subordinate relation；The dragged corresponding element code of page elements is become based on the figure layer relationship More；Element code after the corresponding change of multiple page elements is added to the template code.
In one embodiment, the element code includes one or more property parameters；Processor executes computer journey Following steps are also realized when sequence：The corresponding attribute configuration operation of the page elements is obtained, according to attribute configuration operation pair Corresponding property parameters change in the element code；Respective page member is regenerated based on the element code after change Element；Element code after the corresponding change of multiple page elements is added to the template code.
In one embodiment, the attribute configuration operation includes color modification operation；The property parameters include color Parameter；Processor also realizes following steps when executing computer program：According to color modification operation in the design window Color device child window is picked up in displaying；It obtains in the initial color parameters for picking up the input of color device child window；The color device child window that picks up includes color Disk；The initial color parameters are converted into colour disk positional parameter；It is positioned in the colour disk according to the colour disk positional parameter Color of object；The corresponding color of object parameter of the color of object is obtained, according to the color of object parameter to the element generation Corresponding color parameter changes in code.
In one embodiment, following steps are also realized when processor executes computer program：For the page code point With a marking code；The corresponding storage address link of the page code is obtained, by the marking code and the storage Location link is associated；It is linked according to the storage address and generates Quick Response Code, the Quick Response Code is pushed into reconstruct terminal；Make institute It states reconstruct terminal and corresponding page code is obtained according to the Quick Response Code, the page code is optimized.
In one embodiment, a kind of computer readable storage medium is provided, computer program is stored thereon with, is calculated Machine program realizes following steps when being executed by processor：It receives the design to target pages to ask, according to the design request exhibition Show that design window, the design window include page editing area and multiple thumbnail icons；Capture the dragging to the thumbnail icon Operation, obtains the corresponding element code of dragged thumbnail icon, and generating the thumbnail icon based on the element code corresponds to Page elements；The page elements are added to the corresponding position in the page editing area according to the drag operation, are recorded The order of addition of the page elements；When receiving page preservation instruction, it is preset that instruction acquisition is preserved according to the page Template code, according to the order of addition of multiple page elements in the page editing area, by the corresponding element of multiple page elements Code is added separately to the template code, obtains the target pages and corresponding page code, to the target pages and The page code is stored.
In one embodiment, following steps are also realized when computer program is executed by processor：It receives to target pages Similar pages inquiry request；According to the similar pages inquiry request, obtains multiple page abstracts in target database and carry out Displaying；When getting the selected operation to the page abstract, respective page abstract is obtained according to the selected operation and is corresponded to The detailed page and page code, the detailed page is added to the page editing area, using the page code of acquisition as The template code.
In one embodiment, following steps are also realized when computer program is executed by processor：It is grasped according to the dragging Make, obtain the page elements the page editing area target location；It detects the target location and whether there is other pages Surface element；If in the presence of two page elements corresponding to the target location carry out compatibility checks；When compatibility checks pass through When, the page elements are added to the target location in the page editing area；When compatibility checks fail, generation is forbidden adding Add prompt.
In one embodiment, following steps are also realized when computer program is executed by processor：According to preset a variety of Compatibility relation between element type；The element type includes a variety of page elements；Other described page elements are obtained to correspond to Compatible element type；Detect whether dragged page elements belong to the compatible element type；If belonging to, sentence Determine compatibility checks to pass through；The figure layer between corresponding two page elements in the target location is closed according to the compatibility relation System determines coordination or subordinate relation；The dragged corresponding element code of page elements is carried out based on the figure layer relationship Change；Element code after the corresponding change of multiple page elements is added to the template code.
In one embodiment, the element code includes one or more property parameters；Computer program is by processor Following steps are also realized when execution：The corresponding attribute configuration operation of the page elements is obtained, is operated according to the attribute configuration Corresponding property parameters in the element code are changed；Respective page member is regenerated based on the element code after change Element；Element code after the corresponding change of multiple page elements is added to the template code.
In one embodiment, the attribute configuration operation includes color modification operation；The property parameters include color Parameter；Following steps are also realized when computer program is executed by processor：According to color modification operation in the design window Color device child window is picked up in mouth displaying；It obtains in the initial color parameters for picking up the input of color device child window；The color device child window that picks up includes Colour disk；The initial color parameters are converted into colour disk positional parameter；It is fixed in the colour disk according to the colour disk positional parameter Position color of object；The corresponding color of object parameter of the color of object is obtained, according to the color of object parameter to the element Corresponding color parameter changes in code.
In one embodiment, following steps are also realized when computer program is executed by processor：For the page code Distribute a marking code；The corresponding storage address link of the page code is obtained, by the marking code and the storage Address chain, which connects, to be associated；It is linked according to the storage address and generates Quick Response Code, the Quick Response Code is pushed into reconstruct terminal；Make The reconstruct terminal obtains corresponding page code according to the Quick Response Code, is optimized to the page code.
One of ordinary skill in the art will appreciate that realizing all or part of flow in above-described embodiment method, being can be with Relevant hardware is instructed to complete by computer program, the computer program can be stored in a non-volatile computer In read/write memory medium, the computer program is when being executed, it may include such as the flow of the embodiment of above-mentioned each method.Wherein, Any reference to memory, storage, database or other media used in each embodiment provided herein, Including non-volatile and/or volatile memory.Nonvolatile memory may include read-only memory (ROM), programming ROM (PROM), electrically programmable ROM (EPROM), electrically erasable ROM (EEPROM) or flash memory.Volatile memory may include Random access memory (RAM) or external cache.By way of illustration and not limitation, RAM is available in many forms, Such as static state RAM (SRAM), dynamic ram (DRAM), synchronous dram (SDRAM), double data rate sdram (DDRSDRAM), enhancing Type SDRAM (ESDRAM), synchronization link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic ram (DRDRAM) and memory bus dynamic ram (RDRAM) etc..
Each technical characteristic of above example can be combined arbitrarily, to keep description succinct, not to above-described embodiment In each technical characteristic it is all possible combination be all described, as long as however, the combination of these technical characteristics be not present lance Shield is all considered to be the range of this specification record.
The several embodiments of the application above described embodiment only expresses, the description thereof is more specific and detailed, but simultaneously It cannot therefore be construed as limiting the scope of the patent.It should be pointed out that coming for those of ordinary skill in the art It says, under the premise of not departing from the application design, various modifications and improvements can be made, these belong to the protection of the application Range.Therefore, the protection domain of the application patent should be determined by the appended claims.

Claims (10)

1. a kind of page code generation method, the method includes：
It receives the design to target pages to ask, Exhibition Design window is asked according to the design, the design window includes page Face editing area and multiple thumbnail icons；
The drag operation to the thumbnail icon is captured, the corresponding element code of dragged thumbnail icon is obtained, based on described Element code generates the corresponding page elements of the thumbnail icon；
The page elements are added to the corresponding position in the page editing area according to the drag operation, record the page The order of addition of element；
When receiving page preservation instruction, instruction is preserved according to the page and obtains preset template code, according to the page The corresponding element code of multiple page elements is added separately to the mould by the order of addition of multiple page elements in the editing area of face Plate code obtains the target pages and corresponding page code, is stored to the target pages and the page code.
2. according to the method described in claim 1, it is characterized in that, capture to the drag operation of the thumbnail icon before, Further include：
Receive the similar pages inquiry request to target pages；
According to the similar pages inquiry request, obtains multiple page abstracts in target database and be shown；
When getting the selected operation to the page abstract, it is corresponding that respective page abstract is obtained according to the selected operation The detailed page and page code, are added to the page editing area, using the page code of acquisition as institute by the detailed page State template code.
3. according to the method described in claim 1, it is characterized in that, the page elements are added to according to the drag operation The corresponding position in the page editing area includes：
According to the drag operation, obtain the page elements the page editing area target location；
It detects the target location and whether there is other page elements；
If in the presence of two page elements corresponding to the target location carry out compatibility checks；
When compatibility checks by when, the page elements are added to the target location in the page editing area；
When compatibility checks fail, generation forbids addition to prompt.
4. according to the method described in claim 3, it is characterized in that, two page elements corresponding to the target location carry out Compatibility checks include：
According to the compatibility relation between preset multiple element type；The element type includes a variety of page elements；Obtain institute State the corresponding compatible element type of other page elements；
Detect whether dragged page elements belong to the compatible element type；
If belonging to, judgement compatibility checks pass through；According to the compatibility relation by corresponding two page members in the target location Figure layer relationship between element determines coordination or subordinate relation；
The dragged corresponding element code of page elements is changed based on the figure layer relationship；
It is described the corresponding element code of multiple page elements is added to the template code to include：
Element code after the corresponding change of multiple page elements is added to the template code.
5. according to the method described in Claims 1 to 4 any one, which is characterized in that the element code includes one or more A property parameters；Before by multiple page elements, corresponding element code is added to the template code respectively, further include：
The corresponding attribute configuration operation of the page elements is obtained, is operated to phase in the element code according to the attribute configuration The property parameters answered change；
Respective page element is regenerated based on the element code after change；
The step of corresponding element code of multiple page elements is added to the template code include：
Element code after the corresponding change of multiple page elements is added to the template code.
6. according to the method described in claim 5, it is characterized in that, attribute configuration operation includes color modification operation；Institute It includes color parameter to state property parameters；Corresponding property parameters in the element code are carried out according to attribute configuration operation Change further includes：
According to the color modification operation color device child window is picked up in design window displaying；
It obtains in the initial color parameters for picking up the input of color device child window；The color device child window that picks up includes colour disk；
The initial color parameters are converted into colour disk positional parameter；
According to the colour disk positional parameter color of object is positioned in the colour disk；
The corresponding color of object parameter of the color of object is obtained, according to the color of object parameter to phase in the element code The color parameter answered changes.
7. according to the method described in claim 1, it is characterized in that, the method further includes：
A marking code is distributed for the page code；
The corresponding storage address link of the page code is obtained, the marking code is linked with the storage address and is closed Connection；
It is linked according to the storage address and generates Quick Response Code, the Quick Response Code is pushed into reconstruct terminal；Make the reconstruct terminal Corresponding page code is obtained according to the Quick Response Code, the page code is optimized.
8. a kind of page code generating means, described device include：
Element display module asks Exhibition Design window, institute for receiving the design request to target pages according to the design It includes page editing area and multiple thumbnail icons to state design window；
Element pulls module, and for capturing the drag operation to the thumbnail icon, it is corresponding to obtain dragged thumbnail icon Element code generates the corresponding page elements of the thumbnail icon based on the element code；According to the drag operation by institute The corresponding position that page elements are added to the page editing area is stated, the order of addition of the page elements is recorded；
Code generation module, for when receiving page preservation instruction, preserving instruction according to the page and obtaining preset mould Plate code, according to the order of addition of multiple page elements in the page editing area, by multiple page elements corresponding element generation Code is added separately to the template code, the target pages and corresponding page code is obtained, to the target pages and institute Page code is stated to be stored.
9. a kind of computer equipment, including memory and processor, the memory are stored with computer program, feature exists In when the processor executes the computer program the step of any one of realization claim 1 to 7 the method.
10. a kind of computer readable storage medium, is stored thereon with computer program, which is characterized in that the computer program The step of method described in any one of claim 1 to 7 is realized when being executed by processor.
CN201810187899.0A 2018-03-07 2018-03-07 Page code generation method, device, computer equipment and storage medium Pending CN108345456A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810187899.0A CN108345456A (en) 2018-03-07 2018-03-07 Page code generation method, device, computer equipment and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810187899.0A CN108345456A (en) 2018-03-07 2018-03-07 Page code generation method, device, computer equipment and storage medium

Publications (1)

Publication Number Publication Date
CN108345456A true CN108345456A (en) 2018-07-31

Family

ID=62956659

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810187899.0A Pending CN108345456A (en) 2018-03-07 2018-03-07 Page code generation method, device, computer equipment and storage medium

Country Status (1)

Country Link
CN (1) CN108345456A (en)

Cited By (43)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109614097A (en) * 2018-12-07 2019-04-12 北京金山云网络技术有限公司 Generation method, device and the server of platform code
CN109783094A (en) * 2018-12-15 2019-05-21 深圳壹账通智能科技有限公司 Front end page generation method, device, computer equipment and storage medium
CN109815434A (en) * 2019-01-18 2019-05-28 深圳壹账通智能科技有限公司 Page editing method, apparatus, equipment and storage medium
CN109871210A (en) * 2019-01-17 2019-06-11 平安城市建设科技(深圳)有限公司 Web page element amending method, device, equipment and storage medium
CN110083340A (en) * 2019-03-19 2019-08-02 深圳壹账通智能科技有限公司 Code generating method, device, computer equipment and storage medium
CN110096266A (en) * 2019-05-13 2019-08-06 上海优扬新媒信息技术有限公司 A kind of characteristic processing method and device
CN110147516A (en) * 2019-04-15 2019-08-20 深圳壹账通智能科技有限公司 The intelligent identification Method and relevant device of front-end code in Pages Design
CN110209378A (en) * 2019-04-26 2019-09-06 平安科技（深圳）有限公司 Page generation method, device, terminal and storage medium
CN110321126A (en) * 2019-07-08 2019-10-11 北京三快在线科技有限公司 The method and apparatus for generating page code
CN110457633A (en) * 2019-08-09 2019-11-15 四川长虹电器股份有限公司 A method of generating target pages
CN110457028A (en) * 2019-08-06 2019-11-15 软通动力信息技术有限公司 A kind of page visual programming method, apparatus, server and storage medium
CN110569082A (en) * 2019-08-06 2019-12-13 阿里巴巴集团控股有限公司 method and device for controlling page content
CN110781422A (en) * 2019-09-18 2020-02-11 中国平安财产保险股份有限公司 Page configuration method and device, computer equipment and storage medium
CN110806916A (en) * 2019-11-05 2020-02-18 北京金和网络股份有限公司 Method and system for realizing individual login page of each tenant of SAAS platform
CN110888634A (en) * 2019-11-04 2020-03-17 上海硬通网络科技有限公司 Game landing page generation method and device, computer equipment and storage medium
CN110955418A (en) * 2019-12-13 2020-04-03 中国南方电网有限责任公司 Code generation method and device, computer equipment and storage medium
CN111027299A (en) * 2019-10-18 2020-04-17 深圳智慧园区信息技术有限公司 Form generation method and system
CN111124409A (en) * 2019-12-24 2020-05-08 深圳乐信软件技术有限公司 Sketch-based business page generation method, device, equipment and storage medium
CN111258569A (en) * 2020-01-09 2020-06-09 卓望数码技术（深圳）有限公司 Webpage component editing method, device, equipment and computer readable storage medium
CN111475163A (en) * 2020-06-22 2020-07-31 腾讯科技（深圳）有限公司 Method, device and equipment for generating code file of view template and storage medium
CN111506306A (en) * 2019-01-31 2020-08-07 北京神州泰岳软件股份有限公司 Method and device for compiling Ansible script and electronic equipment
CN111580819A (en) * 2020-05-21 2020-08-25 深圳华锐金融技术股份有限公司 Page generation method and device, computer equipment and storage medium
CN111752534A (en) * 2020-06-22 2020-10-09 北京百度网讯科技有限公司 Multi-domain custom project template engine, method, apparatus, and medium executed thereby
CN111782180A (en) * 2020-06-24 2020-10-16 智车优行科技（北京）有限公司 Page generation method and device, electronic equipment and storage medium
CN111831279A (en) * 2019-04-22 2020-10-27 华为技术有限公司 Interface code generation method and device
CN111930370A (en) * 2020-06-17 2020-11-13 石化盈科信息技术有限责任公司 Visualized page processing method and device, computer equipment and storage medium
CN112148164A (en) * 2020-09-25 2020-12-29 北京青云科技股份有限公司 Arranging method and device of multi-cluster system, computer equipment and storage medium
CN112199097A (en) * 2020-10-13 2021-01-08 深圳市广和通无线股份有限公司 Installation package generation method and device, computer equipment and storage medium
CN112241265A (en) * 2019-07-17 2021-01-19 易保网络技术(上海)有限公司 Visual page processing method and equipment
CN112306481A (en) * 2020-10-16 2021-02-02 深圳市大富网络技术有限公司 Code display method, system, device and storage medium for graphical programming scene
CN112346961A (en) * 2019-08-08 2021-02-09 北京车和家信息技术有限公司 Debugging method and device for client
CN112416339A (en) * 2020-02-17 2021-02-26 上海哔哩哔哩科技有限公司 Page development method and device and computer equipment
CN112506479A (en) * 2020-11-30 2021-03-16 北京百度网讯科技有限公司 Page editing method, device, equipment and storage medium
CN112947921A (en) * 2021-01-27 2021-06-11 长沙市到家悠享网络科技有限公司 Method, device, equipment and storage medium for rapidly building CRUD page
CN113407168A (en) * 2021-06-07 2021-09-17 远光软件股份有限公司 Editing method and device of page elements, storage medium and terminal
CN113485703A (en) * 2021-06-21 2021-10-08 上海百秋电子商务有限公司 Online interactive commodity detail page editing method and system
CN113626032A (en) * 2021-08-02 2021-11-09 上海擎朗智能科技有限公司 List page configuration method and device and storage medium
CN113778397A (en) * 2021-09-01 2021-12-10 粒子文化科技集团(杭州)股份有限公司 Page generation method and device, electronic device and storage medium
CN113779465A (en) * 2021-09-27 2021-12-10 腾讯科技（深圳）有限公司 Page preview method, related device and equipment
CN116009852A (en) * 2023-01-18 2023-04-25 深圳前海环融联易信息科技服务有限公司 Code construction method, device, computer equipment and storage medium
CN116301847A (en) * 2023-01-28 2023-06-23 广西数字大脑智能科技有限责任公司 System and method for rapidly generating page based on development platform
EP4130960A4 (en) * 2020-04-30 2023-10-11 Huawei Technologies Co., Ltd. Ui control generation and trigger methods, and terminal
CN117094300A (en) * 2023-10-17 2023-11-21 博智安全科技股份有限公司 Report data generation method and device, electronic equipment and storage medium

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7873908B1 (en) * 2003-09-30 2011-01-18 Cisco Technology, Inc. Method and apparatus for generating consistent user interfaces
CN102855313A (en) * 2012-08-24 2013-01-02 北京壹人壹本信息科技有限公司 Webpage browsing equipment, webpage abstract generating method and webpage opening method
CN103955366A (en) * 2014-04-18 2014-07-30 南威软件股份有限公司 Producing method of visualized website template
US20150012818A1 (en) * 2013-07-07 2015-01-08 Ana Rink System and method for semantics-concise interactive visual website design
CN104932889A (en) * 2015-06-15 2015-09-23 北京奇虎科技有限公司 Page visual generation method and device

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7873908B1 (en) * 2003-09-30 2011-01-18 Cisco Technology, Inc. Method and apparatus for generating consistent user interfaces
CN102855313A (en) * 2012-08-24 2013-01-02 北京壹人壹本信息科技有限公司 Webpage browsing equipment, webpage abstract generating method and webpage opening method
US20150012818A1 (en) * 2013-07-07 2015-01-08 Ana Rink System and method for semantics-concise interactive visual website design
CN103955366A (en) * 2014-04-18 2014-07-30 南威软件股份有限公司 Producing method of visualized website template
CN104932889A (en) * 2015-06-15 2015-09-23 北京奇虎科技有限公司 Page visual generation method and device

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
张群: "HTML可视化设计工具：Maqetta", 《HTTPS://WWW.IBM.COM/DEVELOPERWORKS/CN/WEB/1306_ZHANGQUN_MAQETTA/INDEX.HTML》 *

Cited By (57)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109614097A (en) * 2018-12-07 2019-04-12 北京金山云网络技术有限公司 Generation method, device and the server of platform code
CN109783094A (en) * 2018-12-15 2019-05-21 深圳壹账通智能科技有限公司 Front end page generation method, device, computer equipment and storage medium
CN109871210A (en) * 2019-01-17 2019-06-11 平安城市建设科技(深圳)有限公司 Web page element amending method, device, equipment and storage medium
CN109815434A (en) * 2019-01-18 2019-05-28 深圳壹账通智能科技有限公司 Page editing method, apparatus, equipment and storage medium
CN111506306B (en) * 2019-01-31 2023-09-08 北京神州泰岳软件股份有限公司 Method and device for writing active script and electronic equipment
CN111506306A (en) * 2019-01-31 2020-08-07 北京神州泰岳软件股份有限公司 Method and device for compiling Ansible script and electronic equipment
CN110083340A (en) * 2019-03-19 2019-08-02 深圳壹账通智能科技有限公司 Code generating method, device, computer equipment and storage medium
CN110147516A (en) * 2019-04-15 2019-08-20 深圳壹账通智能科技有限公司 The intelligent identification Method and relevant device of front-end code in Pages Design
CN111831279A (en) * 2019-04-22 2020-10-27 华为技术有限公司 Interface code generation method and device
CN110209378A (en) * 2019-04-26 2019-09-06 平安科技（深圳）有限公司 Page generation method, device, terminal and storage medium
CN110096266B (en) * 2019-05-13 2023-12-22 度小满科技(北京)有限公司 Feature processing method and device
CN110096266A (en) * 2019-05-13 2019-08-06 上海优扬新媒信息技术有限公司 A kind of characteristic processing method and device
CN110321126A (en) * 2019-07-08 2019-10-11 北京三快在线科技有限公司 The method and apparatus for generating page code
CN110321126B (en) * 2019-07-08 2020-09-29 北京三快在线科技有限公司 Method and device for generating page code
CN112241265A (en) * 2019-07-17 2021-01-19 易保网络技术(上海)有限公司 Visual page processing method and equipment
CN110457028B (en) * 2019-08-06 2023-09-01 软通智慧信息技术有限公司 Page visual programming method, device, server and storage medium
CN110457028A (en) * 2019-08-06 2019-11-15 软通动力信息技术有限公司 A kind of page visual programming method, apparatus, server and storage medium
CN110569082A (en) * 2019-08-06 2019-12-13 阿里巴巴集团控股有限公司 method and device for controlling page content
CN112346961A (en) * 2019-08-08 2021-02-09 北京车和家信息技术有限公司 Debugging method and device for client
CN110457633A (en) * 2019-08-09 2019-11-15 四川长虹电器股份有限公司 A method of generating target pages
CN110781422A (en) * 2019-09-18 2020-02-11 中国平安财产保险股份有限公司 Page configuration method and device, computer equipment and storage medium
CN110781422B (en) * 2019-09-18 2024-04-05 中国平安财产保险股份有限公司 Page configuration method, page configuration device, computer equipment and storage medium
CN111027299A (en) * 2019-10-18 2020-04-17 深圳智慧园区信息技术有限公司 Form generation method and system
CN110888634A (en) * 2019-11-04 2020-03-17 上海硬通网络科技有限公司 Game landing page generation method and device, computer equipment and storage medium
CN110888634B (en) * 2019-11-04 2023-11-17 上海硬通网络科技有限公司 Game floor page generation method, game floor page generation device, computer equipment and storage medium
CN110806916A (en) * 2019-11-05 2020-02-18 北京金和网络股份有限公司 Method and system for realizing individual login page of each tenant of SAAS platform
CN110806916B (en) * 2019-11-05 2024-01-26 北京金和网络股份有限公司 Method and system for realizing personalized login page of each tenant of SAAS platform
CN110955418A (en) * 2019-12-13 2020-04-03 中国南方电网有限责任公司 Code generation method and device, computer equipment and storage medium
CN111124409B (en) * 2019-12-24 2023-06-06 深圳乐信软件技术有限公司 Sketch-based service page generation method, device, equipment and storage medium
CN111124409A (en) * 2019-12-24 2020-05-08 深圳乐信软件技术有限公司 Sketch-based business page generation method, device, equipment and storage medium
CN111258569A (en) * 2020-01-09 2020-06-09 卓望数码技术（深圳）有限公司 Webpage component editing method, device, equipment and computer readable storage medium
CN112416339A (en) * 2020-02-17 2021-02-26 上海哔哩哔哩科技有限公司 Page development method and device and computer equipment
EP4130960A4 (en) * 2020-04-30 2023-10-11 Huawei Technologies Co., Ltd. Ui control generation and trigger methods, and terminal
CN111580819A (en) * 2020-05-21 2020-08-25 深圳华锐金融技术股份有限公司 Page generation method and device, computer equipment and storage medium
CN111930370A (en) * 2020-06-17 2020-11-13 石化盈科信息技术有限责任公司 Visualized page processing method and device, computer equipment and storage medium
CN111475163A (en) * 2020-06-22 2020-07-31 腾讯科技（深圳）有限公司 Method, device and equipment for generating code file of view template and storage medium
CN111752534B (en) * 2020-06-22 2024-01-12 北京百度网讯科技有限公司 Multi-domain custom project template engine, method, apparatus and medium for execution by the same
CN111752534A (en) * 2020-06-22 2020-10-09 北京百度网讯科技有限公司 Multi-domain custom project template engine, method, apparatus, and medium executed thereby
CN111782180A (en) * 2020-06-24 2020-10-16 智车优行科技（北京）有限公司 Page generation method and device, electronic equipment and storage medium
CN112148164A (en) * 2020-09-25 2020-12-29 北京青云科技股份有限公司 Arranging method and device of multi-cluster system, computer equipment and storage medium
CN112148164B (en) * 2020-09-25 2022-04-26 北京青云科技股份有限公司 Arranging method and device of multi-cluster system, computer equipment and storage medium
CN112199097A (en) * 2020-10-13 2021-01-08 深圳市广和通无线股份有限公司 Installation package generation method and device, computer equipment and storage medium
CN112199097B (en) * 2020-10-13 2024-01-05 深圳市广和通无线股份有限公司 Installation package generation method, installation package generation device, computer equipment and storage medium
CN112306481A (en) * 2020-10-16 2021-02-02 深圳市大富网络技术有限公司 Code display method, system, device and storage medium for graphical programming scene
CN112506479B (en) * 2020-11-30 2024-03-01 北京百度网讯科技有限公司 Page editing method, device, equipment and storage medium
CN112506479A (en) * 2020-11-30 2021-03-16 北京百度网讯科技有限公司 Page editing method, device, equipment and storage medium
CN112947921A (en) * 2021-01-27 2021-06-11 长沙市到家悠享网络科技有限公司 Method, device, equipment and storage medium for rapidly building CRUD page
CN113407168A (en) * 2021-06-07 2021-09-17 远光软件股份有限公司 Editing method and device of page elements, storage medium and terminal
CN113485703A (en) * 2021-06-21 2021-10-08 上海百秋电子商务有限公司 Online interactive commodity detail page editing method and system
CN113626032A (en) * 2021-08-02 2021-11-09 上海擎朗智能科技有限公司 List page configuration method and device and storage medium
CN113778397A (en) * 2021-09-01 2021-12-10 粒子文化科技集团(杭州)股份有限公司 Page generation method and device, electronic device and storage medium
CN113779465B (en) * 2021-09-27 2024-01-30 腾讯科技（深圳）有限公司 Page preview method, related device and equipment
CN113779465A (en) * 2021-09-27 2021-12-10 腾讯科技（深圳）有限公司 Page preview method, related device and equipment
CN116009852A (en) * 2023-01-18 2023-04-25 深圳前海环融联易信息科技服务有限公司 Code construction method, device, computer equipment and storage medium
CN116301847B (en) * 2023-01-28 2023-11-21 广西数字大脑智能科技有限责任公司 System and method for rapidly generating page based on development platform
CN116301847A (en) * 2023-01-28 2023-06-23 广西数字大脑智能科技有限责任公司 System and method for rapidly generating page based on development platform
CN117094300A (en) * 2023-10-17 2023-11-21 博智安全科技股份有限公司 Report data generation method and device, electronic equipment and storage medium

Similar Documents

Publication Publication Date Title
CN108345456A (en) Page code generation method, device, computer equipment and storage medium
US10853382B2 (en) Interactive punchcard visualizations
US10853383B2 (en) Interactive parallel coordinates visualizations
CN108363587B (en) Application program operation monitoring method and device, computer equipment and storage medium
US10222951B2 (en) Modeling system for graphic user interface
US10223338B2 (en) Visual designer for editing large schemaless XML file
US11269660B2 (en) Methods and systems for integrated development environment editor support with a single code base
US11037342B1 (en) Visualization modules for use within a framework for displaying interactive visualizations of event data
US8458648B2 (en) Graphical modelization of user interfaces for data intensive applications
CN102915237B (en) The method and system of rewrite data quality rule is required according to user application
US10853380B1 (en) Framework for displaying interactive visualizations of event data
CN109614424A (en) Page layout generation method, calculates equipment and medium at device
CN109614601A (en) Form processing method, device, equipment and readable medium based on web
US9459780B1 (en) Documenting interactive graphical designs
CN109597954A (en) Data item methods of exhibiting, calculates equipment and medium at device
CN112464623A (en) RPA flow file generation method and device, computer equipment and storage medium
US10861202B1 (en) Sankey graph visualization for machine data search and analysis system
CN107766310B (en) Grid cell editing method and device
CN111666740A (en) Flow chart generation method and device, computer equipment and storage medium
JP2019506645A (en) Page construction method, terminal, storage medium, and page construction device
CN107480369A (en) Classification shows DRC design, operating method in a kind of PCB design
CN113168497A (en) Improved electronic form and method for updating electronic form
CN116304442A (en) Page code generation method and device, electronic equipment and storage medium
CN111061478B (en) Page form modification method, device and equipment and readable storage medium
CN108279901A (en) UI file editing methods, device, electronic equipment and storage medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20180731

RJ01 Rejection of invention patent application after publication