CN111399811A - 可视化页面开发的方法、装置、设备以及存储介质 - Google Patents

Abstract

本申请实施例提供了一种可视化页面开发的方法、装置、设备以及存储介质，涉及计算机视觉技术。具体实现方案为：启动预设开发工具；根据通过预设开发工具的可视化操作界面输入的页面开发信息，生成页面代码；页面开发信息包括：项目创建信息、页面配置信息、页面内容信息以及编译信息。本申请实施例中页面代码生成的各环节均采用相同的开发工具，提高了页面开发效率。

Description

可视化页面开发的方法、装置、设备以及存储介质

技术领域

本申请实施例涉及计算机技术，尤其涉及一种计算机视觉技术。

背景技术

随着智能终端的迅速发展，用户之间可以通过智能终端的页面分享功能来实现信息的快速传递，因此，页面开发具有重要的意义。

目前页面开发过程包括页面代码的生成，页面代码的生成过程基本包括创建项目、创建页面以及配置页面、页面生成、编译等环节，但是上述各环节是独立进行的，使得页面代码的生成效率不高，进而页面开发效率不高。

发明内容

本申请提供了一种用于可视化页面开发的方法、装置、设备以及存储介质，本申请中的页面开发过程中页面代码生成的各环节均采用相同的开发工具，提高了页面开发效率。

根据第一方面，提供了一种可视化页面开发的方法。一种可视化页面开发方法，包括：启动预设开发工具；根据通过所述预设开发工具的可视化操作界面输入的页面开发信息，生成页面代码；所述页面开发信息包括：项目创建信息、页面配置信息、页面内容信息以及编译信息。

目前页面的开发过程中的页面代码的生成包括的创建项目、创建页面、页面配置、页面内容生成、编译等环节，上述各环节是被分离后独立进行的，即各环节中可能对应不同种类的开发工具，比如，若在页面配置环节和页面内容生成环节所对应的开发工具不相同，则在页面配置环节完成后，开始页面内容生成环节时，需要切换开发工具，使得页面代码的生成效率不高，进而页面开发效率不高。而本方案中的页面开发过程中的创建项目、配置页面、页面内容生成、编译各环节均采用预设开发工具完成，不同的环节之间无需切换开发工具，提高了页面开发的效率。同时，终端设备根据通过预设开发工具的可视化操作界面输入的页面开发信息，生成页面代码，可以使得用户对页面的整个开发过程可视化，用户可实时了解页面开发过程，进一步提高了页面开发效率。

根据第二方面，提供了一种可视化页面开发装置，包括：启动模块，用于启动预设开发工具；生成模块，用于根据通过所述预设开发工具的可视化操作界面输入的页面开发信息，生成页面代码；所述页面开发信息包括：项目创建信息、页面配置信息、页面内容信息以及编译信息。

根据第三方面，提供了一种电子设备，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行第一方面所述的方法。

根据第四方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使所述计算机执行第一方面的方法。

根据本申请的技术提高了页面开发的效率。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本申请的限定。其中：

图1为本申请实施例提供的可视化页面开发方法的流程图一；

图2为本申请实施例提供的可视化页面开发过程示意图；

图3为本申请实施例提供的可视化页面开发方法的流程图二；

图4为本申请实施例提供的项目列表界面示意图；

图5为本申请实施例提供的终端设备的界面变化示意图一；

图6为本申请实施例提供的终端设备的界面变化示意图二；

图7为本申请实施例提供的终端设备的界面变化示意图三；

图8为本申请实施例提供的终端设备的界面变化示意图四；

图9为本申请实施例提供的终端设备的界面变化示意图五；

图10为本申请实施例提供的终端设备的界面变化示意图六；

图11为本申请实施例提供的可视化页面开发装置的结构示意图一；

图12为本申请实施例提供的可视化页面开发装置的结构示意图二；

图13是用来实现本申请实施例的可视化页面开发方法的电子设备的框图。

具体实施方式

以下结合附图对本申请的示范性实施例做出说明，其中包括本申请实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本申请的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

本申请中，“至少一个”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B的情况，其中A,B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项(个)”或其类似表达，是指的这些项中的任意组合，包括单项(个)或复数项(个)的任意组合。例如，a,b,或c中的至少一项(个)，可以表示：a,b,c,a-b,a-c,b-c,或a-b-c，其中a,b,c可以是单个，也可以是多个。本申请中术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。

本申请所涉及的页面为可以在终端设备之间进行分享的页面。

目前上述页面的开发过程中包括页面代码的生成，页面代码的生成过程基本包括创建项目、创建页面、页面配置、页面内容生成、编译等环节，但是上述各环节是被分离后独立进行的，即各环节中可能对应不同种类的开发工具，比如，若在页面配置环节和页面内容生成环节所对应的开发工具不相同，则在页面配置环节完成后，开始页面内容生成环节时，需要切换开发工具，使得页面代码的生成效率不高，进而页面开发效率不高。

为了解决上述技术问题，发明人发现若页面代码生成的各环节均对应相同的开发工具，从当前环节进入下一环节时，无需切换开发工具，则可提高页面代码的生成效率。但是目前并不存在这样的开发工具，为了克服这一技术难题，发明人开发了一种可以用于页面代码生成的各环节的开发工具，以实现页面代码生成的各环节均对应相同的开发工具的目的，提高页面代码的生成效率。

本实施例中称可以用于页面代码生成的各环节的开发工具为预设开发工具，下面通过具体的实施例说明，用户通过预设开发工具开发页面的方法。

图1为本申请实施例提供的可视化页面开发方法的流程图一，本实施例的执行主体为终端设备。参见图1，本实施的方法包括：

步骤S101、终端设备启动预设开发工具。

其中，终端设备可通过第一服务启动预设开发工具。本实施例中的第一服务可为浏览器，预设开发工具可称为工作台。终端设备通过第一服务启动预设开发工具，提供了预设开发工具的一种启动方式，保证了预设开发工具的正常启动。

预设开发工具包括两个核心部分，分别为指令集和组件库。其中指令集为对工作流各个环节操作的封装，例如创建项目、创建和配置页面、页面内容生成、编译等流程。组件库用于页面内容的快速生成，需要保证一定的组件规范，良好的参数定义和配置。

可视化页面开发装置可通过如下但不限于如下的两种方式启动预设开发工具。

一种方式中：终端设备通过第一服务启动预设开发工具包括如下的a1～a2：

a1、终端设备获取启动预设开发工具的启动指令。

终端设备可根据用户的操作显示第一界面，比如终端设备获取到用户对可开始菜单中的“命令提示符”的操作后，终端设备显示第一界面。终端设备获取用户在第一界面输入的预设开发工具启动指令。

a2、终端设备根据预设开发工具的启动指令，通过第一服务在预设的第一文件目录下启动预设开发工具。

其中，预设的第一文件目录可显示在第一界面上。

另一种方式中：终端设备通过第一服务启动预设开发工具包括如下的b1～b3：

b1、终端设备接收用户输入的第二文件目录。

终端设备接收用户在上述的第一界面中输入的第二文件目录。第一界面的显示过程同a1中所述。

b2、终端设备接收启动预设开发工具的启动指令。

终端设备获取用户在第一界面输入的预设开发工具启动指令。

b3、终端设备根据预设开发工具的启动指令，通过第一服务在第二文件目录下启动预设开发工具。

步骤S102、终端设备根据通过预设开发工具的可视化操作界面输入的页面开发信息，生成页面代码；页面开发信息包括：项目创建信息、页面配置信息、页面内容信息以及编译信息。

预设开发工具的可视化操作界面可包括：项目创建界面、页面配置界面、页面内容界面和编译界面。其中，项目创建信息可通过项目创建界面输入，页面配置信息可通过页面配置界面输入，页面内容信息可通过页面内容界面输入以及编译信息可通过页面编译界面输入。

其中，页面代码生成后被存储至第一文件目录或第二文件目录下。可以理解的是，在通过第一服务在预设的第一文件目录下启动预设开发工具时，终端设备将页面代码存储至预设的第一文件目录下。在通过第一服务在第二文件目录下启动预设开发工具时，终端设备将页面代码存储至第二文件目录下。

综上，本实施例中的页面开发过程示意图可如图2所示。图2中的模拟平台可为mock平台。

本实施例中的页面开发过程中的创建项目、配置页面、页面内容生成、编译各环节均采用预设开发工具完成，提高了页面开发的效率。同时，终端设备根据通过预设开发工具的可视化操作界面输入的页面开发信息，生成页面代码，可以使得用户对页面的整个开发过程可视化，进一步提高了页面开发效率。此外，本实施例中的页面开发过程无需用户具有专业的开发能力，适用范围广。

下面采用具体的实施例对图1所示的实施例中的步骤S102进行详细说明。

图3为本申请实施例提供的可视化页面开发方法的流程图二，本实施例的执行主体为终端设备。参见图3，本实施的方法包括：

步骤S301、终端设备根据通过项目创建界面输入的项目创建信息，生成页面框架代码。

其中，项目创建信息可为新项目的项目名称。新项目即为当前新创建的项目。

在生成页面框架代码之前还包括：终端设备通过第一服务显示项目创建界面、获取通过项目创建界面输入的新项目的项目名称和触发的项目创建指令以及通过第一服务向服务器发送项目创建指令和新项目的项目名称；终端设备接收来自服务器的项目创建命令。相应地，终端设备根据项目创建信息生成页面框架代码，包括：根据项目创建命令和新项目的项目名称通过第二服务生成页面框架代码。其中，本实施例中终端设备和服务器之间通过WebSocket技术进行即时通信。在生成页面框架代码之前终端设备获取到了项目创建命令，可实现页面框架代码的生成。

在生成页面框架代码后，终端设备通过第二服务将页面框架代码存储至第一文件目录下或第二文件目录下。

步骤S302、终端设备根据通过页面配置界面输入的页面配置信息，生成页面配置代码。

其中，页面配置信包括如下中的至少一项：页面基础信息、页面参数信息、维护信息。

页面基础信息包括如下中的至少一项：页面标题、页面描述、页面设计稿标准、渲染类型。其中，页面基础样式和页面响应式均可符合页面设计稿标准；页面设计稿标准比如可为设计图尺寸。渲染类型可为页面首屏的渲染类型。其中，页面在终端设备侧渲染还是在服务器侧渲染，可以基于具体业务场景选择。

页面参数为能够直接影响页面功能和效果的参数，同时页面参数服务于页面的基础校验能力，如果页面参数错误，会直接影响页面效果。页面参数信息包括如下中的至少一项：参数名称、参数取值、参数描述、是否为必须的参数。

维护信息包括如下中的至少一项：页面的维护用户的标识、页面地址。

在终端设备生成页面配置代码之前，还包括：终端设备通过第一服务显示页面配置界面、获取通过页面配置界面输入的页面配置信息和触发的页面配置代码生成指令以及通过第一服务向服务器发送页面配置信息和页面配置代码生成指令；终端设备接收来自服务器的页面配置代码生成命令。相应地，终端设备根据页面配置信息，获取页面配置代码，包括：终端设备根据页面配置代码生成命令和页面配置信息通过第二服务生成页面配置代码。在生成页面配置代码后，终端设备通过第二服务将页面配置代码存储至第一文件目录下或第二文件目录下。在生成页面配置代码之前终端设备获取到了页面配置代码生成命令，可实现页面配置代码的生成。

其中，在终端设备通过第一服务显示页面配置界面之前，还包括：终端设备通过第一服务显示页面创建界面；终端设备获取通过页面创建界面触发的页面配置指令。相应地，终端设备通过第一服务显示页面配置界面，包括：终端设备根据页面配置指令通过第一服务在页面创建界面上显示页面的配置项，得到页面配置界面。此处给出了一种页面配置界面的显示过程，页面配置界面的显示，使得用户可以输入的页面配置信息以完成页面开发。

其中，在终端设备通过第一服务显示页面创建界面之前，在终端设备生成页面框架代码之后，还包括：终端设备通过第二服务向服务器发送第一信息，第一信息指示页面框架代码生成成功；终端设备接收来自服务器的第二信息，第二信息指示新项目创建完成；终端设备通过第一服务显示更新后的项目列表界面，更新后的项目列表界面显示有新项目的图标；终端设备获取通过操作新项目的图标触发的页面创建指令。相应地，终端设备通过第一服务显示页面创建界面包括：终端设备根据页面创建指令通过第一服务显示页面创建界面。此处给出了一种页面创建界面的显示过程，页面创建界面的显示，使得用户可通过页面创建界面触发页面配置界面的显示，从而使得用户可以输入的页面配置信息以完成页面开发。

步骤S303、终端设备根据通过页面内容界面输入的页面内容信息，生成页面内容代码。

其中，页面内容信息包括至少一个页面组件的配置信息。页面内容即为组成页面的至少一个页面组件。页面组件可为图片、视频入口、触摸按钮等。

在终端设备生成页面内容代码之前，还包括：终端设备通过第一服务显示页面内容界面、获取通过页面内容界面输入的页面组件的配置信息和触发的页面内容代码生成指令以及通过第一服务向服务器发送所述页面内容代码生成指令和页面组件配置信息；终端设备接收来自所述服务器的页面内容代码生成命令。相应地，终端设备根据页面内容信息，生成页面内容代码，包括：终端设备根据页面内容代码生成命令和页面组件配置信息通过第二服务生成页面内容代码。在终端设备生成页面内容代码后，终端设备通过第二服务将页面内容代码存储至第一文件目录下或第二文件目录下。在生成页面内容代码之前终端设备获取到了页面内容代码生成命令，可实现页面内容代码的生成。

一种方案中，在终端设备通过第一服务显示页面内容界面之前，还包括：终端设备通过第一服务显示页面生成界面，页面生成界面包括页面组件列表；对于上述至少一个页面组件中的任意一个第一页面组件：终端设备获取通过页面组件列表触发的第一页面组件设置指令；终端设备通过第一服务显示页面内容界面，包括：终端设备根据第一页面组件设置指令通过第一服务在页面生成界面上显示第一页面组件的配置项，得到页面内容界面，第一页面组件的配置项用于输入第一页面组件的配置信息。此处给出了一种页面内容界面的显示过程，页面内容界面的显示，使得用户可以根据页面内容界面触发页面内容的生成以完成页面开发。

另一种方案中，在终端设备通过第一服务显示页面内容界面之前，还包括：终端设备通过第一服务显示页面生成界面，页面生成界面包括至少一个组件选择图标，对于至少一个组件选择图标中的任意一个第一组件选择图标：用户通过点击第一组件选择图标触发第一页面组件列表显示指令，终端设备根据第一页面组件列表显示指令通过第一服务显示第一页面组件列表。接着，对于第一页面组件列表中用于组成页面的任意一个第一页面组件：终端设备获取通过第一页面组件列表触发的第一页面组件设置指令。相应地，终端设备通过第一服务显示页面内容界面，包括：终端设备根据第一页面组件设置指令，通过第一服务在页面生成界面上显示第一页面组件的配置项，得到页面内容界面，第一页面组件的配置项用于输入第一页面组件的配置信息。

可选的，在终端设备获取通过第一页面组件配置项输入的第一页面组件的配置信息之后，还包括：终端设备通过第一服务在页面内容界面上显示第一页面组件在页面中的显示效果预览图和/或第一页面组件的代码。终端设备在页面内容界面上显示第一页面组件在页面中的显示效果预览图可以使得用户及时的获知组件的页面效果图，以便在页面效果不理想时及时的调整组件，提高了页面开发的效率。终端设备在页面内容界面上显示可以使得用户及时的获知页面组件的代码。

其中，在终端设备通过第一服务显示页面生成界面之前，包括：通过第二服务向服务器发送第三信息，第三信息指示页面配置代码生成成功；接收来自服务器的第四信息，第四信息指示页面配置完成；终端设备通过第一服务显示页面生成界面，包括：终端设备根据第四信息，通过第一服务显示页面生成界面。此处给出了一种页面生成界面的显示过程，页面生成界面的显示，使得用户可通过页面生成界面触发页面内容界面的显示，从而使得用户可根据页面内容界面触发页面内容的生成以完成页面开发。

步骤S304、终端设备根据通过编译界面输入的编译信息获取编译命令，并根据编译命令编译页面框架代码、页面配置代码和页面内容代码，得到页面代码。其中，编译信息可为编译指令。

在终端设备根据通过编译界面输入的编译信息获取编译命令之前，还包括：终端设备通过第一服务显示编译界面以及获取通过编译界面触发的编译指令。相应地，根据通过编译界面输入的编译信息获取编译命令，包括：终端设备通过第一服务将编译指令发送至服务器，接收来自服务器的编译命令。终端设备根据编译命令编译页面框架代码、页面配置代码和页面内容代码，得到页面代码。在生成页面代码之前终端设备获取到了服务器发送的编译命令，可实现页面代码的生成。

可选的，在编译过程中，编译界面上可显示编译进度以及编译中出现的问题，以方便及时的获知页面代码中的问题。

其中，在终端设备通过第一服务显示编译界面之前，还包括：终端设备通过第二服务向服务器发送第五信息，第五信息指示页面内容代码生成成功；终端设备接收来自服务器的第六信息，第六信息指示页面内容生成完成，相应地，终端设备通过第一服务显示编译界面，包括：终端设备根据第六信息，通过第一服务显示编译界面。此处给出了一种编译界面的显示过程，编译界面的显示，使得用户可以根据编译界面触发页面框架代码、页面配置代码和页面内容代码的编译过程，以完成页面开发。

通过上述的步骤S301～步骤S304生成了页面代码。

在一种方式中，编译界面上显示有可用测试设备选择列表，在终端设备获取编译命令之前，还包括：终端设备获取通过可用测试设备选择列表触发的目标测试设备选择指令。在终端设备生成页面代码之后，还包括：将页面代码发送至目标测试设备进行测试。其中，可用测试设备选择列表可为下拉式选择列表。

在另一种方式中，在终端设备生成页面代码之后，终端设备通过编译界面获取联调指令，终端设备根据联调指令，显示联调界面，在联调界面上显示可用测试设备选择列表；终端设备获取通过可用测试设备选择列表触发的目标测试设备选择指令，将页面代码发送至目标测试设备进行测试。

可选的，联调过程中编译界面或联调界面上还可显示有查看目标测试设备测试结果的链接。

在生成页面代码后，采用目标测试设备对页面代码进行测试，可以及时发现页面代码中的问题并及时解决，提高了页面开发的效率。具体来说，采用目标测试设备对页面代码进行测试，使得页面代码热更新部署，可提供即写即调的开发体验。由于前端的页面体验效果依赖静态资源的加载速度，加载速度同时又受资源大小的影响，因此预设开发工具提供目标测试设备对页面代码的检测能力，可将影响页面体验效果的因素提前消除。

本实施例给出了页面代码生成的具体实现：页面框架代码、页面配置代码和页面内容代码的生成，实现了页面代码的生成。本实施例中页面代码生成所使用的项目创建界面、页面配置界面、页面内容界面和编译界面均为同一预设开发工具的可视化操作界面，页面代码生成过程中无需切换开发工具，页面代码生成效率较高，从而页面开发效率较高。

下面以第一服务为浏览器，第二服务为操作系统，对上述实施例中的页面开发过程进行详细的说明。

其中，终端设备通过浏览器启动预设开发工具后，终端设备通过浏览器显示有项目列表界面。在已通过预设开发工具创建过项目时，项目列表界面上可显示有已经创建的项目的图标。一种可能的项目列表界面可如图4所示，参见图4，图4中的41、42、43和44均为已经创建的项目的图标。

接着，用户可通过项目列表界面触发新建项目指令，即终端设备获取通过项目列表界面触发新建项目指令，根据该新建项目指令，通过浏览器显示项目创建界面。对应的一种可能的界面变化示意图如图5所示。参见图5中的A图，当前界面为项目列表界面，用户通过点击“新建项目”图标触发新建项目指令，项目列表界面更新为项目创建界面，如图5中的B图所示。

接着，用户通过项目创建界面输入新项目的项目名称，终端设备获取用户输入的项目名称。用户在输入新项目的项目名称后，通过项目创建界面触发项目创建指令，即终端设备获取通过项目创建界面触发项目创建指令，终端设备通过浏览器向服务器发送项目创建指令和新项目的项目名称。服务器根据项目创建指令和新项目的项目名称获取项目创建命令，并发送项目创建命令至终端设备，终端设备接收项目创建命令，终端设备的操作系统根据项目创建命令和项目名称生成页面框架代码。终端设备在生成页面框架代码后通过操作系统向服务器发送第一信息，第一信息指示页面框架代码生成成功。服务器接收到第一信息后，向终端设备发送第二信息，第二信息指示新项目创建完成。终端设备接收到第二信息后，通过浏览器显示更新后的项目列表界面，更新后的项目列表界面显示有新项目的图标。对应的一种可能的界面变化示意图如图6所示。参见图6中的A图，当前界面为项目创建界面，用户通过项目创建界面的产品下拉式列表选择新项目对应的产品“全民”，通过方向输入框输入方向“随版：app；用户增长。新项目的项目名称包括：新项目对应的产品和方向。接着，用户点击“创建”图标触发项目创建指令，经过上述的终端设备和服务器之间的交互后，通过浏览器显示更新后的项目列表界面，即更新项目创建界面为更新后的项目列表界面，如图6中的B图所示，更新后的项目列表界面显示有新项目的图标45。

接着，用户操作新项目的图标触发的页面创建指令，即终端设备获取用户操作新项目的图标触发的页面创建指令，终端设备根据页面创建指令通过浏览器显示页面创建界面。用户通过页面创建界面触发页面配置指令，即终端设备获取通过页面创建界面触发的页面配置指令；终端设备根据页面配置指令通过浏览器在页面创建界面上显示页面的配置项，得到页面配置界面。用户通过页面配置界面输入页面的配置项的信息，得到页面配置信息。用户通过页面配置界面触发页面配置代码生成指令，即终端设备获取通过页面配置界面触发的页面配置代码生成指令，并通过浏览器向服务器发送页面配置信息和页面配置代码生成指令。服务器根据页面配置信息和页面配置代码生成指令获取页面配置代码生成命令，并向终端设备发送页面配置代码生成命令。终端设备的操作系统根据页面配置代码生成命令和页面配置信息生成页面配置代码。终端设备生成页面配置代码后，通过操作系统向服务器发送第三信息，第三信息指示页面配置代码生成成功。服务器接收到第三信息后，向终端设备发送第四信息，第四信息指示页面配置完成。终端设备根据第四信息，通过浏览器显示页面生成界面，页面生成界面包括页面组件列表。对应的一种可能的界面变化示意图如图7所示。参见图7中的A图，当前界面为更新后的项目列表界面，用户通过点击新项目的图标触发页面创建指令，终端设备根据页面创建指令，通过浏览器显示页面创建界面，即将更新后的项目列表界面更新为页面创建界面，如图7中的B图所示。接着，如图7中的C图所示，用户通过点击页面创建界面中的“新建页面”图标触发页面配置指令，终端设备根据页面配置指令在页面创建界面上显示页面的配置项，得到页面配置界面，如图7中的D图所示。如图7中的E图所示，用户输入页面的配置项的信息，得到页面配置信息后，点击“保存”图标后触发页面配置代码生成指令。经过上述终端设备和服务器之间的交互后，终端设备更新页面配置界面为页面生成界面，如图7中的F图所示。

接着，对于页面生成界面中用于生成页面的内容的至少一个页面组件中的任意一个第一页面组件，用户通过页面组件列表触发第一页面组件设置指令，即终端设备获取通过页面组件列表触发的第一页面组件设置指令。终端设备根据第一页面组件设置指令，通过浏览器在页面生成界面上显示第一页面组件的配置项，得到页面内容界面，用户输入第一页面组件的配置项的信息；可选的，还可通过浏览器在页面内容界面上显示第一页面组件在页面中的显示效果预览图和/或第一页面组件的代码。在用于生成页面的内容的至少一个页面组件中的各页面组件的配置项被输入信息后，页面组件配置信息获取完毕，即页面的内容生成完成。用户通过页面内容界面触发页面内容代码生成指令，即终端设备获取用户通过页面内容界面触发的页面内容代码生成指令，并通过浏览器向服务器发送页面内容代码生成指令和页面组件配置信息。服务器根据页面组件配置信息和页面内容代码生成指令，获取页面内容代码生成命令，并向终端设备发送页面内容代码生成命令。终端设备的操作系统根据页面内容代码生成命令和页面组件配置信息生成页面内容代码。终端设备生成页面内容代码后，通过操作系统向服务器发送第五信息，第五信息指示页面内容代码生成成功。服务器接收到第五信息后，生成第六信息，并向终端设备发送第六信息，第六信息指示页面内容生成完成。终端设备根据第六信息，通过浏览器显示编译界面。对应的一种可能的界面变化示意图如图8所示。参见图8中的A图，当前界面为页面生成界面，页面生成界面包括第一组件选择图标81和第二组件选择图标82，用户通过点击第一组件选择图标81触发页面组件列表显示指令，如图中的B图所示，终端设备根据页面组件列表显示指令显示页面显示组件列表83，如图中的C图所示。接着，用户通过点击组件列表83中的轮播图组件(相当于第一页面组件)触发轮播图组件设置指令，终端设备显示轮播图组件的配置项，得到页面内容界面，如图8中的D图所示。接着，如图8中的E图所示，用户输入轮播图组件的配置项的信息，得到轮播图组件的配置信息。页面内容界面上还可显示轮播图组件在页面中的显示效果预览图以及轮播图组件的代码。在用于生成页面的内容的各页面组件均配置完成后，用户点击“保存”图标后触发页面内容代码生成指令。经过上述终端设备和服务器之间的交互后，终端设备更新页面内容界面为编译界面，如图8中的F图所示。

接着，用户通过编译界面触发编译指令，即终端设备获取通过编译界面触发的编译指令。终端设备通过浏览器向服务器发送编译指令，服务器根据编译指令获取编译命令，并向终端设备发送编译命令。终端设备接收到编译命令后，终端设备的操作系统根据编译命令对编译页面框架代码、页面配置代码和页面内容代码，得到页面代码。在编译过程中，编译界面上可显示编译进度以及编译中出现的问题。对应的一种可能的界面变化示意图如图9所示。参见图9中的A图，当前界面为编译界面，用户通过点击编译界面中的“启动”图标触发编译指令。经过上述终端设备和服务器之间的交互后，终端设备进行编译，并在区域91显示编译进度，如图9中的B图所示。

通过上述过程生成了页面代码。

进一步地，在终端设备生成页面代码之后，还可包括：通过编译界面触发联调指令，终端设备根据联调指令通过浏览器显示联调界面，在联调界面上显示可用测试设备选择列表；终端设备获取通过可用测试设备选择列表触发的目标测试设备选择指令，将页面代码发送至目标测试设备进行测试。可选的，联调过程中编译界面上还可显示有查看目标测试设备测试结果的链接。对应的一种可能的界面变化示意图如图10所示。参见图10中的A图，当前界面为编译界面，用户通过点击编译界面中的“联调”图标触发联调指令，显示联调界面，联调界面上显示测试设备下拉式选择列表，如图10中的B图所示。用户通过测试设备下拉式选择列表触发测试设备选择指令，比如图10中的C图中显示的推送地址所对应的测试设备1。终端设备将页面代码发送至测试设备1进行测试。

以上对本申请的页面开发方法进行了说明，下面对本申请的页面开发装置进行说明。

图11为本申请实施例提供的可视化页面开发装置的结构示意图，可视化页面开发装置可为终端设备的一部分或全部。参见图11，本实施例的装置包括启动模块1101和生成模块1102。

启动模块1101，用于启动预设开发工具；生成模块1102，用于根据通过所述预设开发工具的可视化操作界面输入的页面开发信息，生成页面代码；所述页面开发信息包括：项目创建信息、页面配置信息、页面内容信息以及编译信息。

可选的，所述预设开发工具的可视化操作界面：项目创建界面、页面配置界面、页面内容界面和编译界面；所述生成模块1102，具体用于：根据通过项目创建界面输入的所述项目创建信息，生成页面框架代码；根据通过页面配置界面输入的所述页面配置信息，生成页面配置代码；根据通过页面内容界面输入的所述页面内容信息，生成页面内容代码；根据通过编译界面输入的编译信息获取编译命令，并根据所述编译命令编译所述页面框架代码、页面配置代码和页面内容代码，得到所述页面代码。

可选的，所述启动模块1101，具体用于：通过第一服务启动所述预设开发工具。

本实施例的装置，可以用于执行上述方法实施例的技术方案，其实现原理和技术效果类似，此处不再赘述。

图11为本申请实施例提供的可视化页面开发装置的结构示意图二，本实施例在图11所示的装置的基础上做了进一步的改进。参见图11，本实施例的装置在图11所示的装置的基础上还包括显示模块1103、获取模块1104和收发模块1105。

其中，所述项目创建信息包括：项目名称；在所述生成模块1102生成页面框架代码之前：所述显示模块1103用于通过所述第一服务显示项目创建界面，所述获取模块1104用于通过所述项目创建界面输入的新项目的项目名称和触发的项目创建指令，所述收发模块1105用于通过所述第一服务向服务器发送所述项目创建指令和所述项目名称以及接收来自所述服务器的项目创建命令；相应地，所述生成模块1102具体用于：根据所述项目创建命令和所述项目名称通过第二服务生成所述页面框架代码。

可选的，在所述生成模块1102生成页面配置代码之前：所述显示模块1103用于通过所述第一服务显示所述页面配置界面，所述获取模块1104用于获取通过所述页面配置界面输入的所述页面配置信息和触发的所述页面配置代码生成指令，所述收发模块1105用于通过所述第一服务向服务器发送所述页面配置信息和页面配置代码生成指令，以及接收来自所述服务器的页面配置代码生成命令；相应地，所述生成模块1102具体用于：根据页面配置代码生成命令和所述页面配置信息通过第二服务生成所述页面配置代码。

可选的，在所述显示模块1103通过所述第一服务显示所述页面配置界面之前，所述显示模块1103还用于通过所述第一服务显示所述页面创建界面；所述获取模块1104还用于获取通过所述页面创建界面触发的页面配置指令；所述显示模块1103具体用于：根据所述页面配置指令通过所述第一服务在所述页面创建界面上显示页面的配置项，得到所述页面配置界面。

可选的，在所述显示模块1103通过所述第一服务显示所述页面创建界面之前，所述收发模块1105还用于通过所述第二服务向服务器发送第一信息，所述第一信息指示所述页面框架代码生成成功，以及接收来自所述服务器的第二信息，所述第二信息指示新项目创建完成；所述显示模块1103还用于通过所述第一服务显示更新后的项目列表界面，所述更新后的项目列表界面显示有新项目的图标；所述获取模块1104还用于获取通过操作所述新项目的图标触发的页面创建指令；所述显示模块1103具体用于：根据所述页面创建指令通过所述第一服务显示所述页面创建界面。

可选的，所述页面内容信息包括至少一个页面组件的配置信息；在所述生成模块1102生成页面内容代码之前：所述显示模块1103用于通过所述第一服务显示页面内容界面，所述获取模块1104用于获取通过所述页面内容界面输入的页面组件的配置信息和触发的页面内容代码生成指令，所述收发模块1105用于通过所述第一服务向服务器发送所述页面内容代码生成指令和所述页面组件配置信息以及接收来自所述服务器的页面内容代码生成命令；相应地，所述生成模块1102具体用于：根据所述页面内容代码生成命令和所述页面组件配置信息通过第二服务生成所述页面内容代码。

可选的，在所述显示模块1103通过第一服务显示页面内容界面之前，所述显示模块1103还用于：通过所述第一服务显示页面生成界面，所述页面生成界面包括页面组件列表；对于所述至少一个页面组件中的任意一个第一页面组件：所述获取模块1104还用于获取通过所述页面组件列表触发的第一页面组件设置指令；所述显示模块1103具体用于：根据所述第一页面组件设置指令通过所述第一服务在所述页面生成界面上显示所述第一页面组件的配置项，得到所述页面内容界面，所述第一页面组件的配置项用于输入所述第一页面组件的配置信息。

可选的，在所述获取模块1104获取通过所述第一页面组件配置项输入的第一页面组件的配置信息之后，所述显示模块1103还用于：通过所述第一服务在所述页面内容界面上显示所述第一页面组件在页面中的显示效果预览图和/或所述第一页面组件的代码。

可选的，在所述显示模块1103通过所述第一服务显示页面生成界面之前，所述收发模块1105还用于通过所述第二服务向服务器发送第三信息，所述第三信息指示所述页面配置代码生成成功，以及接收来自服务器的第四信息，所述第四信息指示页面配置完成；所述显示模块1103具体用于：根据所述第四信息，通过所述第一服务显示所述页面生成界面。

可选的，所述编译信息包括编译指令；在所述生成模块1102根据通过编译界面输入的编译信息获取编译命令之前：所述显示模块1103用于通过所述第一服务显示编译界面，所述获取模块1104用于获取通过所述编译界面触发的编译指令；所述生成模块1102具体用于：控制收发模块1105通过所述第一服务将编译指令发送至服务器以及接收来自服务器的编译命令。

可选的，在所述显示模块1103通过所述第一服务显示编译界面之前：所述收发模块1105还用于通过所述第二服务向服务器发送第五信息，所述第五信息指示所述页面内容代码生成成功，以及接收来自服务器的第六信息，所述第六信息指示页面内容生成完成；所述显示模块1103具体用于：根据所述第六信息，通过所述第一服务显示编译界面。

可选的，所述装置还包括：显示模块1103、获取模块1104和收发模块1105；所述可视化操作界面包括编译界面，在所述生成模块1102生成页面代码之后：所述获取模块1104用于通过所述编译界面触发联调指令；所述显示模块1103用于根据所述联调指令，显示联调界面，在所述联调界面上显示可用测试设备选择列表；所述获取模块1104还用于获取通过所述可用测试设备选择列表触发的目标测试设备选择指令；所述收发模块1105用于向所述目标测试设备发送所述页面代码。

本实施例的装置，可以用于执行上述方法实施例的技术方案，其实现原理和技术效果类似，此处不再赘述。

根据本申请的实施例，本申请还提供了一种电子设备和一种可读存储介质。

如图13所示，是实现本申请实施例的基于可视化页面开发方法的电子设备的框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本申请的实现。

如图13所示，该电子设备包括：一个或多个处理器1301、存储器1302，以及用于连接各部件的接口，包括高速接口和低速接口。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在电子设备内执行的指令进行处理，包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如，耦合至接口的显示设备)上显示GUI的图形信息的指令。在其它实施方式中，若需要，可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样，可以连接多个电子设备，各个设备提供部分必要的操作(例如，作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图13中以一个处理器1301为例。

存储器1302即为本申请所提供的非瞬时计算机可读存储介质。其中，所述存储器存储有可由至少一个处理器执行的指令，以使所述至少一个处理器执行本申请所提供的可视化页面开发方法。本申请的非瞬时计算机可读存储介质存储计算机指令，该计算机指令用于使计算机执行本申请所提供的可视化页面开发方法。

存储器1302作为一种非瞬时计算机可读存储介质，可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块，如本申请实施例中的可视化页面开发方法对应的程序指令/模块(例如，附图11所示的启动模块1101和生成模块1102或者图12中所示的启动模块1101、生成模块1102、显示模块1103、获取模块1104和收发模块1105)。处理器1301通过运行存储在存储器1302中的非瞬时软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例中的可视化页面开发方法。

存储器1302可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储实现可视化页面开发方法的电子设备的使用所创建的数据等。此外，存储器1302可以包括高速随机存取存储器，还可以包括非瞬时存储器，例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中，存储器1302可选包括相对于处理器1301远程设置的存储器，这些远程存储器可以通过网络连接至实现可视化页面开发方法的电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

实现可视化页面开发方法的电子设备还可以包括：输入装置1303和输出装置1304。处理器1301、存储器1302、输入装置1303和输出装置1304可以通过总线或者其他方式连接，图13中以通过总线连接为例。

输入装置1303可接收输入的数字或字符信息，以及产生与实现可视化页面开发方法的电子设备的用户设置以及功能控制有关的键信号输入，例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置1304可以包括显示设备、辅助照明装置(例如，LED)和触觉反馈装置(例如，振动电机)等。该显示设备可以包括但不限于，液晶显示器(LCD)、发光二极管(LED)显示器和等离子体显示器。在一些实施方式中，显示设备可以是触摸屏。

此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用ASIC(专用集成电路)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令，并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(PLD))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。

本申请中的页面开发过程中的创建项目、创建以及配置页面、页面内容生成、编译各环节均采用预设开发工具完成，提高了页面开发的工具。此外，终端设备根据通过预设开发工具的可视化操作界面输入的页面开发信息，生成页面代码，可以使得用户对页面的整个开发过程可视化，进一步提高了页面开发效率。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本申请中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本申请公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等，均应包含在本申请保护范围之内。

Claims (30)

1.一种可视化页面开发方法，其特征在于，包括：

启动预设开发工具；

根据通过所述预设开发工具的可视化操作界面输入的页面开发信息，生成页面代码；所述页面开发信息包括：项目创建信息、页面配置信息、页面内容信息以及编译信息。

2.根据权利要求1所述的方法，其特征在于，所述预设开发工具的可视化操作界面：项目创建界面、页面配置界面、页面内容界面和编译界面；所述生成页面代码，包括：

根据通过项目创建界面输入的所述项目创建信息，生成页面框架代码；

根据通过页面配置界面输入的所述页面配置信息，生成页面配置代码；

根据通过页面内容界面输入的所述页面内容信息，生成页面内容代码；

根据通过编译界面输入的编译信息获取编译命令，并根据所述编译命令编译所述页面框架代码、页面配置代码和页面内容代码，得到所述页面代码。

3.根据权利要求1或2所述的方法，其特征在于，所述启动预设开发工具，包括：

通过第一服务启动所述预设开发工具。

4.根据权利要求3所述的方法，其特征在于，所述项目创建信息包括：项目名称；在所述获取页面框架代码之前还包括：

通过所述第一服务显示项目创建界面、获取通过所述项目创建界面输入的新项目的项目名称和触发的项目创建指令以及通过所述第一服务向服务器发送所述项目创建指令和所述项目名称；

接收来自服务器的项目创建命令；

根据所述项目创建信息，生成页面框架代码包括：

根据所述项目创建命令和所述项目名称通过第二服务生成所述页面框架代码。

5.根据权利要求3所述的方法，其特征在于，在所述生成页面配置代码之前，还包括：

通过所述第一服务显示所述页面配置界面、获取通过所述页面配置界面输入的所述页面配置信息和触发的所述页面配置代码生成指令以及通过所述第一服务向服务器发送所述页面配置信息和页面配置代码生成指令；

接收来自服务器的页面配置代码生成命令；

根据所述页面配置信息，获取页面配置代码，包括：根据页面配置代码生成命令和所述页面配置信息通过第二服务生成所述页面配置代码。

6.根据权利要求5所述的方法，其特征在于，在所述通过所述第一服务显示所述页面配置界面之前，还包括：

通过所述第一服务显示所述页面创建界面；

获取通过所述页面创建界面触发的页面配置指令；

所述通过所述第一服务显示所述页面配置界面，包括：根据所述页面配置指令通过所述第一服务在所述页面创建界面上显示页面的配置项，得到所述页面配置界面。

7.根据权利要求5所述的方法，其特征在于，在所述通过所述第一服务显示所述页面创建界面之前，还包括：

通过所述第二服务向服务器发送第一信息，所述第一信息指示所述页面框架代码生成成功；

接收来自所述服务器的第二信息，所述第二信息指示新项目创建完成；

通过所述第一服务显示更新后的项目列表界面，所述更新后的项目列表界面显示有新项目的图标；

获取通过操作所述新项目的图标触发的页面创建指令；

所述通过所述第一服务显示所述页面创建界面，包括：根据所述页面创建指令，通过所述第一服务显示所述页面创建界面。

8.根据权利要求3所述的方法，其特征在于，所述页面内容信息包括至少一个页面组件的配置信息；在所述生成页面内容代码之前，还包括：

通过所述第一服务显示页面内容界面、获取通过所述页面内容界面输入的页面组件的配置信息和触发的页面内容代码生成指令以及通过所述第一服务向服务器发送所述页面内容代码生成指令和所述页面组件配置信息；

接收来自所述服务器的页面内容代码生成命令；

根据所述页面内容信息，生成页面内容代码，包括：根据所述页面内容代码生成命令和所述页面组件配置信息通过第二服务生成所述页面内容代码。

9.根据权利要求8所述的方法，其特征在于，在所述通过第一服务显示页面内容界面之前，还包括：

通过所述第一服务显示页面生成界面，所述页面生成界面包括页面组件列表；

对于所述至少一个页面组件中的任意一个第一页面组件：获取通过所述页面组件列表触发的第一页面组件设置指令；

所述通过第一服务显示页面内容界面，包括：根据所述第一页面组件设置指令通过所述第一服务在所述页面生成界面上显示所述第一页面组件的配置项，得到所述页面内容界面，所述第一页面组件的配置项用于输入所述第一页面组件的配置信息。

10.根据权利要求9所述的方法，其特征在于，在获取通过所述第一页面组件配置项输入的第一页面组件的配置信息之后，还包括：

通过所述第一服务在所述页面内容界面上显示所述第一页面组件在页面中的显示效果预览图和/或所述第一页面组件的代码。

11.根据权利要求9或10所述的方法，其特征在于，在所述通过所述第一服务显示页面生成界面之前，包括：

通过所述第二服务向服务器发送第三信息，所述第三信息指示所述页面配置代码生成成功；

接收来自服务器的第四信息，所述第四信息指示页面配置完成；

所述通过所述第一服务显示页面生成界面，包括：根据所述第四信息，通过所述第一服务显示所述页面生成界面。

12.根据权利要求3所述的方法，其特征在于，所述编译信息包括编译指令；在所述根据通过编译界面输入的编译信息获取编译命令之前，还包括：通过所述第一服务显示编译界面以及获取通过所述编译界面触发的编译指令；

所述根据通过编译界面输入的编译信息获取编译命令，包括：通过所述第一服务将编译指令发送至服务器，接收来自所述服务器的编译命令。

13.根据权利要求12所述的方法，其特征在于，在所述通过所述第一服务显示编译界面之前，还包括：

通过第二服务向服务器发送第五信息，所述第五信息指示所述页面内容代码生成成功；

接收来自服务器的第六信息，所述第六信息指示页面内容生成完成；

所述通过所述第一服务显示编译界面，包括：根据所述第六信息，通过所述第一服务显示编译界面。

14.根据权利要求1或2所述的方法，其特征在于，所述可视化操作界面包括编译界面和联调界面，在所述生成页面代码之后，还包括：

通过所述编译界面触发联调指令；

根据所述联调指令显示联调界面，在所述联调界面上显示可用测试设备选择列表；

获取通过所述可用测试设备选择列表触发的目标测试设备选择指令；

向所述目标测试设备发送所述页面代码。

15.一种可视化页面开发装置，其特征在于，包括：

启动模块，用于启动预设开发工具；

生成模块，用于根据通过所述预设开发工具的可视化操作界面输入的页面开发信息，生成页面代码；所述页面开发信息包括：项目创建信息、页面配置信息、页面内容信息以及编译信息。

16.根据权利要求15所述的装置，其特征在于，所述预设开发工具的可视化操作界面：项目创建界面、页面配置界面、页面内容界面和编译界面；所述生成模块，具体用于：

根据通过项目创建界面输入的所述项目创建信息，生成页面框架代码；

根据通过页面配置界面输入的所述页面配置信息，生成页面配置代码；

根据通过页面内容界面输入的所述页面内容信息，生成页面内容代码；

根据通过编译界面输入的编译信息获取编译命令，并根据所述编译命令编译所述页面框架代码、页面配置代码和页面内容代码，得到所述页面代码。

17.根据权利要求15或16所述的装置，其特征在于，所述启动模块，具体用于：

通过第一服务启动所述预设开发工具。

18.根据权利要求17所述的装置，其特征在于，所述装置还包括：显示模块、获取模块和收发模块；所述项目创建信息包括：项目名称；在所述生成模块生成页面框架代码之前：

所述显示模块用于通过所述第一服务显示项目创建界面，所述获取模块用于通过所述项目创建界面输入的新项目的项目名称和触发的项目创建指令，所述收发模块用于通过所述第一服务向服务器发送所述项目创建指令和所述项目名称以及接收来自所述服务器的项目创建命令；

相应地，所述生成模块具体用于：根据所述项目创建命令和所述项目名称通过第二服务生成所述页面框架代码。

19.根据权利要求17所述的装置，其特征在于，所述装置还包括：显示模块、获取模块和收发模块；在所述生成模块生成页面配置代码之前：

所述显示模块用于通过所述第一服务显示所述页面配置界面，所述获取模块用于获取通过所述页面配置界面输入的所述页面配置信息和触发的所述页面配置代码生成指令，所述收发模块用于通过所述第一服务向服务器发送所述页面配置信息和页面配置代码生成指令，以及接收来自所述服务器的页面配置代码生成命令；

相应地，所述生成模块具体用于：根据页面配置代码生成命令和所述页面配置信息通过第二服务生成所述页面配置代码。

20.根据权利要求19所述的装置，其特征在于，在所述显示模块通过所述第一服务显示所述页面配置界面之前，所述显示模块还用于通过所述第一服务显示所述页面创建界面；

所述获取模块还用于获取通过所述页面创建界面触发的页面配置指令；

所述显示模块具体用于：根据所述页面配置指令通过所述第一服务在所述页面创建界面上显示页面的配置项，得到所述页面配置界面。

21.根据权利要求20所述的装置，其特征在于，在所述显示模块显示所述页面创建界面之前，所述收发模块还用于通过所述第二服务向服务器发送第一信息，所述第一信息指示所述页面框架代码生成成功，以及接收来自所述服务器的第二信息，所述第二信息指示新项目创建完成；

所述显示模块还用于通过所述第一服务显示更新后的项目列表界面，所述更新后的项目列表界面显示有新项目的图标；

所述获取模块还用于通过所述第一服务获取通过操作所述新项目的图标触发的页面创建指令；

所述显示模块具体用于：根据所述页面创建指令通过所述第一服务显示所述页面创建界面。

22.根据权利要求17所述的装置，其特征在于，所述装置还包括：显示模块、获取模块和收发模块；所述页面内容信息包括至少一个页面组件的配置信息；在所述生成模块生成页面内容代码之前：

所述显示模块用于通过所述第一服务显示页面内容界面，所述获取模块用于获取通过所述页面内容界面输入的页面组件的配置信息和触发的页面内容代码生成指令，所述收发模块用于通过所述第一服务向服务器发送所述页面内容代码生成指令和所述页面组件配置信息以及接收来自所述服务器的页面内容代码生成命令；

相应地，所述生成模块具体用于：根据所述页面内容代码生成命令和所述页面组件配置信息通过第二服务生成所述页面内容代码。

23.根据权利要求22所述的装置，其特征在于，在所述显示模块通过第一服务显示页面内容界面之前，所述显示模块还用于：通过所述第一服务显示页面生成界面，所述页面生成界面包括页面组件列表；

对于所述至少一个页面组件中的任意一个第一页面组件：所述获取模块还用于获取通过所述页面组件列表触发的第一页面组件设置指令；

所述显示模块具体用于：根据所述第一页面组件设置指令通过所述第一服务在所述页面生成界面上显示所述第一页面组件的配置项，得到所述页面内容界面，所述第一页面组件的配置项用于输入所述第一页面组件的配置信息。

24.根据权利要求23所述的装置，其特征在于，在所述获取模块获取通过所述第一页面组件配置项输入的第一页面组件的配置信息之后，所述显示模块还用于：通过所述第一服务在所述页面内容界面上显示所述第一页面组件在页面中的显示效果预览图和/或所述第一页面组件的代码。

25.根据权利要求23或24所述的装置，其特征在于，在所述显示模块通过所述第一服务显示页面生成界面之前，所述收发模块还用于通过所述第二服务向服务器发送第三信息，所述第三信息指示所述页面配置代码生成成功，以及接收来自服务器的第四信息，所述第四信息指示页面配置完成；

所述显示模块具体用于：根据所述第四信息，通过所述第一服务显示所述页面生成界面。

26.根据权利要求17所述的装置，其特征在于，所述装置还包括：显示模块、获取模块和收发模块；所述编译信息包括编译指令；在所述生成模块根据通过编译界面输入的编译信息获取编译命令之前：

所述显示模块用于通过所述第一服务显示编译界面，所述获取模块用于获取通过所述编译界面触发的编译指令；

所述生成模块具体用于：控制收发模块通过所述第一服务将编译指令发送至服务器以及接收来自所述服务器的编译命令。

27.根据权利要求26所述的装置，其特征在于，在所述显示模块通过所述第一服务显示编译界面之前：

所述收发模块还用于通过第二服务向服务器发送第五信息，所述第五信息指示所述页面内容代码生成成功，以及接收来自服务器的第六信息，所述第六信息指示页面内容生成完成；

所述显示模块具体用于：根据所述第六信息，通过所述第一服务显示编译界面。

28.根据权利要求15或16所述的装置，其特征在于，所述装置还包括：显示模块、获取模块和收发模块；所述可视化操作界面包括编译界面，在所述生成模块生成页面代码之后：

所述获取模块用于通过所述编译界面触发联调指令；

所述显示模块用于根据所述联调指令，根据所述联调指令，显示联调界面，在所述联调界面上显示可用测试设备选择列表；

所述获取模块还用于获取通过所述可用测试设备选择列表触发的目标测试设备选择指令；

所述收发模块用于向所述目标测试设备发送所述页面代码。

29.一种电子设备，其特征在于，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-14中任一项所述的方法。

30.一种存储有计算机指令的非瞬时计算机可读存储介质，其特征在于，所述计算机指令用于使所述计算机执行权利要求1-14中任一项所述的方法。

Images