CN109710258A

CN109710258A - WeChat applet interface generation method and device

Info

Publication number: CN109710258A
Application number: CN201811622192.4A
Authority: CN
Inventors: 蔡海群
Original assignee: Beijing Kingsoft Internet Security Software Co Ltd
Current assignee: Beijing Kingsoft Internet Security Software Co Ltd
Priority date: 2018-12-28
Filing date: 2018-12-28
Publication date: 2019-05-03

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

The method and device that wechat small routine interface generates

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；

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；

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:

In conjunction with second aspect, in a kind of possible embodiment, above-mentioned file configuration information determination unit is also used to:

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:

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 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.

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.

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；

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；

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:

In some possible embodiments, above-mentioned file configuration information determination unit 32 is also used to:

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:

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；

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:

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:

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；

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:

In some possible embodiments, above-mentioned processor 401 is used for:

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

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.