CN109710258A - WeChat applet interface generation method and device - Google Patents
WeChat applet interface generation method and device Download PDFInfo
- Publication number
- CN109710258A CN109710258A CN201811622192.4A CN201811622192A CN109710258A CN 109710258 A CN109710258 A CN 109710258A CN 201811622192 A CN201811622192 A CN 201811622192A CN 109710258 A CN109710258 A CN 109710258A
- Authority
- CN
- China
- Prior art keywords
- mentioned
- page
- picture
- page elements
- file
- 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
Links
Landscapes
- Processing Or Creating Images (AREA)
Abstract
The embodiment of the application discloses a method and a device for generating a WeChat applet interface, wherein the method comprises the following steps: acquiring a label file designed by a user experience UX interface, wherein the label file comprises json nodes; determining file configuration information of the WeChat applet interface according to animation description information or page description information in the json node; and generating a wechat small program interface layout file and a wechat small program interface pattern file according to the file configuration information. By adopting the embodiment of the application, the time for interface development can be reduced, the speed for generating the interface and the efficiency of developers are improved, the flexibility of the interface development is high, and the application range is wide.
Description
Technical field
This application involves the method and devices that field of computer technology more particularly to a kind of wechat small routine interface generate.
Background technique
Graphic user interface is visual experience and the interactive operation part of screen product, is the friendship that people are solution with machine
Flow problem and the new concept generated.Graphical interfaces acts as the information intercourse platform of human-computer interaction, and can information interchange accurate, fast
Whether speed is received to become with cognition the key of interface success or not.Earliest man-machine interface (User Interface,
UI) or user interface, by hardware and software two in terms of form, and UI designs spy and refers to software interface under normal circumstances, i.e.,
Interface described in us.Nowadays with the development of industry technology, various applications emerge one after another, with user experience (User
Experience, UX) centered on UX interface focus more on people and feeling when system interaction.Carrying out interface development
When, the prototype figure that program development engineer provides according to UX interface teacher carries out hand-coding code to realize that interface is opened
Hair, such mode is time-consuming and laborious and easy error, especially when prototype figure changes or more new effects, program
Developmental Engineer needs to check one by one and more fresh code again, not only wastes time in this way and manpower, but also to program development engineering
The requirement of teacher is also very high.Therefore, interface development cost and maintenance cost how are reduced, the efficiency for improving developer becomes current
Urgent problem to be solved.
Summary of the invention
The embodiment of the present application provides a kind of method and device of wechat small routine interface generation.Can reduce interface development when
Between, the efficiency of speed and developer that interface generates is improved, applicability is high.
In a first aspect, the embodiment of the present application provides a kind of method of wechat small routine interface generation, this method comprises:
The mark file of user experience UX interface is obtained, includes json node in above-mentioned mark file;
According in above-mentioned json node animation description information or page-describing information determine the text at wechat small routine interface
Part configuration information;
Wechat small routine interface layout files and wechat small routine styles text are generated according to above-mentioned file configuration information
Part.
With reference to first aspect, in a kind of possible embodiment, above-mentioned mark file includes the animation of UX interface
File is marked, above-mentioned json node includes the first json node;
It include animation description information in above-mentioned first json node.
With reference to first aspect, in a kind of possible embodiment, above-mentioned mark file includes the static state of UX interface
The page marks file, and above-mentioned json node includes the 2nd json node;
It include the page-describing information of static page in above-mentioned 2nd json node.
With reference to first aspect, in a kind of possible embodiment, animation frame is included at least in above-mentioned animation description information
Rate, terminates frame number, picture identification, picture description information and picture information converting at initial frame number;It is above-mentioned according to above-mentioned json node
In animation description information determine the file configuration information at wechat small routine interface, comprising:
Obtain animation frame per second in above-mentioned first json node, initial frame number and terminate frame number, according to above-mentioned animation frame per second,
Above-mentioned initial frame number and above-mentioned end frame number determine the animation duration;
The layers node in above-mentioned first json node is parsed, at least one for including in above-mentioned layers node is obtained
Picture identification, and the picture information converting of each Target Photo corresponding with each picture identification are wrapped in above-mentioned picture information converting
Include transformation start frame, transformation end frame and transformation parameter;
The dynamic effect configuration information of above-mentioned each Target Photo is generated according to the picture information converting of above-mentioned each Target Photo, it is above-mentioned
It include moving effect starting keyframe, dynamic effect terminates key frame and moving effect information converting in dynamic effect configuration information;
Each picture mark is obtained from the assets node of above-mentioned first json node according at least one above-mentioned picture identification
Corresponding picture description information is known to obtain the Target Photo description information of above-mentioned each Target Photo;
By the above-mentioned animation duration, the dynamic effect configuration information of above-mentioned each Target Photo and the mesh of above-mentioned each Target Photo
Mark picture description information is determined as the file configuration information at above-mentioned wechat small routine interface.
With reference to first aspect, in a kind of possible embodiment, it is above-mentioned according at least one above-mentioned picture identification from upper
It states and obtains the corresponding picture description information of each picture identification in the assets node of the first json node to obtain above-mentioned each target
The Target Photo description information of picture includes:
The assets node in above-mentioned first json node is parsed, at least one for including in above-mentioned assets node is obtained
The picture identification and picture description information of picture, wherein above-mentioned picture description information includes picture width, picture height, picture
One or more in path and picture name;
It is determined from the above-mentioned at least picture identification of a picture identical at least at least one above-mentioned picture identification
One Target Photo mark, identifies the target that corresponding picture description information is determined as above-mentioned each Target Photo for each Target Photo
Picture description information.
With reference to first aspect, in a kind of possible embodiment, the page-describing information of above-mentioned static page includes extremely
Few corresponding page elements description information of a page elements;The above-mentioned page-describing information according in above-mentioned json node determines
The file configuration information at wechat small routine interface, comprising:
The ardboards node in above-mentioned 2nd json node is parsed, at least one in above-mentioned ardboards node is obtained
A layers minor structure, wherein a layers minor structure is used to describe at least one page for including in a static page
The corresponding page elements description information of element, wherein above-mentioned page elements description information includes page elements type, page elements
Corresponding area coordinate and page elements pattern;
By the corresponding page elements type of each page elements, the corresponding area coordinate of page elements and page elements pattern
It is determined as the file configuration information at above-mentioned wechat small routine interface.
With reference to first aspect, in a kind of possible embodiment, the above method further include:
Obtain the corresponding area of each page elements described in any layers minor structure in above-mentioned ardboards node
Domain coordinate;
The positional relationship between above-mentioned each page elements is determined according to the corresponding area coordinate of above-mentioned each page elements,
In above-mentioned positional relationship include inclusion relation and/or neighbouring relations, above-mentioned neighbouring relations include laterally adjacent and longitudinally adjacent;
If be between any two page elements in any of the above-described layers minor structure it is laterally adjacent, by above-mentioned any two
A page elements form a new page elements by row layout, and by above-mentioned any two page elements, and determine above-mentioned new
The corresponding area coordinate of page elements;
If be between any two page elements in any of the above-described layers minor structure it is longitudinally adjacent, by above-mentioned any two
A page elements press Column Layout, and determine the corresponding area coordinate of each page elements for pressing Column Layout.
Second aspect, the embodiment of the present application provide a kind of device of wechat small routine interface generation, which includes:
File obtaining unit is marked, for obtaining the mark file of user experience UX interface, in above-mentioned mark file
Including json node;
File configuration information determination unit, for according in the determining above-mentioned json node of above-mentioned mark file obtaining unit
Animation description information or page-describing information determine the file configuration information at wechat small routine interface;
Interface file generation unit, the above-mentioned file configuration for being determined according to above-mentioned file configuration information determination unit are believed
Breath generates wechat small routine interface layout files and wechat small routine styles file.
In conjunction with second aspect, in a kind of possible embodiment, above-mentioned mark file includes the animation of UX interface
File is marked, above-mentioned json node includes the first json node;
It include animation description information in above-mentioned first json node.
In conjunction with second aspect, in a kind of possible embodiment, above-mentioned mark file includes the static state of UX interface
The page marks file, and above-mentioned json node includes the 2nd json node;
It include the page-describing information of static page in above-mentioned 2nd json node.
In conjunction with second aspect, in a kind of possible embodiment, animation frame is included at least in above-mentioned animation description information
Rate, terminates frame number, picture identification, picture description information and picture information converting at initial frame number;Above-mentioned file configuration information determines
Unit is used for:
Obtain animation frame per second in above-mentioned first json node, initial frame number and terminate frame number, according to above-mentioned animation frame per second,
Above-mentioned initial frame number and above-mentioned end frame number determine the animation duration;
The layers node in above-mentioned first json node is parsed, at least one for including in above-mentioned layers node is obtained
Picture identification, and the picture information converting of each Target Photo corresponding with each picture identification are wrapped in above-mentioned picture information converting
Include transformation start frame, transformation end frame and transformation parameter;
The dynamic effect configuration information of above-mentioned each Target Photo is generated according to the picture information converting of above-mentioned each Target Photo, it is above-mentioned
It include moving effect starting keyframe, dynamic effect terminates key frame and moving effect information converting in dynamic effect configuration information;
Each picture mark is obtained from the assets node of above-mentioned first json node according at least one above-mentioned picture identification
Corresponding picture description information is known to obtain the Target Photo description information of above-mentioned each Target Photo;
By the above-mentioned animation duration, the dynamic effect configuration information of above-mentioned each Target Photo and the mesh of above-mentioned each Target Photo
Mark picture description information is determined as the file configuration information at above-mentioned wechat small routine interface.
In conjunction with second aspect, in a kind of possible embodiment, above-mentioned file configuration information determination unit is also used to:
The assets node in above-mentioned first json node is parsed, at least one for including in above-mentioned assets node is obtained
The picture identification and picture description information of picture, wherein above-mentioned picture description information includes picture width, picture height, picture
One or more in path and picture name;
It is determined from the above-mentioned at least picture identification of a picture identical at least at least one above-mentioned picture identification
One Target Photo mark, identifies the target that corresponding picture description information is determined as above-mentioned each Target Photo for each Target Photo
Picture description information.
In conjunction with second aspect, in a kind of possible embodiment, the page-describing information of above-mentioned static page includes extremely
Few corresponding page elements description information of a page elements;Above-mentioned file configuration information determination unit is also used to:
The ardboards node in above-mentioned 2nd json node is parsed, at least one in above-mentioned ardboards node is obtained
A layers minor structure, wherein a layers minor structure is used to describe at least one page for including in a static page
The corresponding page elements description information of element, wherein above-mentioned page elements description information includes page elements type, page elements
Corresponding area coordinate and page elements pattern;
By the corresponding page elements type of each page elements, the corresponding area coordinate of page elements and page elements pattern
It is determined as the file configuration information at above-mentioned wechat small routine interface.
In conjunction with second aspect, in a kind of possible embodiment, the device that above-mentioned wechat small routine interface generates also is wrapped
It includes:
Interface file improves unit, describes for obtaining in any layers minor structure in above-mentioned ardboards node
The corresponding area coordinate of each page elements;
The positional relationship between above-mentioned each page elements is determined according to the corresponding area coordinate of above-mentioned each page elements,
In above-mentioned positional relationship include inclusion relation and/or neighbouring relations, above-mentioned neighbouring relations include laterally adjacent and longitudinally adjacent;
If be between any two page elements in any of the above-described layers minor structure it is laterally adjacent, by above-mentioned any two
A page elements form a new page elements by row layout, and by above-mentioned any two page elements, and determine above-mentioned new
The corresponding area coordinate of page elements;
If be between any two page elements in any of the above-described layers minor structure it is longitudinally adjacent, by above-mentioned any two
A page elements press Column Layout, and determine the corresponding area coordinate of each page elements for pressing Column Layout.
The third aspect, the embodiment of the present application provide a kind of terminal device, which includes processor and memory,
The processor and memory are connected with each other.The memory for store support the terminal device execute above-mentioned first aspect and/or
The computer program for the method that any possible implementation of first aspect provides, which includes program instruction,
The processor is configured for calling above procedure instruction, executes above-mentioned first aspect and/or first aspect is any possible
Method provided by embodiment.
Fourth aspect, the embodiment of the present application provide a kind of computer readable storage medium, the computer-readable storage medium
Matter is stored with computer program, which includes program instruction, which makes at this when being executed by a processor
It manages device and executes method provided by above-mentioned first aspect and/or any possible embodiment of first aspect.
Implement the embodiment of the present application, has the following beneficial effects:
By obtaining the mark file of user experience UX interface, according to the page-describing information in above-mentioned json node
Determine the file configuration information at wechat small routine interface, can reduce developer manually by element extraction file configuration information when
Between, generating wechat small routine interface layout files and wechat small routine styles file according to above-mentioned file configuration information can subtract
The time of few interface development improves the efficiency of speed and developer that interface generates.
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 flow diagram of wechat small routine interface creating method provided by the embodiments of the present application;
Fig. 2 is the form schematic diagram of the first json node provided by the embodiments of the present application;
Fig. 3 a is generation wechat small routine interface layout files provided by the embodiments of the present application and wechat small routine interface sample
One application scenarios schematic diagram of formula file;
Fig. 3 b is generation wechat small routine interface layout files provided by the embodiments of the present application and wechat small routine interface sample
The another application schematic diagram of a scenario of formula file;
Fig. 4 is another flow diagram of wechat small routine interface creating method provided by the embodiments of the present application;
Fig. 5 a is generation wechat small routine interface layout files provided by the embodiments of the present application and wechat small routine interface sample
One application scenarios schematic diagram of formula file;
Fig. 5 b is generation wechat small routine interface layout files provided by the embodiments of the present application and wechat small routine interface sample
The another application schematic diagram of a scenario of formula file;
Fig. 5 c is generation wechat small routine interface layout files provided by the embodiments of the present application and wechat small routine interface sample
The another application schematic diagram of a scenario of formula file;
Fig. 6 is another flow diagram of wechat small routine interface creating method provided by the embodiments of the present application;
Fig. 7 is generation wechat small routine interface layout files and wechat small routine styles provided by the embodiments of the present application
The another application schematic diagram of a scenario of file;
Fig. 8 is the structural schematic diagram of wechat small routine provided by the embodiments of the present application interface generating means;
Fig. 9 is the structural schematic diagram of terminal device provided by the embodiments of the present application.
Specific embodiment
Below in conjunction with the attached drawing in the embodiment of the present application, technical solutions in the embodiments of the present application carries out clear, complete
Site preparation description, it is clear that described embodiments are only a part of embodiments of the present application, instead of all the embodiments.It is based on
Embodiment in the application, it is obtained by those of ordinary skill in the art without making creative efforts every other
Embodiment shall fall in the protection scope of this application.
The method that wechat small routine provided by the embodiments of the present application interface generates, is widely portable to various wechat small routines
Interface development system.When carrying out the interface development at wechat small routine interface, it is soft based on video processing that UX designer can be obtained
Dynamic page or static page prototype figure and the animation of the offer mark or static page mark that part or mapping software design.
By by above-mentioned animation mark or static page mark export, it is available based on user experience UX interface animation mark
File or static page mark file.Wherein, above-mentioned animation mark file includes the first json node, above-mentioned first json node
In include animation description information, above-mentioned static page mark file includes the 2nd json node, is wrapped in above-mentioned 2nd json node
Include the page-describing information of static page.By parsing above-mentioned first json node, it can be obtained and wrapped in above-mentioned animation description information
Animation frame per second, initial frame number, end frame number, picture identification, picture description information and the picture information converting included.And according to obtaining
Above-mentioned animation frame per second, initial frame number, terminate frame number can determine the animation duration, according to above-mentioned picture identification, picture describe
Information and picture information converting can determine the dynamic effect configuration information of above-mentioned each Target Photo and the target of above-mentioned each Target Photo
Picture description information, and then obtain the file configuration information of the animation at wechat small routine interface.By parsing above-mentioned 2nd json
Node can be obtained the corresponding page elements of at least one page elements for including in the page-describing information of above-mentioned static page and retouch
State information, wherein above-mentioned page elements description information includes page elements type, the corresponding area coordinate of page elements and page
Surface element pattern.According to the page elements type in page elements description information, the corresponding area coordinate of page elements and page
Surface element pattern can determine the file configuration information of the static page at wechat small routine interface.According to the file configuration of above-mentioned animation
Information produces the wechat small routine interface layout files and wechat small routine styles file for having animation effect.According to above-mentioned
The file configuration information of static page produces wechat small routine interface layout files and the wechat small routine interface of static page
Pattern file.Method provided by the embodiments of the present application can reduce the time of interface development, improve speed and exploitation that interface generates
The efficiency of personnel keeps the flexibility of interface development high, applied widely.
Method provided by the embodiments of the present application and relevant apparatus are carried out respectively respectively below in conjunction with Fig. 1 to Fig. 9 in detail
Explanation.It may include for obtaining mark file, determining file configuration information, based on file in method provided by the embodiments of the present application
Configuration information generates between wechat small routine interface layout files and wechat small routine styles file and determining page elements
Positional relationship determines the data processing stages such as page elements layout type.Wherein, the realization side of above-mentioned each data processing stage
Formula can be found in following Fig. 1 to implementation shown in Fig. 9.
Referring to Fig. 1, Fig. 1 is a flow diagram of wechat small routine interface creating method provided by the embodiments of the present application.
Method provided by the embodiments of the present application may include steps of 101 to 103:
101, the animation for obtaining user experience UX interface marks file, includes first in above-mentioned animation mark file
Json node.
In some possible embodiments, UX design refers to the design centered on user experience.Under normal conditions, wechat
The design of the dynamic page and/or static page at small routine interface is to utilize Video processing software and/or drawing by UX designer
Software is come the dynamic page and/or static page prototype figure that design.Wherein, the video processing of most common design dynamic page is soft
Part is the Adobe After Effects graphics video processing software released by Adobe company, i.e. AE software.It is understood that
It is that a picture can form animation effect by one or more operations in translation, scaling, transparency change, rotation, multiple
It can produce again after picture combination and more dazzle cruel dynamic effect.Then, in the wechat small routine interface development for carrying out having animation effect,
When UX designer designs dynamic page prototype figure and provides animation mark, is exported, can be obtained by marking above-mentioned animation
Get the animation mark file based on user experience UX interface.It wherein, include the in the format of above-mentioned animation mark file
One json node includes animation description information in above-mentioned first json node.It is understandable to be, in above-mentioned animation description information
Including at least animation frame per second, initial frame number, terminate frame number, picture identification, picture description information and picture information converting.
For example, referring to fig. 2, Fig. 2 is the form schematic diagram of the first json node provided by the embodiments of the present application.Its
In, fr is animation frame per second (i.e. 24), and ip is initial frame number (i.e. 0), and op is to terminate frame number (i.e. 96).Assets node is with array
A child node in first json node existing for form contains all pictures occurred in animation in assets node,
It include the picture identification id of every picture and the picture description information of every picture in descriptor format.Wherein, picture description letter
Breath includes the one or more in picture width w, picture height h, picture path u and picture name p.First figure in Fig. 2
The picture identification id of piece is image_0, and the picture width w in the picture description information of the first picture is 117, picture height h
For 104, picture path u be images/, picture name p is image_0.png.Layers node is existing for array form
Another child node in first json node contains the figure layer set of animation in layers node.Layer type ty include but
It is not limited to PreComp, Solid, Image, Null, Shape, six seed type such as Text, the embodiment of the present application only focuses on figure layer class
Type ty is Image type, i.e. picture type.Then, the descriptor format of every layer of figure layer has included at least the picture identification of every layer of figure layer
RefId and picture information converting, wherein include transformation start frame, transformation end frame and transformation in above-mentioned picture information converting
Parameter.The ty of first layer figure layer is 2 in Fig. 2, i.e., when layer type ty is Image type, ty 2.It is related to first layer figure layer
The picture identification refId of the picture of connection is image_3, and the transformation start frame ip in the picture information converting of first layer figure layer is 0,
Converting end frame op is 96, and transformation parameter ks is with minor structure existing for array form, wherein ks type includes but is not limited to not
Transparency (opacity, for convenience of description can be denoted as o), rotation (rotation, for convenience of description can be denoted as r), position
(position can be denoted as p) and scale (scale, for convenience of describing to be denoted as s), with specific reference to practical application for convenience of description
Scene is determining, herein with no restrictions.
102, the file configuration at wechat small routine interface is determined according to the animation description information in above-mentioned first json node
Information.
It in some possible embodiments, include animation description information in above-mentioned first json node, above-mentioned animation is retouched
It states and includes at least animation frame per second, initial frame number in information, terminates frame number, picture identification, picture description information and picture transformation letter
Breath.It obtains animation frame per second fr, initial frame number ip in above-mentioned first json node and terminates frame number op, according to above-mentioned animation frame per second
Fr, above-mentioned initial frame number ip and above-mentioned end frame number op can determine the animation duration, wherein the animation duration=(terminate
Frame number op- initial frame number ip)/animation frame per second fr.Such as, it is assumed that animation frame rate fr is 24, and initial frame number ip is 0, terminates frame number
Op is 96, then animation duration=(96-0)/24=4s.The layers node in above-mentioned first json node is parsed, is obtained
At least one picture identification refId for including in above-mentioned layers node, and each Target Photo corresponding with each picture identification
Picture information converting, include transformation start frame ip, transformation end frame op and transformation parameter ks in above-mentioned picture information converting.
The dynamic effect configuration information of above-mentioned each Target Photo, above-mentioned dynamic effect configuration are generated according to the picture information converting of above-mentioned each Target Photo
It include moving effect starting keyframe, dynamic effect terminates key frame and moving effect information converting in information.According at least one above-mentioned picture mark
Know refId and obtains the corresponding picture description information of each picture identification from the assets node of above-mentioned first json node to obtain
The Target Photo description information of above-mentioned each Target Photo.The dynamic effect of above-mentioned animation duration, above-mentioned each Target Photo are configured
Information and the Target Photo description information of above-mentioned each Target Photo are determined as the file configuration letter at above-mentioned wechat small routine interface
Breath.
As an example it is assumed that get the animation frame per second fr in above-mentioned first json node be 24, initial frame number ip is 0,
Terminating frame number op is 96, then animation duration=(96-0)/24=4s.Parse the layers section in above-mentioned first json node
Point, getting the picture identification refId that first layer figure layer includes in above-mentioned layers node is image_3, with picture identification
Transformation start frame ip in the picture information converting of the corresponding Target Photo of image_3 (i.e. picture name p is image_3.png)
It is 96 for 0, transformation end frame op, the ks type of transformation parameter ks is r (rotation).Assuming that a picture only includes a dynamic effect,
What then above-mentioned transformation parameter ks was specifically indicated is the corresponding Target Photo of picture identification image_3 (image_3.png) from change
Start frame 0 is changed to start to rotate 360 ° to 96 frame ends.It is converted and is believed according to the picture of above-mentioned Target Photo (image_3.png)
Breath generates the dynamic effect configuration information of above-mentioned Target Photo (image_3.png), and it includes dynamic for can be obtained in above-mentioned dynamic effect configuration information
Effect starting keyframe be 0%, and (can be regarded as the dynamic position for imitating starting keyframe is i.e. 0/96=at the 0% of animation duration
0), move effect terminate key frame be 100% (position that can be regarded as dynamic effect end key frame is at the 100% of animation duration,
That is 96/96=1), dynamic effect information converting, which is that the corresponding Target Photo of picture identification image_3 (image_3.png) is driven, imitates
Beginning key frame 0%, which starts to rotate 360 ° to dynamic effect, terminates the end of key frame 100%.According to above-mentioned picture identification image_3
The corresponding picture description information of above-mentioned picture identification image_3 is obtained from the assets node of above-mentioned first json node to obtain
Target Photo description information to above-mentioned Target Photo (image_3.png) be picture width w be 195, picture height h is 195,
Picture path u is images/image_3.png, picture name p is image_3.png.And by above-mentioned animation duration 4s,
The dynamic effect configuration information of above-mentioned Target Photo (picture (image_3.png)) and above-mentioned Target Photo (image_3.png)
Target Photo description information is determined as the file configuration information at above-mentioned wechat small routine interface.
And the animation frame per second fr in above-mentioned first json node is 24, initial frame number ip is as an example it is assumed that getting
0, terminating frame number op is 96, then animation duration=(96-0)/24=4s.Parse the layers in above-mentioned first json node
Node, getting the picture identification refId that second layer figure layer includes in above-mentioned layers node is image_3, with picture identification
Transformation start frame ip in the picture information converting of the corresponding Target Photo of image_3 (i.e. picture name p is image_3.png)
It is 52 for 36, transformation end frame op, the ks type of transformation parameter ks is o (opacity).Assuming that a picture only includes one
Dynamic effect, what then above-mentioned transformation parameter ks was specifically indicated is the corresponding Target Photo of picture identification image_3 (image_3.png)
From transformation 36 frame of start frame to transformation 52 frame of end frame, opacity is gradually down to 0% (hiding) from 100% (display).According to
The dynamic effect that the picture information converting of above-mentioned Target Photo (image_3.png) generates above-mentioned Target Photo (image_3.png) is matched
Confidence breath, to can be obtained in above-mentioned dynamic effect configuration information include dynamic effect starting keyframe for 37.5% (36/96=0.375, i.e.,
37.5%), move effect terminate key frame be 54.17% (52/96=0.5417, i.e., 54.17%), move effect information converting be picture mark
Knowing the corresponding driven effect starting keyframe 37.5% of Target Photo (image_3.png) of image_3 terminates key frame to dynamic effect
54.17%, opacity is down to 0 (hiding) from 1 (display).It is saved according to above-mentioned picture identification image_3 from above-mentioned first json
The corresponding picture description information of above-mentioned picture identification image_3 is obtained in the assets node of point to obtain above-mentioned Target Photo
(image_3.png) Target Photo description information be picture width w be 195, picture height h is 195, picture path u is
Images/image_3.png, picture name p are image_3.png.And by above-mentioned animation duration 4s, above-mentioned Target Photo
(image_3.png) the Target Photo description information of dynamic effect configuration information and above-mentioned Target Photo (image_3.png) is true
It is set to the file configuration information at above-mentioned wechat small routine interface.
Optionally, in some possible embodiments, when having multiple dynamic effects on same picture, it is only necessary to circulant solution
Transformation parameter ks is analysed, it includes the dynamic the case where of imitating that specific resolving, which can be found in above-mentioned one picture of parsing, herein
It repeats no more.Above-mentioned animation duration, the dynamic effect configuration information and above-mentioned each mesh of above-mentioned each Target Photo will be parsed
The Target Photo description information of piece of marking on a map is determined as the file configuration information at above-mentioned wechat small routine interface.
103, wechat small routine interface layout files and wechat small routine interface sample are generated according to above-mentioned file configuration information
Formula file.
In some possible embodiments, for wechat small routine, wechat small routine interface layout (WeiXin
Markup language, WXML) file is used to describe the structure of the page, wechat small routine styles (WeiXin Style
Sheet, WXSS) file is used to describe the pattern of the page.It is understood that file reference is very heavy for the reuse of code
It wants.Therefore by way of writing the page prototype figure code that WXML file and WXSS file can design UX designer also
Original comes out.In the embodiment of the present application, according to above-mentioned file configuration information can be generated wechat small routine interface layout files and
Wechat small routine styles file.Wherein, above-mentioned file configuration information includes at least above-mentioned animation duration, above-mentioned each mesh
It marks on a map the dynamic effect configuration information of piece and the Target Photo description information of above-mentioned each Target Photo.
As an example it is assumed that the animation duration is 4s, moving in effect configuration information include dynamic effect starting keyframe is 0%
(i.e. 0/96=0), moving effect to terminate key frame is 100% (i.e. 96/96=1), and moving effect information converting is image_3 pairs of picture identification
The driven effect starting keyframe 0% of the Target Photo (image_3.png) answered, which starts to rotate 360 ° to dynamic effect, terminates key frame
100% terminates.Above-mentioned picture is obtained from the assets node of above-mentioned first json node according to above-mentioned picture identification image_3
The corresponding picture description information of mark image_3 is to obtain the Target Photo description letter of above-mentioned Target Photo (image_3.png)
Breath be picture width w be 195, picture height h is 195, picture path u is images/image_3.png, picture name p is
image_3.png.Referring to Fig. 3 a, Fig. 3 a is generation wechat small routine interface layout files provided by the embodiments of the present application and wechat
One application scenarios schematic diagram of small routine styles file.According to above-mentioned animation duration 4s, above-mentioned Target Photo
(image_3.png) the Target Photo description information of dynamic effect configuration information and above-mentioned Target Photo (image_3.png) is raw
At WXML file and WXSS file it is as shown in Figure 3a, wherein WXML file be < image class=" image_3 " src="/
Resource/images/image_3.png "/>, WXSS file includes content and@keyframes in .image_3 { }
Content in image_3_frame.
It include that dynamic effect starting keyframe is again as an example it is assumed that the animation duration is 4s, in dynamic effect configuration information
37.5% (36/96=0.375, i.e., 37.5%), move effect terminate key frame be 54.17% (52/96=0.5417, i.e.,
54.17%), moving effect information converting is that the driven effect starting of the corresponding Target Photo of picture identification image_3 (image_3.png) is closed
Key frame 37.5% terminates key frame 100% to dynamic effect, and opacity is down to 0 (hiding) from 1 (display).According to above-mentioned picture identification
Image_3 obtains the corresponding picture description of above-mentioned picture identification image_3 from the assets node of above-mentioned first json node
Information using obtain the Target Photo description information of above-mentioned Target Photo (image_3.png) as picture width w be 195, picture it is high
Degree h is 195, picture path u is images/image_3.png, picture name p is image_3.png.And above-mentioned animation is held
Continuous time 4s, the dynamic effect configuration information and above-mentioned Target Photo (image_3.png) of above-mentioned Target Photo (image_3.png)
Target Photo description information be determined as the file configuration information at above-mentioned wechat small routine interface.Referring to Fig. 3 b, Fig. 3 b is this Shen
It please the generation wechat small routine interface layout files of embodiment offer and the another application field of wechat small routine styles file
Scape schematic diagram.According to above-mentioned animation duration 4s, the dynamic effect configuration information of above-mentioned Target Photo (image_3.png) and on
WXML file and the WXSS file for stating the Target Photo description information generation of Target Photo (image_3.png) are as shown in Figure 3b,
Wherein WXML file is<image class=" image_3 " src="/resource/images/image_3.png "/>,
WXSS file includes the content in content and@keyframes image_3_frame in .image_3 { }, describes this for convenience
In only list content in@keyframes image_3_frame.
In the embodiment of the present application, in the wechat small routine interface development for carrying out having animation effect, UX design can be obtained
Teacher is marked based on the AE Video processing software dynamic page prototype figure designed and the animation of offer.By by above-mentioned animation mark
Note export, the available animation based on user experience UX interface mark file.Wherein, it is wrapped in above-mentioned animation mark file
Include the first json node.It include animation description information in above-mentioned first json node.It, can by parsing above-mentioned first json node
It obtains the animation frame per second for including in above-mentioned animation description information, initial frame number, terminate frame number, picture identification, picture description information
With picture information converting.And the animation duration can determine according to obtained above-mentioned animation frame per second, initial frame number, end frame number,
It can determine the dynamic effect configuration information of above-mentioned each Target Photo according to above-mentioned picture identification, picture description information and picture information converting
And the Target Photo description information of above-mentioned each Target Photo, and then obtain the animation configuration information at wechat small routine interface.Root
The wechat small routine interface layout files and wechat small routine interface sample for having dynamic effect are produced according to above-mentioned animation configuration information
Formula file.Method provided by the embodiments of the present application can reduce the time of the wechat small routine interface development of animation effect, improve
The efficiency of speed and developer that interface generates keeps the flexibility of interface development high, applied widely.
Referring to fig. 4, Fig. 4 is another process signal of wechat small routine interface creating method provided by the embodiments of the present application
Figure.Wechat small routine interface creating method provided by the embodiments of the present application can as follows 201 to 203 provide realization side
Formula is illustrated:
201, the static page for obtaining user experience UX interface marks file, wraps in above-mentioned static page mark file
Include the 2nd json node.
In some possible embodiments, UX design refers to the design centered on user experience.Under normal conditions, wechat
The design of the dynamic page and/or static page at small routine interface is to utilize Video processing software and/or drawing by UX designer
Software is come the dynamic page and/or static page prototype figure that design.Wherein, the drawing for being most commonly used for design static page is soft
Part is Sketch mapping software.In the static page exploitation for carrying out wechat small routine interface, when UX designer designs static state
Page prototype figure and provide static page mark when, by by above-mentioned static page mark export, it is available to be based on user
The static page for experiencing UX interface marks file.It wherein, include second in the format of above-mentioned static page mark file
Json node includes the page-describing information of static page in above-mentioned 2nd json node.It is understandable to be, above-mentioned static page
The page-describing information in face includes the corresponding page elements description information of at least one page elements.Wherein, above-mentioned page elements
Type include but is not limited to picture, text etc., can specifically be determined according to practical application scene, herein with no restrictions.
202, wechat small routine interface is determined according to the page-describing information of the static page in above-mentioned 2nd json node
File configuration information.
It in some possible embodiments, include the page-describing information of static page in above-mentioned 2nd json node.
Understandable to be, the page-describing information of above-mentioned static page includes the corresponding page elements description of at least one page elements
Information.Wherein, the type of above-mentioned page elements includes but is not limited to picture, text etc., specifically can be true according to practical application scene
It is fixed, herein with no restrictions.The ardboards node in above-mentioned 2nd json node is parsed, is obtained in above-mentioned ardboards node
At least one layers minor structure, wherein layers minor structure is for describing in a static page to include at least
The corresponding page elements description information of one page elements, wherein above-mentioned page elements description information includes page elements type
Type, page elements corresponding area coordinate rect and page elements pattern css.Above-mentioned page elements type type includes shape
Shape shape, text text and picture slice.Page elements seat is contained in the corresponding area coordinate rect of above-mentioned page elements
X and y is marked, contains background in page elements width width and page elements height height, above-mentioned page elements pattern css
Background and shade box-shadow.It is understood that including in the corresponding area coordinate rect of above-mentioned page elements
The value of page elements coordinate x and y be value relative to coordinate origin, i.e. coordinate value absolutely under layout.By above-mentioned at least one
The corresponding page elements type type of each page elements described in a layers minor structure, the corresponding area coordinate of page elements
Rect and page elements pattern css is determined as the file configuration information at above-mentioned wechat small routine interface.Wherein, page elements pair
Number in the area coordinate rect answered will add rpx, page elements pattern css when generating file configuration information after number
In comprising the value of px px is replaced with into rpx when generating file configuration information.
As an example it is assumed that the ardboards node in the above-mentioned 2nd json node of parsing, gets above-mentioned
A layers minor structure in ardboards node.Wherein, the page elements description information of said one layers minor structure
In page elements type type be shape, the page elements in the corresponding area coordinate rect of page elements (shape-1) are sat
Mark x and y is respectively 213 and 738, and page elements width width is 36, and page elements height height is 36, page elements sample
The background background for including in formula css be #FFFFFF, shade box-shadow be 0 1px 3px 0rgba (0,0,0,
0.25).By the corresponding page elements type shape of each page elements, page described at least one above-mentioned layers minor structure
Page elements coordinate x and y in the corresponding area coordinate rect of surface element (shape-1) are respectively 213rpx and 738rpx, page
Surface element width width is 36rpx, and page elements height height, which is in 36rpx and page elements pattern css, includes
Background background is #FFFFFF, and shade box-shadow is on 0 1rpx 3rpx 0rgba (0,0,0,0.25) is determined as
State the file configuration information at wechat small routine interface.It is understood that in the corresponding area coordinate rect of above-mentioned page elements
The value of the page elements coordinate x and y that include are the values relative to coordinate origin, i.e. coordinate value absolutely under layout.
203, wechat small routine interface layout files and wechat small routine interface sample are generated according to above-mentioned file configuration information
Formula file.
In some possible embodiments, for wechat small routine, wechat small routine interface layout (WeiXin
Markup language, WXML) file is used to describe the structure of the page, wechat small routine styles (WeiXin Style
Sheet, WXSS) file is used to describe the pattern of the page.It is understood that file reference is very heavy for the reuse of code
It wants.Therefore by way of writing the page prototype figure code that WXML file and WXSS file can design UX designer also
Original comes out.In the embodiment of the present application, according to above-mentioned file configuration information can be generated wechat small routine interface layout files and
Wechat small routine styles file.Wherein, above-mentioned file configuration information includes at least the corresponding page elements of each page elements
The corresponding area coordinate of type, page elements and page elements pattern.
As an example it is assumed that the page elements type type in the file configuration information got is shape, page elements
(shape-1) page elements the coordinate x and y in corresponding area coordinate rect are respectively 213rpx and 738rpx, page elements
Width width is 36rpx, and page elements height height is 36rpx, the background for including in page elements pattern css
Background is #FFFFFF, and shade box-shadow is 01rpx3rpx0rgba (0,0,0,0.25).Referring to Fig. 5 a, Fig. 5 a
It is that the wechat small routine interface layout files and the one of wechat small routine styles file provided by the embodiments of the present application that generate are answered
Use schematic diagram of a scenario.The WXML file and WXSS file generated according to above-mentioned file configuration information is as shown in Figure 5 a, wherein WXML
File is<view class=" shape-1 "/>, and WXSS file includes the content in .shape-1 { }.
Again as an example it is assumed that the page elements type type in the file configuration information got is text, page member
Page elements coordinate x and y in plain (text-1) corresponding area coordinate rect are respectively 81rpx and 1302rpx, page elements
Width width is 88rpx, and page elements height height is 24rpx, and page elements content content is to earn movement coin, the page
The font font-family for including in element pattern css is PingFangSC-Regular, and font size font-size is
22rpx, font color color are #999999, and font line space line-height is 24rpx.Referring to Fig. 5 b, Fig. 5 b is this Shen
It please the generation wechat small routine interface layout files of embodiment offer and the another application field of wechat small routine styles file
Scape schematic diagram.The WXML file and WXSS file generated according to above-mentioned file configuration information is as shown in Figure 5 b, wherein WXML file
For<text class="text-1">earn movement coin</text>, WXSS file includes the content in .text-1 { }.
Again as an example it is assumed that the page elements type type in the file configuration information got is slice, page member
Page elements coordinate x and y in plain (icon) corresponding area coordinate rect are respectively 573rpx and 992rpx, and page elements are wide
Degree width is 26rpx, and page elements height height is 26rpx, and picture path path is drawable-mdpi/
icon.png.Referring to Fig. 5 c, Fig. 5 c is that generation wechat small routine interface layout files provided by the embodiments of the present application and wechat are small
The another application schematic diagram of a scenario of program interface pattern file.The WXML file and WXSS generated according to above-mentioned file configuration information
File is as shown in Figure 5 c, and wherein WXML file is < image class=" icon " src="/resource/iamges/
Icon.png "/>, WXSS file includes the content in .icon { }.
Optionally, in some possible embodiments, the generation of a dynamic page then needs to parse animation mark simultaneously
The 2nd json node in the first json node and static page mark file in explanatory notes part, and saved according to above-mentioned first json
The page-describing information in animation description information and above-mentioned 2nd json node in point determines the file configuration letter of dynamic page
Breath is small according to the wechat small routine interface layout files of the file configuration information of above-mentioned dynamic page generation dynamic page and wechat
Program interface pattern file.Concrete methods of realizing can be found in the realization process of one json node of above-mentioned parsing, no longer superfluous herein
It states.
In the embodiment of the present application, in the static page exploitation for carrying out wechat small routine interface, UX designer can be obtained
It is marked based on the mapping software sketch static page prototype figure designed and the static page of offer.By by above-mentioned static state
Page mark export, the available static page based on user experience UX interface mark file.Wherein, above-mentioned static page
It includes the 2nd json node in file that face, which marks,.It include the page-describing information of static page in above-mentioned 2nd json node.It is logical
It crosses and parses above-mentioned 2nd json node, at least one page member for including in the page-describing information of above-mentioned static page can be obtained
The corresponding page elements description information of element, wherein above-mentioned page elements description information includes page elements type, page elements pair
The area coordinate and page elements pattern answered.According to the page elements type in page elements description information, page elements pair
The area coordinate and page elements pattern answered can determine the file configuration information of the static page at wechat small routine interface.According to
The file configuration information of above-mentioned static page produces the wechat small routine interface layout files and wechat small routine of static page
Styles file.Method provided by the embodiments of the present application can reduce the time of static page interface development, improve interface and generate
Speed and developer efficiency, keep the flexibility of interface development high, it is applied widely.
It is another process signal of wechat small routine interface creating method provided by the embodiments of the present application referring to Fig. 6, Fig. 6
Figure, method provided by the embodiments of the present application may include steps of 301 to 304:
301, the static page for obtaining user experience UX interface marks file, wraps in above-mentioned static page mark file
Include the 2nd json node.
In some possible embodiments, UX design refers to the design centered on user experience.Under normal conditions, wechat
The design of the dynamic page and/or static page at small routine interface is to utilize Video processing software and/or drawing by UX designer
Software is come the dynamic page and/or static page prototype figure that design.Wherein, the drawing for being most commonly used for design static page is soft
Part is Sketch mapping software.In the static page exploitation for carrying out wechat small routine interface, when UX designer designs static state
Page prototype figure and provide static page mark when, by by above-mentioned static page mark export, it is available to be based on user
The static page for experiencing UX interface marks file.It wherein, include second in the format of above-mentioned static page mark file
Json node includes the page-describing information of static page in above-mentioned 2nd json node.It is understandable to be, above-mentioned static page
The page-describing information in face includes the corresponding page elements description information of at least one page elements.Wherein, above-mentioned page elements
Type include but is not limited to picture, text etc., can specifically be determined according to practical application scene, herein with no restrictions.
302, it is determined between each page elements according to the page-describing information of the static page in above-mentioned 2nd json node
Positional relationship.
It in some possible embodiments, include the page-describing information of static page in above-mentioned 2nd json node.
Understandable to be, the page-describing information of above-mentioned static page includes the corresponding page elements description of at least one page elements
Information.Wherein, the type of above-mentioned page elements includes but is not limited to picture, text etc., specifically can be true according to practical application scene
It is fixed, herein with no restrictions.The ardboards node in above-mentioned 2nd json node is parsed, is obtained in above-mentioned ardboards node
At least one layers minor structure, wherein layers minor structure is for describing in a static page to include at least
The corresponding page elements description information of one page elements, wherein above-mentioned page elements description information includes page elements type
Type, page elements corresponding area coordinate rect and page elements pattern css.Above-mentioned page elements type type includes shape
Shape shape, text text and picture slice.Page elements seat is contained in the corresponding area coordinate rect of above-mentioned page elements
X and y is marked, contains background in page elements width width and page elements height height, above-mentioned page elements pattern css
Background and shade box-shadow.It is understood that including in the corresponding area coordinate rect of above-mentioned page elements
The value of page elements coordinate x and y be value relative to coordinate origin, i.e. coordinate value absolutely under layout.
It in some possible embodiments, can be true by parsing the layers minor structure in above-mentioned 2nd json node
The corresponding area coordinate rect of all page elements under fixed above-mentioned layers minor structure.According to the corresponding area of each page elements
Domain coordinate rect, it may be determined that the positional relationship between above-mentioned each page elements, wherein above-mentioned positional relationship includes that inclusion relation is (embedding
Set relationship) and/or neighbouring relations, above-mentioned neighbouring relations include laterally adjacent and longitudinally adjacent.If in above-mentioned layers minor structure
Any two page elements between be it is laterally adjacent, then by above-mentioned any two page elements by row layout, and will it is above-mentioned arbitrarily
Two page elements form a new page elements, and determine the corresponding page elements description information of above-mentioned new page elements
(including area coordinate etc.).It is understood that including multiple page elements in above-mentioned new page elements, therefore above-mentioned new
Page elements and the above-mentioned new page elements of composition multiple page elements between be inclusion relation (nest relation).If above-mentioned
Be between any two page elements in layers minor structure it is longitudinally adjacent, then by above-mentioned any two page elements press column cloth
Office.
303, it is determined according to the page-describing information of the static page in above-mentioned 2nd json node and above-mentioned positional relationship
The file configuration information at wechat small routine interface.
In some possible embodiments, the ardboards node in above-mentioned 2nd json node is parsed, is obtained above-mentioned
At least one layers minor structure in ardboards node, wherein a layers minor structure is for describing a static page
The corresponding page elements description information of at least one page elements for including in face, wherein above-mentioned page elements description information packet
Include page elements type type, page elements corresponding area coordinate rect and page elements pattern css.Above-mentioned page elements
Type type includes shape shape, text text and picture slice.It is wrapped in the corresponding area coordinate rect of above-mentioned page elements
Page elements coordinate x and y, page elements width width and page elements height height, above-mentioned page elements pattern are contained
Background background and shade box-shadow are contained in css.It is understood that the corresponding region of above-mentioned page elements
The value of the page elements coordinate x and y that include in coordinate rect are the values relative to coordinate origin, i.e. coordinate absolutely under layout
Value.For the ease of can dynamically adjust cloth of the layout of a page elements on the page without influencing other page elements later
Office, the embodiment of the present application is when determining the file configuration information at wechat small routine interface, by according to determining above-mentioned positional relationship,
The value in the corresponding area coordinate rect of each page elements under adjustment absolutely layout is the area coordinate rect under relative placement
In coordinate value.It is determined in conjunction with each page elements corresponding page elements type type and page elements pattern css above-mentioned micro-
Believe the file configuration information at small routine interface.It is understood that before the reference point in relative placement is each page elements
One element and/or father's element.
As an example it is assumed that the page elements for including in layers minor structure have A, B, C, D, D1, D2, D3, E and F.Its
In, above-mentioned page elements A, B, C are according to arrangement from left to right and positional relationship between A, B, C is laterally adjacent, therefore can will be upper
It states page elements A, B, C and forms a new page elements T.Position between above-mentioned page elements D and page elements D1, D2, D3
The relationship of setting is inclusion relation (nest relation), and page elements D1, D2, D3 are also according to arrangement from left to right and between D1, D2, D3
Positional relationship is laterally adjacent.Above-mentioned page elements T, D, E, F are according to arrangement from top to bottom and the positional relationship between T, D, E, F
It is longitudinally adjacent.Wherein, the margin-left in the corresponding area coordinate of page elements T under relative placement is the x of A, B, C
Minimum x value in value, margin-top A, B, C y value in minimum y value, page elements width width be page elements C
X value subtract the x value of page elements A again plus the page elements width value of page elements C, page elements height height be A,
B, the maximum height value in the height value of C.Absolutely the generating mode of the lower corresponding area coordinate of page elements D of layout and
Page elements T is similar, and reference point is page elements T, is the area coordinate of facing pages element T.It is understood that single
Under a page elements (page elements E or F) relative placement the value of corresponding area coordinate only need to adjust margin-left and
Margin-top.Wherein, the reference point of page elements E is page elements D, and the reference point of page elements F is page elements
E。
304, wechat small routine interface layout files and wechat small routine interface sample are generated according to above-mentioned file configuration information
Formula file.
In some possible embodiments, for wechat small routine, wechat small routine interface layout (WeiXin
Markup language, WXML) file is used to describe the structure of the page, wechat small routine styles (WeiXin Style
Sheet, WXSS) file is used to describe the pattern of the page.It is understood that file reference is very heavy for the reuse of code
It wants.Therefore by way of writing the page prototype figure code that WXML file and WXSS file can design UX designer also
Original comes out.In the embodiment of the present application, according to above-mentioned file configuration information can be generated wechat small routine interface layout files and
Wechat small routine styles file.Wherein, above-mentioned file configuration information includes at least the corresponding page elements of each page elements
The corresponding area coordinate of type, page elements and page elements pattern.
For example, referring to Fig. 7, Fig. 7 be generation wechat small routine interface layout files provided by the embodiments of the present application and
The another application schematic diagram of a scenario of wechat small routine styles file.Assuming that the page elements for including in layers minor structure have
A, B, C, D, D1, D2, D3, E and F.Wherein, above-mentioned page elements A, B, C are closed according to arrangement from left to right and the position between A, B, C
System is laterally adjacent, therefore above-mentioned page elements A, B, C can be formed a new page elements T.Above-mentioned page elements D and page
Positional relationship between surface element D1, D2, D3 is inclusion relation (nest relation), and page elements D1, D2, D3 be also according to from
From left to right arranges and positional relationship is laterally adjacent between D1, D2, D3.Above-mentioned page elements T, D, E, F are according to arranging from top to bottom
It arranges and the positional relationship between T, D, E, F is longitudinally adjacent.Wherein, in the corresponding area coordinate of page elements T under relative placement
Margin-left be minimum x value in the x value of A, B, C, margin-top A, B, C y value in minimum y value, the page is first
Plain width width is that the x value of page elements C subtracts the x value of page elements A plus the page elements width value of page elements C again,
Page elements height height is the maximum height value in the height value of A, B, C.It is generated according to above-mentioned file configuration information
WXML file and WXSS file as shown in fig. 7, the WXML file wherein generated can embody the inclusion relation between page elements
And neighbouring relations, the WXSS file of generation can then embody the relationship between the area coordinate under relative placement.
Optionally, in some possible embodiments, it when between each page elements including multilayer nest relationship, only needs
The value parsed in the corresponding area coordinate rect of each page elements is recycled, it is each that specific resolving can be found in above-mentioned parsing
The case where only including one layer of nest relation between a page elements, details are not described herein.
In the embodiment of the present application, in the static page exploitation for carrying out wechat small routine interface, UX designer can be obtained
It is marked based on the mapping software sketch static page prototype figure designed and the static page of offer.By by above-mentioned static state
Page mark export, the available static page based on user experience UX interface mark file.Wherein, above-mentioned static page
It includes the 2nd json node in file that face, which marks,.It include the page-describing information of static page in above-mentioned 2nd json node.It is logical
It crosses and parses above-mentioned 2nd json node, at least one page member for including in the page-describing information of above-mentioned static page can be obtained
The corresponding page elements description information of element, wherein above-mentioned page elements description information includes page elements type, page elements pair
The area coordinate and page elements pattern answered.According to the area coordinate in above-mentioned page elements description information, it may be determined that each
Positional relationship between page elements, in conjunction with the page elements type in page elements description information, the corresponding area of page elements
Domain coordinate and page elements pattern can determine the file configuration information of the static page at wechat small routine interface.Wherein above-mentioned text
Area coordinate in part configuration information is the coordinate value under relative placement, can be given birth to according to the file configuration information of above-mentioned static page
At the wechat small routine interface layout files and wechat small routine styles file of static page.It is provided by the embodiments of the present application
Method can reduce the time of static page interface development, improve the efficiency of speed and developer that interface generates, open interface
The flexibility of hair is high, applied widely.
It is the structural schematic diagram of wechat small routine provided by the embodiments of the present application interface generating means referring to Fig. 8, Fig. 8.This
Application embodiment provide wechat small routine interface generate device include:
File obtaining unit 31 is marked, for obtaining the mark file of user experience UX interface, above-mentioned mark file
In include json node;
File configuration information determination unit 32, the above-mentioned json for being determined according to above-mentioned mark file obtaining unit 31 are saved
Animation description information or page-describing information in point determine the file configuration information at wechat small routine interface;
Interface file generation unit 33, the above-mentioned file for being determined according to above-mentioned file configuration information determination unit 32 are matched
Confidence breath generates wechat small routine interface layout files and wechat small routine styles file.
In some possible embodiments, above-mentioned mark file includes the animation mark file of UX interface, above-mentioned
Json node includes the first json node;
It include animation description information in above-mentioned first json node.
In some possible embodiments, above-mentioned mark file includes the static page mark file of UX interface,
Above-mentioned json node includes the 2nd json node;
It include the page-describing information of static page in above-mentioned 2nd json node.
In some possible embodiments, animation frame per second, initial frame number, knot are included at least in above-mentioned animation description information
Beam frame number, picture identification, picture description information and picture information converting;Above-mentioned file configuration information determination unit 32 is used for:
Obtain animation frame per second in above-mentioned first json node, initial frame number and terminate frame number, according to above-mentioned animation frame per second,
Above-mentioned initial frame number and above-mentioned end frame number determine the animation duration;
The layers node in above-mentioned first json node is parsed, at least one for including in above-mentioned layers node is obtained
Picture identification, and the picture information converting of each Target Photo corresponding with each picture identification are wrapped in above-mentioned picture information converting
Include transformation start frame, transformation end frame and transformation parameter;
The dynamic effect configuration information of above-mentioned each Target Photo is generated according to the picture information converting of above-mentioned each Target Photo, it is above-mentioned
It include moving effect starting keyframe, dynamic effect terminates key frame and moving effect information converting in dynamic effect configuration information;
Each picture mark is obtained from the assets node of above-mentioned first json node according at least one above-mentioned picture identification
Corresponding picture description information is known to obtain the Target Photo description information of above-mentioned each Target Photo;
By the above-mentioned animation duration, the dynamic effect configuration information of above-mentioned each Target Photo and the mesh of above-mentioned each Target Photo
Mark picture description information is determined as the file configuration information at above-mentioned wechat small routine interface.
In some possible embodiments, above-mentioned file configuration information determination unit 32 is also used to:
The assets node in above-mentioned first json node is parsed, at least one for including in above-mentioned assets node is obtained
The picture identification and picture description information of picture, wherein above-mentioned picture description information includes picture width, picture height, picture
One or more in path and picture name;
It is determined from the above-mentioned at least picture identification of a picture identical at least at least one above-mentioned picture identification
One Target Photo mark, identifies the target that corresponding picture description information is determined as above-mentioned each Target Photo for each Target Photo
Picture description information.
In some possible embodiments, the page-describing information of above-mentioned static page includes at least one page elements
Corresponding page elements description information;Above-mentioned file configuration information determination unit 32 is also used to:
The ardboards node in above-mentioned 2nd json node is parsed, at least one in above-mentioned ardboards node is obtained
A layers minor structure, wherein a layers minor structure is used to describe at least one page for including in a static page
The corresponding page elements description information of element, wherein above-mentioned page elements description information includes page elements type, page elements
Corresponding area coordinate and page elements pattern;
By the corresponding page elements type of each page elements, the corresponding area coordinate of page elements and page elements pattern
It is determined as the file configuration information at above-mentioned wechat small routine interface.
In some possible embodiments, the device that above-mentioned wechat small routine interface generates further include:
Interface file improves unit 34, retouches for obtaining in any layers minor structure in above-mentioned ardboards node
The corresponding area coordinate of each page elements stated;
The positional relationship between above-mentioned each page elements is determined according to the corresponding area coordinate of above-mentioned each page elements,
In above-mentioned positional relationship include inclusion relation and/or neighbouring relations, above-mentioned neighbouring relations include laterally adjacent and longitudinally adjacent;
If be between any two page elements in any of the above-described layers minor structure it is laterally adjacent, by above-mentioned any two
A page elements form a new page elements by row layout, and by above-mentioned any two page elements, and determine above-mentioned new
The corresponding area coordinate of page elements;
If be between any two page elements in any of the above-described layers minor structure it is longitudinally adjacent, by above-mentioned any two
A page elements press Column Layout, and determine the corresponding area coordinate of each page elements for pressing Column Layout.
In the specific implementation, the device that above-mentioned wechat small routine interface generates can be executed by each functional module built in it
The implementation as provided by each step in above-mentioned Fig. 1, Fig. 4 and Fig. 6.For example, above-mentioned mark file obtaining unit 31 can be used
Mark file and other implementations is obtained in above-mentioned each step in executing, for details, reference can be made to realize provided by above-mentioned each step
Mode, details are not described herein.Above-mentioned file configuration information determination unit 32, which can be used for executing, determines file in above-mentioned each step
Implementation described in the correlation steps such as configuration information, for details, reference can be made to implementation provided by above-mentioned each step,
This is repeated no more.Above-mentioned interface file generation unit 33 can be used for executing generation wechat small routine interface cloth in above-mentioned each step
Office file and wechat small routine styles file and other implementations, for details, reference can be made to realization sides provided by above-mentioned each step
Formula, details are not described herein.Above-mentioned interface file, which improves unit 34, can be used for executing in above-mentioned each step between determining page elements
Positional relationship determines page elements layout type and other implementations, and for details, reference can be made to realization sides provided by above-mentioned each step
Formula, details are not described herein.
In the embodiment of the present application, the device that wechat small routine interface generates can be based on video based on the UX designer of acquisition
Dynamic page or static page prototype figure and the animation of the offer mark or static page that processing software or mapping software design
Face mark.It is available based on user experience UX interface by marking or static page mark export above-mentioned animation
Animation marks file or static page marks file.Wherein, above-mentioned animation mark file includes the first json node, and above-mentioned first
It include animation description information in json node, above-mentioned static page mark file includes the 2nd json node, above-mentioned 2nd json
It include the page-describing information of static page in node.By parsing above-mentioned first json node, above-mentioned animation description can be obtained
Animation frame per second, initial frame number, end frame number, picture identification, picture description information and the picture information converting for including in information.And
According to obtain above-mentioned animation frame per second, initial frame number, terminate frame number can determine the animation duration, according to above-mentioned picture identification,
Picture description information and picture information converting can determine the dynamic effect configuration information and above-mentioned each target figure of above-mentioned each Target Photo
The Target Photo description information of piece, and then obtain the file configuration information of the animation at wechat small routine interface.It is above-mentioned by parsing
The corresponding page of at least one page elements for including in the page-describing information of above-mentioned static page can be obtained in 2nd json node
Surface element description information, wherein above-mentioned page elements description information includes page elements type, the corresponding region seat of page elements
It is marked with and page elements pattern.It is sat according to the page elements type in page elements description information, the corresponding region of page elements
Be marked with and page elements pattern can determine wechat small routine interface static page file configuration information.According to above-mentioned animation
File configuration information produces the wechat small routine interface layout files and wechat small routine styles file for having animation effect.
It is small according to the wechat small routine interface layout files of the producible static page of the file configuration information of above-mentioned static page and wechat
Program interface pattern file.Method provided by the embodiments of the present application can reduce the time of interface development, improve the speed that interface generates
The efficiency of degree and developer, flexibility is high, applied widely.
It is the structural schematic diagram of terminal device provided by the embodiments of the present application referring to Fig. 9, Fig. 9.As shown in figure 9, this implementation
Terminal device in example may include: one or more processors 401 and memory 402.Above-mentioned processor 401 and memory
402 are connected by bus 403.For memory 402 for storing computer program, which includes program instruction, processing
Device 401 is used to execute the program instruction of the storage of memory 402, performs the following operations:
The mark file of user experience UX interface is obtained, includes json node in above-mentioned mark file;
According in above-mentioned json node animation description information or page-describing information determine the text at wechat small routine interface
Part configuration information;
Wechat small routine interface layout files and wechat small routine styles text are generated according to above-mentioned file configuration information
Part.
In some possible embodiments, above-mentioned mark file includes the animation mark file of UX interface, above-mentioned
Json node includes the first json node;
It include animation description information in above-mentioned first json node.
In some possible embodiments, above-mentioned mark file includes the static page mark file of UX interface,
Above-mentioned json node includes the 2nd json node;
It include the page-describing information of static page in above-mentioned 2nd json node.
In some possible embodiments, animation frame per second, initial frame number, knot are included at least in above-mentioned animation description information
Beam frame number, picture identification, picture description information and picture information converting;Above-mentioned processor 401 is used for:
Obtain animation frame per second in above-mentioned first json node, initial frame number and terminate frame number, according to above-mentioned animation frame per second,
Above-mentioned initial frame number and above-mentioned end frame number determine the animation duration;
The layers node in above-mentioned first json node is parsed, at least one for including in above-mentioned layers node is obtained
Picture identification, and the picture information converting of each Target Photo corresponding with each picture identification are wrapped in above-mentioned picture information converting
Include transformation start frame, transformation end frame and transformation parameter;
The dynamic effect configuration information of above-mentioned each Target Photo is generated according to the picture information converting of above-mentioned each Target Photo, it is above-mentioned
It include moving effect starting keyframe, dynamic effect terminates key frame and moving effect information converting in dynamic effect configuration information;
Each picture mark is obtained from the assets node of above-mentioned first json node according at least one above-mentioned picture identification
Corresponding picture description information is known to obtain the Target Photo description information of above-mentioned each Target Photo;
By the above-mentioned animation duration, the dynamic effect configuration information of above-mentioned each Target Photo and the mesh of above-mentioned each Target Photo
Mark picture description information is determined as the file configuration information at above-mentioned wechat small routine interface.
In some possible embodiments, above-mentioned processor 401 is used for: in the above-mentioned first json node of parsing
Assets node obtains the picture identification and picture description information of at least picture for including in above-mentioned assets node,
In, above-mentioned picture description information includes the one or more in picture width, picture height, picture path and picture name;
It is determined from the above-mentioned at least picture identification of a picture identical at least at least one above-mentioned picture identification
One Target Photo mark, identifies the target that corresponding picture description information is determined as above-mentioned each Target Photo for each Target Photo
Picture description information.
In some possible embodiments, the page-describing information of above-mentioned static page includes at least one page elements
Corresponding page elements description information;Above-mentioned processor 401 is used for:
The ardboards node in above-mentioned 2nd json node is parsed, at least one in above-mentioned ardboards node is obtained
A layers minor structure, wherein a layers minor structure is used to describe at least one page for including in a static page
The corresponding page elements description information of element, wherein above-mentioned page elements description information includes page elements type, page elements
Corresponding area coordinate and page elements pattern;
By the corresponding page elements type of each page elements, the corresponding area coordinate of page elements and page elements pattern
It is determined as the file configuration information at above-mentioned wechat small routine interface.
In some possible embodiments, above-mentioned processor 401 is used for:
Obtain the corresponding area of each page elements described in any layers minor structure in above-mentioned ardboards node
Domain coordinate;
The positional relationship between above-mentioned each page elements is determined according to the corresponding area coordinate of above-mentioned each page elements,
In above-mentioned positional relationship include inclusion relation and/or neighbouring relations, above-mentioned neighbouring relations include laterally adjacent and longitudinally adjacent;
If be between any two page elements in any of the above-described layers minor structure it is laterally adjacent, by above-mentioned any two
A page elements form a new page elements by row layout, and by above-mentioned any two page elements, and determine above-mentioned new
The corresponding area coordinate of page elements;
If be between any two page elements in any of the above-described layers minor structure it is longitudinally adjacent, by above-mentioned any two
A page elements press Column Layout, and determine the corresponding area coordinate of each page elements for pressing Column Layout.
It should be appreciated that in some possible embodiments, above-mentioned processor 401 can be central processing unit
(central processing unit, CPU), which can also be other general processors, digital signal processor
(digital signal processor, DSP), specific integrated circuit (application specific integrated
Circuit, ASIC), ready-made programmable gate array (field programmable gate array, FPGA) or other can
Programmed logic device, discrete gate or transistor logic, discrete hardware components etc..General processor can be microprocessor
Or the processor is also possible to any conventional processor etc..The memory 402 may include read-only memory and deposit at random
Access to memory, and instruction and data is provided to processor 401.The a part of of memory 402 can also include non-volatile random
Access memory.For example, memory 402 can be with the information of storage device type.
In the specific implementation, above-mentioned terminal device can be executed by each functional module built in it such as above-mentioned Fig. 1, Fig. 4 and
Implementation provided by each step in Fig. 6, for details, reference can be made to implementations provided by above-mentioned each step, herein no longer
It repeats.
In the embodiment of the present application, terminal device can be based on Video processing software based on the UX designer of acquisition or be drawn soft
Dynamic page or static page prototype figure and the animation of the offer mark or static page mark that part is designed.By will be above-mentioned
Animation mark or static page mark export, available animation mark file or static state based on user experience UX interface
The page marks file.Wherein, above-mentioned animation mark file includes the first json node, includes animation in above-mentioned first json node
Description information, above-mentioned static page mark file include the 2nd json node, include static page in above-mentioned 2nd json node
Page-describing information.By parsing above-mentioned first json node, the animation frame for including in above-mentioned animation description information can be obtained
Rate, terminates frame number, picture identification, picture description information and picture information converting at initial frame number.And according to obtained above-mentioned animation
Frame per second, initial frame number, end frame number can determine the animation duration, according to above-mentioned picture identification, picture description information and picture
Information converting can determine the dynamic effect configuration information of above-mentioned each Target Photo and the Target Photo description letter of above-mentioned each Target Photo
Breath, and then obtain the file configuration information of the animation at wechat small routine interface.By parsing above-mentioned 2nd json node, can be obtained
The corresponding page elements description information of at least one page elements for including in the page-describing information of above-mentioned static page,
In, above-mentioned page elements description information includes page elements type, the corresponding area coordinate of page elements and page elements sample
Formula.According to the page elements type in page elements description information, the corresponding area coordinate of page elements and page elements sample
Formula can determine the file configuration information of the static page at wechat small routine interface.It can be given birth to according to the file configuration information of above-mentioned animation
At the wechat small routine interface layout files and wechat small routine styles file for having animation effect.According to above-mentioned static page
File configuration information produce static page wechat small routine interface layout files and wechat small routine styles file.
Method provided by the embodiments of the present application can reduce the time of interface development, improve the effect of speed and developer that interface generates
Rate, flexibility is high, applied widely.
The embodiment of the present application also provides a kind of computer readable storage medium, which has meter
Calculation machine program, the computer program include program instruction, which realizes in Fig. 1, Fig. 4 and Fig. 6 when being executed by processor
The method that wechat small routine interface provided by each step generates, for details, reference can be made to realization sides provided by above-mentioned each step
Formula, details are not described herein.
Above-mentioned computer readable storage medium can be what the wechat small routine interface that aforementioned any embodiment provides generated
The internal storage unit of device or above-mentioned terminal device, such as the hard disk or memory of electronic equipment.The computer-readable storage
Medium is also possible to the plug-in type hard disk being equipped on the External memory equipment of the electronic equipment, such as the electronic equipment, intelligently deposits
Card storage (smart media card, SMC), secure digital (secure digital, SD) card, flash card (flash card)
Deng.Further, which can also both internal storage units including the electronic equipment or including outer
Portion stores equipment.The computer readable storage medium is for other journeys needed for storing the computer program and the electronic equipment
Sequence and data.The computer readable storage medium can be also used for temporarily storing the data that has exported or will export.
Following claims and term " first " in specification and attached drawing, " second ", " third ", " the 4th " etc.
It is to be not use to describe a particular order for distinguishing different objects.In addition, term " includes " and " having " and they are any
Deformation, it is intended that cover and non-exclusive include.Such as contain the process, method, system, product of a series of steps or units
Or equipment is not limited to listed step or unit, but optionally further comprising the step of not listing or unit, or can
Selection of land further includes the other step or units intrinsic for these process, methods, product or equipment.
Referenced herein " embodiment " is it is meant that a particular feature, structure, or characteristic described can wrap in conjunction with the embodiments
It is contained at least one embodiment of the application.It is identical that each position in the description shows that the phrase might not be each meant
Embodiment, nor the independent or alternative embodiment with other embodiments mutual exclusion.Those skilled in the art explicitly and
Implicitly understand, embodiment described herein can be combined with other embodiments.In present specification and appended
Term "and/or" used in claims refers to any combination and institute of one or more of associated item listed
It is possible that combining, and including these combinations.Those of ordinary skill in the art may be aware that in conjunction with reality disclosed herein
Each exemplary unit and algorithm steps of example description are applied, can be come with the combination of electronic hardware, computer software or the two real
It is existing, in order to clearly illustrate the interchangeability of hardware and software, generally described in the above description according to function
Each exemplary composition and step.These functions are implemented in hardware or software actually, depending on the specific of technical solution
Using and design constraint.Professional technician can realize each specific application using distinct methods described
Function, but it is this realize it is not considered that exceed scope of the present application.
Method provided by the embodiments of the present application and relevant apparatus be referring to method flow diagram provided by the embodiments of the present application and/
Or structural schematic diagram is come what is described, can specifically be realized by computer program instructions the every of method flow diagram and/or structural schematic diagram
The combination of process and/or box in one process and/or box and flowchart and/or the block diagram.These computer programs refer to
Enable the processor that can provide general purpose computer, special purpose computer, Embedded Processor or other programmable data processing devices
To generate a machine, so that generating use by the instruction that computer or the processor of other programmable data processing devices execute
In the function that realization is specified in one or more flows of the flowchart and/or structural schematic diagram one box or multiple boxes
Device.These computer program instructions, which may also be stored in, is able to guide computer or other programmable data processing devices with specific
In the computer-readable memory that mode works, so that it includes instruction that instruction stored in the computer readable memory, which generates,
The manufacture of device, the command device are realized in one box of one or more flows of the flowchart and/or structural schematic diagram
Or the function of being specified in multiple boxes.These computer program instructions can also be loaded into computer or the processing of other programmable datas
In equipment, so that executing series of operation steps on a computer or other programmable device to generate computer implemented place
Reason, so that instruction executed on a computer or other programmable device offer is for realizing in one process of flow chart or multiple
The step of function of being specified in process and/or structural representation one box or multiple boxes.
Claims (10)
1. the method that a kind of wechat small routine interface generates, which is characterized in that the described method includes:
The mark file of user experience UX interface is obtained, includes json node in the mark file;
According in the json node animation description information or page-describing information determine that the file at wechat small routine interface is matched
Confidence breath;
Wechat small routine interface layout files and wechat small routine styles file are generated according to the file configuration information.
2. method according to claim 1, which is characterized in that the mark file includes the animation mark text of UX interface
Part, the json node include the first json node;
It include animation description information in the first json node.
3. method according to claim 1, which is characterized in that the mark file includes the static page mark of UX interface
Explanatory notes part, the json node include the 2nd json node;
It include the page-describing information of static page in the 2nd json node.
4. method according to claim 2, which is characterized in that include at least animation frame per second in the animation description information, rise
Beginning frame number terminates frame number, picture identification, picture description information and picture information converting;It is described according in the json node
Animation description information determines the file configuration information at wechat small routine interface, comprising:
It obtains animation frame per second in the first json node, initial frame number and terminates frame number, according to the animation frame per second, described
Initial frame number and the end frame number determine the animation duration;
The layers node in the first json node is parsed, at least one picture for including in the layers node is obtained
It identifies, and the picture information converting of each Target Photo corresponding with each picture identification, includes becoming in the picture information converting
Change start frame, transformation end frame and transformation parameter;
The dynamic effect configuration information of each Target Photo, the dynamic effect are generated according to the picture information converting of each Target Photo
It include moving effect starting keyframe, dynamic effect terminates key frame and moving effect information converting in configuration information;
Each picture identification pair is obtained from the assets node of the first json node according at least one described picture identification
The picture description information answered is to obtain the Target Photo description information of each Target Photo;
By the animation duration, the dynamic effect configuration information of each Target Photo and the target figure of each Target Photo
Piece description information is determined as the file configuration information at wechat small routine interface.
5. method according to claim 4, which is characterized in that described at least one picture identification according to is from described first
The corresponding picture description information of each picture identification is obtained in the assets node of json node to obtain each Target Photo
Target Photo description information includes:
The assets node in the first json node is parsed, at least picture for including in the assets node is obtained
Picture identification and picture description information, wherein the picture description information includes picture width, picture height, picture path
With the one or more in picture name;
Determined from at least picture identification of a picture it is identical at least one described picture identification at least one
Target Photo mark, identifies the Target Photo that corresponding picture description information is determined as each Target Photo for each Target Photo
Description information.
6. method according to claim 3, which is characterized in that the page-describing information of the static page includes at least one
The corresponding page elements description information of page elements;The page-describing information according in the json node determines that wechat is small
The file configuration information of program interface, comprising:
The ardboards node in the 2nd json node is parsed, at least one of described ardboards node is obtained
Layers minor structure, wherein at least one page member that a layers minor structure is used to describe to include in a static page
The corresponding page elements description information of element, wherein the page elements description information includes page elements type, page elements pair
The area coordinate and page elements pattern answered;
The corresponding page elements type of each page elements, the corresponding area coordinate of page elements and page elements pattern are determined
For the file configuration information at wechat small routine interface.
7. method according to claim 6, which is characterized in that the method also includes:
The corresponding region of each page elements described in any layers minor structure in the ardboards node is obtained to sit
Mark;
The positional relationship between each page elements is determined according to the corresponding area coordinate of each page elements, wherein institute
Stating positional relationship includes inclusion relation and/or neighbouring relations, and the neighbouring relations include laterally adjacent and longitudinally adjacent;
If be between any two page elements in any layers minor structure it is laterally adjacent, by any two page
Surface element forms a new page elements by row layout, and by any two page elements, and determines the new page
The corresponding area coordinate of surface element;
If be between any two page elements in any layers minor structure it is longitudinally adjacent, by any two page
Surface element presses Column Layout, and determines the corresponding area coordinate of each page elements for pressing Column Layout.
8. the device that a kind of wechat small routine interface generates, which is characterized in that described device includes:
File obtaining unit is marked for obtaining the mark file of user experience UX interface includes in the mark file
Json node;
File configuration information determination unit, for according to dynamic in the determining json node of the mark file obtaining unit
It draws description information or page-describing information determines the file configuration information at wechat small routine interface;
Interface file generation unit, the file configuration information for being determined according to the file configuration information determination unit are raw
At wechat small routine interface layout files and wechat small routine styles file.
9. a kind of terminal device, which is characterized in that including processor and memory, the processor and memory are connected with each other;
The memory is for storing computer program, and the computer program includes program instruction, and the processor is configured
For calling described program to instruct, the method according to claim 1 to 7 is executed.
10. a kind of computer readable storage medium, which is characterized in that the computer-readable recording medium storage has computer journey
Sequence, the computer program include program instruction, and described program instruction executes the processor such as
The described in any item methods of claim 1-7.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201811622192.4A CN109710258A (en) | 2018-12-28 | 2018-12-28 | WeChat applet interface generation method and device |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201811622192.4A CN109710258A (en) | 2018-12-28 | 2018-12-28 | WeChat applet interface generation method and device |
Publications (1)
Publication Number | Publication Date |
---|---|
CN109710258A true CN109710258A (en) | 2019-05-03 |
Family
ID=66259018
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201811622192.4A Pending CN109710258A (en) | 2018-12-28 | 2018-12-28 | WeChat applet interface generation method and device |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN109710258A (en) |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114089998A (en) * | 2021-10-29 | 2022-02-25 | 广州市玄武无线科技股份有限公司 | Method and device for generating WeChat applet self-defined pull-down selection control |
WO2022042162A1 (en) * | 2020-08-25 | 2022-03-03 | 华为技术有限公司 | Method and apparatus for implementing user interface |
CN114168215A (en) * | 2021-11-17 | 2022-03-11 | 广东太平洋互联网信息服务有限公司 | Plug-in processing method, system and medium for multiple applet functional modules |
CN114564166A (en) * | 2022-02-28 | 2022-05-31 | 北京达佳互联信息技术有限公司 | Layout method and device of small program page, electronic equipment and storage medium |
CN116795368A (en) * | 2023-06-29 | 2023-09-22 | 企迈科技有限公司 | Web-based method for dynamically customizing applet page custom style |
Citations (12)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20120174000A1 (en) * | 2010-12-31 | 2012-07-05 | Verizon Patent And Licensing, Inc. | Automated graphical user interface design and development systems and methods |
CN103744674A (en) * | 2014-01-06 | 2014-04-23 | 北京奇虎科技有限公司 | Method and device for generating hypertext markup language (HTML) procedure code |
CN104020984A (en) * | 2013-02-28 | 2014-09-03 | 阿里巴巴集团控股有限公司 | Method and device for generating static page |
US20160070813A1 (en) * | 2014-09-10 | 2016-03-10 | Telefonaktiebolaget L M Ericsson (Publ) | Interactive web application editor |
CN105447096A (en) * | 2015-11-09 | 2016-03-30 | 百度在线网络技术(北京)有限公司 | Web page generation method and apparatus |
US20160098250A1 (en) * | 2014-10-03 | 2016-04-07 | Kony, Inc. | Application prototyping tool |
CN105653284A (en) * | 2015-12-29 | 2016-06-08 | Tcl集团股份有限公司 | Method and device for generating scene file of android platform |
CN106469220A (en) * | 2016-09-09 | 2017-03-01 | 北京小度信息科技有限公司 | A kind of method and system generating the dynamic effect page |
US20170123641A1 (en) * | 2015-10-28 | 2017-05-04 | Adobe Systems Incorporated | Automatically generating network applications from design mock-ups |
CN108255489A (en) * | 2018-01-12 | 2018-07-06 | 北京三快在线科技有限公司 | Front-end interface code generating method, device, electronic equipment and storage medium |
US20180203675A1 (en) * | 2013-07-02 | 2018-07-19 | You I Labs Inc. | System and method for streamlining user interface development |
CN108664248A (en) * | 2018-05-14 | 2018-10-16 | 北京汉能光伏投资有限公司 | A kind of generation method and device of wechat small routine |
-
2018
- 2018-12-28 CN CN201811622192.4A patent/CN109710258A/en active Pending
Patent Citations (12)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20120174000A1 (en) * | 2010-12-31 | 2012-07-05 | Verizon Patent And Licensing, Inc. | Automated graphical user interface design and development systems and methods |
CN104020984A (en) * | 2013-02-28 | 2014-09-03 | 阿里巴巴集团控股有限公司 | Method and device for generating static page |
US20180203675A1 (en) * | 2013-07-02 | 2018-07-19 | You I Labs Inc. | System and method for streamlining user interface development |
CN103744674A (en) * | 2014-01-06 | 2014-04-23 | 北京奇虎科技有限公司 | Method and device for generating hypertext markup language (HTML) procedure code |
US20160070813A1 (en) * | 2014-09-10 | 2016-03-10 | Telefonaktiebolaget L M Ericsson (Publ) | Interactive web application editor |
US20160098250A1 (en) * | 2014-10-03 | 2016-04-07 | Kony, Inc. | Application prototyping tool |
US20170123641A1 (en) * | 2015-10-28 | 2017-05-04 | Adobe Systems Incorporated | Automatically generating network applications from design mock-ups |
CN105447096A (en) * | 2015-11-09 | 2016-03-30 | 百度在线网络技术(北京)有限公司 | Web page generation method and apparatus |
CN105653284A (en) * | 2015-12-29 | 2016-06-08 | Tcl集团股份有限公司 | Method and device for generating scene file of android platform |
CN106469220A (en) * | 2016-09-09 | 2017-03-01 | 北京小度信息科技有限公司 | A kind of method and system generating the dynamic effect page |
CN108255489A (en) * | 2018-01-12 | 2018-07-06 | 北京三快在线科技有限公司 | Front-end interface code generating method, device, electronic equipment and storage medium |
CN108664248A (en) * | 2018-05-14 | 2018-10-16 | 北京汉能光伏投资有限公司 | A kind of generation method and device of wechat small routine |
Non-Patent Citations (1)
Title |
---|
孙国元: "《Android软件工程师项目化实战教程-UI设计篇》", 30 September 2016, 东软电子出版社 * |
Cited By (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2022042162A1 (en) * | 2020-08-25 | 2022-03-03 | 华为技术有限公司 | Method and apparatus for implementing user interface |
CN114089998A (en) * | 2021-10-29 | 2022-02-25 | 广州市玄武无线科技股份有限公司 | Method and device for generating WeChat applet self-defined pull-down selection control |
CN114168215A (en) * | 2021-11-17 | 2022-03-11 | 广东太平洋互联网信息服务有限公司 | Plug-in processing method, system and medium for multiple applet functional modules |
CN114168215B (en) * | 2021-11-17 | 2024-03-19 | 广东太平洋互联网信息服务有限公司 | Plug-in processing method, system and medium for multiple small program function modules |
CN114564166A (en) * | 2022-02-28 | 2022-05-31 | 北京达佳互联信息技术有限公司 | Layout method and device of small program page, electronic equipment and storage medium |
CN116795368A (en) * | 2023-06-29 | 2023-09-22 | 企迈科技有限公司 | Web-based method for dynamically customizing applet page custom style |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN109710258A (en) | WeChat applet interface generation method and device | |
US11216253B2 (en) | Application prototyping tool | |
CN104408137B (en) | A kind of network statistics map visualization data preparation method | |
Maudet et al. | Beyond grids: Interactive graphical substrates to structure digital layout | |
JP5437340B2 (en) | Viewer device, server device, display control method, electronic comic editing method and program | |
US20140215306A1 (en) | In-Context Editing of Output Presentations via Automatic Pattern Detection | |
CN109636885B (en) | Sequential frame animation production method and system for H5 page | |
CN105517681A (en) | Chart conversion system using metadata and method therefor | |
CN110489943B (en) | Page watermark tamper-proofing method and system | |
CN104572577B (en) | Mathematical formulae processing method and processing device | |
CN106447756A (en) | Method and system for generating a user-customized computer-generated animation | |
CN111857878B (en) | Skeleton screen page generation method and device, electronic equipment and storage medium | |
CN109615671A (en) | A kind of character library sample automatic generation method, computer installation and readable storage medium storing program for executing | |
Nolan et al. | Interactive and animated scalable vector graphics and R data displays | |
Bagley et al. | Creating reusable well-structured PDF as a sequence of component object graphic (COG) elements | |
Cecco | Supercharged JavaScript Graphics: with HTML5 canvas, jQuery, and More | |
CN109271607A (en) | User Page layout detection method and device, electronic equipment | |
Ulloa | Kivy: interactive applications in python | |
CN110347379A (en) | Processing method, device and the storage medium of combined crowdsourcing topic | |
CN109343772A (en) | A kind of poster generation method, system, device and storage medium based on the H5 page | |
CN102592261A (en) | Vector diagram showing method and system | |
CN107391116A (en) | A kind of component helps pop-up rendering intent and device | |
Pleuß | Modeling the user interface of multimedia applications | |
JP7014013B2 (en) | Image processing device and image processing program | |
JP5528410B2 (en) | Viewer device, server device, display control method, electronic comic editing method and program |
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 | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190503 |