CN111475163A - 视图模板的代码文件生成方法、装置、设备及存储介质 - Google Patents
视图模板的代码文件生成方法、装置、设备及存储介质 Download PDFInfo
- Publication number
- CN111475163A CN111475163A CN202010575514.5A CN202010575514A CN111475163A CN 111475163 A CN111475163 A CN 111475163A CN 202010575514 A CN202010575514 A CN 202010575514A CN 111475163 A CN111475163 A CN 111475163A
- Authority
- CN
- China
- Prior art keywords
- view template
- code file
- view
- presenting
- attribute
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请提供了一种视图模板的代码文件生成方法、装置、设备及存储介质；方法包括：呈现视图模板的设计界面，并呈现与设计界面相关联的打标面板；响应于基于设计界面触发的元素添加操作，将对应目标视图模板的至少两个视图元素添加到相应的图层；接收到分别基于设计界面及打标面板触发的属性输入操作；响应于属性输入操作，在设计界面中呈现图层布局，图层布局与属性信息相对应；响应于基于打标面板触发的文件生成指令，基于图层布局，生成对应目标视图模板的代码文件。通过本申请，能够根据通过设计界面及打标面板输入的属性信息，生成对应目标视图模板的代码文件，提升了开发效率。
Description
技术领域
本申请涉及计算机技术领域，尤其涉及一种视图模板的代码文件生成方法、装置、设备及存储介质。
背景技术
视图开发是应用程序开发过程中的重要步骤，好的视图开发能够提升人机交互体验。在视图开发的过程中，通常需要设计人员根据需求设计出视图模板后，与开发人员沟通设计细节，然后由开发人员根据视图模板以及沟通的设计细节来编写代码，由于设计人员与开发人员在理解上的差异、以及细节沟通不到位等问题，导致在视图开发过程中需要进行多次沟通、以及对代码进行反复修改，才能够得到与涉及人员设计的视图模板相对应的代码文件，如此，降低了视图开发的效率。
发明内容
本申请实施例提供一种视图模板的代码文件生成方法、装置、设备及计算机可读存储介质，能够根据通过设计界面及打标面板输入的属性信息，生成对应目标视图模板的代码文件，提升了开发效率。
本申请实施例的技术方案是这样实现的：
本申请实施例提供一种视图模板的代码文件生成方法，包括：
呈现视图模板的设计界面，并呈现与所述设计界面相关联的打标面板；
响应于基于所述设计界面触发的元素添加操作，将对应目标视图模板的至少两个视图元素添加到相应的图层，得到至少两个承载有视图元素的图层；
接收到分别基于所述设计界面及所述打标面板触发的属性输入操作，所述属性输入操作用于输入所述至少两个图层的属性信息；
响应于所述属性输入操作，在所述设计界面中呈现图层布局，所述图层布局与所述属性信息相对应，用于指示在所述目标视图模板中，所述至少两个图层之间的位置关系；
响应于基于所述打标面板触发的文件生成指令，基于所述图层布局，生成对应所述目标视图模板的代码文件。
本申请实施例提供一种视图模板的代码文件生成装置，包括：
第一呈现模块，用于呈现视图模板的设计界面，并呈现与所述设计界面相关联的打标面板；
添加模块，用于响应于基于所述设计界面触发的元素添加操作，将对应目标视图模板的至少两个视图元素添加到相应的图层，得到至少两个承载有视图元素的图层；
接收模块，用于接收到分别基于所述设计界面及所述打标面板触发的属性输入操作，所述属性输入操作用于输入所述至少两个图层的属性信息；
第二呈现模块，用于响应于所述属性输入操作，在所述设计界面中呈现图层布局，所述图层布局与所述属性信息相对应，用于指示在所述目标视图模板中，所述至少两个图层之间的位置关系；
生成模块，用于响应于基于所述打标面板触发的文件生成指令，基于所述图层布局，生成对应所述目标视图模板的代码文件。
上述方案中，所述第一呈现模块，还用于以悬浮窗口的方式呈现与所述设计界面相关联的打标面板，并
在所述打标面板中呈现以下属性至少之一的输入框：
折叠屏编号、宽度、最大行数、宽高比、类型、伸缩性、布局方式、排列方式。
上述方案中，所述装置还包括：
获取视图模板的候选图层布局与代码字段的属性值之间的映射关系；
基于所述映射关系、与所述属性信息相对应的图层布局，得到对应所述图层布局的第一属性值；
存储所述第一属性值，以获取到与所述图层布局对应的代码字段。
上述方案中，所述装置还包括：
选择模块，用于在所述打标面板中呈现至少两种文件格式的选择项；
响应于针对目标生成格式的选择项的触发操作，确定所述代码文件的文件格式为目标生成格式；
相应的，所述生成模块，还用于生成所述目标生成格式的对应所述目标视图模板的代码文件。
上述方案中，所述生成模块，还用于以各所述图层作为对象树的节点，并
基于所述图层布局，构建节点之间的边，以得到对应所述目标视图模板的对象树；
基于所述对象树，生成对应所述目标视图模板的代码文件。
上述方案中，所述生成模块，还用于获取各所述图层的属性的第二属性值，将所述第二属性值作为相应图层所对应节点的子节点，并
依据所述第二属性值与图层的对应关系，构建所述子节点与所述节点之间的边。
上述方案中，所述装置还包括：
第三呈现模块，还用于呈现对应代码文件的第一预览界面；
在所述第一预览界面中呈现所述代码文件中的代码。
上述方案中，所述第三呈现模块，还用于在所述第一预览界面，呈现基于所述代码文件渲染得到的视图模板；
响应于针对所述视图模板的点击操作，确定点击操作所指示的目标视图元素；
获取承载所述目标视图元素的图层所对应的代码行；
在所述第一预览界面中标记所述代码行。
上述方案中，所述第三呈现模块，还用于在所述第一预览界面，呈现基于所述代码文件渲染得到的视图模板；
接收到针对所述代码的修改操作；
获取修改后的代码文件；
响应于接收到的针对所述视图模板的刷新指令，呈现基于所述修改后的代码文件渲染得到的视图模板。
上述方案中，所述第三呈现模块，还用于接收到针对视图模板的预览操作；
响应于所述预览操作，呈现对应所述视图模板的第二预览界面，并
在第二预览界面中呈现基于所述代码文件渲染得到的视图模板。
上述方案中，所述第三呈现模块，还用于对所述代码文件中的代码进行解析，得到对应至少两个图层的位置及样式；
基于所述位置及所述样式，对各图层进行绘制，以渲染得到所述视图模板。
上述方案中，所述第三呈现模块，还用于在所述第二预览界面中呈现基于所述代码文件渲染得到的至少两个视图模板，所述至少两个视图模板分别对应不同的屏幕尺寸。
本申请实施例提供一种计算机设备，包括：
存储器，用于存储可执行指令；
处理器，用于执行所述存储器中存储的可执行指令时，实现本申请实施例提供的视图模板的代码文件生成方法。
本申请实施例提供一种计算机可读存储介质，存储有可执行指令，用于引起处理器执行时，实现本申请实施例提供的视图模板的代码文件生成方法。
本申请实施例具有以下有益效果：
通过呈现视图模板的设计界面，并呈现与所述设计界面相关联的打标面板；响应于基于所述设计界面触发的元素添加操作，将对应目标视图模板的至少两个视图元素添加到相应的图层，得到至少两个承载有视图元素的图层；接收到分别基于所述设计界面及所述打标面板触发的属性输入操作，所述属性输入操作用于输入所述至少两个图层的属性信息；响应于所述属性输入操作，在所述设计界面中呈现图层布局，所述图层布局与所述属性信息相对应，用于指示在所述目标视图模板中，所述至少两个图层之间的位置关系；响应于基于所述打标面板触发的文件生成指令，基于所述图层布局，生成对应所述目标视图模板的代码文件；如此，能够根据通过设计界面和打标面板输入的属性信息，来获取目标视图模板的设计细节，进而生成对应目标视图模板的代码文件，避免了设计人员与开发人员反复针对设计细节进行沟通、以及开发人员反复修改编写的代码，提高了视图开发的效率。
附图说明
图1是相关技术中提供的视图开发的流程示意图；
图2是本申请实施例提供的视图模板的代码文件生成系统100的架构示意图；
图3是本申请实施例提供的视图模板的代码文件生成方法流程示意图；
图4是本申请实施例提供的视图模板的示意图；
图5是本申请实施例提供的设计界面中工具栏的示意图；
图6是本申请实施例提供的打标面板的呈现示意图；
图7是本申请实施例提供的打标面板的界面示意图；
图8是本申请实施例提供的第一预览界面的示意图；
图9是本申请实施例提供的第一预览界面的示意图；
图10是本申请实施例提供的第二预览界面的示意图；
图11是本申请实施例提供的第一预览界面的示意图；
图12是本申请实施例提供的视图模板的代码文件生成方法的流程示意图；
图13是本申请实施例提供的视图模板的代码文件生成方法的流程示意图；
图14是本申请实施例提供的视图模板的代码文件生成方法的流程示意图；
图15是本申请实施例提供的视图开发的流程示意图；
图16是本申请实施例提供的视图模板的代码文件生成装置的结构组成示意图；
图17是本申请实施例提供的计算机设备500的结构示意图。
具体实施方式
为了使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请作进一步地详细描述，所描述的实施例不应视为对本申请的限制，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。
在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可以理解, “一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。
在以下的描述中，所涉及的术语“第一\第二\第三”仅仅是区别类似的对象，不代表针对对象的特定排序，可以理解地，“第一\第二\第三”在允许的情况下可以互换特定的顺序或先后次序，以使这里描述的本申请实施例能够以除了在这里图示或描述的以外的顺序实施。
除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。
对本申请实施例进行进一步详细说明之前，对本申请实施例中涉及的名词和术语进行说明，本申请实施例中涉及的名词和术语适用于如下的解释。
1）视图模板，指的是一个可重复使用的页面视图，而不是为特定内容设计的单个页面视图，例如，对于一个站点或产品而言，它可能有几十个、甚至上千个屏幕页面，可以根据这些屏幕页面的相似性来设计一个视图模板，通过视图模板可以降低页面设计的工作量。
2）图层，通俗地讲，图层就像是含有文字或图形等元素的胶片，一张张按顺序叠放在一起，组合起来形成页面的最终效果。图层可以将页面上的元素精确定位。图层中可以加入文本、图片、表格、插件，也可以在里面再嵌套图层。
3）视图元素，指的是可以加入图层中的元素，如文本、图片、表格、插件等。
4）响应于，用于表示所执行的操作所依赖的条件或者状态，当满足所依赖的条件或状态时，所执行的一个或多个操作可以是实时的，也可以具有设定的延迟；在没有特别说明的情况下，所执行的多个操作不存在执行先后顺序的限制。
在相关技术中，为实现视图模板的开发，大部分开发人员大概有一半时间都在处理视图相关的工作，图1是相关技术中提供的视图开发的流程示意图，参见图1，视图开发的流程包括：
步骤1：设计人员获取设计需求，并根据设计需求进行视图设计，以得到设计稿。
步骤2：设计人员对设计稿进行切图及标注，并与开发人员沟通设计细节。
这里，切图是指设计稿完成后，将设计稿切成便于制作成页面的图片；标注是指对页面进行标注，如文字样式（文字大小、文字颜色）、布局控件属性（如控件宽高、背景颜色、透明度）等。
步骤3：开发人员根据设计稿的切图、标注及设计细节，在本地编写视图布局代码。
步骤4：开发人员找设计人员进行视图走查，判断是否走查合格，若走查不合格，执行步骤5；若走查合格，表示视图还原完成。
这里，视图走查指的是按照设计稿，在测试环境下对视图布局代码进行检查，判断是基于视图布局代码渲染得到视图是否与设计稿一致，若一致，则表示走查合格，否则表示走查不合格。
步骤5：开发人员修改编写的视图布局代码，并返回步骤4。
上述方案具有以下缺点：
1、由于整个视图开发的过程需要设计人员和开发人员共同完成，会存在很多理解上的差异，并且很多设计思路，很难通过一张设计图来表述清楚，如图片的伸缩属性、最大行数、宽高比等，导致开发人员在进行视图还原时，需要反复修改，降低了开发效率。
2、由于布局样式是在本地写死的，当视图上线后，若需要对布局样式进行修改，必须通过发布新的版本才能够实现，而无法对视图样式配置进行动态下发。
基于此，本申请实施例提供一种视图模板的代码文件生成方法、装置、设备和存储介质，以至少解决相关技术中的上述问题，接下来分别说明。
参见图2，图2是本申请实施例提供的视图模板的代码文件生成系统100的架构示意图，为实现支撑一个示例性应用，终端400（包括终端400-1和终端400-2）通过网络300连接服务器200，其中，终端400-1位于设计人员侧，终端400-2位于用户侧，设计人员侧的终端数量以及用户侧的终端数量均可以是一个或者多个，网络300可以是广域网或者局域网，又或者是二者的组合。
终端400-1，用于呈现视图模板的设计界面，并呈现与所述设计界面相关联的打标面板；响应于基于所述设计界面触发的元素添加操作，将对应目标视图模板的至少两个视图元素添加到相应的图层，得到至少两个承载有视图元素的图层；接收到分别基于所述设计界面及所述打标面板触发的属性输入操作，所述属性输入操作用于输入所述至少两个图层的属性信息；响应于所述属性输入操作，在所述设计界面中呈现图层布局，所述图层布局与所述属性信息相对应，用于指示在所述目标视图模板中，所述至少两个图层之间的位置关系；响应于基于所述打标面板触发的文件生成指令，基于所述图层布局，生成对应所述目标视图模板的代码文件。
在得到目标视图模板的代码文件后，终端400-1可以将代码文件上传至服务器200，然后由服务器下发给终端400-2，终端400-2接收到代码文件后，基于代码文件进行渲染，并呈现目标视图模板。
在一些实施例中，服务器200可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络（CDN，ContentDelivery Network）、以及大数据和人工智能平台等基础云计算服务的云服务器。终端可以是智能手机、平板电脑、笔记本电脑、台式计算机、智能音箱、智能手表等，但并不局限于此。终端以及服务器可以通过有线或无线通信方式进行直接或间接地连接，本申请实施例中不做限制。
基于上述对本申请实施例的视图模板的代码文件生成系统的说明，接下来对本申请实施例提供的视图模板的代码文件生成方法进行说明。在一些实施例中，本申请实施例提供的视图模板的代码文件生成方法可由终端单独实施，或由服务器及终端协同实施，下面以终端实施为例说明本申请实施例提供的视图模板的代码文件生成方法。
参见图3，图3是本申请实施例提供的视图模板的代码文件生成方法流程示意图，将结合图3示出的步骤进行说明。
步骤301：终端呈现视图模板的设计界面，并呈现与设计界面相关联的打标面板。
在实际实施时，终端上设置图像处理客户端，如Sketch客户端，通过图像处理客户端呈现视图模板的视图界面；这里设置有与该图像处理客户端相关联的打标插件，也即该图像处理客户端可以调用打标插件，通过代表插件呈现与设计界面相关联的打标面板。
在实际应用中，可以通过悬浮窗口的方式呈现与设计界面相关联的打标面板，也可以直接在设计界面中呈现与设计界面相关联的打标面板，还可以以其它方式呈现，本申请实施例中不做限制。
步骤302：响应于基于设计界面触发的元素添加操作，将对应目标视图模板的至少两个视图元素添加到相应的图层，得到至少两个承载有视图元素的图层。
在实际应用中，一个视图模板通常是由多个视图元素组成的，例如，图4是本申请实施例提供的视图模板的示意图，参见图4，视图模板由多个图片元素、文本框元素、文本元素组成，如401为图片元素，402为文本框元素，403为文本元素。在对视图模板进行设计时，可以建立多个图层，将对应目标视图模板的多个视图元素添加至相应的图层，以得到多个承载有视图元素的图层，进而通过对图层进行属性设置，以得到满足产品需求的视图模板。
在一些实施例中，在设计界面中通常呈现有新建图层以及元素添加的功能键，当设计人员点击新建图层的功能键后，终端会新建一个图层，然后设计人员可以将所需的视图元素添加至该图层，这里的视图元素可以是图形、图片、符号等。
在一些实施例中，在设计界面中仅呈现有添加视图元素的功能键，当设计人员点击相应的功能键时，可以选择所需添加的视图元素，以触发相应的视图元素添加指令，终端接收到该指令后，会自动创建一个图层，然后将相应的视图元素添加至该图层。
例如，图5是本申请实施例提供的设计界面中工具栏的示意图，参见图5，工具栏中呈现有素材添加的功能键501，该功能键用于供设计人员导入所需的目标素材，将导入的素材作为视图元素添加至相应的图层，以得到承载有目标素材的图层。
步骤303：接收到分别基于设计界面及打标面板触发的属性输入操作。
这里，属性输入操作用于输入至少两个图层的属性信息。这里的属性信息包括样式属性信息和布局属性信息，样式属性信息包括透明度、尺寸等属性信息，布局属性信息包括位置、排列方式、对齐方式等属性信息。
在实际实施时，设计界面所属的图像处理客户端中内置有属性设置面板，可以通过该属性设置面板对图层的属性进行输入，对于图层的位置、尺寸等属性信息，还可以通过针对图层的拖动操作来进行设置。打标面板用于对图像处理客户端原生的属性设置功能进行补充，也即对于图像处理客户端所不能设置的属性进行补充，如此，对于用于表达设计人员意图的所有属性，设计人员均能够通过设计界面以及打标面板进行输入。
需要说明的是，在实际应用中，设计人员可以是每添加一个视图元素至相应图层，就对该图层的属性进行设置，也可以是在添加完所有视图元素后，再对相应的图层的属性进行设置，这里不做限制。
在一些实施例中，可以通过以下方式呈现与涉及界面相关联的打标插件：以悬浮窗口的方式呈现与设计界面相关联的打标面板，并在打标面板中呈现以下属性至少之一的输入框：折叠屏编号、宽度、最大行数、宽高比、类型、伸缩性、布局方式、排列方式。
在实际实施时，与设计界面相关联的打标面板可以是通过独立于设计界面的窗口呈现，这里独立于设计界面的窗口悬浮于设计界面之上。例如，图6是本申请实施例提供的打标面板的呈现示意图，参见图6，打标面板601的窗口悬浮于设计界面602之上。
在实际应用中，输入框可以是文本输入框，也可以是选择输入框。例如，参见图6，图6中的打标面板包括以下属性的输入框：折叠屏编号、宽度、最大行数、宽高比、类型、伸缩性、布局方式、排列方式。
这里，对图6中的打标面板中的可输入的属性信息进行说明。
折叠屏编号用于指示不同屏幕大小及相应的布局方式，可以采用“vg1:c_p_g_r”的格式输入该属性信息，其中，c代表视图列数，p代表距离屏幕左右的内边距编号，g代表单元之间的缝隙编号，r各视图的比例因子。例如，“vg1:2_1_1_1”代表普通屏幕，1行有两个视图，距离屏幕左右的内边距为10dp，单元之间的缝隙为10dp，两个视图比例1:1。
宽度用于指示图层的宽度范围，可以通过对应宽度的输入框，输入图层的最小宽度和最大宽度，如此，使得单元在内容变化时，可以根据自身情况做布局限定。
最大行数是针对文本类型的图层，也即包括文本元素的图层，用于指示文本的最大行数，这里，也可以通过对应最大行数的文本输入框输入图层的最大行数，或者选定不限行数所对应的选择输入框。也即，可以选择设置最大行数，也可以选择不限行数。
宽高比用于指示图层的宽高比，对应宽高比的输入框包括文本输入框和选择输入框，也即设计人员可以通过文本输入框输入任意的宽高比，也可以直接选择常用的宽高比，如1:1、16:9、9:16。
伸缩性包括伸展、压缩及自动，可以通过针对伸展、压缩及自动的选择输入框的选定操作，对图层的伸缩性进行选择。
类型用于指示图层的类型，对应类型的输入框为针对动画类型的选择输入框，也即当图层为动画类型时，设计人员可以点击该选择输入框，以是终端对该图层进行标记。
布局方式用于指示至少两个图层之间的布局关系，包括横向、纵向和叠加，设计人员可以根据需要进行选择，以输入相应的布局属性。
排列方式用于指示至少两个图层之间的排列方式，包括正向排列和反向排列。
步骤304：响应于属性输入操作，在设计界面中呈现图层布局。
这里，图层布局与属性信息相对应，用于指示在目标视图模板中，至少两个图层之间的位置关系。
在实际实施时，在接收到属性输入操作后，会根据输入的属性信息，对图层进行样式调整或者布局调整，以在设计界面中呈现图层布局。需要说明的是，图层布局的方式是基于图层进行呈现的，也即通过根据属性信息对图层进行呈现，以指示至少两个图层之间的位置关系，以实现图层布局的呈现。
在实际应用中，可以是每接收到一个输入的图层的属性信息，就会对图层的样式和布局进行调整，并在设计界面中呈现图层布局，而非在接收到所有属性信息后，才在涉及界面中呈现图层布局。
在一些实施例中，获取视图模板的候选图层布局与代码字段的属性值之间的映射关系；基于映射关系、与属性信息相对应的图层布局，得到对应图层布局的第一属性值；存储第一属性值，以基于第一属性值获取到与图层布局对应的代码字段。
这里，图层布局包括从左到右排列、从右到左排列、从上到下排列、从下到上排列等，相应的，在代码中存在与之相对应的第一属性值，例如，从左到右排列与row对应，从右到左排列与row-reverse对应，从上到下排列与column对应，从下到上排列与column-reverse对应。在实际实施时，会获取相应的第一属性值，存储至对应布局器的内存节点上，以在后续使用时，从内存节点上获取。
步骤305：响应于基于打标面板触发的文件生成指令，基于图层布局，生成对应目标视图模板的代码文件。
在实际实施时，打标面板上设置有用于指示生成代码文件的文件生成功能项，设计人员可以通过点击该文件生成功能项，触发文件生成指令，终端在接收到文件生成指令后，根据图层布局，生成对应目标视图模板的代码文件。
这里的代码文件指的是布局代码文件，用于描述目标视图模板的图层布局的，对代码文件进行渲染，能够得到相应的视图模板。在实际应用中，对代码文件渲染得到的视图模板与目标视图模板的图层布局一致时，说明视图还原成功；否则，需要对代码文件进行修改，以使渲染得到的视图模板与目标视图模板的图层布局一致。
这里，在生成代码文件后，可以将生成的代码文件导出。
在一些实施例中，可以通过以下方式确定代码文件的生成格式：在打标面板中呈现至少两种文件格式的选择项；响应于针对目标生成格式的选择项的触发操作，确定代码文件的文件格式为目标生成格式；相应的，可以通过以下方式生成对应目标视图模板的代码文件：生成目标生成格式的对应目标视图模板的代码文件。
这里，本申请实施例通过提供多个可选择的文件格式，满足了不同平台对文件格式的需求。其中，可选择的文件格式可以包括JSON、XML、HTML，例如，图7是本申请实施例提供的打标面板的界面示意图，参见图7，在打标面板中呈现有JSON、XML、HTML所对应的选择项，当接收到设计人员针对选择项的点击操作，确定该点击操作所指示的文件格式，将该文件格式确定为目标生成格式，并生成目标生成格式的对应目标视图模板的代码文件。
在一些实施例中，可以通过以下方式生成代码文件：以各图层作为对象树的节点，并基于图层布局，构建节点之间的边，以得到对应目标视图模板的对象树；基于对象树，生成对应目标视图模板的代码文件。
这里，采用树形结构来描述图层之间的布局关系，在实际实施时，将图层作为对象树的节点，然后根据图层之间的布局关系，来确定任意两个节点之间的边，以得到对应目标视图模板的对象树。终端可以根据生成的对象树，来生成对应目标视图模板的代码文件。
在一些实施例中，可以先依据图层布局构建对象树，当接收到基于打标面板触发的文件生成指令后，再依据对象树生成对应目标视图模板的代码文件。
在一些实施例中，在构建对象树时，还可以加入图层的属性信息：获取各图层的属性的第二属性值，将第二属性值作为相应图层所对应节点的子节点，并依据第二属性值与图层的对应关系，构建子节点与节点之间的边。
在实际实施时，对于每一个图层，获取该图层所有属性的第二属性值，将这些属性值作为该图层所对应节点的子节点，通过边连接子节点与该图层所对应节点。相应的，当对象树中增加的图层的属性的第二属性值，基于对象树生成的代码文件中也会增减相应的属性信息。
在一些实施例中，在构建对象树时，可以删除一下不需要的属性值所对应的节点，这里不需要的属性值指的是默认的属性值，而非由设计人员输入的，如此，能够减少代码文件生成过程中的计算量，提升代码文件生成的效率。
在一些实施中，在生成代码文件后，终端呈现对应代码文件的第一预览界面；在第一预览界面中呈现代码文件中的代码。
这里，在生成代码文件后，可以对生成的代码文件进行预览，例如，图8是本申请实施例提供的第一预览界面的示意图，参见图8，在第一预览界面中呈现对应目标视图模板的代码文件中的代码。
在一些实施例中，终端还可以在第一预览界面，呈现基于代码文件渲染得到的视图模板；响应于针对视图模板的点击操作，确定点击操作所指示的目标视图元素；获取承载目标视图元素的图层所对应的代码行；在第一预览界面中标记代码行。
在实际实施时，还可以同时呈现代码文件中的代码、以及渲染得到的视图模板。同时，本申请实施例还提供了一种快速定位代码行的方法，也即当接收到对应视图模板中目标视图元素的点击操作时，快速定位到与该视图元素相对应的代码行，并进行标记，使得设计人员能够快速找到相应的代码行进行检查。
这里，可以通过高亮的方式标记代码行，也可以是通过图标来标记代码行，还可以呈现代码行所对应的行数来标记代码行，这里不做限制。
在实际应用中，当某个视图元素的样式与所设计的样式不同时，可以点击该元素，以定位到承载该视图元素的图层所对应的代码行，进而设计人员可以对相应的代码进行修改。
例如，图9是本申请实施例提供的第一预览界面的示意图，参见图9在第一预览界面中同时呈现代码文件中的代码、以及视图模板，当接收到针对视图模板中图片901的点击操作后，通过图标902对图片901所对应的代码行进行标记，即第20行进行标记。
在一些实施例中，终端还可以在第一预览界面，呈现基于代码文件渲染得到的视图模板；接收到针对代码的修改操作；获取修改后的代码文件；响应于接收到的针对视图模板的刷新指令，呈现基于修改后的代码文件渲染得到的视图模板。
这里，本申请实施例支持代码文件的实时修改，也即，在对代码文件进行预览的过程中，可以对代码进行修改，修改后，可以点击第一预览界面中的刷新按钮，以触发针对视图模板的刷新指令，以对修改后的代码文件进行渲染，并呈现渲染得到的视图模板。
在一些实施例中，终端还可以接收到针对视图模板的预览操作；响应于预览操作，呈现对应视图模板的第二预览界面，并在第二预览界面中呈现基于代码文件渲染得到的视图模板。
在实际实施时，在生成代码文件后，可以基于代码文件进行渲染，以对视图模板进行预览，如此，能够检查视图是否还原成功，若没有可以进行相应的调整。
在一些实施例中，可以通过以下当时急于代码文件渲染得到视图模板：对代码文件中的代码进行解析，得到对应至少两个图层的位置及样式；基于位置及样式，对各图层进行绘制，以渲染得到视图模板。
在实际实施时，会对代码进行解析，获取每个图层所要显示的位置、以及样式，这里位置指的是在屏幕中的绝对位置，显示样式包括尺寸、透明度等；基于位置及样式，对各图层进行绘制，就能得到视图模板。
在一些实施例中，还可以通过以下方式呈现基于代码文件渲染得到的视图模板，在第二预览界面中呈现基于代码文件渲染得到的至少两个视图模板，至少两个视图模板分别对应不同的屏幕尺寸。
在实际实施时，可以同时对不同屏幕尺寸对应的视图模板进行预览，例如，图10是本申请实施例提供的第二预览界面的示意图，参见图10，在第二预览界面中呈现有两个视图模板，这两个视图模板中的内容是相同的，但尺寸不同。
在一些实施例中，在生成代码文件后，还可以通过设计界面以及打标面板，对设计的目标视图模板进行修改，接收到针对目标视图模板的修改后，终端会根据修改的属性，呈现新的图层布局，在修改完成后，基于设计人员触发的。触发可以重新生成代码文件。
这里，每次生成代码文件后，都可以通过后台配置下发至用户终端，以使用户终端实现视图模板的动态渲染。
在一些实施例中，在生成目标生成格式的对应目标视图模板的代码文件的代码文件之后，可以对代码文件的文件格式进行转换，本申请实施例提供JSON、XML、HTML中任意两个文件格式之间的转换。
在实际实施时，可以在第一预览界面中呈现文件格式转换的功能键，例如，图11是本申请实施例提供的第一预览界面的示意图，参见图11，在第一预览界面中呈现有文件格式转换的功能键“JSON”，点击该功能件，可以将代码文件转换为JSON文件格式。
本申请实施例通过呈现视图模板的设计界面，并呈现与所述设计界面相关联的打标面板；响应于基于所述设计界面触发的元素添加操作，将对应目标视图模板的至少两个视图元素添加到相应的图层，得到至少两个承载有视图元素的图层；接收到分别基于所述设计界面及所述打标面板触发的属性输入操作，所述属性输入操作用于输入所述至少两个图层的属性信息；响应于所述属性输入操作，在所述设计界面中呈现图层布局，所述图层布局与所述属性信息相对应，用于指示在所述目标视图模板中，所述至少两个图层之间的位置关系；响应于基于所述打标面板触发的文件生成指令，基于所述图层布局，生成对应所述目标视图模板的代码文件；如此，能够根据通过设计界面和打标面板输入的属性信息，来获取目标视图模板的设计细节，进而生成对应目标视图模板的代码文件，避免了设计人员与开发人员反复针对设计细节进行沟通、以及开发人员反复修改编写的代码，提高了视图开发的效率。
下面继续说明本申请实施例提供的视图模板的代码文件生成方法，在一些实施例中，本申请实施例提供的视图模板的代码文件生成方法可以由第一客户端、第二客户端及服务器协同实施，其中，第一客户端对应于设计人员侧，设置于设计人员侧的第一终端上，用于对第二客户端的视图进行设计，以通过第一终端实现本申请实施例提供的视图模板的代码文件生成方法，第二客户端对应于用户侧，设置于用户侧的第二终端上。
图12是本申请实施例提供的视图模板的代码文件生成方法的流程示意图，参见图12，本申请实施例提供视图模板的代码文件生成方法包括：
步骤1201：第一客户端呈现视图模板的设计界面，并呈现与设计界面相关联的打标面板。
这里，第一客户端为图像处理客户端，如Sketch客户端，设计人员可以通过第一客户端对视图模板进行设计，通过图像处理客户端呈现视图模板的视图界面；这里设置有与该图像处理客户端相关联的打标插件，也即该图像处理客户端可以调用打标插件，通过代表插件呈现与设计界面相关联的打标面板。
步骤1202：第一客户端响应于基于设计界面触发的元素添加操作，将对应目标视图模板的至少两个视图元素添加到相应的图层，得到至少两个承载有视图元素的图层。
步骤1203：第一客户端接收到分别基于设计界面及打标面板触发的属性输入操作。
这里，属性输入操作用于输入多个图层的属性信息。
步骤1204：第一客户端响应于属性输入操作，对多个图层的属性信息进行解析，得到图层布局，以及各图层的属性的属性值。
步骤1205：第一客户端以各图层作为对象树的节点，并基于图层布局，构建节点之间的边。
步骤1206：第一客户端获取各图层的属性的第二属性值，将第二属性值作为相应图层所对应节点的子节点。
步骤1207：第一客户端依据第二属性值与图层的对应关系，构建子节点与节点之间的边，以得到对应目标视图模板的对象树。
步骤1208：第一客户端响应于基于打标面板触发的文件生成指令，基于对象树，生成对应目标视图模板的代码文件。
步骤1209：第一客户端呈现第一预览界面，并在第一预览界面中呈现代码文件中的代码、以及基于代码文件渲染得到的第一视图模板。
步骤1210：第一客户端响应于针对视图模板的点击操作，确定点击操作所指示的目标视图元素。
步骤1211：第一客户端获取承载目标视图元素的图层所对应的代码行。
步骤1212：第一客户端在第一预览界面中标记代码行。
步骤1213：第一客户端响应于针对代码行所对应代码的修改操作，获取修改后的代码文件。
步骤1214：第一客户端响应于接收到的针对所第一视图模板的刷新指令，呈现基于修改后的代码文件渲染得到的第二视图模板。
步骤1215：第一客户端响应于针对修改后的代码文件的发送指令，将修改后的代码文件发送至服务器。
步骤1216：服务器将代码文件下发至第二客户端。
步骤1217：第二客户端对代码文件进行渲染，以呈现渲染得到的第二视图模板。
这里，第二客户端为应用第二视图模板的客户端。
在实际应用中，在将代码文件下发至第二客户端后，设计人员还可以对设计的视图模板进行修改。图13是本申请实施例提供的视图模板的代码文件生成方法的流程示意图，参见图13，在执行步骤1217之后，还可以执行步骤1218至步骤1222。
步骤1218：第一客户端响应于针对目标视图模板中目标图层的属性信息修改操作，基于修改后的属性信息，更新对应目标视图模板的对象树。
步骤1219：第一客户端响应于基于打标面板触发的文件生成指令，基于更新后的对象树，生成对应目标视图模板的第二代码文件。
步骤1220：第一客户端响应于针对第二代码文件的发送指令，将第二代码文件发送至服务器。
步骤1221：服务器将第二代码文件下发至第二客户端。
步骤1222：第二客户端对第二代码文件进行渲染，以呈现渲染得到的第三视图模板。
本申请能够根据通过设计界面和打标面板输入的属性信息，来获取目标视图模板的设计细节，进而生成对应目标视图模板的代码文件，避免了设计人员与开发人员反复针对设计细节进行沟通、以及开发人员反复修改编写的代码，提高了视图开发的效率；同时，能够对设计的视图模板进行实时修改，生成相应的代码文件，并进行动态下发。
下面对将说明本申请实施例在一个实际的应用场景中的示例性应用。
在实际实施时，由于设计人员大部分是通过Sketch工具来设计视图模板，所以为了保持设计人员使用工具的一致性，本申请实施例提供的视图模板的代码文件生成方法基于Sketch工具实现。
参见图6，在设计人员设计视图模板的过程中，终端呈现Sketch工具的原生设计界面、以及与sketch工具相关联的打标插件的打标面板，其中，原生设计界面中包括图层添加功能键、图层属性的设置面板等，设计人员可以根据产品需求，通过原生设计界面添加所需的图层，并通过图层属性的设置面板来对图层的属性进行设置。
这里，由于一些用于表达设计人员意图的属性，无法通过sketch工具原生的属性设置功能进行设置，如最大行数、伸缩性等属性，本申请实施例提供打标面板对Sketch工具原生的属性设置功能进行补充，如此，对于用于表达设计人员意图的所有属性，设计人员均能够通过设计界面以及打标面板进行输入。
参见图7，可以通过打标面板对以下属性进行设置，这里可通过打标面板设置的属性包括：
1、折叠屏编号：
设计折叠屏编号与布局信息之间的对应关系，这里折叠屏编号可以由“vg1:c_p_g_r”表示，其中，c代表视图列数，p代表距离屏幕左右的内边距编号，g代表单元之间的缝隙编号，r各视图的比例因子。
这里，由设计人员填写折叠屏编号，通过for循环动态适配多屏幕，并导出到视图模版中。
例如，普通屏幕的折叠屏编号为vg1：2_1_1_1，代表1行有2个视图，距离屏幕左右的内边距为10dp，单元之间的缝隙为10dp，两个视图比例1:1；
大屏幕的折叠屏编号为vg1:3_2_1_2，代表1行3个视图，距离屏幕左右的内边距为15dp，缝隙为10dp，三个视图比例2:1:1。
超大屏幕的折叠屏编号为vg1:4_3_2_3，代表1行4个视图，距离屏幕左右的内边距为20dp，缝隙为15dp，4个视图比例2:2:1:1。
2、宽度：
图层的宽度范围，对于MSLayerGroup、MSBitmapLayer、MSOvalShape、MSRectangleShape类型的Sketch图层，可以指定最小宽度和/或最大宽度，方便单元在内容变化时，根据自身情况做布局限定。
3、最大行数：
对于MSTextLayer、MSSymbolInstance类型的Sketch图层，可以指定文本的最大行数，也可以设置为不限行数。
4、宽高比：
对于MSLayerGroup、MSBitmapLayer、MSOvalShape、MSRectangleShape类型的Sketch图层，可以指定自定义宽高比，或者指定固定宽高比。
5、伸缩属性：
伸缩属性对应于Flexbox的flex-wrap属性，包括伸展、压缩、自动，分别对应于Flexbox的flex-wrap属性的属性值grow、shrink、auto。
6、动画：
对于动画类型的图层需要通过打标，将其与其它类型的图层进行区分。
7、布局方式：
布局方式包括横向、纵向和叠加，其中，横向对应于Flexbox的flex-direction属性的属性值row，表示从左到右排列，纵向对应于Flexbox的flex-direction的属性值column，表示从上到下排列；叠加对应于Flexbox的position属性的属性值absolute和relative，absolute表示绝对定位，relative表示相对定位。
8、排列方式：
排列方式包括正向和反向，对应于FlexBox的flex-direction属性，例如，当布局方式为横向时，排列方式为正向，则对应于FlexBox的flex-direction属性的属性值为row，表示从左到右排列；排列方式为反向，则对应于FlexBox的flex-direction属性的属性值为row-reverse，表示从右到左排列。
9、生成格式（导出格式）：
本申请实施例提供三种生成格式，即JSON、XML、HTML。
图14是本申请实施例提供的视图模板的代码文件生成方法的流程示意图，参见图14，本申请实施例提供的视图模板的代码文件生成方法包括：
步骤1401：获取基于设计界面和打标面板输入的多个图层的属性信息。
这里，基于设计界面输入的属性信息包括Sketch布局属性和Sketch样式属性；基于打标面板输入的属性信息为标签属性。
步骤1402：对多个图层的属性信息进行解析，得到图层间的布局关系、以及图层自身的属性值。
步骤1403a：基于候选布局关系与Flexbox布局属性之间的映射关系，获取与布局关系相对应的Flexbox布局属性。
这里，Flexbox布局属性包括row、row-reverse、column、column-reverse，分别对应从左到右排列、从右到左排列、从上到下排列、从下到上排列。这里，获取到相对应的Flexbox布局属性后，会将获取到的Flexbox布局属性存储到对应的布局器（Layouter）内存节点上。
步骤1403b：存储图层自身的属性值。
这里，对于每个图层，会将其所有属性的属性值都存储到对应的Flex-Property(Text/image/Container)内存节点上。
步骤1404：根据Flexbox布局属性及图层自身的属性值，生成对象树。
这里，会先根据Flexbox布局属性及图层自身的属性值，生成Sketch的图层树，然后根据Sketch的图层树，生成Yoga的布局树，这里，通过删除Sketch的图层树中不需要的节点，如对应默认属性值的节点。
在实际应用中，还会合并一些特殊的图层，如Mask、ShapePath等。
步骤1405a：根据对象树，计算各图层的位置，以得到新的Sketch布局。
步骤1405b：根据新的Sketch布局，分析是否有明显的布局错误。
步骤1406：基于对象树生成对应代码文件，并呈现代码文件中的代码及相应的视图模板。
为验证导出的视图模板是否正确，本申请实施例提供了一个在线模板预览插件，通过在线模板预览插件，呈现生成的代码、以及对应该代码的视图模板。这里，视图模板包括设计样式和设计切图。通过呈现的视图模板，设计人员可以对导出的视图模板的正确性进行检查。这里，可以同时呈现对应不同屏幕尺寸的视图模板，以对不同屏幕尺寸的视图模板的呈现效果进行预览。
在一些实施例中，还支持模版的实时修改，也即，设计人员修改左边代码中的Flexbox布局属性，终端接收到设计人员的修改操作后，响应于设计人员针对刷新按钮的点击操作，呈现修改后的视图模板。
在一些实施例中，支持对代码文件的文件格式进行转换，本申请实施例提供JSON、XML、HTML中任意两个文件格式之间的转换。参见图11，在第一预览界面中呈现有文件格式转换的功能键“JSON”，点击该功能件，可以将代码文件转换为JSON文件格式。如此，满足了不同平台对文件格式的需求。
在一些实施例中，设计人员在检查代码时，可以点击右侧视图模板中的元素，终端会直接定位到相应的代码行，并对相应的代码行进行标记。
通过本申请实施例提供的视图模板的代码文件生成方法，极大简化整个视图开发流程，提升了视图开发的效率。图15是本申请实施例提供的视图开发的流程示意图，参见图15，通过本申请实施例提供的视图模板的代码文件生成方法，视图开发的流程包括：设计人员仅需要根据产品需求设计视图模板，然后生成对应该视图模板的代码文件并导出，接着对代码文件以及对应该代码文件的视图模板进行在线预览，在确定视图模板导出正确后，进行后台配置下发，即完成了整个视图开发流程。
如此，极大的减少设计师和工程师的开发沟通工作，实现两者隔离，减少对接过程中的理解偏差和实现差异，提高了视图开发还原的效率；同时，改变了传统视图的渲染方式，由于传统视图是通过本地写死布局来实现的，上线后无法进行修改，通过本申请实施例提供的方法，可以动态进行后台配置下发，以使终端实现视图样式的动态渲染。
参见图16，图16是本申请实施例提供的视图模板的代码文件生成装置的结构组成示意图，本申请实施例提供的视图模板的代码文件生成装置555，包括：
第一呈现模块5551，用于呈现视图模板的设计界面，并呈现与所述设计界面相关联的打标面板；
添加模块5552，用于响应于基于所述设计界面触发的元素添加操作，将对应目标视图模板的至少两个视图元素添加到相应的图层，得到至少两个承载有视图元素的图层；
接收模块5553，用于接收到分别基于所述设计界面及所述打标面板触发的属性输入操作，所述属性输入操作用于输入所述至少两个图层的属性信息；
第二呈现模块5554，用于响应于所述属性输入操作，在所述设计界面中呈现图层布局，所述图层布局与所述属性信息相对应，用于指示在所述目标视图模板中，所述至少两个图层之间的位置关系；
生成模块5555，用于响应于基于所述打标面板触发的文件生成指令，基于所述图层布局，生成对应所述目标视图模板的代码文件。
在一些实施例中，所述第一呈现模块5551，还用于以悬浮窗口的方式呈现与所述设计界面相关联的打标面板，并
在所述打标面板中呈现以下属性至少之一的输入框：
折叠屏编号、宽度、最大行数、宽高比、类型、伸缩性、布局方式、排列方式。
在一些实施例中，所述装置还包括：
获取视图模板的候选图层布局与代码字段的属性值之间的映射关系；
基于所述映射关系、与所述属性信息相对应的图层布局，得到对应所述图层布局的第一属性值；
存储所述第一属性值，以获取到与所述图层布局对应的代码字段。
在一些实施例中，所述装置还包括：
选择模块，用于在所述打标面板中呈现至少两种文件格式的选择项；
响应于针对目标生成格式的选择项的触发操作，确定所述代码文件的文件格式为目标生成格式；
相应的，所述生成模块5555，还用于生成所述目标生成格式的对应所述目标视图模板的代码文件。
在一些实施例中，所述生成模块5555，还用于以各所述图层作为对象树的节点，并
基于所述图层布局，构建节点之间的边，以得到对应所述目标视图模板的对象树；
基于所述对象树，生成对应所述目标视图模板的代码文件。
在一些实施例中，所述生成模块5555，还用于获取各所述图层的属性的第二属性值，将所述第二属性值作为相应图层所对应节点的子节点，并
依据所述第二属性值与图层的对应关系，构建所述子节点与所述节点之间的边。
在一些实施例中，所述装置还包括：
第三呈现模块，还用于呈现对应代码文件的第一预览界面；
在所述第一预览界面中呈现所述代码文件中的代码。
在一些实施例中，所述第三呈现模块，还用于在所述第一预览界面，呈现基于所述代码文件渲染得到的视图模板；
响应于针对所述视图模板的点击操作，确定点击操作所指示的目标视图元素；
获取承载所述目标视图元素的图层所对应的代码行；
在所述第一预览界面中标记所述代码行。
在一些实施例中，所述第三呈现模块，还用于在所述第一预览界面，呈现基于所述代码文件渲染得到的视图模板；
接收到针对所述代码的修改操作；
获取修改后的代码文件；
响应于接收到的针对所述视图模板的刷新指令，呈现基于所述修改后的代码文件渲染得到的视图模板。
在一些实施例中，所述第三呈现模块，还用于接收到针对视图模板的预览操作；
响应于所述预览操作，呈现对应所述视图模板的第二预览界面，并
在第二预览界面中呈现基于所述代码文件渲染得到的视图模板。
在一些实施例中，所述第三呈现模块，还用于对所述代码文件中的代码进行解析，得到对应至少两个图层的位置及样式；
基于所述位置及所述样式，对各图层进行绘制，以渲染得到所述视图模板。
在一些实施例中，所述第三呈现模块，还用于在所述第二预览界面中呈现基于所述代码文件渲染得到的至少两个视图模板，所述至少两个视图模板分别对应不同的屏幕尺寸。
本申请实施例能够根据通过设计界面和打标面板输入的属性信息，来获取目标视图模板的设计细节，进而生成对应目标视图模板的代码文件，避免了设计人员与开发人员反复针对设计细节进行沟通、以及开发人员反复修改编写的代码，提高了视图开发的效率。
本申请实施例提供一种计算机设备，参见图17，图17为本申请实施例提供的计算机设备500的结构示意图，在实际应用中，计算机设备500可以为图2中的终端或服务器，以计算机设备为图2所示的终端为例，对实施本申请实施例的视图模板的代码文件生成方法的计算机设备进行说明，计算机设备包括：
存储器550，用于存储可执行指令；
处理器510，用于执行所述存储器中存储的可执行指令时，实现本申请实施例提供的视图模板的代码文件生成方法。
这里，处理器510可以是一种集成电路芯片，具有信号的处理能力，例如通用处理器、数字信号处理器（DSP，Digital Signal Processor），或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等，其中，通用处理器可以是微处理器或者任何常规的处理器等。
存储器550可以是可移除的，不可移除的或其组合。示例性的硬件设备包括固态存储器，硬盘驱动器，光盘驱动器等。存储器550可选地包括在物理位置上远离处理器510的一个或多个存储设备。
存储器550包括易失性存储器或非易失性存储器，也可包括易失性和非易失性存储器两者。非易失性存储器可以是只读存储器（ROM，Read Only Memory），易失性存储器可以是随机存取存储器（RAM，Random Access Memory）。本申请实施例描述的存储器550旨在包括任意适合类型的存储器。
在一些实施例中还可包括至少一个网络接口520和用户接口530。计算机设备500中的各个组件通过总线系统540耦合在一起。可理解，总线系统540用于实现这些组件之间的连接通信。总线系统540除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见，在图17中将各种总线都标为总线系统540。
本申请实施例提供一种计算机可读存储介质，存储有可执行指令，所述执行指令用于执行本申请实施例提供的视图模板的代码文件生成方法。
在一些实施例中，存储介质可以是FRAM、ROM、PROM、EPROM、EEPROM、闪存、磁表面存储器、光盘、或CD-ROM等存储器；也可以是包括上述存储器之一或任意组合的各种设备。
作为示例，可执行指令可以但不一定对应于文件系统中的文件，可以可被存储在保存其它程序或数据的文件的一部分，例如，存储在超文本标记语言（HTML，Hyper TextMarkup Language）文档中的一个或多个脚本中，存储在专用于所讨论的程序的单个文件中，或者，存储在多个协同文件（例如，存储一个或多个模块、子程序或代码部分的文件）中。
在一些实施例中，可执行指令可以采用程序、软件、软件模块、脚本或代码的形式，按任意形式的编程语言（包括编译或解释语言，或者声明性或过程性语言）来编写，并且其可按任意形式部署，包括被部署为独立的程序或者被部署为模块、组件、子例程或者适合在计算环境中使用的其它单元。
作为示例，可执行指令可被部署为在一个计算机设备上执行，或者在位于一个地点的多个计算机设备上执行，又或者，在分布在多个地点且通过通信网络互连的多个计算机设备上执行。
以上所述，仅为本申请的实施例而已，并非用于限定本申请的保护范围。凡在本申请的精神和范围之内所作的任何修改、等同替换和改进等，均包含在本申请的保护范围之内。
Claims (15)
1.一种视图模板的代码文件生成方法，其特征在于，所述方法包括：
呈现视图模板的设计界面，并呈现与所述设计界面相关联的打标面板；
响应于基于所述设计界面触发的元素添加操作，将对应目标视图模板的至少两个视图元素添加到相应的图层，得到至少两个承载有视图元素的图层；
接收到分别基于所述设计界面及所述打标面板触发的属性输入操作，所述属性输入操作用于输入所述至少两个图层的属性信息；
响应于所述属性输入操作，在所述设计界面中呈现图层布局，所述图层布局与所述属性信息相对应，用于指示在所述目标视图模板中，所述至少两个图层之间的位置关系；
响应于基于所述打标面板触发的文件生成指令，基于所述图层布局，生成对应所述目标视图模板的代码文件。
2.如权利要求1所述的方法，其特征在于，所述呈现与所述设计界面相关联的打标面板，包括：
以悬浮窗口的方式呈现与所述设计界面相关联的打标面板，并
在所述打标面板中呈现以下属性至少之一的输入框：
折叠屏编号、宽度、最大行数、宽高比、类型、伸缩性、布局方式、排列方式。
3.如权利要求1所述的方法，其特征在于，所述方法还包括：
获取视图模板的候选图层布局与代码字段的属性值之间的映射关系；
基于所述映射关系、与所述属性信息相对应的图层布局，得到对应所述图层布局的第一属性值；
存储所述第一属性值，以基于所述第一属性值获取到与所述图层布局对应的代码字段。
4.如权利要求1所述的方法，其特征在于，所述基于所述图层布局，生成对应所述目标视图模板的代码文件之前，所述方法还包括：
在所述打标面板中呈现至少两种文件格式的选择项；
响应于针对目标生成格式的选择项的触发操作，确定所述代码文件的文件格式为目标生成格式；
所述生成对应所述目标视图模板的代码文件，包括：
生成所述目标生成格式的对应所述目标视图模板的代码文件。
5.如权利要求1所述的方法，其特征在于，所述基于所述图层布局，生成对应所述目标视图模板的代码文件，包括：
以各所述图层作为对象树的节点，并
基于所述图层布局，构建节点之间的边，以得到对应所述目标视图模板的对象树；
基于所述对象树，生成对应所述目标视图模板的代码文件。
6.如权利要求5所述的方法，其特征在于，所述得到对应所述目标视图模板的对象树之前，所述方法还包括：
获取各所述图层的属性的第二属性值，将所述第二属性值作为相应图层所对应节点的子节点，并
依据所述第二属性值与图层的对应关系，构建所述子节点与所述节点之间的边。
7.如权利要求1所述的方法，其特征在于，所述方法还包括：
呈现对应代码文件的第一预览界面；
在所述第一预览界面中呈现所述代码文件中的代码。
8.如权利要求7所述的方法，其特征在于，所述方法还包括：
在所述第一预览界面，呈现基于所述代码文件渲染得到的视图模板；
响应于针对所述视图模板的点击操作，确定点击操作所指示的目标视图元素；
获取承载所述目标视图元素的图层所对应的代码行；
在所述第一预览界面中标记所述代码行。
9.如权利要求7所述的方法，其特征在于，所述方法还包括：
在所述第一预览界面，呈现基于所述代码文件渲染得到的视图模板；
接收到针对所述代码的修改操作；
获取修改后的代码文件；
响应于接收到的针对所述视图模板的刷新指令，呈现基于所述修改后的代码文件渲染得到的视图模板。
10.如权利要求1所述的方法，其特征在于，所述方法还包括：
接收到针对视图模板的预览操作；
响应于所述预览操作，呈现对应所述视图模板的第二预览界面，并
在第二预览界面中呈现基于所述代码文件渲染得到的视图模板。
11.如权利要求9所述的方法，其特征在于，所述在第二预览界面中呈现基于所述代码文件渲染得到的视图模板之前，所述方法还包括：
对所述代码文件中的代码进行解析，得到对应至少两个图层的位置及样式；
基于所述位置及所述样式，对各图层进行绘制，以渲染得到所述视图模板。
12.如权利要求9所述的方法，其特征在于，所述在第二预览界面中呈现基于所述代码文件渲染得到的视图模板，包括：
在所述第二预览界面中呈现基于所述代码文件渲染得到的至少两个视图模板，所述至少两个视图模板分别对应不同的屏幕尺寸。
13.一种视图模板的代码文件生成装置，其特征在于，所述装置包括：
第一呈现模块，用于呈现视图模板的设计界面，并呈现与所述设计界面相关联的打标面板；
添加模块，用于响应于基于所述设计界面触发的元素添加操作，将对应目标视图模板的至少两个视图元素添加到相应的图层，得到至少两个承载有视图元素的图层；
接收模块，用于接收到分别基于所述设计界面及所述打标面板触发的属性输入操作，所述属性输入操作用于输入所述至少两个图层的属性信息；
第二呈现模块，用于响应于所述属性输入操作，在所述设计界面中呈现图层布局，所述图层布局与所述属性信息相对应，用于指示在所述目标视图模板中，所述至少两个图层之间的位置关系；
生成模块，用于响应于基于所述打标面板触发的文件生成指令，基于所述图层布局，生成对应所述目标视图模板的代码文件。
14.一种电子设备，其特征在于，包括：
存储器，用于存储可执行指令；
处理器，用于执行所述存储器中存储的可执行指令时，实现权利要求1至12任一项所述的视图模板的代码文件生成方法。
15.一种计算机可读存储介质，其特征在于，存储有可执行指令，用于被处理器执行时，实现权利要求1至12任一项所述的视图模板的代码文件生成方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010575514.5A CN111475163B (zh) | 2020-06-22 | 2020-06-22 | 视图模板的代码文件生成方法、装置、设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010575514.5A CN111475163B (zh) | 2020-06-22 | 2020-06-22 | 视图模板的代码文件生成方法、装置、设备及存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111475163A true CN111475163A (zh) | 2020-07-31 |
| CN111475163B CN111475163B (zh) | 2020-10-30 |
Family
ID=71763985
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010575514.5A Active CN111475163B (zh) | 2020-06-22 | 2020-06-22 | 视图模板的代码文件生成方法、装置、设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111475163B (zh) |
Cited By (19)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112083919A (zh) * | 2020-08-27 | 2020-12-15 | 远光软件股份有限公司 | 一种基于yaml模板的目标服务代码生成方法及装置 |
| CN112083924A (zh) * | 2020-08-28 | 2020-12-15 | 杭州数云信息技术有限公司 | 一种软件设计界面一致性提升方法及工具 |
| CN112434488A (zh) * | 2020-10-23 | 2021-03-02 | 合肥联宝信息技术有限公司 | 一种自动打标方法、设备以及计算机可读存储介质 |
| CN112685040A (zh) * | 2021-01-22 | 2021-04-20 | 爱驰汽车有限公司 | 安卓系统中界面文件的生成方法、装置、设备及存储介质 |
| CN112800362A (zh) * | 2021-02-04 | 2021-05-14 | 百果园技术(新加坡)有限公司 | 一种界面视图延时加载方法及装置 |
| CN112800724A (zh) * | 2020-12-29 | 2021-05-14 | 杭州涂鸦信息技术有限公司 | 可视化配置模板的可读文件导出方法及相关装置 |
| CN113157261A (zh) * | 2021-03-31 | 2021-07-23 | 上海万物新生环保科技集团有限公司 | 一种代码生成方法及设备 |
| CN113485708A (zh) * | 2021-07-30 | 2021-10-08 | 京东方科技集团股份有限公司 | 基于Sketch的跨平台界面开发方法和系统、计算机设备和介质 |
| CN113626023A (zh) * | 2021-08-30 | 2021-11-09 | 京东方科技集团股份有限公司 | 基于Sketch的跨平台界面开发方法和系统、计算机设备和介质 |
| CN113656041A (zh) * | 2021-08-16 | 2021-11-16 | 工银科技有限公司 | 数据处理方法、装置、设备及存储介质 |
| CN113672227A (zh) * | 2021-08-30 | 2021-11-19 | 北京爱奇艺科技有限公司 | 用户界面代码生成方法、装置、电子设备及存储介质 |
| CN113778401A (zh) * | 2021-01-05 | 2021-12-10 | 北京沃东天骏信息技术有限公司 | 一种页面生成的方法和装置 |
| CN113835684A (zh) * | 2021-09-16 | 2021-12-24 | 支付宝(杭州)信息技术有限公司 | 自动生成图片配置文件的方法及装置 |
| CN113835704A (zh) * | 2021-09-27 | 2021-12-24 | 中电金信软件有限公司 | 一种布局文件生成方法、装置、设备以及存储介质 |
| CN114296857A (zh) * | 2021-12-29 | 2022-04-08 | 北京五八信息技术有限公司 | 界面的调整方法、装置、电子设备及可读介质 |
| CN114675924A (zh) * | 2022-05-26 | 2022-06-28 | 云账户技术(天津)有限公司 | 基于FlexBox的页面布局方法、装置及电子设备 |
| CN115454368A (zh) * | 2022-09-23 | 2022-12-09 | 扬州万方科技股份有限公司 | 一种双显示屏操作台的客户端控制方法及装置 |
| CN115495079A (zh) * | 2022-09-30 | 2022-12-20 | 南京芯传汇电子科技有限公司 | 一种基于PSD文件格式的Qt界面动态生成方法及其系统 |
| CN117707662A (zh) * | 2023-08-23 | 2024-03-15 | 荣耀终端有限公司 | 界面显示方法及电子设备 |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103814371A (zh) * | 2011-09-26 | 2014-05-21 | 英特尔公司 | Web浏览器中的Web应用和辅助设备的模拟、Web应用开发工具以及使用它们的方法 |
| CN103955366A (zh) * | 2014-04-18 | 2014-07-30 | 南威软件股份有限公司 | 一种可视化网站模版的制作方法 |
| CN105354022A (zh) * | 2015-10-16 | 2016-02-24 | 华为技术有限公司 | 一种页面布局文件生成方法及装置 |
| CN106445559A (zh) * | 2016-10-21 | 2017-02-22 | 用友网络科技股份有限公司 | 一种通过视图化模板解决页面差异化的装置及方法 |
| CN106445520A (zh) * | 2016-09-23 | 2017-02-22 | 北京赢点科技有限公司 | 一种可视化专题页面制作方法及装置 |
| CN108345456A (zh) * | 2018-03-07 | 2018-07-31 | 平安普惠企业管理有限公司 | 页面代码生成方法、装置、计算机设备和存储介质 |
| CN109308729A (zh) * | 2017-07-27 | 2019-02-05 | 阿里巴巴集团控股有限公司 | 图片合成处理方法、装置及系统 |
| CN109445778A (zh) * | 2018-09-13 | 2019-03-08 | 珠海豆饭科技有限公司 | 一种基于svg文件的界面辅助生成的方法和装置 |
| US20190095185A1 (en) * | 2016-08-22 | 2019-03-28 | Tencent Technology (Shenzhen) Company Limited | Application installation package generation method and apparatus, and storage medium |
| CN109801347A (zh) * | 2019-01-25 | 2019-05-24 | 北京字节跳动网络技术有限公司 | 一种可编辑图像模板的生成方法、装置、设备和介质 |
-
2020
- 2020-06-22 CN CN202010575514.5A patent/CN111475163B/zh active Active
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103814371A (zh) * | 2011-09-26 | 2014-05-21 | 英特尔公司 | Web浏览器中的Web应用和辅助设备的模拟、Web应用开发工具以及使用它们的方法 |
| CN103955366A (zh) * | 2014-04-18 | 2014-07-30 | 南威软件股份有限公司 | 一种可视化网站模版的制作方法 |
| CN105354022A (zh) * | 2015-10-16 | 2016-02-24 | 华为技术有限公司 | 一种页面布局文件生成方法及装置 |
| US20190095185A1 (en) * | 2016-08-22 | 2019-03-28 | Tencent Technology (Shenzhen) Company Limited | Application installation package generation method and apparatus, and storage medium |
| CN106445520A (zh) * | 2016-09-23 | 2017-02-22 | 北京赢点科技有限公司 | 一种可视化专题页面制作方法及装置 |
| CN106445559A (zh) * | 2016-10-21 | 2017-02-22 | 用友网络科技股份有限公司 | 一种通过视图化模板解决页面差异化的装置及方法 |
| CN109308729A (zh) * | 2017-07-27 | 2019-02-05 | 阿里巴巴集团控股有限公司 | 图片合成处理方法、装置及系统 |
| CN108345456A (zh) * | 2018-03-07 | 2018-07-31 | 平安普惠企业管理有限公司 | 页面代码生成方法、装置、计算机设备和存储介质 |
| CN109445778A (zh) * | 2018-09-13 | 2019-03-08 | 珠海豆饭科技有限公司 | 一种基于svg文件的界面辅助生成的方法和装置 |
| CN109801347A (zh) * | 2019-01-25 | 2019-05-24 | 北京字节跳动网络技术有限公司 | 一种可编辑图像模板的生成方法、装置、设备和介质 |
Non-Patent Citations (2)
| Title |
|---|
| HYHELLO4531T: "基于VUE的ElementUi可视化表单设计器布局器", 《HTTPS://BLOG.CSDN.NET/HEYE520/ARTICLE/DETAILS/101205457》 * |
| WEIXIN_33857679: "可视化拖拽UI布局之拖拽篇", 《HTTPS://BLOG.CSDN.NET/WEIXIN_33857679/ARTICLE/DETAILS/88906221》 * |
Cited By (28)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112083919A (zh) * | 2020-08-27 | 2020-12-15 | 远光软件股份有限公司 | 一种基于yaml模板的目标服务代码生成方法及装置 |
| CN112083919B (zh) * | 2020-08-27 | 2023-09-29 | 远光软件股份有限公司 | 一种基于yaml模板的目标服务代码生成方法及装置 |
| CN112083924A (zh) * | 2020-08-28 | 2020-12-15 | 杭州数云信息技术有限公司 | 一种软件设计界面一致性提升方法及工具 |
| CN112434488B (zh) * | 2020-10-23 | 2022-02-01 | 合肥联宝信息技术有限公司 | 一种自动打标方法、设备以及计算机可读存储介质 |
| CN112434488A (zh) * | 2020-10-23 | 2021-03-02 | 合肥联宝信息技术有限公司 | 一种自动打标方法、设备以及计算机可读存储介质 |
| CN112800724A (zh) * | 2020-12-29 | 2021-05-14 | 杭州涂鸦信息技术有限公司 | 可视化配置模板的可读文件导出方法及相关装置 |
| CN113778401A (zh) * | 2021-01-05 | 2021-12-10 | 北京沃东天骏信息技术有限公司 | 一种页面生成的方法和装置 |
| CN112685040A (zh) * | 2021-01-22 | 2021-04-20 | 爱驰汽车有限公司 | 安卓系统中界面文件的生成方法、装置、设备及存储介质 |
| CN112800362A (zh) * | 2021-02-04 | 2021-05-14 | 百果园技术(新加坡)有限公司 | 一种界面视图延时加载方法及装置 |
| CN112800362B (zh) * | 2021-02-04 | 2024-05-17 | 百果园技术(新加坡)有限公司 | 一种界面视图延时加载方法及装置 |
| CN113157261A (zh) * | 2021-03-31 | 2021-07-23 | 上海万物新生环保科技集团有限公司 | 一种代码生成方法及设备 |
| CN113157261B (zh) * | 2021-03-31 | 2024-04-16 | 上海万物新生环保科技集团有限公司 | 一种代码生成方法及设备 |
| CN113485708A (zh) * | 2021-07-30 | 2021-10-08 | 京东方科技集团股份有限公司 | 基于Sketch的跨平台界面开发方法和系统、计算机设备和介质 |
| CN113656041A (zh) * | 2021-08-16 | 2021-11-16 | 工银科技有限公司 | 数据处理方法、装置、设备及存储介质 |
| CN113626023B (zh) * | 2021-08-30 | 2024-09-17 | 京东方科技集团股份有限公司 | 基于Sketch的跨平台界面开发方法和系统、计算机设备和介质 |
| CN113626023A (zh) * | 2021-08-30 | 2021-11-09 | 京东方科技集团股份有限公司 | 基于Sketch的跨平台界面开发方法和系统、计算机设备和介质 |
| CN113672227A (zh) * | 2021-08-30 | 2021-11-19 | 北京爱奇艺科技有限公司 | 用户界面代码生成方法、装置、电子设备及存储介质 |
| CN113672227B (zh) * | 2021-08-30 | 2024-04-23 | 北京爱奇艺科技有限公司 | 用户界面代码生成方法、装置、电子设备及存储介质 |
| CN113835684A (zh) * | 2021-09-16 | 2021-12-24 | 支付宝(杭州)信息技术有限公司 | 自动生成图片配置文件的方法及装置 |
| CN113835704A (zh) * | 2021-09-27 | 2021-12-24 | 中电金信软件有限公司 | 一种布局文件生成方法、装置、设备以及存储介质 |
| CN113835704B (zh) * | 2021-09-27 | 2024-05-10 | 中电金信软件有限公司 | 一种布局文件生成方法、装置、设备以及存储介质 |
| CN114296857A (zh) * | 2021-12-29 | 2022-04-08 | 北京五八信息技术有限公司 | 界面的调整方法、装置、电子设备及可读介质 |
| CN114675924A (zh) * | 2022-05-26 | 2022-06-28 | 云账户技术(天津)有限公司 | 基于FlexBox的页面布局方法、装置及电子设备 |
| CN114675924B (zh) * | 2022-05-26 | 2022-08-19 | 云账户技术(天津)有限公司 | 基于FlexBox的页面布局方法、装置及电子设备 |
| CN115454368A (zh) * | 2022-09-23 | 2022-12-09 | 扬州万方科技股份有限公司 | 一种双显示屏操作台的客户端控制方法及装置 |
| CN115495079B (zh) * | 2022-09-30 | 2024-04-30 | 南京芯传汇电子科技有限公司 | 一种基于PSD文件格式的Qt界面动态生成方法及其系统 |
| CN115495079A (zh) * | 2022-09-30 | 2022-12-20 | 南京芯传汇电子科技有限公司 | 一种基于PSD文件格式的Qt界面动态生成方法及其系统 |
| CN117707662A (zh) * | 2023-08-23 | 2024-03-15 | 荣耀终端有限公司 | 界面显示方法及电子设备 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111475163B (zh) | 2020-10-30 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111475163B (zh) | 视图模板的代码文件生成方法、装置、设备及存储介质 | |
| JP7354294B2 (ja) | 階層流動コンポーネントおよび動的レイアウトを統合した応答編集および表示を提供するシステムおよび方法 | |
| US9142192B2 (en) | Simulation of web applications and secondary devices in a web browser, web application development tools, and methods using the same | |
| US8819624B2 (en) | Simulation of web applications and secondary devices in a web browser, web application development tools, and methods using the same | |
| CN109614424B (zh) | 页面布局生成方法、装置、计算设备和介质 | |
| CN109408764B (zh) | 页面区域划分方法、装置、计算设备和介质 | |
| WO2016054549A1 (en) | Application prototyping tool | |
| CN107491427A (zh) | 数据报表处理方法及装置 | |
| US10049095B2 (en) | In-context editing of output presentations via automatic pattern detection | |
| CN103593414A (zh) | 一种浏览器中网页的展现方法和装置 | |
| CN112131332B (zh) | 信息点的更新方法、装置、电子设备和计算机存储介质 | |
| CN113535165A (zh) | 界面生成方法、装置、电子设备及计算机可读存储介质 | |
| CN113326044A (zh) | 一种基于控件库的开发方法、系统及存储介质 | |
| US20230119466A1 (en) | Code block element for integrated graphic design system | |
| US20150161085A1 (en) | Natural language-aided hypertext document authoring | |
| US9372844B2 (en) | Automatically generating a business process flow GUI using a symbolic annotation language | |
| CN115543288A (zh) | 代码信息的生成方法、装置、设备及存储介质 | |
| JP2009238215A (ja) | データ処理装置及びデータ処理方法 | |
| CN110928540A (zh) | 一种页面生成方法及装置 | |
| CN111858595B (zh) | 一种电力工程验评记录表动态配置方法与系统 | |
| CN113254455A (zh) | 数据库的动态配置方法、装置、计算机设备及存储介质 | |
| CN115249285A (zh) | 可视化视图的构建方法及装置 | |
| Da Rocha | Learn D3. js: Create Interactive Data-driven Visualizations for the Web with the D3. js Library | |
| CN116795347B (zh) | 一种面向地图自动综合的图形化编程系统及装置 | |
| CN112269960B (zh) | 基于关联报表的网页更新方法、系统、设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| REG | Reference to a national code |
Ref country code: HK Ref legal event code: DE Ref document number: 40025944 Country of ref document: HK |