[发明专利]用户界面代码的生成方法和插件

说明书

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

技术领域

本发明属于计算机技术领域，特别涉及一种用户界面代码的生成方法和插件。

背景技术

用户界面是用户与终端之间的媒介，用户通过用户界面与终端进行信息交互。因此，用户界面的质量直接关系到终端上应用程序的性能能否充分发挥，能否使用户准确、高效、轻松、愉快地使用。而用户界面的开发流程是实现高质量用户界面的重要环节。

现有技术中，用户界面的开发流程通常是UI(User Interface，用户界面)设计师在制图平台中把关于UI的所有信息，如组件的颜色、字体等信息描述了一遍，然后生成UI标注图，并设计切图，然后将其提供给程序开发人员。程序开发人员收到UI标注图和切图后，按照UI标注图和切图进行终端平台(如IOS、Android)UI的程序开发，即需要把UI设计师在制图平台中描述的关于UI的所有信息编写到代码里，实现运行在相应终端平台的UI，即实现UI的还原，该过程相当于将同样一份信息再描述了一遍。同时通常同一个界面会被分别在IOS和Android平台下各自实现，该过程相当于将同样一份信息又描述了一遍，如此，为了实现UI的还原，同样一份信息需被描述三遍，开发流程的工作重复性强。

为了还原UI设计师的设计，程序开发人员需细致地工作，由于需要细致地工作，所以UI的还原很费程序开发人员的精力，同时开发过程属于不难但繁琐、缺乏创造性的工作，对于好的程序开发人员来说，这类工作很容易使人疲劳，从而降低UI的开发效率。

发明内容

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

在如上所述的生成方法中，优选地，所述普通组件选择指令包括多个普通组件标识，多个所述普通组件标识分为第一普通组件标识和其他普通组件标识，所述第一普通组件标识与所述其他普通组件标识为父子关系。

在如上所述的生成方法中，优选地，根据接收的属性设置指令设置所述普通组件的属性，所述属性设置指令包括类型、按下颜色、按下跳转类型。

在如上所述的生成方法中，优选地，接收移动终端操作系统模拟器或移动终端的应用程序发送的预览指令，所述预览指令触发所述插件将所述制图平台下的用户界面生成解释性语言代码、并下载到所述应用程序上以使所述制图平台下的用户界面实际运行在所述移动终端操作系统模拟器或移动终端。