CN110321126A - The method and apparatus for generating page code - Google Patents
The method and apparatus for generating page code Download PDFInfo
- Publication number
- CN110321126A CN110321126A CN201910610124.4A CN201910610124A CN110321126A CN 110321126 A CN110321126 A CN 110321126A CN 201910610124 A CN201910610124 A CN 201910610124A CN 110321126 A CN110321126 A CN 110321126A
- Authority
- CN
- China
- Prior art keywords
- page
- code
- data
- content
- page elements
- 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.)
- Granted
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/34—Graphical or visual programming
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
This application discloses a kind of method and apparatus for generating page code, belong to field of computer technology.The described method includes: obtaining the designed image of the page；It identifies the page elements for including in the designed image of the page, determines the location information of each page elements；Based on the location information, the positioning formula layout code of the page is generated, and generates the page code of the page based on the positioning formula layout code.Using the application, can save manpower and time.
Description
Technical field
This application involves field of computer technology, in particular to a kind of method and apparatus for generating page code.
Background technique
With the fast development of network technology, the type and quantity of application program also gradually increase.For the ease of user
Use, most of application programs are almost directed to the display page.Some information can be shown to user on the display page, such as
Text, picture or video etc..
After the designed image of the page-out of designer's design at present, technical staff writes the corresponding page according to designed image
Code.But the mode of manual compiling page code, the manpower of cost and time are more.
Summary of the invention
In order to solve problems in the prior art, the embodiment of the present application provides a kind of method and dress for generating page code
It sets.The technical solution is as follows:
In a first aspect, providing a kind of method for generating page code, which comprises
Obtain the designed image of the page；
It identifies the page elements for including in the designed image, determines the location information of each page elements；And
Based on the location information, the positioning formula layout code of the page is generated, and is laid out based on the positioning formula
The page code of the page described in code building.
Optionally, the step of location information of each page elements of the determination, comprising:
The minimum circumscribed rectangle for determining each page elements, determines the location information of the minimum circumscribed rectangle respectively
Using the location information as each page elements.
Optionally, described the step of being based on the location information, generating the positioning formula layout code of the page, comprising:
It obtains pre-stored for showing the display Code Template of the page elements；
It respectively by the location information of each page elements, is written in the display Code Template, obtains each described
The display code of page elements；
According to the display code of each page elements, the positioning not comprising content-data of the page is generated
Formula layout code.
Optionally, it is interior to generate not including for the page for the display code according to each page elements
After the step of holding the positioning formula layout code of data, further includes:
Receive the content-data of at least one page elements of user's input；
The content-data of at least one page elements is inserted at least one described in the positioning formula layout code
Positioning formula layout code in the display code of a page elements, after obtaining insertion content-data；
The page code that the page is generated based on the positioning formula layout code, comprising:
The page code of the page is generated based on the positioning formula layout code after insertion content-data.
Optionally, it is interior to generate not including for the page for the display code according to each page elements
After the step of holding the positioning formula layout code of data, further includes:
Obtain the content-data of at least one page elements detected in the designed image；
The content-data of at least one page elements is inserted at least one described in the positioning formula layout code
Positioning formula layout code in the display code of a page elements, after obtaining insertion content-data；
The described the step of page code of the page is generated based on the positioning formula layout code, comprising:
The page code of the page is generated based on the positioning formula layout code after insertion content-data.
Optionally, the positioning formula layout code after the content-data based on insertion generates the page code of the page
Step, comprising:
The function of receiving at least one page elements of user's input executes code；
Function based on positioning formula layout code and at least one page elements after insertion content-data executes generation
Code, generates the page code of the page.
Optionally, the method also includes:
When receiving when executing instruction of the page code, the page code is executed, shows the page.
Second aspect, provides a kind of device for generating page code, and described device includes:
Module is obtained, for obtaining the designed image of the page；
Determining module, the page elements for including in the designed image for identification determine each page elements
Location information；
Generation module generates the positioning formula of the page for the location information based on each page elements
Layout code, and generate based on the positioning formula layout code page code of the page.
Optionally, the determining module, is used for:
The minimum circumscribed rectangle for determining each page elements, determines the location information of the minimum circumscribed rectangle respectively
Using the location information as each page elements.
Optionally, the generation module, is used for:
It obtains pre-stored for showing the display Code Template of the page elements；
It respectively by the location information of each page elements, is written in the display Code Template, obtains each described
The display code of page elements；
According to the display code of each page elements, the positioning not comprising content-data of the page is generated
Formula layout code.
Optionally, described device further include:
Receiving module generates not including for the page for the display code according to each page elements
After the positioning formula layout code of content-data, the content-data of at least one page elements of user's input is received；
It is inserted into module, for being inserted into the positioning formula layout generation for the content-data of at least one page elements
Positioning formula layout code in the display code of at least one page elements described in code, after obtaining insertion content-data；
The generation module, is used for:
The page code of the page is generated based on the positioning formula layout code after insertion content-data.
Optionally,
The acquisition module is also used to generate the page according to the display code of each page elements
After positioning formula layout code not comprising content-data, at least one page member detected in the designed image is obtained
The content-data of element；
The insertion module is also used to the content-data of at least one page elements being inserted into the positioning formula
Positioning formula layout generation in the display code of at least one page elements described in layout code, after obtaining insertion content-data
Code；
The generation module, is used for:
The page code of the page is generated based on the positioning formula layout code after insertion content-data.
Optionally, the generation module, is used for:
The function of receiving at least one page elements of user's input executes code；
Function based on positioning formula layout code and at least one page elements after insertion content-data executes generation
Code, generates the page code of the page.
Optionally, described device further include:
Display module shows institute for when receiving when executing instruction of the page code, executing the page code
State the page.
The third aspect provides a kind of terminal, and the terminal includes processor and memory, is stored in the memory
At least one instruction, at least one instruction are loaded as the processor and are executed to realize as described in above-mentioned first aspect
The method for generating page code.
Fourth aspect provides a kind of computer readable storage medium, at least one finger is stored in the storage medium
It enables, at least one instruction is loaded as the processor and executed to realize the generation page generation as described in above-mentioned first aspect
The method of code.
Technical solution bring beneficial effect provided by the embodiments of the present application includes at least:
In the embodiment of the present application, terminal can identify the page member for including in designed image according to the designed image of the page
Element, and determine the location information of each page elements, the positioning of page elements is generated according to the location information of each page elements
Formula layout code, and then generate the page code of the page.In this way, according to the designed image of the page of user's input, terminal
Corresponding positioning formula layout code is automatically generated, and then generates page code, so that the size of code that technical staff writes subtracts significantly
It is few, save manpower and the time of cost.
Detailed description of the invention
In order to more clearly explain the technical solutions in the embodiments of the present application, make required in being described below to embodiment
Attached drawing is briefly described, it should be apparent that, the drawings in the following description are only some examples of the present application, for
For those of ordinary skill in the art, without creative efforts, it can also be obtained according to these attached drawings other
Attached drawing.
Fig. 1 is a kind of flow chart of method for generating page code provided by the embodiments of the present application；
Fig. 2 is a kind of interface schematic diagram of method for generating page code provided by the embodiments of the present application；
Fig. 3 is a kind of interface schematic diagram of method for generating page code provided by the embodiments of the present application；
Fig. 4 is a kind of flow chart of method for generating page code provided by the embodiments of the present application；
Fig. 5 is a kind of structural schematic diagram of device for generating page code provided by the embodiments of the present application；
Fig. 6 is a kind of structural schematic diagram of device for generating page code provided by the embodiments of the present application；
Fig. 7 is a kind of structural schematic diagram of device for generating page code provided by the embodiments of the present application；
Fig. 8 is a kind of terminal structure schematic diagram provided by the embodiments of the present application；
Fig. 9 is a kind of computer equipment structural schematic diagram provided by the embodiments of the present application.
Specific embodiment
To keep the purposes, technical schemes and advantages of the application clearer, below in conjunction with attached drawing to the application embodiment party
Formula is described in further detail.
The embodiment of the present application provides a kind of method for generating page code, and this method can be realized by terminal.Wherein, eventually
The application program for writing code is installed in end.
As shown in Figure 1, the process flow of this method may include following step:
In a step 101, terminal obtains the designed image of the page.
In a kind of feasible embodiment, when user wants to generate page code, it may be predetermined that go out a design
Image, the designed image are the Show Styles for the page that user wants, and may include the page elements such as picture, text, and
The location information of each display elements is specified, it can be as shown in Figure 2.User uploads designed image in the terminal, and terminal obtains page
The designed image in face.
In a step 102, the page elements for including in terminal recognition designed image, determine the location information of page elements.
In a kind of feasible embodiment, after terminal obtains the designed image of the page, design drawing is identified in designed image
The page elements for including as in.The method of terminal recognition page elements can be to be identified using limb recognition algorithm, is such as adopted
With Sobel edge detection algorithm, Canny edge detection algorithm, dual threshold detection algorithm etc.；Alternatively, terminal recognition page elements
Method be also possible to be identified using deep learning model, such as CNN (Convolutional Neural Networks, volume
Product neural network) model, RPN (Region Proposal Network, Area generation network) etc..Except the above-mentioned identification enumerated
It outside method, can choose other methods according to different needs, identify page elements in designed image as long as can be realized
Method, the application do not limit this.
When terminal recognition goes out any page elements in designed image, the location information of each page elements is determined, the position
Confidence breath can be coordinate of the page elements in designed image, for example, it is assumed that the page elements identified are rectangles
Page elements, then the location information of page elements can be the coordinate of four apex angles of page elements.
It should be noted that when terminal obtains the location information of the page elements in designed image, in addition to the above method, also
The designed image that may is that user's upload is the designed image of preset format, and the designed image of preset format may include each
The different figure layers of display elements, then terminal can directly acquire every in designed image according to the different figure layers in designed image
A element, and then determine the location information of each element.
Optionally, when identifying page elements, terminal can determine the minimum circumscribed rectangle of each page elements, true respectively
The location information of the minimum circumscribed rectangle of fixed each page elements, the location information as each page elements.
In a kind of feasible embodiment, may include some shapes in designed image not is the page elements of rectangle, this
The page elements of sample are relatively difficult to describe its location information, for example, when location information is with the coordinate shape of four apex angles of rectangle
When formula is indicated, shape more difficult determination not the location information of page elements for being rectangle.In order to solve this problem, exist
When identifying page elements, terminal can first determine the minimum circumscribed rectangle of each page elements, as shown in Figure 3.In turn, it determines every
The location information of the minimum circumscribed rectangle of a page elements determines it as the location information of each page elements.In this way, can
To indicate the location information of each page elements by the way of relatively simple.
In step 103, terminal is based on location information, generates the positioning formula layout code of the page, is laid out based on positioning formula
The page code of the code building page.
Wherein, positioning formula layout code is the code that page elements are shown according to the location information of each page elements, main
It to include the location information and display function code of each page elements, according to presetting for technical staff, positioning formula cloth
It may include the content-data of the page elements identified from designed image, such as image, text in station code, position formula cloth
It can not also include the content-data of any page elements in station code, be all made of the expression of preset content data, subsequent technology people
Member manually writes the content-data of page elements.Different modes may be selected according to the actual situation, the application does not limit this.
In a kind of feasible embodiment, after the location information for obtaining each page elements through the above steps, terminal base
In the location information of each page elements, the positioning formula layout code of the page is generated, corresponding processing step can be with following steps
1031-1033:
Step 1031, it obtains pre-stored for showing the display Code Template of page elements.
Wherein, display Code Template is one section of preset code, and the corresponding display Code Template of all page elements can be with
It is the same display Code Template, certainly, according to the actual demand of user, can also be designed according to different page elements different
Display Code Template, the application do not limit this.
It shows mainly comprising showing the code of page elements according to location information in Code Template, but shows in Code Template
Preset location information is null field or preset position information, shows that preset content-data is also blank number in Code Template
According to or preset content data, be replaced to the subsequent page elements according in designed image.
In a kind of feasible embodiment, terminal obtains pre-stored display Code Template according to page elements, optional
Ground, terminal can determine the number of page elements, and obtain the display Code Template of same number.
Step 1032, respectively by the location information of each page elements, write-in is shown in Code Template terminal, is obtained each
The display code of page elements.
In a kind of feasible embodiment, sequence of the terminal according to page elements in designed image, by page elements
Location information is written to one by one in display Code Template, and obtained code is the display code of each page elements.If aobvious
Show that preset location information is null field in Code Template, then display Code Template directly is written into location information；If aobvious
Show that preset location information is preset position information in Code Template, then replaces predeterminated position using the location information of page elements
Information.
Step 1033, for terminal according to the display code of each page elements, generate the page does not include determining for content-data
Position formula layout code.
It optionally, can after the positioning formula layout code not comprising content-data for generating the page according to step 1033
To be inserted into content-data among positioning formula layout code, wherein the content-data of page elements can be content-data itself,
Such as image, text are also possible to the link of pulling data, such as video link.Obtain content-data mode may include
But it is not limited to following several:
Mode one, terminal obtain the content-data of user's input, and corresponding processing step, which may is that, receives user's input
The content-data of at least one page elements；The content-data of at least one page elements is inserted into positioning formula layout by terminal
In code in the display code of at least one page elements, obtain being inserted into the positioning formula layout code after content-data, based on slotting
Positioning formula layout code after entering content-data generates the page code of the page.
In a kind of feasible embodiment, by taking any page elements at least one page elements as an example, when user thinks
When being manually entered the content-data of the page elements, the corresponding display code of the page elements can be first positioned in positioning formula cloth
Then the content-data of page elements is written in corresponding display code by the position in station code.If shown in code
Preset content data are clear datas, then directly show the content-data write-in of page elements in code, if display
Preset content data are some content-datas fixed in code, then the content-data of input is replaced to fixed content number
According to.Terminal receives the content-data of the page elements of user's input and is inserted into corresponding display code.User completes in input
It after holding data, obtains being inserted into the positioning formula layout code after content-data, the positioning formula layout code after being inserted into content-data is
For the page code of the page.
Mode two, terminal can identify the content-data of the page elements in designed image, and corresponding processing step can be with
It is as follows: to obtain the content-data of at least one page elements detected in designed image；By at least one page elements
Content-data is inserted into positioning formula layout code in the display code of at least one page elements, obtains insertion content-data
Positioning formula layout code afterwards；The page code of the page is generated based on the positioning formula layout code after insertion content-data.
In a kind of feasible embodiment, if containing the content-data of some page elements in designed image, such as scheme
Picture or text character etc., terminal can identify content-data, and the content-data that will test is inserted into corresponding display code
In, if preset content data are clear datas in display code, directly by the content-data write-in display generation of page elements
In code, if preset content data are the content-datas that some is fixed in display code, the content-data that will test is replaced
Change fixed content-data.It is available to insert after the content-data that terminal will test is inserted into corresponding display code
Positioning formula layout code after entering content-data, the positioning formula layout code after being inserted into content-data are the page generation of the page
Code.
Optionally, after the positioning formula layout code after obtaining insertion content-data, user can be with input page element
Function executes code, and corresponding processing step can be such that the function of receiving at least one page elements of user's input executes
Code；Function based on positioning formula layout code and at least one page elements after insertion content-data executes code, generates
The page code of the page.
Wherein, function executes code for making page elements realize corresponding function, such as refresh page, logs in, jumps.
In a kind of feasible embodiment, the content-data for including according to the page code that design drawing generates is limited, and
Due to the limitation of designed image, it is only able to achieve display function, therefore, in order to increase the rich of page code, can support to use
Family addition function can execute code in the positioning formula layout code that terminal generates.If user wants to realize page elements
More complicated function, the function that can be manually entered page elements execute code.
After terminal generates the positioning formula layout code after being inserted into content-data, user can check positioning formula layout code,
And the function that at the corresponding display code of some page elements, can be inserted into page elements executes code.User is to positioning formula
Layout code complete modification after, click saves options, terminal be can be reserved for insertion content-data after positioning formula layout code and
The function of at least one page elements executes code, and the code after preservation is the page code of the page.On it should be noted that
At least one page elements for stating at least one page elements and insertion content-data that insertions function executes code can be
Exactly the same page elements are also possible to the identical page elements in part, can also be entirely different page elements, not to this
It limits.
For example, user wants to check or modify page member when checking positioning formula layout code for the ease of finding
The corresponding code segment of element, can be searched according to the mark of page elements.After navigating to the corresponding code segment of page elements, use
The content-data for positioning page elements in formula layout code such as can be revised as linking by family with the content-data of input page element
Address etc., the function that can also add page elements executes code, so that page elements are able to carry out different functions.
Optionally, after the page code that the page is generated according to above-mentioned steps 103, when terminal receives holding for page code
When row instruction, page code is executed, shows the page.
In a kind of feasible embodiment, the page code of the page is generated according to above-mentioned steps 103, it can be by page code
It is added in the code of application program, when user opens or operates application program, terminal can receive the execution of page code
Instruction, executes the page code, is held according to content-data, location information and/or the function of page elements each in page code
Line code shows each page elements, and then shows the page.
Optionally, by taking the page is browser page as an example, when the page is shown for the first time, certain page elements in the page
Content-data may change, such as positioning the page elements of current address, according to the different location where user,
Content-data may be determined as " China ", it is also possible to be determined as " Ethiopia ".In this way it is possible that the page of page elements
Location information and the incongruent situation of the content-data of actual displayed in the code of face.But the mechanism rendered based on browser page,
When the content-data of location information in page code and actual displayed is not met, browser page is likely to occur the feelings redrawn
Condition, such case may be such that some page elements occur due to redrawing the case where adjusting position and moving, such situation
So that display effect is bad, it, can during page rendering in order to avoid the process for allowing user to see that page elements are moved
With elder generation with sightless attribute display page elements, until together being shown after the physical location of all page elements is determined
All page elements.
Based on above-mentioned situation, as shown in figure 4, the processing rendered to the page, which can be such that, obtains view DOM
(Document Object Model, DOM Document Object Model) tree structured data, then traverse tree node, and present node
All child nodes all build after can just go building present node next brother node.A virtual node is created,
Pulled content data are filled into corresponding page elements, and are inserted into document with sightless attribute, then, in pulling
Hold data and determine the actual displayed location information of content-data, all father nodes of bubbling recurrence rewrite the page elements width and
Height, and the page elements are rendered.If in the actual displayed location information of the content-data pulled and page code
Location information it is not identical, then need to redraw right side tree node location information.In this way, after all page elements are all rendered,
It is visual attribute by the attribute modification of all page elements, in this way, full page completes rendering.
In the embodiment of the present application, terminal can identify the page member for including in designed image according to the designed image of the page
Element, and determine the location information of each page elements, the positioning of page elements is generated according to the location information of each page elements
Formula layout code, and then generate the page code of the page.In this way, according to the designed image of the page of user's input, terminal
Corresponding positioning formula layout code is automatically generated, and then generates page code, so that the size of code that technical staff writes subtracts significantly
It is few, save manpower and the time of cost.
Based on the same technical idea, the embodiment of the present application also provides a kind of device for generating page code, the devices
It can be the terminal in above-described embodiment, as shown in figure 5, the device includes: to obtain module 510, determining module 520 and generation mould
Block 530.
Module 510 is obtained, is configured as obtaining the designed image of the page；
Determining module 520 is configured as identifying the page elements for including in the designed image, determines each page
The location information of element；
Generation module 530 is configured as generating the page based on the location information of each page elements
Positioning formula layout code, and generate based on the positioning formula layout code page code of the page.
Optionally, the determining module 520, is configured as:
The minimum circumscribed rectangle for determining each page elements, determines the location information of the minimum circumscribed rectangle respectively
Using the location information as each page elements.
Optionally, the generation module 530, is configured as:
It obtains pre-stored for showing the display Code Template of the page elements；
It respectively by the location information of each page elements, is written in the display Code Template, obtains each described
The display code of page elements；
According to the display code of each page elements, the positioning not comprising content-data of the page is generated
Formula layout code.
Optionally, as shown in fig. 6, described device further include:
Receiving module 540 is configured as generating the page according to the display code of each page elements
After positioning formula layout code not comprising content-data, the content-data of at least one page elements of user's input is received；
It is inserted into module 550, is configured as the content-data of at least one page elements being inserted into the positioning formula
Positioning formula layout generation in the display code of at least one page elements described in layout code, after obtaining insertion content-data
Code；
The generation module 530, is configured as:
The page code of the page is generated based on the positioning formula layout code after insertion content-data.
Optionally,
The acquisition module 510, is additionally configured to the display code according to each page elements, described in generation
After the positioning formula layout code not comprising content-data of the page, at least one detected in the designed image is obtained
The content-data of page elements；
The insertion module 550 is additionally configured to for the content-data of at least one page elements being inserted into described
Positioning formula cloth in the display code of at least one page elements described in positioning formula layout code, after obtaining insertion content-data
Station code；
The generation module 530, is configured as:
The page code of the page is generated based on the positioning formula layout code after insertion content-data.
Optionally, the generation module 530, is configured as:
The function of receiving at least one page elements of user's input executes code；
Function based on positioning formula layout code and at least one page elements after insertion content-data executes generation
Code, generates the page code of the page.
Optionally, as shown in fig. 7, described device further include:
Display module 560 is configured as executing the page generation when receiving when executing instruction of the page code
Code, shows the page.
In the embodiment of the present application, terminal can identify the page member for including in designed image according to the designed image of the page
Element, and determine the location information of each page elements, the positioning of page elements is generated according to the location information of each page elements
Formula layout code, and then generate the page code of the page.In this way, according to the designed image of the page of user's input, terminal
Corresponding positioning formula layout code is automatically generated, and then generates page code, so that the size of code that technical staff writes subtracts significantly
It is few, save manpower and the time of cost.
About the device in above-described embodiment, wherein modules execute the concrete mode of operation in related this method
Embodiment in be described in detail, no detailed explanation will be given here.
It should be understood that it is provided by the above embodiment generate page code device when generating page code, only with
The division progress of above-mentioned each functional module can according to need and for example, in practical application by above-mentioned function distribution by not
Same functional module is completed, i.e., the internal structure of equipment is divided into different functional modules, to complete whole described above
Or partial function.In addition, the device provided by the above embodiment for generating page code and the method for generating page code are implemented
Example belongs to same design, and specific implementation process is detailed in embodiment of the method, and which is not described herein again.
Fig. 8 is a kind of structural block diagram of terminal provided by the embodiments of the present application.The terminal can be in above-described embodiment
Terminal.The terminal 800 can be portable mobile termianl, such as: smart phone, tablet computer.Terminal 800 is also possible to be referred to as
Other titles such as user equipment, portable terminal.
In general, terminal 800 includes: processor 801 and memory 802.
Processor 801 may include one or more processing cores, such as 4 core processors, 8 core processors etc..Place
Reason device 801 can use DSP (Digital Signal Processing, Digital Signal Processing), FPGA (Field-
Programmable Gate Array, field programmable gate array), PLA (Programmable Logic Array, may be programmed
Logic array) at least one of example, in hardware realize.Processor 801 also may include primary processor and coprocessor, master
Processor is the processor for being handled data in the awake state, also referred to as CPU (Central Processing
Unit, central processing unit)；Coprocessor is the low power processor for being handled data in the standby state.?
In some embodiments, processor 801 can be integrated with GPU (Graphics Processing Unit, image processor),
GPU is used to be responsible for the rendering and drafting of content to be shown needed for display screen.In some embodiments, processor 801 can also be wrapped
AI (Artificial Intelligence, artificial intelligence) processor is included, the AI processor is for handling related machine learning
Calculating operation.
Memory 802 may include one or more computer readable storage mediums, which can
To be tangible and non-transient.Memory 802 may also include high-speed random access memory and nonvolatile memory,
Such as one or more disk storage equipments, flash memory device.In some embodiments, non-transient in memory 802
Computer readable storage medium for storing at least one instruction, at least one instruction for performed by processor 801 with
The method for realizing generation page code provided herein.
In some embodiments, terminal 800 is also optional includes: peripheral device interface 803 and at least one peripheral equipment.
Specifically, peripheral equipment includes: radio circuit 804, touch display screen 805, camera 806, voicefrequency circuit 807, positioning component
At least one of 808 and power supply 809.
Peripheral device interface 803 can be used for I/O (Input/Output, input/output) is relevant outside at least one
Peripheral equipment is connected to processor 801 and memory 802.In some embodiments, processor 801, memory 802 and peripheral equipment
Interface 803 is integrated on same chip or circuit board；In some other embodiments, processor 801, memory 802 and outer
Any one or two in peripheral equipment interface 803 can realize on individual chip or circuit board, the present embodiment to this not
It is limited.
Radio circuit 804 is for receiving and emitting RF (Radio Frequency, radio frequency) signal, also referred to as electromagnetic signal.It penetrates
Frequency circuit 804 is communicated by electromagnetic signal with communication network and other communication equipments.Radio circuit 804 turns electric signal
It is changed to electromagnetic signal to be sent, alternatively, the electromagnetic signal received is converted to electric signal.Optionally, radio circuit 804 wraps
It includes: antenna system, RF transceiver, one or more amplifiers, tuner, oscillator, digital signal processor, codec chip
Group, user identity module card etc..Radio circuit 804 can be carried out by least one wireless communication protocol with other terminals
Communication.The wireless communication protocol includes but is not limited to: WWW, Metropolitan Area Network (MAN), Intranet, each third generation mobile communication network (2G, 3G,
4G and 5G), WLAN and/or WiFi (Wireless Fidelity, Wireless Fidelity) network.In some embodiments, it penetrates
Frequency circuit 804 can also include NFC (Near Field Communication, wireless near field communication) related circuit, this
Application is not limited this.
Touch display screen 805 is for showing UI (User Interface, user interface).The UI may include figure, text
Sheet, icon, video and its their any combination.Touch display screen 805 also have acquisition touch display screen 805 surface or
The ability of the touch signal of surface.The touch signal can be used as control signal and be input to processor 801 and be handled.Touching
Display screen 805 is touched for providing virtual push button and/or dummy keyboard, also referred to as soft button and/or soft keyboard.In some embodiments
In, touch display screen 805 can be one, and the front panel of terminal 800 is arranged；In further embodiments, touch display screen 805
It can be at least two, be separately positioned on the different surfaces of terminal 800 or in foldover design；In still other embodiments, touch
Display screen 805 can be flexible display screen, be arranged on the curved surface of terminal 800 or on fold plane.Even, touch display screen
805 can also be arranged to non-rectangle irregular figure, namely abnormity screen.Touch display screen 805 can use LCD (Liquid
Crystal Display, liquid crystal display), OLED (Organic Light-Emitting Diode, Organic Light Emitting Diode)
Etc. materials preparation.
CCD camera assembly 806 is for acquiring image or video.Optionally, CCD camera assembly 806 include front camera and
Rear camera.In general, front camera is for realizing video calling or self-timer, rear camera is for realizing photo or video
Shooting.In some embodiments, rear camera at least two are main camera, depth of field camera, wide-angle imaging respectively
Any one in head, to realize that main camera and the fusion of depth of field camera realize background blurring function, main camera and wide-angle
Pan-shot and VR (Virtual Reality, virtual reality) shooting function are realized in camera fusion.In some embodiments
In, CCD camera assembly 806 can also include flash lamp.Flash lamp can be monochromatic warm flash lamp, be also possible to double-colored temperature flash of light
Lamp.Double-colored temperature flash lamp refers to the combination of warm light flash lamp and cold light flash lamp, can be used for the light compensation under different-colour.
Voicefrequency circuit 807 is used to provide the audio interface between user and terminal 800.Voicefrequency circuit 807 may include wheat
Gram wind and loudspeaker.Microphone is used to acquire the sound wave of user and environment, and converts sound waves into electric signal and be input to processor
801 are handled, or are input to radio circuit 804 to realize voice communication.For stereo acquisition or the purpose of noise reduction, wheat
Gram wind can be it is multiple, be separately positioned on the different parts of terminal 800.Microphone can also be array microphone or omnidirectional's acquisition
Type microphone.Loudspeaker is then used to that sound wave will to be converted to from the electric signal of processor 801 or radio circuit 804.Loudspeaker can
To be traditional wafer speaker, it is also possible to piezoelectric ceramic loudspeaker.When loudspeaker is piezoelectric ceramic loudspeaker, not only may be used
To convert electrical signals to the audible sound wave of the mankind, the sound wave that the mankind do not hear can also be converted electrical signals to survey
Away from etc. purposes.In some embodiments, voicefrequency circuit 807 can also include earphone jack.
Positioning component 808 is used for the current geographic position of positioning terminal 800, to realize navigation or LBS (Location
Based Service, location based service).Positioning component 808 can be the GPS (Global based on the U.S.
Positioning System, global positioning system), China dipper system or Russia Galileo system positioning group
Part.
Power supply 809 is used to be powered for the various components in terminal 800.Power supply 809 can be alternating current, direct current,
Disposable battery or rechargeable battery.When power supply 809 includes rechargeable battery, which can be wired charging electricity
Pond or wireless charging battery.Wired charging battery is the battery to be charged by Wireline, and wireless charging battery is by wireless
The battery of coil charges.The rechargeable battery can be also used for supporting fast charge technology.
In some embodiments, terminal 800 further includes having one or more sensors 810.The one or more sensors
810 include but is not limited to: acceleration transducer 811, gyro sensor 812, pressure sensor 813, fingerprint sensor 814,
Optical sensor 815 and proximity sensor 816.
The acceleration that acceleration transducer 811 can detecte in three reference axis of the coordinate system established with terminal 800 is big
It is small.For example, acceleration transducer 811 can be used for detecting component of the acceleration of gravity in three reference axis.Processor 801 can
With the acceleration of gravity signal acquired according to acceleration transducer 811, touch display screen 805 is controlled with transverse views or longitudinal view
Figure carries out the display of user interface.Acceleration transducer 811 can be also used for the acquisition of game or the exercise data of user.
Gyro sensor 812 can detecte body direction and the rotational angle of terminal 800, and gyro sensor 812 can
To cooperate with acquisition user to act the 3D of terminal 800 with acceleration transducer 811.Processor 801 is according to gyro sensor 812
Following function may be implemented in the data of acquisition: when action induction (for example changing UI according to the tilt operation of user), shooting
Image stabilization, game control and inertial navigation.
The lower layer of side frame and/or touch display screen 805 in terminal 800 can be set in pressure sensor 813.Work as pressure
When the side frame of terminal 800 is arranged in sensor 813, it can detecte user to the gripping signal of terminal 800, believed according to the gripping
Number carry out right-hand man's identification or prompt operation.When the lower layer of touch display screen 805 is arranged in pressure sensor 813, Ke Yigen
According to user to the pressure operation of touch display screen 805, realization controls the operability control on the interface UI.Operability
Control includes at least one of button control, scroll bar control, icon control, menu control.
Fingerprint sensor 814 is used to acquire the fingerprint of user, according to the identity of collected fingerprint recognition user.Knowing
Not Chu the identity of user when being trusted identity, authorize the user to execute relevant sensitive operation, the sensitive operation by processor 801
Including solution lock screen, check encryption information, downloading software, payment and change setting etc..End can be set in fingerprint sensor 814
Front, the back side or the side at end 800.When being provided with physical button or manufacturer Logo in terminal 800, fingerprint sensor 814 can
To be integrated with physical button or manufacturer Logo.
Optical sensor 815 is for acquiring ambient light intensity.In one embodiment, processor 801 can be according to optics
The ambient light intensity that sensor 815 acquires controls the display brightness of touch display screen 805.Specifically, when ambient light intensity is higher
When, the display brightness of touch display screen 805 is turned up；When ambient light intensity is lower, the display for turning down touch display screen 805 is bright
Degree.In another embodiment, the ambient light intensity that processor 801 can also be acquired according to optical sensor 815, dynamic adjust
The acquisition parameters of CCD camera assembly 806.
Proximity sensor 816, also referred to as range sensor are generally arranged at the front of terminal 800.Proximity sensor 816 is used
In the distance between the front of acquisition user and terminal 800.In one embodiment, when proximity sensor 816 detects user
When the distance between front of terminal 800 gradually becomes smaller, touch display screen 805 is controlled by processor 801 and is cut from bright screen state
It is changed to breath screen state；When proximity sensor 816 detects user and the distance between the front of terminal 800 becomes larger, by
Processor 801 controls touch display screen 805 and is switched to bright screen state from breath screen state.
It will be understood by those skilled in the art that the restriction of the not structure paired terminal 800 of structure shown in Fig. 8, can wrap
It includes than illustrating more or fewer components, perhaps combine certain components or is arranged using different components.
In the embodiment of the present application, terminal can identify the page member for including in designed image according to the designed image of the page
Element, and determine the location information of each page elements, the positioning of page elements is generated according to the location information of each page elements
Formula layout code, and then generate the page code of the page.In this way, according to the designed image of the page of user's input, terminal
Corresponding positioning formula layout code is automatically generated, and then generates page code, so that the size of code that technical staff writes subtracts significantly
It is few, save manpower and the time of cost.
In the exemplary embodiment, a kind of computer readable storage medium is additionally provided, is stored at least in storage medium
One instruction, at least one instruction are loaded by processor and are executed the side to realize the generation page code in above-described embodiment
Method.For example, the computer readable storage medium can be ROM, random access memory (RAM), CD-ROM, tape, floppy disk
With optical data storage devices etc..
Fig. 9 is a kind of structural schematic diagram of computer equipment provided by the embodiments of the present application, which can be
Terminal in above-described embodiment.The computer equipment 900 can generate bigger difference because configuration or performance are different, can wrap
Include one or more processors (central processing units, CPU) 901 and one or more storage
Device 902, wherein at least one instruction is stored in the memory 902, at least one instruction is by the processor 901
It loads and executes to realize above-mentioned generation page code.
Those of ordinary skill in the art will appreciate that realizing that all or part of the steps of above-described embodiment can pass through hardware
It completes, relevant hardware can also be instructed to complete by program, the program can store in a kind of computer-readable
In storage medium, storage medium mentioned above can be read-only memory, disk or CD etc..
The foregoing is merely the preferred embodiments of the application, not to limit the application, it is all in spirit herein and
Within principle, any modification, equivalent replacement, improvement and so on be should be included within the scope of protection of this application.
Claims (10)
1. a kind of method for generating page code, which is characterized in that the described method includes:
Obtain the designed image of the page；
It identifies the page elements for including in the designed image, determines the location information of each page elements；And
Based on the location information, the positioning formula layout code of the page is generated, and is based on the positioning formula layout code
Generate the page code of the page.
2. the method according to claim 1, wherein the location information of each page elements of the determination
Step, comprising:
The minimum circumscribed rectangle for determining each page elements determines the location information of the minimum circumscribed rectangle using as every
The location information of a page elements.
3. generating the page the method according to claim 1, wherein described be based on the location information
The step of positioning formula layout code, comprising:
It obtains pre-stored for showing the display Code Template of the page elements；
Respectively by the location information of each page elements, is written in the display Code Template, obtains each page
The display code of element；
According to the display code of each page elements, the positioning formula cloth not comprising content-data of the page is generated
Station code.
4. according to the method described in claim 3, it is characterized in that, the display generation according to each page elements
Code, after the step of generating the positioning formula layout code not comprising content-data of the page, further includes:
Receive the content-data of at least one page elements of user's input；
By the content-data of at least one page elements, it is inserted at least one page described in the positioning formula layout code
Positioning formula layout code in the display code of surface element, after obtaining insertion content-data；
The described the step of page code of the page is generated based on the positioning formula layout code, comprising:
The page code of the page is generated based on the positioning formula layout code after insertion content-data.
5. according to the method described in claim 3, it is characterized in that, the display generation according to each page elements
Code, after the step of generating the positioning formula layout code not comprising content-data of the page, further includes:
Obtain the content-data of at least one page elements detected in the designed image；
By the content-data of at least one page elements, it is inserted at least one page described in the positioning formula layout code
Positioning formula layout code in the display code of surface element, after obtaining insertion content-data；
The described the step of page code of the page is generated based on the positioning formula layout code, comprising:
The page code of the page is generated based on the positioning formula layout code after insertion content-data.
6. method according to claim 4 or 5, which is characterized in that the positioning formula cloth after the content-data based on insertion
Station code generates the step of page code of the page, comprising:
The function of receiving at least one page elements of user's input executes code；
Function based on positioning formula layout code and at least one page elements after insertion content-data executes code, raw
At the page code of the page.
7. the method according to claim 1, wherein the method also includes:
When receiving when executing instruction of the page code, the page code is executed, shows the page.
8. a kind of device for generating page code, which is characterized in that described device includes:
Module is obtained, for obtaining the designed image of the page；
Determining module, the page elements for including in the designed image for identification determine the position of each page elements
Information；
Generation module generates the positioning formula layout code of the page, and based on described fixed for being based on the location information
Position formula layout code generates the page code of the page.
9. a kind of terminal, which is characterized in that the terminal includes processor and memory, and at least one is stored in the memory
Item instruction, at least one instruction are loaded by the processor and are executed to realize the life as described in claim 1 to 7 is any
At the method for page code.
10. a kind of computer readable storage medium, which is characterized in that be stored at least one instruction, institute in the storage medium
At least one instruction is stated to be loaded by the processor and executed to realize the generation page generation as described in claim 1 to 7 is any
The method of code.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910610124.4A CN110321126B (en) | 2019-07-08 | 2019-07-08 | Method and device for generating page code |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910610124.4A CN110321126B (en) | 2019-07-08 | 2019-07-08 | Method and device for generating page code |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110321126A true CN110321126A (en) | 2019-10-11 |
| CN110321126B CN110321126B (en) | 2020-09-29 |
Family
ID=68123039
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910610124.4A Active CN110321126B (en) | 2019-07-08 | 2019-07-08 | Method and device for generating page code |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110321126B (en) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111208998A (en) * | 2019-12-27 | 2020-05-29 | 深圳力维智联技术有限公司 | Method and device for automatically laying out data visualization large screen and storage medium |
| CN111475156A (en) * | 2020-04-13 | 2020-07-31 | 北京金堤科技有限公司 | Page code generation method and device, electronic equipment and storage medium |
| CN112416340A (en) * | 2020-05-14 | 2021-02-26 | 上海哔哩哔哩科技有限公司 | Webpage generation method and system based on sketch |
| CN113742619A (en) * | 2020-11-13 | 2021-12-03 | 北京沃东天骏信息技术有限公司 | Page layout determination method and device, electronic equipment and storage medium |
| WO2022121723A1 (en) * | 2020-12-08 | 2022-06-16 | 中兴通讯股份有限公司 | Identification method for software interface design drawing component information |
Citations (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105930159A (en) * | 2016-04-20 | 2016-09-07 | 中山大学 | Image-based interface code generation method and system |
| CN107193554A (en) * | 2017-04-27 | 2017-09-22 | 北京小米移动软件有限公司 | A kind of method and apparatus for generating front-end code |
| CN107193815A (en) * | 2016-03-14 | 2017-09-22 | 阿里巴巴集团控股有限公司 | A kind of processing method of page code, device and equipment |
| CN108090159A (en) * | 2017-12-12 | 2018-05-29 | 福建中金在线信息科技有限公司 | A kind of generation method of Website page, device, electronic equipment and storage medium |
| CN108255489A (en) * | 2018-01-12 | 2018-07-06 | 北京三快在线科技有限公司 | Front-end interface code generating method, device, electronic equipment and storage medium |
| CN108304183A (en) * | 2018-02-26 | 2018-07-20 | 北京车和家信息技术有限公司 | A kind of user interface creating method, device and electronic equipment |
| CN108345456A (en) * | 2018-03-07 | 2018-07-31 | 平安普惠企业管理有限公司 | Page code generation method, device, computer equipment and storage medium |
| CN108415705A (en) * | 2018-03-13 | 2018-08-17 | 腾讯科技（深圳）有限公司 | Webpage generating method, device, storage medium and equipment |
| CN108804093A (en) * | 2018-06-15 | 2018-11-13 | 联想(北京)有限公司 | A kind of code generating method and electronic equipment |
| CN109343845A (en) * | 2018-08-14 | 2019-02-15 | 北京奇艺世纪科技有限公司 | A kind of code file generation method and device |
| US20190114156A1 (en) * | 2017-05-11 | 2019-04-18 | International Business Machines Corporation | Mapping of software code via user interface summarization |
| CN109783094A (en) * | 2018-12-15 | 2019-05-21 | 深圳壹账通智能科技有限公司 | Front end page generation method, device, computer equipment and storage medium |
| CN109857388A (en) * | 2019-01-10 | 2019-06-07 | 北京城市网邻信息技术有限公司 | Code generating method, device, server and computer-readable medium |
| US10331423B1 (en) * | 2016-08-25 | 2019-06-25 | Zigisoft Llc | Utilizing cross platform streamable user interfaces to reduce software deployment frequency caused by user interface improvements |
-
2019
- 2019-07-08 CN CN201910610124.4A patent/CN110321126B/en active Active
Patent Citations (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107193815A (en) * | 2016-03-14 | 2017-09-22 | 阿里巴巴集团控股有限公司 | A kind of processing method of page code, device and equipment |
| CN105930159A (en) * | 2016-04-20 | 2016-09-07 | 中山大学 | Image-based interface code generation method and system |
| US10331423B1 (en) * | 2016-08-25 | 2019-06-25 | Zigisoft Llc | Utilizing cross platform streamable user interfaces to reduce software deployment frequency caused by user interface improvements |
| CN107193554A (en) * | 2017-04-27 | 2017-09-22 | 北京小米移动软件有限公司 | A kind of method and apparatus for generating front-end code |
| US20190114156A1 (en) * | 2017-05-11 | 2019-04-18 | International Business Machines Corporation | Mapping of software code via user interface summarization |
| CN108090159A (en) * | 2017-12-12 | 2018-05-29 | 福建中金在线信息科技有限公司 | A kind of generation method of Website page, device, electronic equipment and storage medium |
| CN108255489A (en) * | 2018-01-12 | 2018-07-06 | 北京三快在线科技有限公司 | Front-end interface code generating method, device, electronic equipment and storage medium |
| CN108304183A (en) * | 2018-02-26 | 2018-07-20 | 北京车和家信息技术有限公司 | A kind of user interface creating method, device and electronic equipment |
| CN108345456A (en) * | 2018-03-07 | 2018-07-31 | 平安普惠企业管理有限公司 | Page code generation method, device, computer equipment and storage medium |
| CN108415705A (en) * | 2018-03-13 | 2018-08-17 | 腾讯科技（深圳）有限公司 | Webpage generating method, device, storage medium and equipment |
| CN108804093A (en) * | 2018-06-15 | 2018-11-13 | 联想(北京)有限公司 | A kind of code generating method and electronic equipment |
| CN109343845A (en) * | 2018-08-14 | 2019-02-15 | 北京奇艺世纪科技有限公司 | A kind of code file generation method and device |
| CN109783094A (en) * | 2018-12-15 | 2019-05-21 | 深圳壹账通智能科技有限公司 | Front end page generation method, device, computer equipment and storage medium |
| CN109857388A (en) * | 2019-01-10 | 2019-06-07 | 北京城市网邻信息技术有限公司 | Code generating method, device, server and computer-readable medium |
Non-Patent Citations (1)
| Title |
|---|
| TONY BELTRAMELLI: "pix2code: Generating Code from a Graphical User Interface Screenshot", 《ARXIV:1705.07962V2》 * |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111208998A (en) * | 2019-12-27 | 2020-05-29 | 深圳力维智联技术有限公司 | Method and device for automatically laying out data visualization large screen and storage medium |
| CN111208998B (en) * | 2019-12-27 | 2024-03-05 | 深圳力维智联技术有限公司 | Method, device and storage medium for automatic layout of data visualization large screen |
| CN111475156A (en) * | 2020-04-13 | 2020-07-31 | 北京金堤科技有限公司 | Page code generation method and device, electronic equipment and storage medium |
| CN111475156B (en) * | 2020-04-13 | 2024-04-02 | 北京金堤科技有限公司 | Page code generation method and device, electronic equipment and storage medium |
| CN112416340A (en) * | 2020-05-14 | 2021-02-26 | 上海哔哩哔哩科技有限公司 | Webpage generation method and system based on sketch |
| CN113742619A (en) * | 2020-11-13 | 2021-12-03 | 北京沃东天骏信息技术有限公司 | Page layout determination method and device, electronic equipment and storage medium |
| WO2022121723A1 (en) * | 2020-12-08 | 2022-06-16 | 中兴通讯股份有限公司 | Identification method for software interface design drawing component information |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110321126B (en) | 2020-09-29 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110321126A (en) | The method and apparatus for generating page code | |
| CN109712224A (en) | Rendering method, device and the smart machine of virtual scene | |
| CN109977333A (en) | Webpage display process, device, computer equipment and storage medium | |
| CN110121094A (en) | Video is in step with display methods, device, equipment and the storage medium of template | |
| CN109491924A (en) | Code detection method, device, terminal and storage medium | |
| CN109862412A (en) | It is in step with the method, apparatus and storage medium of video | |
| CN110081902A (en) | Direction indicating method, device and terminal in navigation | |
| CN108829488A (en) | Generate Web can interaction page method, apparatus and storage medium | |
| CN109302632A (en) | Obtain method, apparatus, terminal and the storage medium of live video picture | |
| CN109886208A (en) | Method, apparatus, computer equipment and the storage medium of object detection | |
| CN108132790A (en) | Detect the method, apparatus and computer storage media of dead code | |
| CN110211202A (en) | Broken line method for drafting, device, electronic equipment and storage medium | |
| CN108491748B (en) | Graphic code identification and generation method and device and computer readable storage medium | |
| CN112230908A (en) | Method and device for aligning components, electronic equipment and storage medium | |
| CN110290426A (en) | Method, apparatus, equipment and the storage medium of showing resource | |
| CN110225390A (en) | Method, apparatus, terminal and the computer readable storage medium of video preview | |
| CN108734662A (en) | The method and apparatus for showing icon | |
| CN112135191A (en) | Video editing method, device, terminal and storage medium | |
| CN110109770A (en) | Adjustment method, device, electronic equipment and medium | |
| CN110275655A (en) | Lyric display method, device, equipment and storage medium | |
| CN110244999A (en) | Control method, apparatus, equipment and the storage medium of destination application operation | |
| CN107943484A (en) | The method and apparatus for performing business function | |
| CN110147796A (en) | Image matching method and device | |
| CN110297684A (en) | Theme display methods, device and storage medium based on virtual portrait | |
| CN108829582A (en) | The method and apparatus of program compatibility |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |