图形界面代码的生成方法和装置与流程

1.本技术涉及数据处理领域，具体涉及图形界面代码的生成方法和装置、存储介质。


背景技术：

2.前端界面开发是创建图形界面并呈现给用户的过程。在将图形界面展示给用户时，需要终端从服务器、云平台等远程服务平台获取图形界面对应的程序代码，终端对该程序代码进行编码运行和渲染等处理，以显示图形界面。
3.一个常见的前端界面开发周期中，设计人员先设计出图形界面对应的设计稿，需要前端开发工程师对设计稿进行编码，得到图形界面对应的程序代码，实现界面设计。前端开发工程师根据设计人员的设计稿编写程序代码，成本较高。
4.目前，可以利用神经网络模型将设计稿进行识别，并根据识别结果自动生成图形界面对应的程序代码，从而实现界面设计。神经网络模型对设计稿识别结果的准确度，对生成图形界面对应的程序代码能否准确还原设计稿产生较大影响。


技术实现要素：

5.本技术提供一种图形界面代码生成方法和装置，能够提高代码表示图形界面的准确度。
6.本技术实施例提供一种图形界面代码的生成方法，包括：
7.基于用户选择操作，将至少一个图形设计元件安置在为设计目标图形界面而呈现的前端设计界面中，其中，所述图形设计元件采用设计所述目标图形界面的设计代码预先定义；
8.根据用户为变更所述图形设计元件在所述前端设计界面中表现形式的配置选择，更新所述图形设计元件对应的设计代码；
9.根据所述前端设计界面上配置完毕的所述至少一个图形设计元件对应的设计代码，生成所述目标图形界面的设计代码。
10.可选地，所述方法还包括：根据更新后的所述设计代码，对所述图形设计元件进行渲染，实现在所述前端设计界面上对所述图形设计元件的表现形式的变更。
11.可选地，所述根据更新后的所述设计代码，对所述图形设计元件进行渲染，实现在所述前端设计界面上更新所述图形设计元件的表现形式的变更，包括：
12.将更新后的所述设计代码的格式转换为目标格式，所述目标格式为是所述前端设计界面可识别的格式；
13.对所述图形设计元件转换后的设计代码在所述前端设计界面中进行渲染，实现在所述前端设计界面上更新所述图形设计元件外观。
14.可选地，所述将更新后的所述设计代码转换为目标格式，包括：将所述图形设计元件更新后的设计代码的格式转换为html格式，再将所述图形设计元件更新后的设计代码由所述html格式转换为所述目标格式。
15.可选地，所述将所述图形设计元件更新后的设计代码的格式转换为html格式，包括：
16.利用低代码引擎，将所述图形设计元件更新后的设计代码的格式转换为html格式。
17.可选地，所述方法还包括：基于用户对所述图形设计元件的选择，在用户界面中显示所述图形设计元件对应的配置界面，所述配置选择由用户通过所述配置界面输入。
18.可选地，所述图形设计元件对应的设计代码用于指示所述图形设计元件的参数类型，所述配置界面用于显示所述参数类型，所述配置选择用于指示所述参数类型的取值。
19.可选地，所述方法还包括：
20.获取资料包，所述资料包包括多个类别的图形设计元件的设计代码；
21.根据所述多个类别的图形设计元件的设计代码，在用户界面的目录栏显示所述多个类别；
22.获取用户对所述多个类别的选择操作，并根据所述选择操作，确定所选择的图形设计元件。
23.可选地，所述获取资料包，包括：
24.根据用户代码调试操作，对多个类别的图形设计元件的初始设计代码进行调试；
25.对调试后的所述多个类别的图形设计元件的设计代码进行收集，以形成所述资料包。
26.可选地，所述根据所述前端设计界面上配置完毕的各个图形设计元件对应的设计代码，生成所述图形界面的设计代码，包括：
27.对前端设计界面上配置完毕的各个图形设计元件对应的设计代码进行收集，以生成数据交换语言格式的界面设计文件；
28.根据所述界面设计文件，生成所述目标图形界面的设计代码。
29.可选地，所述根据所述界面设计文件，生成所述图形界面的设计代码，包括：利用低代码引擎对所述界面设计文件进行处理，以生成所述图形界面的设计代码。
30.本技术实施例提供一种图形界面代码的生成装置，包括：安置单元、更新单元和生成单元。
31.安置单元用于，基于用户选择操作，将至少一个图形设计元件安置在为设计目标图形界面而呈现的前端设计界面中，其中，所述图形设计元件采用设计所述目标图形界面的设计代码预先定义。
32.更新单元用于，根据用户为变更所述图形设计元件在所述前端设计界面中表现形式的配置选择，更新所述图形设计元件对应的设计代码。
33.生成单元用于，根据所述前端设计界面上配置完毕的所述至少一个图形设计元件对应的设计代码，生成所述目标图形界面的设计代码。
34.可选地，更新单元还用于，根据更新后的所述设计代码，对所述图形设计元件进行渲染，实现在所述前端设计界面上对所述图形设计元件的表现形式的变更。
35.可选地，更新单元还用于，将更新后的所述设计代码的格式转换为目标格式，所述目标格式为是所述前端设计界面可识别的格式。
36.更新单元还用于，对所述图形设计元件转换后的设计代码在所述前端设计界面中
进行渲染，实现在所述前端设计界面上更新所述图形设计元件外观。
37.可选地，更新单元还用于，将所述图形设计元件更新后的设计代码的格式转换为html格式，再将所述图形设计元件更新后的设计代码由所述html格式转换为所述目标格式。
38.可选地，更新单元还用于，利用低代码引擎，将所述图形设计元件更新后的设计代码的格式转换为html格式。
39.可选地，图形界面代码的生成装置还包括显示单元，显示单元用于基于用户对所述图形设计元件的选择，在用户界面中显示所述图形设计元件对应的配置界面，所述配置选择由用户通过所述配置界面输入。
40.可选地，所述图形设计元件对应的设计代码用于指示所述图形设计元件的参数类型，所述配置界面用于显示所述参数类型，所述配置选择用于指示所述参数类型的取值。
41.可选地，图形界面代码的生成装置还包括：获取单元和显示单元。
42.获取单元用于，获取资料包，所述资料包包括多个类别的图形设计元件的设计代码。
43.显示单元用于，根据所述多个类别的图形设计元件的设计代码，在用户界面的目录栏显示所述多个类别。
44.获取单元还用于，获取用户对所述多个类别的选择操作，并根据所述选择操作，确定所选择的图形设计元件。
45.可选地，获取单元还用于，根据用户代码调试操作，对多个类别的图形设计元件的初始设计代码进行调试。
46.图形界面代码的生成装置还包括收集单元，收集单元用于对调试后的所述多个类别的图形设计元件的设计代码进行收集，以形成所述资料包。
47.可选地，生成单元用于，对前端设计界面上配置完毕的各个图形设计元件对应的设计代码进行收集，以生成数据交换语言格式的界面设计文件。
48.生成单元还用于，根据所述界面设计文件，生成所述目标图形界面的设计代码。
49.可选地，生成单元用于，利用低代码引擎对所述界面设计文件进行处理，以生成所述图形界面的设计代码。
50.本技术实施例提供一种图形界面代码生成装置，包括：处理器和存储器；
51.所述存储器用于存储程序，所述处理器调用存储器存储的程序，以执行上文所述的图形界面代码生成方法。
52.本技术实施例提供一种存储介质，其特征在于，所述存储介质存储有程序，所述程序被处理器执行，用于实现上文所述的图形界面代码生成方法。
53.与现有技术相比，本技术提供的图形界面代码的生成方法，根据用户对图形设计元件的配置选择调整图形设计元件的设计代码以及图形设计元件在前端设计界面的外观，根据前端设计界面中配置完成的各个图形设计元件对应的设计代码，生成前端设计界面的设计代码。图形设计元件的设计代码以及图形设计元件在前端设计界面的外观均根据用户对图形设计元件的配置选择进行调整更新，从而生成的前端设计界面的设计代码能够准确反映前端设计界面的外观，生成的设计代码具有较高的准确度；在该方法中，在前端设计界面的设计过程，与相应的设计代码完全对应和联动，具有更高的代码生成效率。
附图说明
54.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术中记载的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图。
55.图1是界面代码生成系统的示意图；
56.图2是本技术实施例提供的一种图形界面代码的生成方法的示意性流程图；
57.图3是本技术实施例提供的一种用户界面的示意图；
58.图4是本技术实施例提供的另一种用户界面的示意图；
59.图5是本技术实施例提供的另一种图形界面代码的生成方法的示意性流程图；
60.图6是本技术实施例提供的一种图形界面代码的生成装置的示意性结构图；
61.图7是本技术实施例提供的另一种图形界面代码的生成装置的示意性结构图。
具体实施方式
62.为使本技术的目的、优点和特征更加清楚，以下结合附图和具体实施方式对本技术中的技术方案作进一步详细说明。在下面的描述中，阐述了很多具体细节以便于充分理解本技术。但是，本技术能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本技术内涵的情况下做类似推广，因此本技术不受下面公开的具体实施方式的限制。
63.需要说明的是，在本技术的描述中，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性，以及特定的顺序或先后次序。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本技术中的具体含义。此外，在本技术的描述中，除非另有说明，术语“多个”是指两个或两个以上。术语“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。术语“包括”和“具有”以及他们的任何变形，旨在覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
64.计算机图像包括矢量图像和位图图像。位图图像是由成千上万个像素点构成的。
65.矢量图像也可以称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点，是一种基于数学方式的绘图方式的得到的图像。矢量图像中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。既然每个对象都是一个自成一体的实体，就可以在维持它原有清晰度和弯曲度的同时，多次移动和改变它的属性，而不会影响图例中的其它对象。
66.当用户使用矢量绘图程序进行图形的绘制工作时，不是从一个个的点开始进行图像设计和绘制，而是直接将该软件中所提供的一些基本图形对象如直线、圆、矩形、曲线等进行再组合。用户可以方便地改变他们的形状、大小、颜色、位置等属性而不会影响它们的整体结构。
67.矢量图像不受分辨率的影响。因此，在印刷或显示图像时，可以任意放大或缩小图
形而不会影响图像的清晰度。
68.前端开发是创建图形用户界面呈现给用户的过程，例如通过超文本标记语言(hyper text markup language，html)、层叠样式表(cascading style sheets，css)及脚本语言(javascript，js)以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。一个常见的前端开发周期中，设计师负责产出设计稿，而前端开发工程师以设计稿为输入进行开发，确定页面代码。
69.设计师利用矢量绘图程序绘制的设计图，能够在矢量绘图程序中显示。但设计稿不具有功能性，需要前端开发工程师对设计图进行编码，得到页面代码，实现页面设计。
70.前端开发工程师根据设计师的设计稿编写界面代码，成本较高，并且很难保证页面代码对设计图的还原度。
71.或者，也可以利用神经网络将设计稿中的元素识别为组件，并自动生成相应的页面代码，从而实现页面设计。神经网络模型对设计稿中的元素识别的准确度，对页面代码对设计图的还原度产生较大影响。
72.为了解决上述问题，本技术实施例提供一种界面代码生成系统、界面代码生成方法和装置。下面结合图1至图5，对本技术实施例提供的界面代码生成系统和界面代码生成方法进行说明。
73.请参看图1，该图为本技术实施例提供的一种图形界面代码生成系统的示意图。
74.界面代码生成系统包括第一终端101和第二终端102。
75.前端开发人员可以利用第一终端101预览该初始设计代码对应的图形设计元素在图形界面的渲染效果和该图形设计元素的参数类型，对该图形设计元素的初始设计代码进行调试，以得到该图形设计元素的设计代码。
76.在第一终端101，可以根据各个类型的图形设计元素的设计代码，生成资料包。资料包包括该各个类型对应的设计代码。
77.第一终端101可以将资料包传输第二终端102。例如，第一终端101可以向服务器发送资料包，第二终端102可以接收服务器发送的资料包。
78.设计人员可以通过第二终端102，在前端设计界面利用资料包进行设计稿的设计。在第二终端102，根据设计好的图形界面中包括的图形设计元素对应的设计代码，可以形成图形界面的设计代码。
79.请参看图2，该图为是本技术实施例提供的一种图形界面代码生成方法的示意性流程图。图2所示的图形界面代码生成方法可以利用图1所述的图形界面代码生成系统执行。图2所示的图形界面代码生成方法包括s201至s206，其中，s201可以由第一终端执行，s202-s206可以由第二终端执行。也就是说，在s201中涉及的用户可以是前端开发人员，在s202-s206中涉及的用户可以是设计人员。
80.在s201，图形设计元件的代码准备。
81.在矢量绘图程序中，图形设计元件可以理解为图像对象、图像元素或组件。组件也可以称为对象，是对数据和方法的简单封装。图像设计元件可以理解为通过数学定义的实体。
82.示例性地，可以获取用户的代码调试操作，并根据代码调试操作对图形设计元件的初始设计代码进行调试。代码调试操作可以是用户根据显示的该初始设计代码的渲染效
果进行的操作。
83.可以对图形设计元件的初始设计代码进行格式转换，并对格式转换后的初始设计代码在用户界面(user interface，ui)中进行渲染，从而在用户界面中显示该初始设计代码的渲染效果。
84.用户界面可以是矢量绘图程序提供的。
85.通过格式转换，使得图形设计元件的初始设计代码的格式转换为用户界面可识别的目标格式。在一些实施例中，可以将图形设计元件的初始设计代码的格式转换为超文本标记语言(hyper text markup language，html)格式，再将图形设计元件的初始设计代码由html格式转换为目标格式。
86.初始设计代码的渲染效果可以包括初始设计代码在目录栏显示的类别、在前端设计界面显示的图形设计元素的外观、配置界面等。目录栏、前端设计界面、配置界面可以位于用户界面中。
87.目录栏用于显示各个初始设计代码对应的图形设计元件类别。
88.前端设计界面也可以理解为画布，即进行图形设计的区域。
89.配置界面可以用于显示图形设计元件的参数类型。每个类别的图形设计元件的设计代码可以用于指示该类别的图形设计元件的参数类型。
90.也就是说，前端开发人员利用开发环境，分别对多个类别的图形设计元件的设计代码进行调试。根据调试后的该多个类别对应的设计代码，可以形成资料包。
91.之后，可以对调试后的该多个类别的图形设计元件的设计代码进行收集，以形成资料包。资料包包括该多个类别的图形设计元件的设计代码。
92.在s201之后，第一终端可以向第二终端发送资料包，资料包包括图形设计元件的设计代码。之后，第二终端可以进行s202至s205。
93.在s202，在目录栏显示图形设计元件的多个类别。
94.可以对资料包中多个类别的图形设计元件的设计代码进行格式转换及渲染。
95.通过格式转换，可以将资料包中该多个类别对应的设计代码的格式转换为用户界面可识别的目标格式。目标格式也可以理解为前端设计界面可识别的格式。目标格式例如可以是草图(sketch)、可缩放矢量图形(scalable vector graphics，svg)格式等矢量图格式。
96.示例性地，可以分别将多个类别的图形设计元件的设计代码的格式转换为超文本标记语言(hyper text markup language，html)格式，再将该多个类别的图形设计元件的设计代码由html格式转换为目标格式。
97.html是一种标记语言。html文本是由html命令组成的描述性文本，html命令可以说明文字、图形、动画、声音、表格、链接等。
98.超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
99.将多个类别对应的设计代码的格式转换为通用性较强的html格式，再转换为用户界面可识别的目标格式，使得向目标格式的格式转换更容易实现。
100.示例性地，可以利用开源软件实现多个类别对应的设计代码的格式转换。例如，可以利用低代码引擎将多个类别对应的设计代码的格式转换为html格式。矢量绘图程序的目标格式为草图(sketch)的情况下，可以利用代码转设计(code to design，c2d)技术将html格式转换为目标格式。
101.之后，在用户界面中，可以对格式转换后的该多个类别对应的设计代码进行渲染。
102.通过渲染，可以用户界面的目录栏显示该多个类别。
103.示例性地，如图3所示，用户界面300可以包括前端设计界面302和目录栏301。目录栏301用于显示各个类别。例如，该多个类别可以包括长方形、三角形、椭圆形、按钮、进度显示器等。
104.在s203，根据用户在目标栏选择的类别，在前端设计界面添加属于该类别的图形设计元件。
105.可以在用户点击目标栏中的某个类别，双击该某个类别，或拖拽该类别等情况下，在前端设计界面添加属于该类别的图形设计元件。
106.可以对所选类别的图形设计元件的设计代码进行格式转换和渲染，在前端设计界面添加该图形设计元件。应当理解，各个类别的图形设计元件的设计代码可以包括图像设计元件参数类型的默认取值。在前端设计界面添加该图形设计元件可以是按照该默认取值的参数类型显示的。
107.或者，也可以对s202得到的格式转换后的图形设计元件的设计代码进行渲染，从而在前端设计界面添加该图形设计元件。
108.在s204，根据用户对所选图形设计元件的配置选择，更新该图形设计元件对应的设计代码，并按照更新后的设计代码更新前端设计界面中该图形设计元件的外观。
109.用户在前端设计界面添加某个图形设计元件时，可以认为用户选中该图形设计元件。用户通点击或框选前端设计界面中的某个图形设计元件时，也可以认为用户选中该图形设计元件。
110.图形设计元件的配置选择可以指示图形设计元件的参数类型的取值。用户对所选图形设计元件的配置选择，可以理解为用户调整该图形设计元件的参数类型的取值。
111.在用户选中前端设计界面中的图形设计元件情况下，可以显示配置界面，配置界面包括该图形设计元件的参数类型。用户可以通过配置界面设置图形设计元件全部或部分参数类型的取值。
112.配置界面可以包括用户选中的图形设计元件的参数类型。不同的类别的图形设计元件可以对应于不同的参数类型。例如，每个类别的参数类型均可以包括大小、位置、颜色等，表示“按钮”的类别的参数类型除大小、位置、颜色之外还可以包括按钮中显示的文字。
113.如图4所示，用户界面400可以包括前端设计界面401和配置界面402。用户已选中前端设计界面401中的一个图形设计元件，该图形设计元件属于用于表示“进度指示器”的类别，配置界面402可以显示“进度指示器”类别图形设计元件的参数类型，包括尺寸、是否显示边框、边框颜色的颜色和宽度、当前进度的百分比等。
114.用户也可以通过在前端设计界面中对图形设计元件进行拖拽的方式，调整所选图形设计元件的大小、形状等参数类型的取值。
115.根据用户对所选图形设计元件的配置选择，更新该图形设计元件对应的设计代
码，更新后的设计代码中图形设计元件的参数类型的取值为配置选择指示的取值。
116.之后，可以按照更新后的设计代码，更新前端设计界面中该图形设计元件的外观。可以对更新后的设计代码进行格式转换和渲染，以使得前端设计界面中该图形设计元件按照配置选择指示的参数类型取值进行显示。
117.或者，也可以根据用户对所选图形设计元件的配置选择，更新该图形设计元件对应的格式转换后的设计代码。从而，对更新后的设计代码进行渲染。
118.更新前端设计界面中该图形设计元件的外观，便于用户继续对前端设计界面显示的图像进行完善和修改。
119.s205，根据前端设计界面上配置完毕的各个图形设计元件对应的设计代码，生成前端设计界面的设计代码。
120.示例性地，可以生成json格式的界面设计文件。界面设计文件可以包括前端设计界面中各个图形设计元件对应的设计代码。
121.js对象简谱(javascript object notation，json)是一种轻量级的数据交换格式。采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得json成为理想的数据交换语言，可以在多种语言之间进行数据交换。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
122.界面设计文件可以是符合低代码技术规范的文件。低代码技术规范例如可以是《低代码引擎搭建协议规范》。
123.界面设计文件中使用的结构可以是schema。结构schema是一种符合低代码技术规范的结构，即基于低代码技术的低代码平台可以识别界面设计文件。
124.低代码(low code)是一组数字技术工具平台，基于图形化拖拽、参数化配置等更为高效的方式，实现快速构建、数据编排、连接生态、中台服务。通过少量代码或不用代码实现数字化转型中的场景应用创新。
125.之后，可以利用低代码引擎等低代码技术，根据界面设计文件。生成前端设计界面的设计代码。也就是说，可以利用低代码技术对界面设计文件进行格式转换，以得到前端设计界面的设计代码。各个图形设计元件配置完毕情况下的前端设计界面，也可以理解为图形界面。
126.通过s201至s205，设计图形设计元件的代码，在前端设计界面显示对设计好的图形设计元件代码对应的图形设计元件代的外观，根据用户对所选图形设计元件的配置选择更新图形设计元件的代码，按照图形设计元件更新后的代码更新图形设计元件的外观，并根据前端设计界面显示的各个配置好的图形设计元件的代码，生成前端设计界面表示的图形界面的设计代码。前端设计界面显示的图形设计元件的外观是根据图形设计元件的代码确定的，根据图形设计元件的代码确定的前端设计界面的设计代码能够准确表示前端设计界面中各个图形设计元件的外观，使得前端设计界面的设计代码对前端设计界面具有较高的还原度。
127.请参看图5，该图是本技术实施例提供的一种图形界面代码的生成方法的示意性流程图。本实施例提供的图形界面代码的生成方法具体可以应用于实现图形界面代码的生成功能的电子设备，该电子设备可以是终端设备、服务器等，在其他实施例中，电子设备还可以采用其他设备实现，本实施例此处不做具体限定。示例性地，该电子设备可以是具有显
示视频画面或者显示图片功能的设备，例如可以是移动终端(例如智能手机)、电脑、个人数字助理、可穿戴设备、车载设备、物联网设备、增强现实(augmented reality，ar)设备或虚拟现实(virtual reality，vr)设备等等。
128.图5所示的方法包括s501至s503。
129.在s501，基于用户选择操作，将至少一个图形设计元件安置在为设计目标图形界面而呈现的前端设计界面中，其中，所述图形设计元件采用设计所述目标图形界面的设计代码预先定义。
130.前端设计界面可以位于用户界面。用户界面也可以称为人机界面或界面，是系统和用户之间进行交互和信息交换的媒介。用户界面可以是绘图程序提供的，绘图程序例如可以是矢量绘图程序。因此，前端设计界面可识别的格式，也可以理解为用户界面可识别的格式。
131.图形设计元件也可以理解为图像对象或组件。将图形设计元件安置在前端设计界面中，即在前端设计界面中显示图形设计元件的外观。
132.目标图形界面可以理解为利用前端设计界面设计得到的图形界面，也就是说，目标图形界面包括前端设计界面中配置完成的至少一个图像设计元件。
133.设计所述目标图形界面的设计代码，可以理解为，为设计图形界面而开发的代码，该代码可以不是由用于提供用户界面的绘图程序提供的。因此，在进行s501之前，可以获取图形设计元件的设计代码。
134.示例性地，在s501之前，可以获取资料包，资料包包括多个类别的图形设计元件的设计代码。
135.获取资料包的方式，可以是形成资料包，或者，也可以是接收其他设备发送的资料包。
136.可以根据用户代码调试操作，对多个类别的图形设计元件的初始设计代码进行调试。对调试后的所述多个类别的图形设计元件的设计代码进行收集，以形成所述资料包。
137.用户代码调试操作可以是用户根据显示的该初始设计代码的渲染效果进行的操作。
138.获取资料包之后，可以根据所述多个类别的图形设计元件的设计代码，在所述用户界面的目录栏显示所述多个类别。
139.可以获取用户对所述多个类别的选择操作，并根据所述选择操作，确定所选择的图形设计元件。
140.从而在s501，可以将所选择的图像设计元件安置在前端设计界面。
141.图形设计元件的设计代码的格式可能并不是用户界面可识别的目标格式。为了在目录栏显示该多个类别，可以将资料包中多个类别的图形设计元件的设计代码分别转换为目标格式，并在用户界面中对目标格式表示的图形设计元件的设计代码进行渲染。
142.示例性地，可以将图形设计元件的设计代码的格式转换为html格式，再将图形设计元件的设计代码由html格式转换为目标格式。
143.可以利用低代码引擎，将图形设计元件的设计代码的格式转换为html格式。在提供用户界面的绘图程序为sketch的情况下，可以利用c2d技术将html格式转换为目标格式。
144.将图形设计元件的设计代码的格式转换为通用性较强的html格式，再由html格式
转换为用户界面可识别的目标格式，使得图形设计元件的设计代码向目标格式的格式转换更容易实现。
145.将图像设计元件安置在前端设计界面，也可以理解为在前端设计界面中添加图像设计元件。
146.在前端设计界面安置图像设计元件时，可以在前端设计界面中对目标格式表示的该图形设计元件的设计代码进行渲染，从而在前端设计界面显示该图形设计元件的外观。
147.在前端设计界面安置图像设计元件时，目标格式表示的该图形设计元件的设计代码，可以利用将资料包中多个类别的图形设计元件的设计代码分别转换为目标格式过程中得到的该图像设计元件格式转换后的设计代码。或者，也可以重新将该图像设计元件的设计代码转换为目标格式。
148.在s502，根据用户为变更所述图形设计元件在所述前端设计界面中表现形式的配置选择，更新所述图形设计元件对应的设计代码。
149.对图形设计元件的配置选择，可以理解为在将图形设计元件添加在前端设计界面之后，可以对图形设计元件进行的配置。
150.图形设计元件对应的设计代码可以指示该图形设计元件的参数类型。对图形设计元件的配置选择可以是指示该图形设计元件的参数类型的取值。用户对对图形设计元件的配置选择，即用户对图形设计元件的参数类型取值的设置和调整。
151.图形设计元件对应的设计代码还可以指示图形设计元件的参数类型的默认值。也就是说，通过s501添加在前端设计界面的图形设计元件的外观可以是默认值对应的外观，即默认的表现形式。
152.在用户对图形设计元件的参数类型的取值通过配置选择进行设置之后，可以更新前端设计界面中图形设计元件的外观，以便于用户对图形设计元件的参数类型取值的进一步调整。
153.根据用户对图形设计元件的配置选择，更新该图形设计元件对应的设计代码，使得更新后该图形设计元件对应的设计代码能够表示对图形设计元件的配置选择指示的该图形设计元件的参数类型的取值。
154.及时对前端设计界面各个图形设计元件的设计代码进行更新，则前端设计界面中的各个图形设计元件的设计代码可以准确表示前端设计界面整体的外观。
155.用户可以通过对前端设计界面中图形设计元件进行拖拽，设置图形设计元件的大小、形状、位置等参数类型的取值。或者，用户可以通过配置界面设置图形设计元件的参数类型的取值。
156.配置界面可以用于显示所述参数类型，用户可以利用对图形设计元件进行配置界面对配置选择，以指示参数类型的取值。
157.可以根据配置选择对图形设计元件对应的设计代码的更新，可以理解为对图形设计元件对应的设计代码中与该配置选择相关的设计代码进行相应的更新，即调整图形设计元件对应的设计代码中与该配置选择相关的部分。
158.可以根据更新后的设计代码，对图形设计元件进行渲染，实现在前端设计界面上图形设计元件的表现形式的变更。也就是说，可以根据更新后图形设计元件的设计代码，在前端设计界面对图形设计元件的表现形式进行更新。
159.从而，确保前端设计界面上的图形设计元件外观与图形设计元件的设计代码记录的参数类型的取值表示的外观之间的一致性，减小误差。
160.示例性地，可以将更新后的设计代码的格式转换为目标格式，对图形设计元件转换后的设计代码在前端设计界面中进行渲染，实现在前端设计界面上更新所述图形设计元件外观。
161.通过对更新后的设计代码的格式转换，使得前端设计界面中图形设计元件外观按照设计代码进行更新。
162.可以将图形设计元件更新后的设计代码的格式转换为html格式，再将图形设计元件更新后的设计代码由html格式转换为目标格式。可以利用低代码引擎，将所述图形设计元件更新后的设计代码的格式转换为html格式。在提供用户界面的绘图程序为sketch的情况下，可以利用c2d技术将html格式转换为目标格式。
163.也就是说，根据用户对所述图形设计元件的配置选择，对所述图形设计元件对应的设计代码中与用户的配置选择相关的设计代码进行相应的更新，可以理解为对于资料包中的格式表示的图形设计元件的设计代码进行更新。从而，对于图形设计元件的设计代码的更新方式设置方式较为简便和灵活。
164.不同类别的图形设计元件可以对应于不同的参数类型。从而，在资料包中，可以为每个类别的图形设计元件设置与该类别的图形设计元件对应的配置界面。在用户选中前端设计界面中的图形设计元件时，可以显示该图形设计元件对应的配置界面。用户可以根据该图形设计元件对应的配置界面，对该图形设计元件进行配置选择，使得用户对图形设计元件进行配置选择的方式更加简便和灵活。
165.也就是说，可以基于用户对所述图形设计元件的选择，在用户界面中显示该图形设计元件对应的配置界面，所述配置选择由用户通过为用户展示的配置界面输入。
166.从而在s502，可以根据用户对安置在前端设计界面的图像设计元件的配置，更新图像设计元件的设计代码以及图像设计元件在前端设计界面显示的外观。图像设计元件更新后的设计代码可以表示图像设计元件在前端设计界面更新后的外观。
167.在s503，根据所述前端设计界面上配置完毕的各个图形设计元件对应的设计代码，生成所述目标图形界面的设计代码。
168.图像设计元件更新后的设计代码可以表示该图像设计元件在前端设计界面更新后的外观。前端设计界面上配置完毕的各个图像设计元件更新后的设计代码可以表示前端设计界面即目标图形界面的外观。从而，根据各个图像设计元件更新后的设计代码，可以生成目标图形界面的设计代码。
169.示例性地，可以对前端设计界面上配置完毕的各个图形设计元件对应的设计代码进行收集，以生成json格式的界面设计文件。根据所述界面设计文件，可以生成所述目标图形界面的设计代码。
170.利用具有较高通用性的json格式的界面设计文件表示目标图形界面，并根据界面设计文件生成目标图形界面的设计代码，为目标图形界面的设计代码生成提供了一种较为简便的方式。
171.可以利用低代码引擎对所述界面设计文件进行处理，以生成目标图形界面的设计代码。界面设计文件可以符合低代码技术规范。低代码技术规范例如可以是《低代码引擎搭
建协议规范》。也就是说，界面设计文件符合低代码引擎对应的规范的情况下，可以利用低代码引擎对界面设计文件进行处理，生成目标图形界面的设计代码。
172.通过s501至s503，根据用户对图形设计元件的配置选择调整图形设计元件的设计代码以及图形设计元件在前端设计界面的外观，根据前端设计界面中配置完成的各个图形设计元件对应的设计代码，生成前端设计界面的设计代码。图形设计元件的设计代码以及图形设计元件在前端设计界面的外观均根据用户对图形设计元件的配置选择进行调整更新，从而，生成的前端设计界面的设计代码能够准确反映前端设计界面的外观，生成的设计代码具有较高的准确度。
173.上文结合图1至图5描述了本技术实施例提供的事务处理方法，下面结合图6至图7，描述本技术实施例的装置实施例。应理解，事务处理方法的描述与装置实施例的描述相互对应，因此，未详细描述的部分可以参见上文的描述。
174.请参看图6，该图是本技术实施例提供的一种图形界面代码的生成装置的示意性结构图。图形界面代码的生成装置用于图2或图5所示的图形界面代码的生成方法。
175.如图6所示，图形界面代码的生成装置包括：安置单元601、更新单元602和生成单元603。
176.安置单元601用于，基于用户选择操作，将至少一个图形设计元件安置在为设计目标图形界面而呈现的前端设计界面中，其中，所述图形设计元件采用设计所述目标图形界面的设计代码预先定义。
177.更新单元602用于，根据用户为变更所述图形设计元件在所述前端设计界面中表现形式的配置选择，更新所述图形设计元件对应的设计代码。
178.生成单元603用于，根据所述前端设计界面上配置完毕的所述至少一个图形设计元件对应的设计代码，生成所述目标图形界面的设计代码。
179.可选地，更新单元602还用于，根据更新后的所述设计代码，对所述图形设计元件进行渲染，实现在所述前端设计界面上对所述图形设计元件的表现形式的变更。
180.可选地，更新单元602还用于，将更新后的所述设计代码的格式转换为目标格式，所述目标格式为是所述前端设计界面可识别的格式。
181.更新单元602还用于，对所述图形设计元件转换后的设计代码在所述前端设计界面中进行渲染，实现在所述前端设计界面上更新所述图形设计元件外观。
182.可选地，更新单元602还用于，将所述图形设计元件更新后的设计代码的格式转换为html格式，再将所述图形设计元件更新后的设计代码由所述html格式转换为所述目标格式。
183.可选地，更新单元602还用于，利用低代码引擎，将所述图形设计元件更新后的设计代码的格式转换为html格式。
184.可选地，图形界面代码的生成装置还包括显示单元，显示单元用于基于用户对所述图形设计元件的选择，在用户界面中显示所述图形设计元件对应的配置界面，所述配置选择由用户通过所述配置界面输入。
185.可选地，所述图形设计元件对应的设计代码用于指示所述图形设计元件的参数类型，所述配置界面用于显示所述参数类型，所述配置选择用于指示所述参数类型的取值。
186.可选地，图形界面代码的生成装置还包括：获取单元和显示单元。
187.获取单元用于，获取资料包，所述资料包包括多个类别的图形设计元件的设计代码。
188.显示单元用于，根据所述多个类别的图形设计元件的设计代码，在用户界面的目录栏显示所述多个类别。
189.获取单元还用于，获取用户对所述多个类别的选择操作，并根据所述选择操作，确定所选择的图形设计元件。
190.可选地，获取单元还用于，根据用户代码调试操作，对多个类别的图形设计元件的初始设计代码进行调试。
191.图形界面代码的生成装置还包括收集单元，收集单元用于对调试后的所述多个类别的图形设计元件的设计代码进行收集，以形成所述资料包。
192.可选地，生成单元603用于，对前端设计界面上配置完毕的各个图形设计元件对应的设计代码进行收集，以生成数据交换语言格式的界面设计文件。
193.生成单元603还用于，根据所述界面设计文件，生成所述目标图形界面的设计代码。
194.可选地，生成单元603用于，利用低代码引擎对所述界面设计文件进行处理，以生成所述图形界面的设计代码。
195.请参看图7，该图是本技术实施例提供的一种图形界面代码的生成装置的示意性结构图。图形界面代码的生成装置用于图2或图5所示的图形界面代码的生成方法。
196.如图7所示，图形界面代码的生成装置包括：处理器701和存储器702。
197.所述存储器702用于存储程序，处理器701用于调用存储器存储的程序，以执行上述图形界面代码的生成方法。
198.本技术实施例还提供一种存储介质，所述存储介质存储有程序，所述程序被处理器执行，用于实现上述事务处理方法。
199.需要说明的是，尽管在上文详细描述中提及了用于动作执行的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本技术的具体实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。
200.此外，尽管在附图中以特定顺序描述了本技术中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。
201.应当注意，本技术的实施方式可以通过硬件、软件或者软件和硬件的结合来实现。硬件部分可以利用专用逻辑来实现；软件部分可以存储在存储器中，由适当的指令执行系统，例如微处理器或者专用设计硬件来执行。本领域的普通技术人员可以理解上述的设备和方法可以使用计算机可执行指令和/或包含在处理器控制代码中来实现，例如在诸如磁盘、cd或dvd-rom的载体介质、诸如只读存储器(固件)的可编程的存储器或者诸如光学或电子信号载体的数据载体上提供了这样的代码。本技术的设备及其模块可以由诸如超大规模集成电路或门阵列、诸如逻辑芯片、晶体管等的半导体、或者诸如现场可编程门阵列、可编程逻辑设备等的可编程硬件设备的硬件电路实现，也可以用由各种类型的处理器执行的软
件实现，也可以由上述硬件电路和软件的结合例如固件来实现。
202.以上所述，仅为本技术的具体实施方式，但本技术的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本技术揭露的技术范围内，凡在本技术的精神和原则之内所作的任何修改、等同替换和改进等，都应涵盖在本技术的保护范围之内。