CN112445564B - 界面显示方法及电子设备、计算机可读存储介质 - Google Patents

Abstract

本申请涉及界面显示技术领域，公开了界面显示方法及电子设备、计算机可读存储介质。该方法包括：在显示界面中显示第一显示区域、第二显示区域和第三显示区域；响应于第一显示区域中的目标控件被选择，将目标控件移动至第二显示区域中的第一页面；其中，目标控件在第二显示区域处于可编辑状态；响应于第三显示区域的目标属性被选择，将第二显示区域中的目标控件基于目标属性进行设置；响应于第一页面被保存，则将第一页面悬浮显示，并虚化第一显示区域和第三显示区域。通过上述方式，能够使显示界面的设置更加简洁，减少显示界面设计的难度，提升设计效率。

Description

界面显示方法及电子设备、计算机可读存储介质

技术领域

本申请涉及界面显示技术领域，特别是涉及界面显示方法及电子设备、计算机可读存储介质。

背景技术

目前基于显示界面的开发，需要开发人员进行大量的编码，不仅需要前端开发人员，还需要后台开发人员。

不足之处在于，相关技术的开发需要人员多，投入成本大，周期也较长。

发明内容

为了解决上述问题，本申请提供界面显示方法及电子设备、计算机可读存储介质，能够使显示界面的设置更加简洁，减少显示界面设计的难度，提升设计效率。

本申请采用的一种技术方案是提供一种界面显示方法，该方法包括：在显示界面中显示第一显示区域、第二显示区域和第三显示区域；响应于第一显示区域中的目标控件被选择，将目标控件移动至第二显示区域中的第一页面；其中，目标控件在第二显示区域处于可编辑状态；目标控件是通过对预设的GUI组件库的配置编译脚本进行配置得到的；响应于第三显示区域的目标属性被选择，将第二显示区域中的目标控件基于目标属性进行设置；响应于第一页面被保存，则将第一页面悬浮显示，并虚化第一显示区域和第三显示区域，并基于目标控件调用云端相应的GUI API、UI组件抽象库、GUI库编译得到预设封装包。

其中，在显示界面中显示第一显示区域、第二显示区域和第三显示区域之前，包括：在显示界面中显示多个芯片图标；响应于目标芯片图标被选择，基于目标芯片图标得到与目标芯片图标对应系统的配置编译脚本；基于配置编译脚本，得到对应系统及目标芯片的GUI组件库。

其中，基于配置编译脚本，得到对应系统及目标芯片的GUI组件库之前，包括：在显示界面中显示待选择图标；其中，待选择图标被分为新创建和已创建；响应于对应新创建的待选择图标被选择，则弹出信息输入窗口；响应于信息输入窗口被填写信息且确定按钮被触发，则在显示界面中显示第一显示区域、第二显示区域和第三显示区域。

其中，该方法还包括：响应于对应已创建的待选择图标被选择，则在显示界面中显示第一显示区域、第二显示区域、第三显示区域和第四显示区域；其中，第四显示区域用于显示被选择的待选择图标对应的项目中的多个已创建控件；其中，多个已创建控件按照在第二显示区域中的创建时间顺次排序；响应于第一显示区域中的目标控件被选择，将目标控件移动至第二显示区域中的第一页面，包括：响应于第一显示区域中的目标控件或第四显示区域中的已创建控件被选择，将目标控件移动至第一页面或将第一页面对应的已创建控件置于顶层显示。

其中，第四显示区域设置有创建按钮；响应于第一页面被保存，则将第一页面悬浮显示，并虚化第一显示区域和第三显示区域之后，包括：响应于创建按钮被选择，在第二显示区域创建第二页面，并将第一页面与第二页面关联；响应于第二页面被保存，则将第一页面和第二页面依次悬浮显示，并虚化第一显示区域和第三显示区域。

其中，目标控件为图片控件；响应于第一显示区域中的目标控件被选择，将目标控件移动至第二显示区域中的第一页面，包括：响应于第一显示区域中的图片控件被选择，将图片控件移动至第二显示区域中的第一页面；响应于第三显示区域的目标属性被选择，将第二显示区域中的目标控件基于目标属性进行设置，包括：向在第三显示区域中对应图片控件的每个帧属性添加对应的目标图片，以使图片控件逐帧显示目标图片。

其中，响应于第一页面被保存，则将第一页面悬浮显示，并虚化第一显示区域和第三显示区域，包括：响应于第一页面被保存，则将第一页面中的目标控件进行编译并保存，且将第一页面悬浮显示，并虚化第一显示区域和第三显示区域。

其中，显示界面还包括第五显示区域，第五显示区域设置有编译按钮；响应于第一页面被保存，则将第一页面中的目标控件进行编译并保存，包括：响应于第一页面被保存，则切换至事件编辑页面；其中，事件编辑页面用于将第二显示区域中的目标控件进行逻辑编辑；响应于编译按钮被选择，则按照事件编辑页面输入的逻辑编辑信息进行编译并保存。

本申请采用的另一种技术方案是提供一种电子设备，该电子设备包括处理器以及与处理器连接的存储器；存储器用于存储程序数据，处理器用于执行程序数据，以实现如上述技术方案提供的方法。

本申请采用的另一种技术方案是提供一种计算机可读存储介质，该计算机可读存储介质用于存储程序数据，程序数据在被处理器执行时，用于实现如上述技术方案提供的方法。

本申请的有益效果是：区别于现有技术的情况，本申请的一种界面显示方法，该方法包括：在显示界面中显示第一显示区域、第二显示区域和第三显示区域；响应于第一显示区域中的目标控件被选择，将目标控件移动至第二显示区域中的第一页面；其中，目标控件在第二显示区域处于可编辑状态；目标控件是通过对预设的GUI组件库的配置编译脚本进行配置得到的；响应于第三显示区域的目标属性被选择，将第二显示区域中的目标控件基于目标属性进行设置；响应于第一页面被保存，则将第一页面悬浮显示，并虚化第一显示区域和第三显示区域，并基于目标控件调用云端相应的GUI API、UI组件抽象库、GUI库编译得到预设封装包。通过上述方式，能够使显示界面的设置更加简洁，减少显示界面设计的难度，提升设计效率。

附图说明

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

图1是本申请提供的界面显示方法一实施例的流程示意图；

图2是本申请提供的显示界面一实施例的结构示意图；

图3是本申请提供的界面显示方法另一实施例的流程示意图；

图4是本申请提供的显示界面另一实施例的结构示意图；

图5是本申请提供的界面显示方法另一实施例的流程示意图；

图6是本申请提供的数据烧录方法一实施例的流程示意图；

图7是本申请提供的数据烧录方法中的交互流程示意图；

图8是本申请提供的数据烧录方法另一实施例的流程示意图；

图9是本申请提供的数据烧录方法另一实施例的流程示意图；

图10是本申请提供的电子设备一实施例的结构示意图；

图11是本申请提供的烧录工具一实施例的结构示意图；

图12是本申请提供的目标烧录设备一实施例的结构示意图；

图13是本申请提供的终端设备一实施例的结构示意图；

图14是本申请提供的计算机可读存储介质一实施例的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。可以理解的是，此处所描述的具体实施例仅用于解释本申请，而非对本申请的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本申请相关的部分而非全部结构。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

参阅图1，图1是本申请提供的界面显示方法一实施例的流程示意图，该方法包括：

步骤11：在显示界面中显示第一显示区域、第二显示区域和第三显示区域。

其中，第一显示区域中设置有不同的控件，如文本框、按钮、图片、切换页签、滑块、复选框、开关、进度条、列表、圆环、日历、下拉框、仪表盘、滑动面板、LED(Light-EmittingDiode，发光二极管)、对话框、预加载提示、选择器、文本域和折线等控件。

第二显示区域为编辑区，可以将上述的控件设置于第二显示区域，并进行相应的编辑。

第三显示区域为第一显示区域中控件的属性区域，可以在第三显示区域设置对应控件的属性。

在一些实施例中，参阅图2，第一显示区域可以在显示界面A的左侧，第二显示区域在显示界面的中间，即第一显示区域和第三显示区域之间第三显示区域在显示界面的右侧。

在一些实施例中，在步骤11之前包括在显示界面中显示多个芯片图标；响应于目标芯片图标被选择，基于目标芯片图标得到与目标芯片图标对应系统的配置编译脚本；基于配置编译脚本，得到对应系统及目标芯片的GUI组件库。在一应用场景中，将GUI组件库、UI组件模板、UI交互模板、GUI API、外设芯片相关信息等都是存放在云端。在显示界面中提供多个芯片图标的选择，在选择目标芯片后，针对该芯片获取基于其已适配的各大系统(如RTOS，linux等)的配置编译脚本。基于配置编译脚本，得到对应系统及目标芯片的GUI组件库。通过GUI组件库的配置编译脚本得到功能代码模板，即UI组件模板与UI交互模板，即上述的目标控件相关数据。其中，芯片图标对应的芯片可以是ESP32Xtensa内核，RISC-V内核。

步骤12：响应于第一显示区域中的目标控件被选择，将目标控件移动至第二显示区域中的第一页面。

其中，目标控件在第二显示区域处于可编辑状态，目标控件是通过对预设的GUI组件库的配置编译脚本进行配置得到的。

在一些实施例中，该显示界面可以是触控屏，则用户可使用手在第一显示区域的控件中选择目标控件，进行拖动，在拖动停止时判断是否位于第二显示区域，若是，则在第二显示区域的第一页面显示。

在一些实施例中，用户使用鼠标在第一显示区域的控件中选择目标控件，进行拖动，在拖动停止时判断是否位于第二显示区域，若是，则在第二显示区域的第一页面显示。

步骤13：响应于第三显示区域的目标属性被选择，将第二显示区域中的目标控件基于目标属性进行设置。

在一些实施例中，在将目标控件拖动至第二显示区域的第一页面时，在第三区域同步显示出该目标控件对应的属性。如，目标控件为文本，则在第三区域显示出对应的属性为字体、字号、居中、居左、居右、文字颜色、边框设置等。在选择居中、红色时，第二显示区域的文本中的文字呈红色，且居中。

在一些实施例中，目标控件为按钮，则在第二显示界面单击控件属性区域内容下拉，可以修改按钮的内容和内容的实际样式，以及给按钮添加图片。添加的图片不以中文命名，且像素不大于当前屏幕。且按钮设置了图片，文字就没用了。按钮的行为有三个，分别是：单击跳转场景ID、单击、长按。单击跳转场景ID，只用下拉选择需要跳转的场景，即可跳转到相应的场景；单击和长按则需要编写代码块程序。按钮处于不同状态，可以有不同的样式，通过单击右侧样式下拉，实现不同按钮的状态设置相应的样式。

在一些实施例中，目标控件为切换页签。切换页签是通过选择页签切换场景的控件。在创建页签切换之前，需要创建场景，为添加页签对应的场景做准备，页签和场景是一一对应的，有多少个页签就有多少个场景。创建页签切换时，从第一显示区域中拖拽页签切换控件到第一页面，然后单击页签下拉，添加页签和场景ID。

在一些实施例中，目标控件为滑块。滑块类似于进度条加上一个旋钮，当拖动旋钮时，值会发生改变。首先，从第一显示区域中拖拽滑块控件到第一页面，就创建好了一个默认的滑块。在第三显示区域中单击控件属性区域内容下拉，设置滑块文案相关的初始值和外观。

在一些实施例中，目标控件为复选框。从第一显示区域中拖拽复选框控件到第一页面，即可创建一个复选框。在第三显示区域中单击控件属性区域内容下拉，设置复选框文本相关属性。

在一些实施例中，目标控件为开关控件。从第一显示区域中拖拽开关控件到第一页面，即可创建一个开关。在第三显示区域中单击控件属性区域内容下拉，设置开关的默认值和实际样式。

在一些实施例中，目标控件为进度条。进度条主要由背景和指示组成，用来显示事物的进程，如：我们平时观看的视频，下方就有进度条，用来显示视频的进程。从第一显示区域中拖拽进度条控件到第一页面，即可创建一个进度条。在第三显示区域中单击控件属性区域内容下拉，设置进度条的默认值和实际样式。

在一些实施例中，目标控件为列表。从第一显示区域中拖拽列表到第一页面，在第三显示区域中单击控件属性区域内容下拉，添加一个列表。通过编辑代码来实现单击事件。

在一些实施例中，目标控件为圆环控件。从第一显示区域中拖拽圆环控件到第一页面，即可创建圆环。在第三显示区域中单击控件属性区域内容下拉，设置圆环的开始和结束角度，以及圆环的样式等。

在一些实施例中，目标控件为日历控件。从控件栏拖拽日历控件到第一页面，即可创建一个默认的日历。在第三显示区域中单击控件属性区域内容下拉，设置年月日的值即可。

在一些实施例中，目标控件为下拉控件。从第一显示区域中拖拽下拉控件到第一页面，创建下拉框。在第三显示区域中单击控件属性区域内容下拉添加选项，添加选项的下拉框。

在一些实施例中，目标控件为仪表盘控件。从第一显示区域中拖拽仪表盘控件到第一页面，即可就创建一个仪表盘。在第三显示区域中单击控件属性区域内容下拉，设置仪表盘的样式和值，设置后的参考样式。

在一些实施例中，目标控件为滑动面板控件。从第一显示区域中拖拽滑动面板控件到第一页面，创建滑动面板。在第三显示区域中单击控件属性区域下拉，接着创建3个场景，分别作为滑动面板的左中右屏幕添加到滑动面板的内容里。

在一些实施例中，目标控件为LED控件。从第一显示区域中拖拽LED控件到第一页面，即可创口建好一个LED。在第三显示区域中单击控件属性区域基本下拉，设置LED的颜色和默认状态，样式设置。

在一些实施例中，目标控件为对话框控件。从第一显示区域中拖拽对话框控件到第一页面，在第三显示区域中单击控件属性区域内容下拉，输入“提示信息”，创建如所示的设置了按钮对话框。在第三显示区域中单击控件属性区域内容下拉，设置对话框的文本样式及对话框显示效果。通过代码块程序实现对话框单击行为。

在一些实施例中，目标控件为预加载提示控件。从第一显示区域中拖拽预加载提示控件到第一页面，即可创建一个默认的预加载提示。在第三显示区域中单击控件属性区域内容下拉，设置如所示预加载提示的相关样式。

在一些实施例中，目标控件为选择器控件。从第一显示区域中拖拽选择器控件到第一页面，在控件属性的内容设置选择器文本信息。控件属性的设置选择器的初始值、可见行数、文本相关和单击行为，单击行为通过编写代码块实现。在第三显示区域中单击控件属性区域选中主体样式，设置选择器选中时的实际效果，设置属性。

可以理解，可根据实际需求，从第一显示区域选择多个控件至第一页面。

步骤14：响应于第一页面被保存，则将第一页面悬浮显示，并虚化第一显示区域和第三显示区域，并基于目标控件调用云端相应的GUIAPI、UI组件抽象库、GUI库编译得到预设封装包。

在第一页面中的将从第二显示区域拖动的目标控件均设置好属性后，则可对第一页面进行保存，然后将第一页面悬浮显示，以看清第一页面中的内容，并虚化第一显示区域和第三显示区域，以使第一页面突出显示，提高用户观看体验。

在一些实施例中，可以在将第一页面悬浮显示时，使第一页面全屏显示。

在本实施例中，基于GUI编辑器、代码编辑器以及后台，来完成本实施例编译为固件烧录数据。

本实施例可应用于web的嵌入式或单片机终端界面显示及功能程序可视化设计。在基于目标控件调用云端相应的GUI API、UI组件抽象库、GUI库编译得到预设封装包后，基于该封装包编译成目标芯片对应的终端设备的固件程序或升级包文件。能够提高外设应用程序以及UI界面的通用性。

在一应用场景中，可将此方法应用于程序开发。将程序以可视化的控件进行显示，以拖拽控件的方式在第一页面建立程序的前端界面。通过鼠标或者触摸屏触控拖拽的方式实现界面编辑以及逻辑代码编写，可以低代码甚至零代码的方式实现应用程序及其显示界面的设计开发。

在另一应用场景中，可将上述的方法设置于终端设备上，形成一个系统，基于上述方式，可实现目标控件的个性化设置，用户在设置该目标控件后，在系统上可选择私有、公开或者收费等发布方式，使其余用户免费或付费使用该控件。用户还可随时登录该系统后，在显示界面上查看参考，复制公开的UI组件以及功能模块的代码实现，以便二次学习开发。用户可在该系统的显示界面上以免费，定时免费体验，授权收费等灵活的方式发布完整的项目工程。该项目工程表示已经通过上述方式编译好的封装包。

在本实施例中，通过在显示界面中显示第一显示区域、第二显示区域和第三显示区域；响应于第一显示区域中的目标控件被选择，将目标控件移动至第二显示区域中的第一页面；其中，目标控件在第二显示区域处于可编辑状态；响应于第三显示区域的目标属性被选择，将第二显示区域中的目标控件基于目标属性进行设置；响应于第一页面被保存，则将第一页面悬浮显示，并虚化第一显示区域和第三显示区域。能够使显示界面的设置更加简洁，减少显示界面设计的难度，提升设计效率。

参阅图3，图3是本申请提供的界面显示方法另一实施例的流程示意图。该方法在上述实施例的步骤11之前实施。该方法包括：

步骤31：在显示界面中显示待选择图标；其中，待选择图标被分为新创建和已创建。

在一些实施例中，在步骤31之前，该显示界面中显示着登录界面。具体地，对应登录界面的账号和密码输入后，则确认该账号是否存在，如果没有，则请注册账号。则单击“没有账号？去注册”。然后弹出新窗口，则可在新窗口中自定义用户名、密码、以及用于找回密码的邮箱、公司及手机号。其中，用户名只能数字字母，至少5位，密码不能为空，至少6位。然后单击“注册”按钮。注册后，输入已注册的“用户名”、“密码”，单击“登录”，进入如图4所示的界面。如图4所示，显示界面中显示有对应的待选择图标，如，新建、项目1、项目2和项目3。

步骤32：响应于对应新创建的待选择图标被选择，则弹出信息输入窗口。

具体地，信息输入窗口可以定义“项目名称”。然后选择“硬件”，硬件型号是根据项目类型匹配的。选择“主题”，描述项目内容，定义标签。单击“确定”，项目创建成功。

步骤33：响应于信息输入窗口被填写信息且确定按钮被触发，则在显示界面中显示第一显示区域、第二显示区域和第三显示区域。

在一些实施例中，响应于对应已创建的待选择图标被选择，则在显示界面中显示第一显示区域、第二显示区域、第三显示区域和第四显示区域；其中，第四显示区域用于显示被选择的待选择图标对应的项目中的多个已创建控件；其中，多个已创建控件按照在第二显示区域中的创建时间顺次排序。响应于第一显示区域中的目标控件被选择，将目标控件移动至第一页面。响应于第四显示区域中的已创建控件被选择，将第一页面对应的已创建控件置于顶层显示。

在一些实施例中，响应于第一页面被保存，则将第一页面悬浮显示，并虚化所述第一显示区域和所述第三显示区域之后，响应于创建按钮被选择，在第二显示区域创建第二页面，并将第一页面与所述第二页面关联；响应于第二页面被保存，则将第一页面和所述第二页面依次悬浮显示，并虚化第一显示区域和第三显示区域。

在一些实施例中，第四显示区域设置有保存按钮，用于在保存按钮被选择时，对第二显示区域的第一页面和第二页面进行保存。

参阅图5，图5是本申请提供的界面显示方法另一实施例的流程示意图。该方法包括：

步骤51：在显示界面中显示第一显示区域、第二显示区域和第三显示区域。

步骤52：响应于第一显示区域中的图片控件被选择，将图片控件移动至第二显示区域中的第一页面。

步骤53：向在第三显示区域中对应图片控件的每个帧属性添加对应的目标图片，以使图片控件逐帧显示目标图片。

在本实施例中，选取的目标图片不以中文命名，且像素不大于当前屏幕。避免后续编译故障，且图片失真。

在一些实施例中，选取需要作为逐帧动画的素材，依次添加到第三显示区域中对应图片控件的属性的添加帧里，把开启按钮打开，再在内容里添加一张图片作为起始图片。

步骤54：响应于第一页面被保存，则将第一页面悬浮显示，并虚化第一显示区域和第三显示区域。

在一些实施例中，响应于第一页面被保存，则将第一页面中的目标控件进行编译并保存，且将第一页面悬浮显示，并虚化第一显示区域和第三显示区域，并基于目标控件调用云端相应的GUI API、UI组件抽象库、GUI库编译得到预设封装包。

在一些实施例中，显示界面还包括第五显示区域，第五显示区域设置有编译按钮；响应于第一页面被保存，则切换至事件编辑页面；其中，事件编辑页面用于将第二显示区域中的所述目标控件进行逻辑编辑；响应于编译按钮被选择，则按照事件编辑页面输入的逻辑编辑信息进行编译并保存。

通过上述的实施例可以通过拖拽控件的方式生成固件的烧录数据，该数据可存储于服务器。

参阅图6，图6是本申请提供的数据烧录方法一实施例的流程示意图。该方法包括：

步骤61：烧录工具获取目标烧录设备的标识信息。

在一些实施例中，标识信息可以是目标烧录设备中芯片的序列号。

步骤62：向终端设备发送目标烧录设备的标识信息，以使终端设备反馈烧录数据；其中，烧录数据是在终端设备的显示界面进行控件拖拽产生的。

在一些实施例中，向终端设备发送目标烧录设备的标识信息，以使终端设备向服务器发送标识信息，使服务器基于标识信息编译烧录数据并反馈。

具体地，服务器中存储有所有目标烧录设备的标识信息，在接收到一个标识信息时，则进行查找，找到后基于标识信息编译对应版本的烧录数据。

步骤63：向目标烧录设备发送烧录数据，以使目标烧录设备完成数据烧录。

在一些实施例中，烧录工具与目标烧录设备一体设置；目标烧录设备与终端设备通信连接，向终端设备发送标识信息，以使终端设备向服务器发送标识信息，在服务器验证标识信息通过后，反馈对应标识信息的烧录数据。

在一些实施例中，基于目标烧录设备在预设的开发环境中设计相应的程序；在云端对程序进行编译，以得到烧录数据；通过USB数据线或蓝牙传输的方式向烧录工具发送烧录数据，以使烧录工具向目标烧录设备发送烧录数据，并基于烧录数据完成数据烧录。具体地，可以按照上述实施例中的方式生成封装包，并在云端进行编译，然后通过在显示界面点击对应下载的控件，从云端下载并通过USB数据线或蓝牙传输的方式发送给烧录工具，以使烧录工具向目标烧录设备发送烧录数据，并基于烧录数据完成数据烧录。通过这样的方式，将不同芯片平台的开发编译环境集成在云端用户只需要通过usb线或者无线连接的方式即可完成整个跨平台开发及烧录环境的搭建，无需在本地搭建任何复杂的上位机软件以及各种IDE软件开发环境，通过统一开发和烧录模式的方式，大大减小开发者跨平台学习的成本同时也为新的芯片快速接入已有的应用提供了一个快速通用的实现方式。

在一应用场景中，参阅图7，目标烧录设备向烧录工具发送标识信息；烧录工具向终端设备发送目标烧录设备的标识信息。终端设备基于标识信息反馈烧录数据至烧录工具；其中，烧录数据是在终端设备的显示界面进行控件拖拽产生的。烧录工具向目标烧录设备发送烧录数据，以使目标烧录设备完成数据烧录。其中，烧录工具可以通过蓝牙、WiFi等无线方式与终端设备连接，也可以通过数据线的方式与终端设备连接。

在本实施例中，通过烧录工具获取目标烧录设备的标识信息；向终端设备发送目标烧录设备的标识信息，以使终端设备反馈烧录数据；其中，烧录数据是在终端设备的显示界面进行控件拖拽产生的；向目标烧录设备发送烧录数据，以使目标烧录设备完成数据烧录。能够快速实现固件烧录，减少重复搭建编译环境的困绕，提升数据烧录效率。

参阅图8，图8是本申请提供的数据烧录方法另一实施例的流程示意图。该方法包括：

步骤81：目标烧录设备向烧录工具发送标识信息，以使烧录工具向终端设备发送标识信息，以使终端设备反馈烧录数据；其中，烧录数据是在终端设备的显示界面进行控件拖拽产生的。

在一些实施例中，目标烧录设备向烧录工具发送标识信息，以使烧录工具向终端设备发送标识信息，以使终端设备验证标识信息通过后反馈烧录数据。

步骤82：接收烧录工具发送的烧录数据。

步骤83：基于烧录数据完成数据烧录。

在本实施例中，通过目标烧录设备向烧录工具发送标识信息，以使烧录工具向终端设备发送标识信息，以使终端设备反馈烧录数据；其中，烧录数据是在终端设备的显示界面进行控件拖拽产生的；接收烧录工具发送的烧录数据；基于烧录数据完成数据烧录。能够快速实现固件烧录，减少重复搭建编译环境的困绕，提升数据烧录效率。

参阅图9，图9是本申请提供的数据烧录方法另一实施例的流程示意图。该方法包括：

步骤91：终端设备获取烧录工具发送的标识信息，其中，标识信息是目标烧录设备发送至烧录工具的。

步骤92：基于标识信息确定烧录数据；其中，烧录数据是在终端设备的显示界面进行控件拖拽产生的。

步骤93：向烧录工具发送烧录数据，以使烧录工具向目标烧录设备发送烧录数据，并基于烧录数据完成数据烧录。

在一些实施例中，在终端设备的浏览器前端，通过XML、JSON技术以及烧录数据的具体项目和图片素材，通过上述界面显示方式的在线图形化编程的拖拽方式生成烧录数据。然后将烧录的数据上传至服务器。服务器后台根据项目信息创建对应硬件平台环境下的项目代码框架，根据X机和json数据描述还原代码和素材堆叠结构顺序，完整项目还原，云端编译项目工程，生成最终的可烧录二进制烧录文件或者升级文件。

在一些实施例中，基于目标烧录设备在预设的开发环境中设计相应的程序；在云端对程序进行编译，以得到烧录数据；通过USB数据线或蓝牙传输的方式向烧录工具发送烧录数据，以使烧录工具向目标烧录设备发送烧录数据，并基于烧录数据完成数据烧录。具体地，可以按照上述实施例中的方式生成封装包，并在云端进行编译，然后通过在显示界面点击对应下载的控件，从云端下载并通过USB数据线或蓝牙传输的方式发送给烧录工具，以使烧录工具向目标烧录设备发送烧录数据，并基于烧录数据完成数据烧录。

在本实施例中，通过终端设备获取烧录工具发送的标识信息，其中，标识信息是目标烧录设备发送至烧录工具的；基于标识信息确定烧录数据；其中，烧录数据是在终端设备的显示界面进行控件拖拽产生的；向烧录工具发送烧录数据，以使烧录工具向目标烧录设备发送烧录数据，并基于烧录数据完成数据烧录。能够快速实现固件烧录，减少重复搭建编译环境的困绕，提升数据烧录效率。

参阅图10，该电子设备100包括处理器101以及与处理器101连接的存储器102；存储器102用于存储程序数据，处理器101用于执行程序数据，以实现以下方法：

在显示界面中显示第一显示区域、第二显示区域和第三显示区域；响应于第一显示区域中的目标控件被选择，将目标控件移动至第二显示区域中的第一页面；其中，目标控件在第二显示区域处于可编辑状态；目标控件是通过对预设的GUI组件库的配置编译脚本进行配置得到的；响应于第三显示区域的目标属性被选择，将第二显示区域中的目标控件基于目标属性进行设置；响应于第一页面被保存，则将第一页面悬浮显示，并虚化第一显示区域和第三显示区域，并基于目标控件调用云端相应的GUI API、UI组件抽象库、GUI库编译得到预设封装包。

可以理解，处理器101用于执行程序数据时，还用于实现上述任一实施例方法。

参阅图11，该烧录工具110包括处理器111以及与处理器111连接的存储器112；存储器112用于存储程序数据，处理器111用于执行程序数据，以实现以下方法：

烧录工具获取目标烧录设备的标识信息；向终端设备发送目标烧录设备的标识信息，以使终端设备反馈烧录数据；其中，烧录数据是在终端设备的显示界面进行控件拖拽产生的；向目标烧录设备发送烧录数据，以使目标烧录设备完成数据烧录。

可以理解，处理器111用于执行程序数据时，还用于实现上述任一实施例方法。

参阅图12，该目标烧录设备120包括处理器121以及与处理器121连接的存储器122；存储器122用于存储程序数据，处理器121用于执行程序数据，以实现以下方法：

目标烧录设备向烧录工具发送标识信息，以使烧录工具向终端设备发送标识信息，以使终端设备反馈烧录数据；其中，烧录数据是在终端设备的显示界面进行控件拖拽产生的；接收烧录工具发送的烧录数据；基于烧录数据完成数据烧录。

可以理解，处理器121用于执行程序数据时，还用于实现上述任一实施例方法。

参阅图13，该终端设备130包括处理器131以及与处理器131连接的存储器132；存储器132用于存储程序数据，处理器131用于执行程序数据，以实现以下方法：

终端设备获取烧录工具发送的标识信息，其中，标识信息是目标烧录设备发送至烧录工具的；基于标识信息确定烧录数据；其中，烧录数据是在终端设备的显示界面进行控件拖拽产生的；向烧录工具发送烧录数据，以使烧录工具向目标烧录设备发送烧录数据，并基于烧录数据完成数据烧录。

可以理解，处理器131用于执行程序数据时，还用于实现上述任一实施例方法。

参阅图14，图14是本申请提供的计算机可读存储介质一实施例的结构示意图，计算机可读存储介质140用于存储程序数据141，程序数据141在被处理器执行时，用于实现以下的方法步骤：

在显示界面中显示第一显示区域、第二显示区域和第三显示区域；响应于第一显示区域中的目标控件被选择，将目标控件移动至第二显示区域中的第一页面；其中，目标控件在第二显示区域处于可编辑状态；响应于第三显示区域的目标属性被选择，将第二显示区域中的目标控件基于目标属性进行设置；响应于第一页面被保存，则将第一页面悬浮显示，并虚化第一显示区域和第三显示区域。

或，烧录工具获取目标烧录设备的标识信息；向终端设备发送目标烧录设备的标识信息，以使终端设备反馈烧录数据；其中，烧录数据是在终端设备的显示界面进行控件拖拽产生的；向目标烧录设备发送烧录数据，以使目标烧录设备完成数据烧录。

或，目标烧录设备向烧录工具发送标识信息，以使烧录工具向终端设备发送标识信息，以使终端设备反馈烧录数据；其中，烧录数据是在终端设备的显示界面进行控件拖拽产生的；接收烧录工具发送的烧录数据；基于烧录数据完成数据烧录。

或，终端设备获取烧录工具发送的标识信息，其中，标识信息是目标烧录设备发送至烧录工具的；基于标识信息确定烧录数据；其中，烧录数据是在终端设备的显示界面进行控件拖拽产生的；向烧录工具发送烧录数据，以使烧录工具向目标烧录设备发送烧录数据，并基于烧录数据完成数据烧录。

可以理解，程序数据141在被处理器执行时，还用于实现上述任一实施例方法。

在本申请所提供的几个实施方式中，应该理解到，所揭露的方法以及设备，可以通过其它的方式实现。例如，以上所描述的设备实施方式仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施方式方案的目的。

另外，在本申请各个实施方式中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

上述其他实施方式中的集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本申请各个实施方式所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，RandomAccess Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅为本申请的实施方式，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。

Claims (6)

1.一种界面显示方法，其特征在于，所述方法包括：

在显示界面中显示第一显示区域、第二显示区域和第三显示区域；

响应于所述第一显示区域中的目标控件被选择，将所述目标控件移动至所述第二显示区域中的第一页面；其中，所述目标控件在所述第二显示区域处于可编辑状态；其中，所述目标控件是通过对预设的GUI组件库的配置编译脚本进行配置得到的；

响应于所述第三显示区域的目标属性被选择，将所述第二显示区域中的所述目标控件基于所述目标属性进行设置；

响应于所述第一页面被保存，则将所述第一页面悬浮显示，并虚化所述第一显示区域和所述第三显示区域，并基于所述目标控件调用云端相应的GUI API、UI组件抽象库、GUI库编译得到预设封装包；

所述在显示界面中显示第一显示区域、第二显示区域和第三显示区域之前，包括：

在所述显示界面中显示多个芯片图标；

响应于目标芯片图标被选择，基于所述目标芯片图标得到与所述目标芯片图标对应系统的配置编译脚本；

基于所述配置编译脚本，得到对应系统及所述目标芯片的GUI组件库；

所述基于所述配置编译脚本，得到对应系统及所述目标芯片的GUI组件库之前，包括：

在所述显示界面中显示待选择图标；其中，待选择图标被分为新创建和已创建；

响应于对应新创建的所述待选择图标被选择，则弹出信息输入窗口；

响应于所述信息输入窗口被填写信息且确定按钮被触发，则在显示界面中显示所述第一显示区域、所述第二显示区域和所述第三显示区域；

响应于对应已创建的所述待选择图标被选择，则在显示界面中显示所述第一显示区域、所述第二显示区域、所述第三显示区域和第四显示区域；其中，所述第四显示区域用于显示被选择的所述待选择图标对应的项目中的多个已创建控件；其中，所述多个已创建控件按照在所述第二显示区域中的创建时间顺次排序；

所述响应于所述第一显示区域中的目标控件被选择，将所述目标控件移动至所述第二显示区域中的第一页面，包括：

响应于所述第一显示区域中的目标控件或所述第四显示区域中的已创建控件被选择，将所述目标控件移动至所述第一页面或将所述第一页面对应的所述已创建控件置于顶层显示；

所述第四显示区域设置有创建按钮；

所述响应于所述第一页面被保存，则将所述第一页面悬浮显示，并虚化所述第一显示区域和所述第三显示区域之后，包括：

响应于所述创建按钮被选择，在所述第二显示区域创建第二页面，并将所述第一页面与所述第二页面关联；

响应于所述第二页面被保存，则将所述第一页面和所述第二页面依次悬浮显示，并虚化所述第一显示区域和所述第三显示区域。

2.根据权利要求1所述的方法，其特征在于，

所述目标控件为图片控件；

所述响应于所述第一显示区域中的目标控件被选择，将所述目标控件移动至所述第二显示区域中的第一页面，包括：

响应于所述第一显示区域中的图片控件被选择，将所述图片控件移动至所述第二显示区域中的第一页面；

所述响应于所述第三显示区域的目标属性被选择，将所述第二显示区域中的所述目标控件基于所述目标属性进行设置，包括：

向在所述第三显示区域中对应所述图片控件的每个帧属性添加对应的目标图片，以使所述图片控件逐帧显示所述目标图片。

3.根据权利要求1所述的方法，其特征在于，

所述响应于所述第一页面被保存，则将所述第一页面悬浮显示，并虚化所述第一显示区域和所述第三显示区域，包括：

响应于所述第一页面被保存，则将所述第一页面中的所述目标控件进行编译并保存，且将所述第一页面悬浮显示，并虚化所述第一显示区域和所述第三显示区域。

4.根据权利要求3所述方法，其特征在于，

所述显示界面还包括第五显示区域，所述第五显示区域设置有编译按钮；

所述响应于所述第一页面被保存，则将所述第一页面中的所述目标控件进行编译并保存，包括：响应于所述第一页面被保存，则切换至事件编辑页面；其中，所述事件编辑页面用于将所述第二显示区域中的所述目标控件进行逻辑编辑；

响应于所述编译按钮被选择，则按照所述事件编辑页面输入的逻辑编辑信息进行编译并保存。

5.一种电子设备，其特征在于，所述电子设备包括处理器以及与所述处理器连接的存储器；

所述存储器用于存储程序数据，所述处理器用于执行所述程序数据，以实现如权利要求1-4任一项所述的方法。

6.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质用于存储程序数据，所述程序数据在被处理器执行时，用于实现如权利要求1-4任一项所述的方法。

Images