CN113326045A - 基于设计文件的界面代码生成方法 - Google Patents

Abstract

本发明提供了基于设计文件的界面代码生成方法,其利用代码生成终端接收并识别分析设计文本，再根据对设计文件的识别分析结果，得到用于界面代码生成的文本类型文件和图片类型文件；以及根据文本类型文件和图片类型文件分别形成设计语言文件和样本界面，再以样本界面为蓝本形成对应风格的代码设计界面，和将设计语言文件内嵌在代码设计界面中生成相应的界面代码，其通过标准化的方式取代人工设计的方式生成代码设计界面，以及将设计语言文件直接嵌套在代码设计界面中，整个过程不需要设计人员的深入参与，这样免去了界面设计师和编程人员之间的协调工序，同时还能够大大提高界面代码的开发效率。

Description

基于设计文件的界面代码生成方法

技术领域

本发明涉及计算机技术领域，尤其涉及一种基于设计文件的界面代码生成方法。

背景技术

在计算机应用产品设计中，产品的图形用户界面直接影响用户使用产品的视觉观感优劣。现有计算机应用产品需要界面设计师预先设计出用户界面的设计底稿，然后编程人员再根据该设计底稿，通过人工编写代码的方式形成相应的代码设计界面，最后通过运行该代码设计界面得到相应的界面代码。这种开发方式每一次都需要界面设计师和编程人员共同协作才能得到相应的界面代码，其开发效率低下，无法满足大规模批量界面代码的开发需求。

发明内容

针对上述现有技术存在的缺陷，本发明提供基于设计文件的界面代码生成方法，其利用代码生成终端接收并识别分析设计文本，再根据对设计文件的识别分析结果，得到用于界面代码生成的文本类型文件和图片类型文件；以及根据文本类型文件和图片类型文件分别形成设计语言文件和样本界面，再以样本界面为蓝本形成对应风格的代码设计界面，和将设计语言文件内嵌在代码设计界面中生成相应的界面代码，其通过标准化的方式取代人工设计的方式生成代码设计界面，整个过程不需要设计人员的深入参与，这样免去了界面设计师和编程人员之间的协调工序，同时还能够大大提高界面代码的开发效率。

本发明提供的基于设计文件的界面代码生成方法，其包括如下步骤：

步骤S1，确定代码生成终端的身份信息后，向所述代码生成终端发送设计文件；对接收到的设计文件进行检查，以此确定设计文件是否为安全设计文件；

步骤S2，从所述安全设计文件中识别得到其包含的文本类型文件和图片类型文件；分析所述文本类型文件，生成关于所述安全设计文件包含的控件关联的设计语言文件；分析所述图片类型文件，生成与所述图片类型文件在视觉上相关联的样本界面；

步骤S3，根据所述样本界面，生成相应风格的代码设计界面；并将所述设计语言文件设置在所述代码设计界面；再根据所述代码生成终端接收到的触发指令，运行所述代码设计界面，从而生成相应的界面代码；

在本申请公开的一个实施例中，在所述步骤S1之前，还包括如下步骤S0：

通过用户终端向所述代码生成终端发送一界面代码生成请求指令；

当所述代码生成终端接收到所述界面代码生成请求指令后，向所述用户终端返回一响应消息；其中，所述响应消息包括所述代码生成终端的IP地址信息；

当所述用户终端接收到所述响应消息后，对其中的IP地址信息进行验证，从而确定所述代码生成终端是否为指定身份的代码生成终端。

在本申请公开的一个实施例中，在所述步骤S1中，确定代码生成终端的身份信息后，向所述代码生成终端发送设计文件具体包括：

当确定所述代码生产终端为指定身份的代码生成终端时，所述用户终端通过物联网与所述代码生成终端之间构建加密通信通道；

所述用户终端将设计文件进行加密压缩处理后形成的设计文件包，通过所述加密通信通道发送至所述代码生成终端；

当所述代码生成终端接收到所述设计文件包后，通过所述加密通信通道向所述用户终端返回一接收确认消息；当所述用户终端接收到所述接收确认消息后，将所述设计文件标记为已发送设计文件，之后再将所述已发送设计文件进行移除处理。

在本申请公开的一个实施例中，在所述步骤S1中，对接收到的设计文件进行检查，以此确定设计文件是否为安全设计文件具体包括：

当所述代码生成终端接收到所述设计文件包后，将所述设计文件包解密还原成设计文件；

再将解密还原后的设计文件进行病毒扫描检查；

当病毒扫描检查确定解密还原后的设计文件不存在病毒数据，则确定设计文件为安全设计文件；

当病毒扫描检查确定解密还原后的设计文件存在病毒数据，则确定设计文件为不安全设计文件，并将所述不安全设计文件删除。

在本申请公开的一个实施例中，在所述步骤S2中，从所述安全设计文件中识别得到其包含的文本类型文件和图片类型文件具体包括：

将所述安全设计文件包含的所有子文件逐一进行数据类型识别，从而确定每个子文件属于文本类型文件还是图片类型文件。

在本申请公开的一个实施例中，在所述步骤S2中，分析所述文本类型文件，生成关于所述安全设计文件包含的控件关联的设计语言文件具体包括：

从所述文本类型文件中提取得到其包含的领域专用语言文本文件；

对所述领域专用语言文本文件进行解析，从而生成用于表征所述领域专用语言文本文件中各个控件之间的嵌套布局关系；

再根据所述嵌套布局关系，构建所述领域专用语言文本文件包含的所有控件相互之间的布局结构树；

并将所述布局结构树作为所述设计语言文件进行存储。

在本申请公开的一个实施例中，在所述步骤S2中，分析所述图片类型文件，生成与所述图片类型文件信息在视觉上相关联的样本界面具体包括：

从所述图片类型文件中提取得到相应的样本图片后，识别所述样本图片的背景图像和功能区图像；

根据所述背景图像的色度值和亮度值，以及所述功能区图像的功能窗口的尺寸，生成所述图片类型文件信息在视觉上相关联的样本界面。

在本申请公开的一个实施例中，根据所述背景图像的色度值和亮度值，以及所述功能区图像的功能窗口的尺寸，生成所述图片类型文件信息在视觉上相关联的样本界面具体包括：

确定所述背景图像的色度值和亮度值，并将所述色度值和所述亮度值分别与预设色度值范围和预设亮度值范围进行比对；

若所述色度值位于所述预设色度值范围内以及所述亮度值位于所述预设亮度值范围内，则将所述色度值和所述亮度值作为样本界面的背景区域最终的色度值和亮度值；

否则，将所述预设色度值范围的中值色度值和所述预设亮度值范围的中值亮度值作为样本界面的背景区域最终的色度值和亮度值；

以及，

确定功能区图像的功能窗口的尺寸，并将所述尺寸与预设尺寸阈值进行比对；

若所述尺寸小于或等于所述预设尺寸阈值，则将所述尺寸作为样本界面的功能窗口的最终尺寸；

若所述尺寸大于所述预设尺寸阈值，则将所述预设尺寸阈值作为样本界面的功能窗口的最终尺寸；

根据所述最终的色度值和亮度值，构建形成样本界面的背景区域；

根据所述最终尺寸，构建形成样本界面的功能窗口。

在本申请公开的一个实施例中，在所述步骤S3中，根据所述样本界面，生成相应风格的代码设计界面；并将所述设计语言文件设置在所述代码设计界面具体包括：

将所述样本界面进行复制放大后，生成与所述样本界面具有相同视觉风格的代码设计界面；并将所述设计语言文件内嵌在所述代码设计界面。

在本申请公开的一个实施例中，在所述步骤S3中，根据所述代码生成终端接收到的触发指令，运行所述代码设计界面，从而生成相应的界面代码具体包括：

当所述代码生成终端接收到触发指令后，运行所述代码设计界面，从而生成相应的界面代码；再将所述界面代码返回至用户终端上进行备份保存。

相比于现有技术，本发明的基于设计文件的界面代码生成方法利用代码生成终端接收并识别分析设计文本，再根据对设计文件的识别分析结果，得到用于界面代码生成的文本类型文件和图片类型文件；以及根据文本类型文件和图片类型文件分别形成设计语言文件和样本界面，再以样本界面为蓝本形成对应风格的代码设计界面，和将设计语言文件内嵌在代码设计界面中生成相应的界面代码，其通过标准化的方式取代人工设计的方式生成代码设计界面，以及将设计语言文件直接嵌套在代码设计界面中，整个过程不需要设计人员的深入参与，这样免去了界面设计师和编程人员之间的协调工序，同时还能够大大提高界面代码的开发效率。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明提供的基于设计文件的界面代码生成方法的流程示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

参阅图1，为本发明提供的基于设计文件的界面代码生成方法的流程示意图。该基于设计文件的界面代码生成方法包括如下步骤：

步骤S1，确定代码生成终端的身份信息后，向该代码生成终端发送设计文件；对接收到的设计文件进行检查，以此确定设计文件是否为安全设计文件；

步骤S2，从该安全设计文件中识别得到其包含的文本类型文件和图片类型文件；分析该文本类型文件，生成关于该安全设计文件包含的控件关联的设计语言文件；分析该图片类型文件，生成与该图片类型文件在视觉上相关联的样本界面；

步骤S3，根据该样本界面，生成相应风格的代码设计界面；并将该设计语言文件设置在该代码设计界面；再根据该代码生成终端接收到的触发指令，运行该代码设计界面，从而生成相应的界面代码。

上述技术方案的有益效果为：该基于设计文件的界面代码生成方法利用代码生成终端接收并识别分析设计文本，再根据对设计文件的识别分析结果，得到用于界面代码生成的文本类型文件和图片类型文件；以及根据文本类型文件和图片类型文件分别形成设计语言文件和样本界面，再以样本界面为蓝本形成对应风格的代码设计界面，和将设计语言文件内嵌在代码设计界面中生成相应的界面代码，其通过标准化的方式取代人工设计的方式生成代码设计界面，以及将设计语言文件直接嵌套在代码设计界面中，整个过程不需要设计人员的深入参与，这样免去了界面设计师和编程人员之间的协调工序，同时还能够大大提高界面代码的开发效率。

优选地，在该步骤S1之前，还包括如下步骤S0：

通过用户终端向该代码生成终端发送一界面代码生成请求指令；

当该代码生成终端接收到该界面代码生成请求指令后，向该用户终端返回一响应消息；其中，该响应消息包括该代码生成终端的IP地址信息；

当该用户终端接收到该响应消息后，对其中的IP地址信息进行验证，从而确定该代码生成终端是否为指定身份的代码生成终端。

该用户终端可为但不限于是界面设计人员或者编程人员所使用的智能手机或者个人笔记本等终端。该代码生成终端可为但不限于是专用于代码编写生成的服务器。

在实际操作中，用户终端可向代码生成终端发送相应的界面代码请求指令，该界面代码请求指令作为用户终端向代码生成终端的界面代码生成邀约。代码生成终端接收到该界面代码请求指令，会即时返回包含自身IP地址信息的响应消息，这样能够使代码生成终端响应该界面代码请求指令的同时上报自身的身份信息。由于并不是所有代码生成终端均能够具备相应的运算能力来执行用户终端所需的界面代码生成任务，通过对其返回的IP地址信息与预设代码生成终端名单进行比对验证，能够确定当前的代码生成终端是否具备相应的运算能力；其中，该预设代码生成终端名单可包括每个代码生成终端的IP地址信息与其自身运算能力（如运算速度）之间的一一对应关系。只有当前的代码生成终端自身的运算能力高于用户终端所需的界面代码生成任务要求的运算能力，即可将当前代码生成终端确定为指定身份的代码生成终端。

优选地，在该步骤S1中，确定代码生成终端的身份信息后，向该代码生成终端发送设计文件具体包括：

当确定该代码生成终端为指定身份的代码生成终端时，该用户终端通过物联网与该代码生成终端之间构建加密通信通道；

该用户终端将设计文件进行加密压缩处理后形成的设计文件包，通过该加密通信通道发送至该代码生成终端；

当该代码生成终端接收到该设计文件包后，通过该加密通信通道向该用户终端返回一接收确认消息；当该用户终端接收到该接收确认消息后，将该设计文件标记为已发送设计文件，之后再将该已发送设计文件进行移除处理。

该用户终端自身通常存储有不同的设计文件，该设计文件可包括但不限于界面代码生成所需要的关联控件、编程语言文本和界面图像设计元素等，即该设计文件可作为界面代码生成的蓝本。为了保证设计文件在用户终端与代码生成终端之间传输的安全性，需要借助物联网构建两者之间的加密通信通道，这样能够有效避免设计文件在传输过程中被恶意篡改。其中该加密通信通道的构建可利用现有技术的加密算法来实现，这里不做详细的累述。此外当该代码生成终端确认接收到设计文件包后，会即时向用户终端返回接收确认消息，此时该用户终端将对应的设计文件标记后，进行文件隐藏并移动至其他文件夹中，这样能够避免该设计文件被重复利用，从而确保设计文件的信息安全性。

优选地，在该步骤S1中，对接收到的设计文件进行检查，以此确定设计文件是否为安全设计文件具体包括：

当该代码生成终端接收到该设计文件包后，将该设计文件包解密还原成设计文件；

再将解密还原后的设计文件进行病毒扫描检查；

当病毒扫描检查确定解密还原后的设计文件不存在病毒数据，则确定设计文件为安全设计文件；

当病毒扫描检查确定解密还原后的设计文件存在病毒数据，则确定设计文件为不安全设计文件，并将该不安全设计文件删除。

上述技术方案的有益效果为：由于设计文件在用户终端阶段可能已经被木马病毒等进行感染入侵，为了防止代码生成终端运行该设计文件过程中遭到病毒的入侵，需要对解密还原后的设计文件进行病毒扫描检查，从而确保设计文件的可信度和提高代码生成终端自身的数据安全性。其中该病毒扫描检查可通过在代码生成终端上利用病毒扫描软件来实现，这里不做详细累述。

优选地，在该步骤S2中，从该安全设计文件中识别得到其包含的文本类型文件和图片类型文件具体包括：

将该安全设计文件包含的所有子文件逐一进行数据类型识别，从而确定每个子文件属于文本类型文件还是图片类型文件。

上述技术方案的有益效果为：该安全设计文件包含用于分别形成设计语言文件和样本界面的文本类型文件和图片类型文件，通过将该安全设计文件包含的所有子文件逐一进行数据类型识别，能够有效地区分安全设计文件包含的每个子文件对应的数据类型，从而为后续生成设计语言文件和样本界面提供可靠的依据。

优选地，在该步骤S2中，分析该文本类型文件，生成关于该安全设计文件包含的控件关联的设计语言文件具体包括：

从该文本类型文件中提取得到其包含的领域专用语言文本文件；

对该领域专用语言文本文件进行解析，从而生成用于表征该领域专用语言文本文件中各个控件之间的嵌套布局关系；

再根据该嵌套布局关系，构建该领域专用语言文本文件包含的所有控件相互之间的布局结构树；

并将该布局结构树作为该设计语言文件进行存储。

该文本类型文件中包含领域专用语言文本DSL文件，该DSL文件包含用于辅助进行编程的不同控件，而对该DSL文件进行解析后，能够准确地确定不同控件相互之间的嵌套布局关系，其中该嵌套布局关系可为但不限于是不同控件在编程过程中对代码的编辑与运行逻辑关系。再根据该嵌套布局关系，构建所有控件相互之间的布局结构树，利用该布局结构树即可实现对代码的编辑与运行，随后将该布局结构树作为设计语言文件进行存储能够便于后续随时随地调用该布局结构树运作。

优选地，在该步骤S2中，分析该图片类型文件，生成与该图片类型文件信息在视觉上相关联的样本界面具体包括：

从该图片类型文件中提取得到相应的样本图片后，识别该样本图片的背景图像和功能区图像；

根据该背景图像的色度值和亮度值，以及该功能区图像的功能窗口的尺寸，生成该图片类型文件信息在视觉上相关联的样本界面。

上述技术方案的有益效果为：该图片类型文件包含形成样本界面的颜色、亮度和尺寸大小视觉效果的基本要素，即根据该图片类型文件能够以模块化的方式快速设计出样本界面的背景部分和功能区部分的视觉布局，从而大大提高样本界面的设计效率和降低样本界面的设计成本。

优选地，根据该背景图像的色度值和亮度值，以及该功能区图像的功能窗口的尺寸，生成该图片类型文件信息在视觉上相关联的样本界面具体包括：

确定该背景图像的色度值和亮度值，并将该色度值和该亮度值分别与预设色度值范围和预设亮度值范围进行比对；

若该色度值位于该预设色度值范围内以及该亮度值位于该预设亮度值范围内，则将该色度值和该亮度值作为样本界面的背景区域最终的色度值和亮度值；

否则，将该预设色度值范围的中值色度值和该预设亮度值范围的中值亮度值作为样本界面的背景区域最终的色度值和亮度值；

以及，

确定功能区图像的功能窗口的尺寸，并将该尺寸与预设尺寸阈值进行比对；

若该尺寸小于或等于该预设尺寸阈值，则将该尺寸作为样本界面的功能窗口的最终尺寸；

若该尺寸大于该预设尺寸阈值，则将该预设尺寸阈值作为样本界面的功能窗口的最终尺寸；

根据该最终的色度值和亮度值，构建形成样本界面的背景区域；

根据该最终尺寸，构建形成样本界面的功能窗口。

上述技术方案的有益效果为：样本界面的背景区域决定样本界面整体的视觉观感优劣，根据该背景图像的色度值和亮度值确定样本界面背景区域的最终亮度值和色度值，能够最大限度保证样本界面的背景区域与用户使用习惯相匹配和改善背景区域的视觉观感。此外，样本界面的功能区部分决定样本界面的运行过程中对不同功能窗口进行操作的便捷性，其中该功能窗口可为但不限于是函数调用窗口或者代码编写窗口等。根据功能区图像的功能窗口的尺寸，确定最适合样本界面的功能窗口尺寸大小，能够改善样本界面的运行过程中对不同功能窗口进行操作的便捷性。

优选地，在该步骤S3中，根据该样本界面，生成相应风格的代码设计界面；并将该设计语言文件设置在该代码设计界面具体包括：

将该样本界面进行复制放大后，生成与该样本界面具有相同视觉风格的代码设计界面；并将该设计语言文件内嵌在该代码设计界面。

上述技术方案的有益效果为：以该样本界面作为蓝本进行复制和放大后，得到与该样本界面具有相同视觉风格的代码设计界面，该设计语言文件内嵌在该代码设计界面，这样能够获得可自动进行界面代码生成的代码设计界面。

优选地，在该步骤S3中，根据该代码生成终端接收到的触发指令，运行该代码设计界面，从而生成相应的界面代码具体包括：

当该代码生成终端接收到触发指令后，运行该代码设计界面，从而生成相应的界面代码；再将该界面代码返回至用户终端上进行备份保存。

上述技术方案的有益效果为：当该代码生成终端接收到来自用户终端的触发指令后，能够根据该触发指令运行该代码设计界面，从而生成相应的界面代码，这样能够实现界面代码的自动形成；而将该界面代码返回至用户终端上进行备份保存，能够有效地提高界面代码的可溯源性。

从上述实施例的内容可知，该基于设计文件的界面代码生成方法利用代码生成终端接收并识别分析设计文本，再根据对设计文件的识别分析结果，得到用于界面代码生成的文本类型文件和图片类型文件；以及根据文本类型文件和图片类型文件分别形成设计语言文件和样本界面，再以样本界面为蓝本形成对应风格的代码设计界面，和将设计语言文件内嵌在代码设计界面中生成相应的界面代码，其通过标准化的方式取代人工设计的方式生成代码设计界面，以及将设计语言文件直接嵌套在代码设计界面中，整个过程不需要设计人员的深入参与，这样免去了界面设计师和编程人员之间的协调工序，同时还能够大大提高界面代码的开发效率。

Claims (10)

1.基于设计文件的界面代码生成方法，其特征在于，其包括如下步骤：

步骤S1，确定代码生成终端的身份信息后，向所述代码生成终端发送设计文件；对接收到的设计文件进行检查，以此确定设计文件是否为安全设计文件；

步骤S2，从所述安全设计文件中识别得到其包含的文本类型文件和图片类型文件；分析所述文本类型文件，生成关于所述安全设计文件包含的控件关联的设计语言文件；分析所述图片类型文件，生成与所述图片类型文件在视觉上相关联的样本界面；

步骤S3，根据所述样本界面，生成相应风格的代码设计界面；并将所述设计语言文件设置在所述代码设计界面；再根据所述代码生成终端接收到的触发指令，运行所述代码设计界面，从而生成相应的界面代码。

2.根据权利要求1所述的基于设计文件的界面代码生成方法，其特征在于：

在所述步骤S1之前，还包括如下步骤S0：

通过用户终端向所述代码生成终端发送一界面代码生成请求指令；

当所述代码生成终端接收到所述界面代码生成请求指令后，向所述用户终端返回一响应消息；其中，所述响应消息包括所述代码生成终端的IP地址信息；

当所述用户终端接收到所述响应消息后，对其中的IP地址信息进行验证，从而确定所述代码生成终端是否为指定身份的代码生成终端。

3.根据权利要求2所述的基于设计文件的界面代码生成方法，其特征在于：

所述步骤S1中，确定代码生成终端的身份信息后，向所述代码生成终端发送设计文件具体包括：

当确定所述代码生成终端为指定身份的代码生成终端时，所述用户终端通过物联网与所述代码生成终端之间构建加密通信通道；

所述用户终端将设计文件进行加密压缩处理后形成的设计文件包，通过所述加密通信通道发送至所述代码生成终端；

当所述代码生成终端接收到所述设计文件包后，通过所述加密通信通道向所述用户终端返回一接收确认消息；当所述用户终端接收到所述接收确认消息后，将所述设计文件标记为已发送设计文件，之后再将所述已发送设计文件进行移除处理。

4.根据权利要求3所述的基于设计文件的界面代码生成方法，其特征在于：

在所述步骤S1中，对接收到的设计文件进行检查，以此确定设计文件是否为安全设计文件具体包括：

当所述代码生成终端接收到所述设计文件包后，将所述设计文件包解密还原成设计文件；

再将解密还原后的设计文件进行病毒扫描检查；

当病毒扫描检查确定解密还原后的设计文件不存在病毒数据，则确定设计文件为安全设计文件；

当病毒扫描检查确定解密还原后的设计文件存在病毒数据，则确定设计文件为不安全设计文件，并将所述不安全设计文件删除。

5.根据权利要求1所述的基于设计文件的界面代码生成方法，其特征在于：

在所述步骤S2中，从所述安全设计文件中识别得到其包含的文本类型文件和图片类型文件具体包括：

将所述安全设计文件包含的所有子文件逐一进行数据类型识别，从而确定每个子文件属于文本类型文件还是图片类型文件。

6.根据权利要求1所述的基于设计文件的界面代码生成方法，其特征在于：

在所述步骤S2中，分析所述文本类型文件，生成关于所述安全设计文件包含的控件关联的设计语言文件具体包括：

从所述文本类型文件中提取得到其包含的领域专用语言文本文件；

对所述领域专用语言文本文件进行解析，从而生成用于表征所述领域专用语言文本文件中各个控件之间的嵌套布局关系；

再根据所述嵌套布局关系，构建所述领域专用语言文本文件包含的所有控件相互之间的布局结构树；

并将所述布局结构树作为所述设计语言文件进行存储。

7.根据权利要求1所述的基于设计文件的界面代码生成方法，其特征在于：

在所述步骤S2中，分析所述图片类型文件，生成与所述图片类型文件信息在视觉上相关联的样本界面具体包括：

从所述图片类型文件中提取得到相应的样本图片后，识别所述样本图片的背景图像和功能区图像；

根据所述背景图像的色度值和亮度值，以及所述功能区图像的功能窗口的尺寸，生成所述图片类型文件信息在视觉上相关联的样本界面。

8.根据权利要求7所述的基于设计文件的界面代码生成方法，其特征在于：

根据所述背景图像的色度值和亮度值，以及所述功能区图像的功能窗口的尺寸，生成所述图片类型文件信息在视觉上相关联的样本界面具体包括：

确定所述背景图像的色度值和亮度值，并将所述色度值和所述亮度值分别与预设色度值范围和预设亮度值范围进行比对；

若所述色度值位于所述预设色度值范围内以及所述亮度值位于所述预设亮度值范围内，则将所述色度值和所述亮度值作为样本界面的背景区域最终的色度值和亮度值；

否则，将所述预设色度值范围的中值色度值和所述预设亮度值范围的中值亮度值作为样本界面的背景区域最终的色度值和亮度值；

以及，

确定功能区图像的功能窗口的尺寸，并将所述尺寸与预设尺寸阈值进行比对；

若所述尺寸小于或等于所述预设尺寸阈值，则将所述尺寸作为样本界面的功能窗口的最终尺寸；

若所述尺寸大于所述预设尺寸阈值，则将所述预设尺寸阈值作为样本界面的功能窗口的最终尺寸；

根据所述最终的色度值和亮度值，构建形成样本界面的背景区域；

根据所述最终尺寸，构建形成样本界面的功能窗口。

9.根据权利要求1所述的基于设计文件的界面代码生成方法，其特征在于：

在所述步骤S3中，根据所述样本界面，生成相应风格的代码设计界面；并将所述设计语言文件设置在所述代码设计界面具体包括：

将所述样本界面进行复制放大后，生成与所述样本界面具有相同视觉风格的代码设计界面；并将所述设计语言文件内嵌在所述代码设计界面。

10.根据权利要求1所述的基于设计文件的界面代码生成方法，其特征在于：

在所述步骤S3中，根据所述代码生成终端接收到的触发指令，运行所述代码设计界面，从而生成相应的界面代码具体包括：

当所述代码生成终端接收到触发指令后，运行所述代码设计界面，从而生成相应的界面代码；再将所述界面代码返回至用户终端上进行备份保存。

Images