用户界面代码的生成方法和插件技术

本发明专利技术公开了一种用户界面代码的生成方法和插件。方法包括插件在开放API的制图平台中加载成功运行；根据接收的页面组件选择指令将在预设组件库中与页面组件选择指令对应的页面组件显示在制图平台的工作区上；根据接收的普通组件选择指令将在预设组件库中与普通组件选择指令对应的普通组件显示在页面组件上；根据接收的布局设置指令调整普通组件在页面组件上的位置；制图平台根据在普通组件上接收的切片标志位设置指令对切片进行标记，从而形成制图平台下的用户界面；插件根据接收的代码生成指令、预设的代码模板与界面描述文件模板、和制图平台下的用户界面生成终端运行下的用户界面代码。本发明专利技术能改进工作流程，减少重复工作，提升开发效率。

【技术实现步骤摘要】
用户界面代码的生成方法和插件
本专利技术属于计算机
，特别涉及一种用户界面代码的生成方法和插件。
技术介绍
用户界面是用户与终端之间的媒介，用户通过用户界面与终端进行信息交互。因此，用户界面的质量直接关系到终端上应用程序的性能能否充分发挥，能否使用户准确、高效、轻松、愉快地使用。而用户界面的开发流程是实现高质量用户界面的重要环节。现有技术中，用户界面的开发流程通常是UI(UserInterface，用户界面)设计师在制图平台中把关于UI的所有信息，如组件的颜色、字体等信息描述了一遍，然后生成UI标注图，并设计切图，然后将其提供给程序开发人员。程序开发人员收到UI标注图和切图后，按照UI标注图和切图进行终端平台(如IOS、Android)UI的程序开发，即需要把UI设计师在制图平台中描述的关于UI的所有信息编写到代码里，实现运行在相应终端平台的UI，即实现UI的还原，该过程相当于将同样一份信息再描述了一遍。同时通常同一个界面会被分别在IOS和Android平台下各自实现，该过程相当于将同样一份信息又描述了一遍，如此，为了实现UI的还原，同样一份信息需被描述三遍，开发流程的工作重复性强。为了还原UI设计师的设计，程序开发人员需细致地工作，由于需要细致地工作，所以UI的还原很费程序开发人员的精力，同时开发过程属于不难但繁琐、缺乏创造性的工作，对于好的程序开发人员来说，这类工作很容易使人疲劳，从而降低UI的开发效率。
技术实现思路
为了解决上述问题，本专利技术提供了一种用户界面代码的生成方法，其包括：插件在开放应用程序编程接口API的制图平台中加载成功并运行；根据接收的页面组件选择指令，将在预设组件库中与所述页面组件选择指令对应的页面组件显示在所述制图平台的工作区上；根据接收的普通组件选择指令，将在所述预设组件库中与所述普通组件选择指令对应的普通组件显示在所述页面组件上，所述普通组件选择指令包括的普通组件标识中未含有页面组件标识；根据接收的布局设置指令调整所述普通组件在所述页面组件上的位置，所述布局设置指令包括相对布局信息；所述制图平台根据在所述普通组件上接收的切片标志位设置指令，对所述切片标志位设置指令操作的切片进行标记，从而形成所述制图平台下的用户界面；所述插件根据接收的代码生成指令、预设的代码模板与界面描述文件模板、和所述制图平台下的用户界面，生成终端运行下的用户界面代码，所述代码生成指令包括代码模板标识。在如上所述的生成方法中，优选地，所述普通组件选择指令包括多个普通组件标识，多个所述普通组件标识分为第一普通组件标识和其他普通组件标识，所述第一普通组件标识与所述其他普通组件标识为父子关系。在如上所述的生成方法中，优选地，根据接收的属性设置指令设置所述普通组件的属性，所述属性设置指令包括类型、按下颜色、按下跳转类型。在如上所述的生成方法中，优选地，接收移动终端操作系统模拟器或移动终端的应用程序发送的预览指令，所述预览指令触发所述插件将所述制图平台下的用户界面生成解释性语言代码、并下载到所述应用程序上以使所述制图平台下的用户界面实际运行在所述移动终端操作系统模拟器或移动终端。本专利技术还提供了一种插件，其加载于开放API接口的制图平台中并运行，包括：页面组件选择单元，用于接收页面组件选择指令，根据所述页面组件选择指令将在预设组件库中与所述页面组件选择指令对应的页面组件显示在所述制图平台的工作区上；普通组件选择单元，用于接收普通组件选择指令，根据所述普通组件选择指令将在所述预设组件库中与所述普通组件选择指令对应的普通组件显示在所述页面组件上，所述普通组件选择指令包括的普通组件标识中未含有页面组件标识；布局设置单元，用于接收布局设置指令，根据所述布局设置指令调整所述普通组件在所述页面组件上的位置，所述布局设置指令包括相对布局信息；标记接收单元，用于接收所述制图平台作用于显示在所述页面组件上的普通组件的切片的切片标志位设置指令，所述切片标志位设置指令用于对所述切片进行标记；代码生成单元，用于根据接收的代码生成指令、预设的代码模板与界面描述文件模板、和所述制图平台下的用户界面，生成终端运行下的用户界面代码，所述代码生成指令包括代码模板标识。在如上所述的插件中，优选地，所述普通组件选择指令包括多个普通组件标识，多个所述普通组件标识分为第一普通组件标识和其他普通组件标识，所述第一普通组件标识与所述其他普通组件标识为父子关系。在如上所述的插件中，优选地，所述插件还包括：属性设置单元，用于接收属性设置指令，根据所述属性设置指令设置所述普通组件的属性，所述属性设置指令包括类型、按下颜色、按下跳转类型。在如上所述的插件中，优选地，所述插件还包括：预览单元，用于接收移动终端操作系统模拟器或移动终端的应用程序发送的预览指令，所述预览指令触发所述插件将所述制图平台下的用户界面生成解释性语言代码、并下载到应用程序上以使所述制图平台下的用户界面实际运行在所述移动终端操作系统模拟器或移动终端。本专利技术实施例提供的技术方案带来的有益效果是：改进了工作流程，减少了重复工作，提升了开发效率。附图说明图1为本专利技术实施例提供的一种用户界面代码的生成方法的流程示意图。具体实施方式为使本专利技术的目的、技术方案和优点更加清楚，下面将结合附图对本专利技术实施方式作进一步地详细描述。参见图1，本专利技术实施例提供了一种用户界面代码的生成方法，其包括如下步骤：步骤101，插件在开放应用程序编程接口API的制图平台中加载成功并运行。具体地，开放API(ApplicationProgrammingInterface，应用程序编程接口)的制图平台可以为用于UI(UserInterface，用户界面)设计的Sketch制图平台，随着技术的发展，还可以为其他制图平台，本实施例对此不进行限定。先运行该制图平台，然后加载插件应用程序，加载成功后，即可进行后续步骤操作。步骤102，根据接收的页面组件选择指令，将在预设组件库中与页面组件选择指令对应的页面组件显示在制图平台的工作区上。具体地，用户在插件上可以以点击页面组件按钮或输入页面组件名称或拖拽页面组件的方式输入页面组件选择指令，该指令含有页面组件标识。插件在接收到该指令后，获取该指令的页面组件标识，根据页面组件标识在预设组件库中进行查找，将查找到的与页面组件标识对应的页面组件在制图平台的工作区上显示出来。页面组件具有自适应终端屏幕大小的属性，从而可以随着终端屏幕大小的改变而改变。优选地，插件显示的页面组件上还可以显示有导航栏。在其他的实施例中，还可以在开放API的制图平台上由用户输入页面组件选择指令，并由该制图平台显示与页面组件选择指令对应的页面组件。步骤103，根据接收的普通组件选择指令，将在预设组件库中与普通组件选择指令对应的普通组件显示在页面组件上，普通组件选择指令包括的普通组件标识中未含有页面组件标识。具体地，用户在插件上(如插件的组件选择面板)可以以点击普通组件按钮或输入普通组件名称或拖拽普通组件的方式输入普通组件选择指令，该指令含有普通组件标识，但不含有页面组件标识，即在本实施例中页面组件不属于普通组件的一种，插件在接收到该指令后，在预设组件库中根据普通组件标识进行查找，将查找到的与普通组件标识对应的普通组件显示出来本文档来自技高网...

【技术保护点】
1.一种用户界面代码的生成方法，其特征在于，所述生成方法包括：插件在开放应用程序编程接口API的制图平台中加载成功并运行；根据接收的页面组件选择指令，将在预设组件库中与所述页面组件选择指令对应的页面组件显示在所述制图平台的工作区上；根据接收的普通组件选择指令，将在所述预设组件库中与所述普通组件选择指令对应的普通组件显示在所述页面组件上，所述普通组件选择指令包括的普通组件标识中未含有页面组件标识；根据接收的布局设置指令调整所述普通组件在所述页面组件上的位置，所述布局设置指令包括相对布局信息；所述制图平台根据在所述普通组件上接收的切片标志位设置指令，对所述切片标志位设置指令操作的切片进行标记，从而形成所述制图平台下的用户界面；所述插件根据接收的代码生成指令、预设的代码模板与界面描述文件模板、和所述制图平台下的用户界面，生成终端运行下的用户界面代码，所述代码生成指令包括代码模板标识。

【技术特征摘要】
1.一种用户界面代码的生成方法，其特征在于，所述生成方法包括：插件在开放应用程序编程接口API的制图平台中加载成功并运行；根据接收的页面组件选择指令，将在预设组件库中与所述页面组件选择指令对应的页面组件显示在所述制图平台的工作区上；根据接收的普通组件选择指令，将在所述预设组件库中与所述普通组件选择指令对应的普通组件显示在所述页面组件上，所述普通组件选择指令包括的普通组件标识中未含有页面组件标识；根据接收的布局设置指令调整所述普通组件在所述页面组件上的位置，所述布局设置指令包括相对布局信息；所述制图平台根据在所述普通组件上接收的切片标志位设置指令，对所述切片标志位设置指令操作的切片进行标记，从而形成所述制图平台下的用户界面；所述插件根据接收的代码生成指令、预设的代码模板与界面描述文件模板、和所述制图平台下的用户界面，生成终端运行下的用户界面代码，所述代码生成指令包括代码模板标识。2.根据权利要求1所述的生成方法，其特征在于，所述普通组件选择指令包括多个普通组件标识，多个所述普通组件标识分为第一普通组件标识和其他普通组件标识，所述第一普通组件标识与所述其他普通组件标识为父子关系。3.根据权利要求1所述的生成方法，其特征在于，所述根据接收的普通组件选择指令，将在所述预设组件库中与所述普通组件选择指令对应的普通组件显示在所述制图平台的工作区上之后，还包括：插件根据接收的属性设置指令设置所述普通组件的属性，所述属性设置指令包括类型、按下颜色、按下跳转类型。4.根据权利要求1所述的生成方法，其特征在于，所述生成方法还包括：接收移动终端操作系统模拟器或移动终端的应用程序发送的预览指令，所述预览指令触发所述插件将所述制图平台下的用户界面生成解释性语言代码、并下载到所述应用程序上以使所述制图平台下的用户界面实际运行在所述移动终端操作系统模拟器或移动终端。5.一...

【专利技术属性】
技术研发人员：连向辉，
申请(专利权)人：连向辉，
类型：发明
国别省市：北京,11