CN109871205B - 界面代码调整方法、装置、计算机装置及存储介质 - Google Patents
界面代码调整方法、装置、计算机装置及存储介质 Download PDFInfo
- Publication number
- CN109871205B CN109871205B CN201811537729.7A CN201811537729A CN109871205B CN 109871205 B CN109871205 B CN 109871205B CN 201811537729 A CN201811537729 A CN 201811537729A CN 109871205 B CN109871205 B CN 109871205B
- Authority
- CN
- China
- Prior art keywords
- adjusted
- interface
- development effect
- effect
- development
- 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.)
- Active
Links
Landscapes
- User Interface Of Digital Computer (AREA)
- Stored Programmes (AREA)
Abstract
本发明提供一种界面代码调整方法，包括：扫描源代码，获取源代码中的至少两段界面代码；运行至少两段界面代码以显示至少两个运行界面；对至少两个运行界面进行截图保存，得到至少两个开发效果图；将至少两个开发效果图与至少两个设计效果图匹配，获取每个设计效果图对应的开发效果图；判断每个开发效果图中的控件参数相较于对应的设计效果图中对应的控件参数是否存在差异；若是，确定开发效果图为待调整效果图以及确定待调整效果图中存在差异的控件参数为待调整控件参数；在待调整效果图对应的界面代码中调整待调整控件参数。本发明还公开了一种界面代码调整装置、计算机装置和计算机可读存储介质。本发明能够提升界面开发与调整的效率。
Description
技术领域
本发明涉及软件开发领域，尤其涉及一种界面代码调整方法、装置、计算机装置及计算机可读存储介质。
背景技术
在各类应用软件的开发过程中，对于各种用户界面的开发，通常是根据设计人员给出的设计效果图来编写相应的界面代码，如果编写出的界面代码所对应的开发界面图不符合效果图的设计，则需要对界面代码进行修改。然而，软件运行时有大量的不同用户界面，因此需要开发的用户界面则会相当多，如此必然导致对界面调整的效率低下，开发人员进行调试耗费的时间也比较长。尤其是在开发人员需要逐一进行人为比较并进行调整大量界面时，会严重影响开发效率。
发明内容
鉴于以上内容，有必要提供一种界面代码调整方法、装置、计算机装置及计算机可读存储介质，能够解决软件开发过程中对大量界面进行调整的效率低下的问题，提升界面调整的效率，提高开发人员的开发效率。
本发明提供一种界面代码调整方法，所述方法包括：
扫描源代码，获取所述源代码中的至少两段界面代码；
运行所述至少两段界面代码以显示至少两个运行界面；
对所述至少两个运行界面进行截图保存，得到至少两个开发效果图将所述至少两个开发效果图与至少两个设计效果图进行匹配，获取每个设计效果图对应的开发效果图；
判断每个开发效果图中的控件参数相较于对应的设计效果图中对应的控件参数是否存在差异；
在开发效果图中的控件参数相较于与对应的设计效果图中对应的控件参数存在差异时，确定所述开发效果图为待调整效果图以及确定所述待调整效果图中存在差异的控件参数为待调整控件参数；
在所述待调整效果图对应的界面代码中调整所述待调整控件参数。
在本发明优选实施中，所述方法还包括：
将每个开发效果图保存在所述每个开发效果图所属模块的文件夹中；
所述将所述至少两个开发效果图与至少两个设计效果图进行匹配包括：
获取每个模块的设计效果图，将每个模块的设计效果图与每个模块的开发效果图进行匹配。
在本发明优选实施例中，将所述至少两个开发效果图与至少两个设计效果图进行匹配，包括：
通过深度学习的方法识别所述至少两个开发效果图包含的元素信息以及元素属性，以及所述至少两个设计效果图包含的元素信息以及元素属性；
将所述至少两个开发效果图包含的元素信息以及元素属性与所述至少两个设计效果图包含的元素信息以及元素属性进行匹配。
在本发明优选实施中，所述在所述待调整效果图对应的界面代码中调整所述待调整控件参数包括：
按照与所述待调整效果图对应的设计效果图中的控件参数对所述待调整效果图所对应的界面代码中的待调整控件参数进行赋值或适配。
在本发明优选实施中，所述方法还包括：
基于设计效果图，将对应的开发效果图中的存在差异的区域进行标示，所述标示包括：通过预定义的标记进行提示，或者显示注释对所述待调整控件参数的差异值进行提醒。
在本发明优选实施例中，所述方法还包括：
在对所述待调整控件参数进行调整之后再次运行调整后的界面代码，获取调整后的开发效果图，并判断调整后的开发效果图与对应的设计效果图的控件参数是否存在差异；
若仍存在差异，提醒用户进行手动调整。
在本发明优选实施例中，所述在所述待调整效果图对应的界面代码中调整所述待调整控件参数之后还包括：
当对所述待调整效果图对应的界面代码进行二次开发时，提醒用户所述待调整效果图中的待调整控件参数相较于对应的设计效果图中对应的控件参数存在历史修改记录。
本发明还提供一种界面代码调整装置，所述装置包括：
代码获取模块，用于扫描源代码，获取所述源代码中的至少两段界面代码；
界面获取模块，运行所述至少两段界面代码以显示至少两个运行界面，对所述至少两个运行界面进行截图保存，得到至少两个开发效果图；
界面比较模块，将所述至少两个开发效果图与至少两个设计效果图进行匹配，获取每个设计效果图对应的开发效果图；
差异判断模块，判断每个开发效果图中的控件参数相较于对应的设计效果图中对应的控件参数是否存在差异；
确定模块，用于在开发效果图中的控件参数相较于与对应的设计效果图中对应的控件参数存在差异时，确定所述开发效果图为待调整效果图以及确定所述待调整效果图中存在差异的控件参数为待调整控件参数；
调整模块，用于在所述待调整效果图对应的界面代码中调整所述待调整控件参数。
本发明还提供一种计算机装置，所述计算机装置包括存储器及处理器，所述存储器用于存储至少一个指令，所述处理器用于执行所述至少一个指令以实现任意实施例中所述的界面代码调整方法。
本发明还提供一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有至少一个指令，所述至少一个指令被处理器执行时实现任意实施例中所述的界面代码调整方法。
由以上技术方案看出，本发明在开发过程中，通过运行界面代码获取开发效果图，将开发效果图与设计效果图进行比较，并判断该开发效果图与设计效果图中对应的控件参数是否一致，在不一致的情况下对界面代码中的控件参数进行调整，从而能够辅助开发过程中所涉及的界面代码的编写与调整，快速识别不符合设计要求的用户界面并提示开发人员对此进行调整，提高开发中的调试效率。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
图1是本发明实施例提供的一种界面代码调整方法的流程图；
图2是本发明实施例提供的一种界面代码调整装置的功能模块图；
图3是本发明实现界面代码调整的较佳实施例的计算机装置的结构示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。
如图1所示，图1为本发明实施例提供的一种界面代码调整方法的流程图。根据不同的需求，该流程图中步骤的顺序可以改变，某些步骤可以省略。所述界面代码调整方法应用于计算机装置中。在所述计算机装置中可运行各类应用软件，并可对各类软件的用户界面进行设计与编程。
本实施例中所述的界面代码调整方法用于在界面代码的开发过程中，获取需要调整的界面代码，并对界面代码进行调整以获取与设计效果相匹配的用户界面。具体而言，在本实施例中，可以通过对界面代码中的控件的参数进行调整来实现对应用软件的界面进行相应地调整。
S11，扫描源代码，获取所述源代码中的至少两段界面代码。
通常，在开发一个应用软件时，会在集成开发环境中通过project(也称为项目或称为工程)保存该应用软件对应的源代码。因此，上述源代码可以是一个或多个工程中的程序代码。
上述界面代码是用于界面管理的代码程序。例如，显示登陆界面、支付界面、下单界面等界面的代码程序。
在具体实施时，可以通过查找关键字来快速获取界面代码。例如，对于源代码是基于IOS的应用，可以利用关键字UI view进行搜索来获取相应的界面代码。
具体的，关键字可以是预设类名。即可以获取预设类名以及预设类名的派生类来实现获取相应的界面代码(例如，可以通过NS String From Class获取IOS中类的名称)。在IOS应用中，view的实现主要由UI View及其派生类(例如，UI Lable、UI Image View)实现，因此，可以获取UI View以及派生类的实现方法，从而得到相关应用的界面代码。
由于对于一个应用的开发，其界面代码通常为多个，因此在本实施例中，获取至少两段界面代码。优选的，获取源代码中的所有界面代码。
S12：运行所述至少两段界面代码以显示至少两个运行界面。
由于界面代码是用于显示界面的代码程序，因此，运行界面代码时，可以对所运行的界面进行显示，且运行界面中可以包含界面代码中所写的控件。
在不同的实施例中，所述的控件包括，但不限于：滚动条、文本域、按钮、单选按钮、复选框、列表框和组合框等，这些可自定义的控件可以在所显示的界面中即时预览将要显示的外观，可以通过拖放操作将控件添加到应用软件的界面或者在应用软件的界面中调整显示位置。在编写代码时可以定义控件的属性、方法和事件，控件的方式为用户提供了定义完善的应用程序接口(API)，协助用户在应用软件中按照自定义的方式集成和操纵控件。
例如，以登录界面为例，在运行该登录界面对应的界面代码时，所显示的运行界面中可包括用户名和密码的输入框，以及登录和注册的功能按钮。
S13：对所述至少两个运行界面进行截图保存，得到至少两个开发效果图。
上述开发效果图是在对运行界面进行预览时所截取到的运行界面的显示图像，即为通过开发时编写的界面代码所得到的界面的开发效果图。
在具体实施时，每段运行界面代码都能进行运行来预览显示以得到运行界面，对所述运行界面截图保存后，可以得到若干开发效果图。
如在S12中举例说明的登录界面，对该登录界面进行截图便可得到相应的开发效果图。
S14：将所述至少两个开发效果图与至少两个设计效果图进行匹配，获取每个设计效果图对应的开发效果图。
上述设计效果图是项目开过程中UI设计人员所提供的图片，是开发人员编写界面代码的设计依据。
具体的，设计效果图可以是预先进行存储的。在进行匹配时，可以通过现有的图像识别算法对开发效果图与设计效果图进行识别，进而通过匹配获取相似度大于预设相似度的一组设计效果图与开发效果图。
上述设计效果图对应的开发效果图是指与该设计效果图的相似度大于预设相似度值的开发效果图。
获取每个设计效果图对应的开发效果图用于从多张开发效果图中识别哪张开发效果图是对应的哪张设计效果图。
例如，当有A设计效果图，B设计效果图和C设计效果图，获取与A设计效果图相似度较高的开发效果图a，与B设计效果图相似度较高的开发效果图b，以及与C设计效果图相似度较高的开发效果图c。
进一步的，在本发明另一实施例中，所述方法还包括：
将每个开发效果图保存在所述每个开发效果图所属模块的文件夹中。
所述将所述至少两个开发效果图与至少两个设计效果图进行匹配包括：
获取每个模块的设计效果图，将每个模块的设计效果图与每个模块的开发效果图进行匹配。
在此实施例中，可以基于待开发的软件的各个功能模块对设计效果图与开发效果图进行分类存储，针对不同功能模块对应的用户界面所进行的开发而获取的开发效果图则分属于对应的功能模块。
例如，存在登录模块、注册模块、下单模块、支付模块(此处所述模块仅为举例说明，并非本案图2所述的各个执行具体功能的功能模块)，其中登录模块中有多张有关登录的开发效果图，则将多张有关登录的开发效果图都保存在以“登录模块”命名的文件夹中。
在本实施例中，设计效果图可以按照各个功能模块进行预先保存，进而将每个功能模块内的开发效果图与设计效果图进行一一匹配。
在本实施例中，将开发效果图分模块保存进而进行图像匹配可以快速的对图像进行匹配，避免大量图片一一匹配，节省图像匹配的时间，提高图像匹配的效率。
进一步的，在本发明另一实施例中，所述将所述至少两个开发效果图与至少两个设计效果图进行匹配，包括：
通过深度学习的方法识别所述至少两个开发效果图包含的元素信息以及元素属性，以及所述至少两个设计效果图包含的元素信息以及元素属性；
将所述至少两个开发效果图包含的元素信息以及元素属性与所述至少两个设计效果图包含的元素信息以及元素属性进行匹配。
在本发明实施例中，可以通过深度学习的方法来识别至少两个开发效果图包含的元素信息以及元素属性，以及至少两个设计效果图包含的元素信息以及元素属性，进而进行图像匹配。
上述开发效果图包含的元素信息可以包括但不限于：开发效果图的背景图片、开发效果图中的控件、背景图片的颜色、控件中的文字、控件的大小和位置。
上述设计效果图包含的元素信息可以包括但不限于：设计效果图的背景图片、设计效果图中的控件、背景图片的颜色、控件中的文字、控件的大小和位置。
深度学习具体是基于大数据进行学习，得到用于识别的数学模型。因此，通过深度学习的方法对图像进行识别，相比直接提取图像特征进行匹配识别，识别的准确率更高。
S15，判断每个开发效果图中的控件参数相较于对应的设计效果图中对应的控件参数是否存在差异。
在获取到一一对应的设计效果图与开发效果图之后，判断每个设计效果图中的控件参数与对应的开发效果图中对应的控件参数是否存在差异。例如，判断开发效果图中输入框的位置和长宽与设计效果图中输入框的位置和长宽是否存在差异；或者，判断开发效果图中按钮的位置、长宽和颜色与设计效果图中按钮的位置、长宽和颜色是否存在差异。
具体而言，由于每个按钮、对话框的位置和大小都是在界面代码中预先编写好后进而运行所得到开发效果图，因此开发效果图中的控件参数可以从界面代码中获取。通常，在UI设计人员进行设计时，会在设计中对设计元素的相关参数进行标注，因此设计效果图中的控件参数可以是根据设计效果图预先存储的。
在本实施例中，可以通过如下方式获取控件参数：
在获取的界面代码中，通过C#跨线程获取控件的参数，例如：在线程ThreadTask1中跨线程访问Form上Combo Box Serial Port控件的Text属性：
方法一：
定义一个可返回object的委托。
delegate object objdelegate()；
然后在线程中利用Invoke来获取：
上述方法的好处是简单直接，只需定义一次obj_delegate，便可以应用在其他控件上，即，只需在主类预先定义便可在整个程序中调用。
方法二：利用Lamda表达式可以直接访问本地变量来设置返回控件参数值
通过不同的方式可以实现对控件参数的调用，实际应用中并不局限于上述举例。
S16，在开发效果图中的控件参数相较于与对应的设计效果图中对应的控件参数存在差异时，确定所述开发效果图为待调整效果图以及确定所述待调整效果图中存在差异的控件参数为待调整控件参数。
例如，存在至少两个开发效果图M1至Mi以及至少两个设计效果图N1至Ni，其中，i为正整数，且i大于等于2，当M1中的控件参数与N1中对应的控件参数存在差异时，确定M1为待调整效果图，以及M1中存在差异的控件参数为待调整控件参数(如，M1输入框的位置和长宽).
S17，在所述待调整效果图对应的界面代码中调整所述待调整控件参数。
具体的，在本实施例中，对待调整控件参数的调整方法可以是，按照与所述待调整效果图对应的设计效果图中的控件参数对所述待调整开发效果图所对应的界面代码中的待调整控件参数进行赋值或适配。
其中，适配参数包括对控件的位置坐标和控件大小的参数等进行配置，也可以是根据用户界面的尺寸大小依据预设比例适配不同控件的尺寸、位置等。
通过本实施例，对与设计效果图不一致的开发效果图进行控件的参数调整，使得界面代码所表达的开发效果图与设计效果图相一致，从而快速的进行界面代码的调整，节省代码调试时间，提高代码调试效率。
在本发明另一实施例中，所述方法还包括：
基于设计效果图，将对应的开发效果图中的存在差异的区域进行标示，所述标示可以通过预定义的标记进行提示，并且，所述标示还可以进一步显示注释以提醒待调整控件参数的差异值。
在本发明另一实施例中，所述方法还包括：
在对所述待调整控件参数进行调整之后再次运行调整后的界面代码，获取调整后的开发效果图，并判断调整后的开发效果图与对应的设计效果图的控件参数是否存在差异；若存在差异，提醒用户进行手动调整。
在本实施例中，若在对待调整控件参数进行调整之后再次进行运行调整后的界面代码，则可以获取到通过运行调整后的界面代码所得到的调整后的开发效果图，从而可以判断调整后的开发效果图与对应的设计效果图的控件参数是否存在差异，进而可以验证参数调整是否成功完成。
若仍存在差异，此时可以提醒用户进行手动调整。
具体的，用户可以是开发人员，可以在开发人员的开发界面进行调整提醒。
在本发明另一实施例中，所述方法还包括：若存在待调整效果图，则发送调整提醒。
在本实施例中，通过发送调整提醒，可以使用户进行手动一一调整或者，用户可以选择性的进行调整，增加了调整的自由度。
在本发明另一实施例中，所述方法还包括：当对所述待调整效果图对应的界面代码进行二次开发时，提醒用户所述待调整效果图中的待调整控件参数相较于对应的设计效果图中对应的控件参数存在历史修改记录。
在本实施例中当对待调整效果图对应的界面代码进行二次开发时进行提醒，具体的，可以提醒用户上一次编写该界面代码时所得到的开发效果图与对应的设计效果图不一致，使用户再次修改编辑该界面代码时，能够着重留意，避免编写代码得到的开发效果图与设计效果图又不一致，减少调试时间，提高代码质量。
该界面代码调整方法通过扫描源代码，获取所述源代码中的至少两段界面代码；运行所述至少两段界面代码以显示至少两个运行界面；对所述至少两个运行界面进行截图保存，得到至少两个开发效果图；将所述至少两个开发效果图与至少两个设计效果图进行匹配，获取每个设计效果图对应的开发效果图；判断每个开发效果图中的控件参数相较于对应的设计效果图中对应的控件参数是否存在差异；在开发效果图中的控件参数相较于与对应的设计效果图中对应的控件参数存在差异时，确定所述开发效果图为待调整效果图以及确定所述待调整效果图中存在差异的控件参数为待调整控件参数；在所述待调整效果图对应的界面代码中调整所述待调整控件参数，无需开发人员一一进行人工比对，可以快速判断不符合设计要求的开发界面并相应地进行调整，实现了提高开发中的调试效率的目的。
如图2所示，图2为本发明实施例提供的界面代码调整装置的功能模块图。界面代码调整装置200包括代码获取模块210、界面获取模块220、界面比较模块230、差异判断模块240、确定模块250和调整模块260。本发明所称的模块是指一种能够被计算机装置的处理器所执行并且能够完成固定功能的一系列计算机程序段，其存储在计算机装置的存储器中。在本实施例中，关于各模块的功能将在后续的实施例中详述。
所述代码获取模块210，用于扫描源代码，获取所述源代码中的至少两段界面代码。
通常，在开发一个应用软件时，会在集成开发环境中通过project(也称为项目或称为工程)保存该应用软件对应的源代码。因此，上述源代码可以是一个或多个工程中的程序代码。
上述界面代码是用于界面管理的代码程序。例如，显示登陆界面、支付界面、下单界面等界面的代码程序。
在具体实施时，可以通过查找关键字来快速获取界面代码。例如，对于源代码是基于IOS的应用，可以利用关键字UI view进行搜索来获取相应的界面代码。
具体的，关键字可以是预设类名。即可以获取预设类名以及预设类名的派生类来实现获取相应的界面代码(例如，可以通过NS String From Class获取IOS中类的名称)。在IOS应用中，view的实现主要由UI View及其派生类(例如，UI Lable、UI Image View)实现，因此，可以获取UI View以及派生类的实现方法，从而得到相关应用的界面代码。
由于对于一个应用的开发，其界面代码通常为多个，因此在本实施例中，获取至少两段界面代码。优选的，获取源代码中的所有界面代码。
所述界面获取模块220，用于运行所述至少两段界面代码以显示至少两个运行界面，并对所述至少两个运行界面进行截图保存，得到至少两个开发效果图。
由于界面代码是用于显示界面的代码程序，因此，运行界面代码时，可以对所运行的界面进行显示，且运行界面中可以包含界面代码中所写的控件。
在不同的实施例中，所述的控件包括，但不限于：滚动条、文本域、按钮、单选按钮、复选框、列表框和组合框等，这些可自定义的控件可以在所显示的界面中即时预览将要显示的外观，可以通过拖放操作将控件添加到应用软件的界面或者在应用软件的界面中调整显示位置。在编写代码时可以定义控件的属性、方法和事件，控件的方式为用户提供了定义完善的应用程序接口(API)，协助用户在应用软件中按照自定义的方式集成和操纵控件。
例如，以登录界面为例，在运行该登录界面对应的界面代码时，所显示的运行界面中可包括用户名和密码的输入框，以及登录和注册的功能按钮。
上述开发效果图是在对运行界面进行预览时所截取到的运行界面的显示图像，即为通过开发时编写的界面代码所得到的界面的开发效果图。
在具体实施时，每段运行界面代码都能进行运行来预览显示以得到运行界面，对所述运行界面截图保存后，可以得到若干开发效果图。
如在上文举例说明的登录界面，对该登录界面进行截图便可得到相应的开发效果图。
所述界面比较模块230，用于将所述至少两个开发效果图与至少两个设计效果图进行匹配，获取每个设计效果图对应的开发效果图。
上述设计效果图是项目开过程中UI设计人员所提供的图片，是开发人员编写界面代码的设计依据。
具体的，设计效果图可以是预先进行存储的。在进行匹配时，可以通过现有的图像识别算法对开发效果图与设计效果图进行识别，进而通过匹配获取相似度大于预设相似度的一组设计效果图与开发效果图。
上述设计效果图对应的开发效果图是指与该设计效果图的相似度大于预设相似度值的开发效果图。
获取每个设计效果图对应的开发效果图用于从多张开发效果图中识别哪张开发效果图是对应的哪张设计效果图。
例如，当有A设计效果图，B设计效果图和C设计效果图，获取与A设计效果图相似度较高的开发效果图a，与B设计效果图相似度较高的开发效果图b，以及与C设计效果图相似度较高的开发效果图c。
进一步的，在本发明另一实施例中，所述界面获取模块220还用于将每个开发效果图保存在所述每个开发效果图所属模块的文件夹中。
所述界面比较模块230对所述至少两个开发效果图与至少两个设计效果图进行匹配包括：
获取每个模块的设计效果图，将每个模块的设计效果图与每个模块的开发效果图进行匹配。
在此实施例中，可以基于待开发的软件的各个功能模块对设计效果图与开发效果图进行分类存储，针对不同功能模块对应的用户界面所进行的开发而获取的开发效果图则分属于对应的功能模块。
例如，存在登录模块、注册模块、下单模块、支付模块(此处所述模块仅为举例说明，并非图2所述的各个执行具体功能的功能模块)，其中登录模块中有多张有关登录的开发效果图，则将多张有关登录的开发效果图都保存在以“登录模块”命名的文件夹中。
在本实施例中，设计效果图按照各个功能模块进行预先保存，进而将每个功能模块内的开发效果图与设计效果图进行一一匹配。
在本实施例中，将开发效果图分模块保存进而进行图像匹配可以快速的对图像进行匹配，避免大量图片一一匹配，节省图像匹配的时间，提高图像匹配的效率。
进一步的，在本发明另一实施例中，所述界面比较模块230将所述至少两个开发效果图与至少两个设计效果图进行匹配，包括：
通过深度学习的方法识别所述至少两个开发效果图包含的元素信息以及元素属性，以及所述至少两个设计效果图包含的元素信息以及元素属性；
将所述至少两个开发效果图包含的元素信息以及元素属性与所述至少两个设计效果图包含的元素信息以及元素属性进行匹配。
在本发明实施例中，可以通过深度学习的方法来识别至少两个开发效果图包含的元素信息以及元素属性，以及至少两个设计效果图包含的元素信息以及元素属性，进而进行图像匹配。
上述开发效果图包含的元素信息可以包括但不限于：开发效果图的背景图片、开发效果图中的控件、背景图片的颜色、控件中的文字、控件的大小和位置。
上述设计效果图包含的元素信息可以包括但不限于：设计效果图的背景图片、设计效果图中的控件、背景图片的颜色、控件中的文字、控件的大小和位置。
深度学习具体是基于大数据进行学习，得到用于识别的数学模型。因此，通过深度学习的方法对图像进行识别，相比直接提取图像特征进行匹配识别，识别的准确率更高。
所述差异判断模块240，用于判断每个开发效果图中的控件参数相较于对应的设计效果图中对应的控件参数是否存在差异。
所述差异判断模块240在获取到一一对应的设计效果图与开发效果图之后，判断每个设计效果图中的控件参数与对应的开发效果图中对应的控件参数是否存在差异。例如，判断开发效果图中输入框的位置和长宽与设计效果图中输入框的位置和长宽是否存在差异；或者，判断开发效果图中按钮的位置、长宽和颜色与设计效果图中按钮的位置、长宽和颜色是否存在差异。
具体而言，由于每个按钮、对话框的位置和大小都是在界面代码中预先编写好后进而运行所得到开发效果图，因此开发效果图中的控件参数可以从界面代码中获取。通常，在UI设计人员进行设计时，会在设计中对设计元素的相关参数进行标注，因此设计效果图中的控件参数可以是根据设计效果图预先存储的。
在本实施例中，可以通过如下方式获取控件参数：
在获取的界面代码中，通过C#跨线程获取控件的参数，例如：在线程ThreadTask1中跨线程访问Form上Combo Box Serial Port控件的Text属性：
方法一：
定义一个可返回object的委托。
delegate object objdelegate()；
然后在线程中利用Invoke来获取：
上述方法的好处是简单直接，只需定义一次obj_delegate，便可以应用在其他控件上，即，只需在主类预先定义便可在整个程序中调用。
方法二：利用Lamda表达式可以直接访问本地变量来设置返回控件参数值
通过不同的方式可以实现对控件参数的调用，实际应用中并不局限于上述举例。
所述确定模块250，用于在开发效果图中的控件参数相较于与对应的设计效果图中对应的控件参数存在差异时，确定所述开发效果图为待调整效果图以及确定所述待调整效果图中存在差异的控件参数为待调整控件参数。
例如，存在至少两个开发效果图M1至Mi以及至少两个设计效果图N1至Ni，其中，i为正整数，且i大于等于2，当M1中的控件参数与N1中对应的控件参数存在差异时，确定M1为待调整效果图，以及M1中存在差异的控件参数为待调整控件参数(如，M1输入框的位置和长宽).
调整模块260，用于在所述待调整效果图对应的界面代码中调整所述待调整控件参数。
具体的，在本实施例中，对待调整控件参数的调整方法可以是，按照与所述待调整效果图对应的设计效果图中的控件参数对所述待调整开发效果图所对应的界面代码中的待调整控件参数进行赋值或适配。
其中，适配参数包括对控件的位置坐标和控件大小的参数等进行配置，也可以是根据用户界面的尺寸大小依据预设比例适配不同控件的尺寸、位置等。
通过本实施例，对与设计效果图不一致的开发效果图进行控件的参数调整，使得界面代码所表达的开发效果图与设计效果图相一致，从而快速的进行界面代码的调整，节省代码调试时间，提高代码调试效率。
在本发明另一实施例中，所述差异判断模块240还用于：
基于设计效果图，将对应的开发效果图中的存在差异的区域进行标示，所述标示可以通过预定义的标记进行提示，并且，所述标示还可以进一步显示注释以提醒待调整控件参数的差异值。
在本发明另一实施例中，所述装置还包括提醒模块，所述提醒模块用于：
在对所述待调整控件参数进行调整之后再次运行调整后的界面代码，获取调整后的开发效果图，并判断调整后的开发效果图与对应的设计效果图的控件参数是否存在差异；若存在差异，提醒用户进行手动调整。
在本实施例中，若在对待调整控件参数进行调整之后再次进行运行调整后的界面代码，则可以获取到通过运行调整后的界面代码所得到的调整后的开发效果图，从而可以判断调整后的开发效果图与对应的设计效果图的控件参数是否存在差异，进而可以验证参数调整是否成功完成。
若仍存在差异，此时可以提醒用户进行手动调整。
具体的，用户可以是开发人员，可以在开发人员的开发界面进行调整提醒。
在本发明另一实施例中，所述提醒模块还用于：若存在待调整效果图，则发送调整提醒。
在本实施例中，通过发送调整提醒，可以使用户进行手动一一调整或者，用户可以选择性的进行调整，增加了调整的自由度。
在本发明另一实施例中，所述提醒模块还用于：当对所述待调整效果图对应的界面代码进行二次开发时，提醒用户所述待调整效果图中的待调整控件参数相较于对应的设计效果图中对应的控件参数存在历史修改记录。
在本实施例中当对待调整效果图对应的界面代码进行二次开发时进行提醒，具体的，可以提醒用户上一次编写该界面代码时所得到的开发效果图与对应的设计效果图不一致，使用户再次修改编辑该界面代码时，能够着重留意，避免编写代码得到的开发效果图与设计效果图又不一致，减少调试时间，提高代码质量。
该界面代码调整装置通过代码获取模块扫描源代码，获取所述源代码中的至少两段界面代码；界面获取模块运行所述至少两段界面代码以显示至少两个运行界面，对所述至少两个运行界面进行截图保存，得到至少两个开发效果图；界面比较模块将所述至少两个开发效果图与至少两个设计效果图进行匹配，获取每个设计效果图对应的开发效果图；差异判断模块判断每个开发效果图中的控件参数相较于对应的设计效果图中对应的控件参数是否存在差异；在开发效果图中的控件参数相较于与对应的设计效果图中对应的控件参数存在差异时，确定模块确定所述开发效果图为待调整效果图以及确定所述待调整效果图中存在差异的控件参数为待调整控件参数；调整模块在所述待调整效果图对应的界面代码中调整所述待调整控件参数。
上述以软件功能模块的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中。上述软件功能模块存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本发明各个实施例所述方法的部分步骤如图3所示，图3是本发明实现界面代码调整方法的较佳实施例的计算机装置的结构示意图。计算机装置30包括至少一个发送装置31、至少一个存储器32、至少一个处理器33、至少一个接收装置34以及至少一个通信总线。其中，所述通信总线用于实现这些组件之间的连接通信。
所述计算机装置30是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(ApplicationSpecific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable GateArray，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。所述计算机装置30还可包括网络设备和/或用户设备。其中，所述网络设备包括但不限于单个网络服务器、多个网络服务器组成的服务器组或基于云计算(Cloud Computing)的由大量主机或网络服务器构成的云，其中，云计算是分布式计算的一种，由一群松散耦合的计算机集组成的一个超级虚拟计算机。
所述计算机装置30可以是，但不限于任何一种可与用户通过键盘、触摸板或声控设备等方式进行人机交互的电子产品，例如，平板电脑、智能手机、监控设备等终端。
所述计算机装置30所处的网络包括，但不限于互联网、广域网、城域网、局域网、虚拟专用网络(Virtual Private Network，VPN)等。
其中，所述接收装置34和所述发送装置31可以是有线发送端口，也可以为无线设备，例如包括天线装置，用于与其他设备进行数据通信。
所述存储器32用于存储程序代码。所述存储器32可以是集成电路中没有实物形式的具有存储功能的电路，如RAM(Random-Access Memory，随机存取存储器)、FIFO(First InFirst Out，先进先出存储器)等。或者，所述存储器32也可以是具有实物形式的存储器，如内存条、TF卡(Trans-flash Card)、智能媒体卡(smart media card)、安全数字卡(securedigital card)、快闪存储器卡(flash card)等储存设备等等。
所述处理器33可以包括一个或者多个微处理器、数字处理器。所述处理器33可调用存储器32中存储的程序代码以执行相关的功能。例如，图3中所述的各个单元是存储在所述存储器32中的程序代码，并由所述处理器33所执行，以实现一种界面代码调整方法。所述处理器33又称中央处理器(CPU，Central Processing Unit)，是一块超大规模的集成电路，是运算核心(Core)和控制核心(Control Unit)。
在本发明所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。
所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。
另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能模块的形式实现。
对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附关联图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。系统权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第二等词语用来表示名称，而并不表示任何特定的顺序。
最后应说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或等同替换，而不脱离本发明技术方案的精神和范围。
Claims (9)
1.一种界面代码调整方法，其特征在于，所述方法包括：
扫描源代码，获取所述源代码中的至少两段界面代码，包括：利用关键词从所述源代码中检索得到所述界面代码；
运行所述至少两段界面代码以显示至少两个运行界面，所述界面代码是指显示所述运行界面的代码程序；
对所述至少两个运行界面进行截图保存，得到至少两个开发效果图；
将所述至少两个开发效果图与至少两个设计效果图进行匹配，获取每个设计效果图对应的开发效果图，所述将所述至少两个开发效果图与至少两个设计效果图进行匹配，包括：通过深度学习的方法识别所述至少两个开发效果图包含的元素信息以及元素属性，以及所述至少两个设计效果图包含的元素信息以及元素属性；将所述至少两个开发效果图包含的元素信息以及元素属性与所述至少两个设计效果图包含的元素信息以及元素属性进行匹配；
判断每个开发效果图中的控件参数相较于对应的设计效果图中对应的控件参数是否存在差异；
在开发效果图中的控件参数相较于与对应的设计效果图中对应的控件参数存在差异时，确定所述开发效果图为待调整效果图以及确定所述待调整效果图中存在差异的控件参数为待调整控件参数；
在所述待调整效果图对应的界面代码中调整所述待调整控件参数。
2.如权利要求1所述的方法，其特征在于，所述方法还包括：
将每个开发效果图保存在所述每个开发效果图所属模块的文件夹中；
所述将所述至少两个开发效果图与至少两个设计效果图进行匹配包括：
获取每个模块的设计效果图，将每个模块的设计效果图与每个模块的开发效果图进行匹配。
3.如权利要求1所述的方法，其特征在于，所述在所述待调整效果图对应的界面代码中调整所述待调整控件参数包括：
按照与所述待调整效果图对应的设计效果图中的控件参数对所述待调整效果图所对应的界面代码中的待调整控件参数进行赋值或适配。
4.如权利要求1所述的方法，其特征在于，所述方法还包括：
基于设计效果图，将对应的开发效果图中的存在差异的区域进行标示，所述标示包括：
通过预定义的标记进行提示，或者显示注释对所述待调整控件参数的差异值进行提醒。
5.如权利要求1至4中任一项所述的方法，其特征在于，所述方法还包括：
在对所述待调整控件参数进行调整之后再次运行调整后的界面代码，获取调整后的开发效果图，并判断调整后的开发效果图与对应的设计效果图的控件参数是否存在差异；
若存在差异，提醒用户进行手动调整。
6.如权利要求1至4中任一项所述的方法，其特征在于，所述在所述待调整效果图对应的界面代码中调整所述待调整控件参数之后还包括：
当对所述待调整效果图对应的界面代码进行二次开发时，提醒用户所述待调整效果图中的待调整控件参数相较于对应的设计效果图中对应的控件参数存在历史修改记录。
7.一种界面代码调整装置，其特征在于，所述装置包括：
代码获取模块，用于扫描源代码，获取所述源代码中的至少两段界面代码，包括：利用关键词从所述源代码中检索得到所述界面代码；
界面获取模块，运行所述至少两段界面代码以显示至少两个运行界面，所述界面代码是指显示所述运行界面的代码程序，对所述至少两个运行界面进行截图保存，得到至少两个开发效果图；
界面比较模块，将所述至少两个开发效果图与至少两个设计效果图进行匹配，获取每个设计效果图对应的开发效果图，所述将所述至少两个开发效果图与至少两个设计效果图进行匹配，包括：通过深度学习的方法识别所述至少两个开发效果图包含的元素信息以及元素属性，以及所述至少两个设计效果图包含的元素信息以及元素属性；将所述至少两个开发效果图包含的元素信息以及元素属性与所述至少两个设计效果图包含的元素信息以及元素属性进行匹配；
差异判断模块，判断每个开发效果图中的控件参数相较于对应的设计效果图中对应的控件参数是否存在差异；
确定模块，用于在开发效果图中的控件参数相较于与对应的设计效果图中对应的控件参数存在差异时，确定所述开发效果图为待调整效果图以及确定所述待调整效果图中存在差异的控件参数为待调整控件参数；
调整模块，用于在所述待调整效果图对应的界面代码中调整所述待调整控件参数。
8.一种计算机装置，其特征在于，所述计算机装置包括存储器及处理器，所述存储器用于存储至少一个指令，所述处理器用于执行所述至少一个指令以实现如权利要求1至6中任一项所述的界面代码调整方法。
9.一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机指令，其特征在于：所述计算机指令被处理器执行时实现如权利要求1至6中任一项所述的界面代码调整方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811537729.7A CN109871205B (zh) | 2018-12-15 | 2018-12-15 | 界面代码调整方法、装置、计算机装置及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811537729.7A CN109871205B (zh) | 2018-12-15 | 2018-12-15 | 界面代码调整方法、装置、计算机装置及存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109871205A CN109871205A (zh) | 2019-06-11 |
| CN109871205B true CN109871205B (zh) | 2023-07-18 |
Family
ID=66917128
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811537729.7A Active CN109871205B (zh) | 2018-12-15 | 2018-12-15 | 界面代码调整方法、装置、计算机装置及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109871205B (zh) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112650483A (zh) * | 2020-12-28 | 2021-04-13 | 京东数字科技控股股份有限公司 | 还原设计稿的方法、装置、计算机设备和存储介质 |
| CN113377366B (zh) * | 2021-07-09 | 2024-03-12 | 北京字跳网络技术有限公司 | 控件编辑方法、装置、设备、可读存储介质及产品 |
| CN113722038A (zh) * | 2021-09-06 | 2021-11-30 | 北京字节跳动网络技术有限公司 | 一种数据匹配方法、装置、计算机设备以及存储介质 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| MX2009004599A (es) * | 2008-04-30 | 2009-10-30 | Accenture Global Services Gmbh | Metodo implementado en ordenador para generar ficheros de ordenador ejecutables interrelacionados, sistema basado en el ordenador y producto de programa de oredenador. |
| US8700992B1 (en) * | 2011-11-02 | 2014-04-15 | Google Inc. | Method for determining position and dimensions of webpage elements by wireframe injection |
| CN104657828A (zh) * | 2015-02-17 | 2015-05-27 | 华为技术有限公司 | 数据化和数据匹配方法和代码推荐方法及相关装置 |
| CN107797804A (zh) * | 2017-11-20 | 2018-03-13 | 北京百度网讯科技有限公司 | 生成前端交互界面的方法和装置 |
| CN108304243A (zh) * | 2018-02-06 | 2018-07-20 | 中国平安人寿保险股份有限公司 | 界面生成方法、装置、计算机设备和存储介质 |
| CN108536467A (zh) * | 2018-04-08 | 2018-09-14 | 中国联合网络通信集团有限公司 | 代码的定位处理方法、装置、终端设备及存储介质 |
| CN108920435A (zh) * | 2018-06-29 | 2018-11-30 | 南京南瑞继保电气有限公司 | 一种可视化程序页面数据节点匹配方法 |
Family Cites Families (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8910113B2 (en) * | 2009-09-22 | 2014-12-09 | Adobe Systems Incorporated | Methods and systems for visual code refactoring |
| US8948058B2 (en) * | 2012-07-23 | 2015-02-03 | Cisco Technology, Inc. | System and method for improving audio quality during web conferences over low-speed network connections |
| CN103677831B (zh) * | 2013-12-12 | 2017-02-08 | 迈普通信技术股份有限公司 | 在线代码审查系统及方法 |
| CN106648571B (zh) * | 2015-11-03 | 2020-11-10 | 百度在线网络技术（北京）有限公司 | 一种用于校对应用界面的方法和装置 |
| US10083015B2 (en) * | 2016-12-15 | 2018-09-25 | International Business Machines Corporation | Mobile accessibility evaluation from application binary |
| CN106873991B (zh) * | 2017-01-20 | 2019-01-11 | 腾讯科技（深圳）有限公司 | 页面生成方法和装置 |
| CN107992304B (zh) * | 2017-12-29 | 2021-01-08 | 北京远特科技股份有限公司 | 一种生成显示界面的方法和装置 |
| CN108304183A (zh) * | 2018-02-26 | 2018-07-20 | 北京车和家信息技术有限公司 | 一种用户界面生成方法、装置及电子设备 |
-
2018
- 2018-12-15 CN CN201811537729.7A patent/CN109871205B/zh active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| MX2009004599A (es) * | 2008-04-30 | 2009-10-30 | Accenture Global Services Gmbh | Metodo implementado en ordenador para generar ficheros de ordenador ejecutables interrelacionados, sistema basado en el ordenador y producto de programa de oredenador. |
| US8700992B1 (en) * | 2011-11-02 | 2014-04-15 | Google Inc. | Method for determining position and dimensions of webpage elements by wireframe injection |
| CN104657828A (zh) * | 2015-02-17 | 2015-05-27 | 华为技术有限公司 | 数据化和数据匹配方法和代码推荐方法及相关装置 |
| CN107797804A (zh) * | 2017-11-20 | 2018-03-13 | 北京百度网讯科技有限公司 | 生成前端交互界面的方法和装置 |
| CN108304243A (zh) * | 2018-02-06 | 2018-07-20 | 中国平安人寿保险股份有限公司 | 界面生成方法、装置、计算机设备和存储介质 |
| CN108536467A (zh) * | 2018-04-08 | 2018-09-14 | 中国联合网络通信集团有限公司 | 代码的定位处理方法、装置、终端设备及存储介质 |
| CN108920435A (zh) * | 2018-06-29 | 2018-11-30 | 南京南瑞继保电气有限公司 | 一种可视化程序页面数据节点匹配方法 |
Non-Patent Citations (2)
| Title |
|---|
| Evaluation and Verification of HCI Design of University Webpage Based on Eye-Tracking Technology;Z. Li等;《2015 International Conference on Computational Intelligence and Communication Networks (CICN)》;第1399-1402页 * |
| 基于开放式模板的内容管理系统的设计与实现;关振宇;《中国优秀硕士学位论文全文数据库信息科技辑》(第3期);I138-1285 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109871205A (zh) | 2019-06-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| WO2020134991A1 (zh) | 纸质表单的自动录入方法、装置、计算机设备和存储介质 | |
| US10346560B2 (en) | Electronic blueprint system and method | |
| US10852898B2 (en) | System for interactive help | |
| CN109871205B (zh) | 界面代码调整方法、装置、计算机装置及存储介质 | |
| CN108491866B (zh) | 色情图片鉴定方法、电子装置及可读存储介质 | |
| US10929597B2 (en) | Techniques and systems for storing and protecting signatures and images in electronic documents | |
| AU2017204531B2 (en) | Smart and automatic selection of same shaped objects in images | |
| CN113190781B (zh) | 页面布局方法、装置、设备及存储介质 | |
| EP3905122A2 (en) | Video type detection method, apparatus, electronic device and storage medium | |
| CN111222571B (zh) | 图像特效的处理方法、装置、电子设备及存储介质 | |
| WO2017107855A1 (zh) | 一种图片搜索方法及装置 | |
| JP7389824B2 (ja) | オブジェクト識別方法と装置、電子機器及び記憶媒体 | |
| CN109658485B (zh) | 网页动画绘制方法、装置、计算机设备和存储介质 | |
| CN113486785A (zh) | 基于深度学习的视频换脸方法、装置、设备及存储介质 | |
| CN111428570A (zh) | 非活体人脸的检测方法、装置、计算机设备及存储介质 | |
| US20180293437A1 (en) | Capture object boundary jitter reduction | |
| CN111552829B (zh) | 用于分析图像素材的方法和装置 | |
| US20230401265A1 (en) | Cross-application componentized document generation | |
| CN111638844A (zh) | 截屏方法、装置及电子设备 | |
| CN112395028B (zh) | 页面检验方法、装置、终端以及存储介质 | |
| CN109284598B (zh) | 一种在教育云平台页面生成电子身份卡的方法及电子设备 | |
| CN113010129A (zh) | 虚拟演播厅全流程多终端板书提取方法和装置 | |
| WO2016173136A1 (zh) | 一种终端应用处理方法及其装置 | |
| CN112734876A (zh) | 图形绘制方法、装置、电子设备及存储介质 | |
| WO2019114133A1 (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 |