CN109739497A - 页面开发方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本申请涉及一种页面开发方法，该方法包括：通过页面布局面板接收添加到页面布局面板的界面组件；接收对界面组件的属性配置信息；获取添加到页面布局面板的各个界面组件的组件源码，将组件源码进行打包得到静态组件数据包；根据页面布局面板中各个界面组件的位置信息和各个界面组件的属性配置信息生成属性组件数据包；将静态组件数据包和属性组件数据包发布到终端，以使终端根据静态组件数据包和属性组件数据包进行解析渲染，完成页面的开发。上述方法不需要在代码层面上进行任何改动，就可以实现页面的快速开发，不仅降低了开发门槛，而且提高了开发效率。此外，还提出了一种页面开发装置、计算机设备及存储介质。

Description

页面开发方法、装置、计算机设备及存储介质

技术领域

本发明涉及计算机技术领域，尤其是涉及一种页面开发方法、装置、计算机设备及存储介质。

背景技术

随着用户的需求越来越多，web APP(基于网页的应用)的业务模块需要频繁地进行调整，传统的如果对业务模块进行调整，则必然需要开发新的页面。而传统的页面的开发需要在代码层面上进行修改，对开发人员的专业知识要求比较高，所以传统的页面开发方法不仅开发的门槛高，而且开发效率低。

发明内容

基于此，有必要针对上述问题，提供了一种开发门槛低且开发效率高的页面开发方法、装置、计算机设备及存储介质。

一种页面开发方法，所述方法包括：

通过页面布局面板接收添加到所述页面布局面板的界面组件；

接收对所述界面组件的属性配置信息；

获取添加到所述页面布局面板的各个界面组件的组件源码，将所述组件源码进行打包得到静态组件数据包；

根据所述页面布局面板中各个界面组件的位置信息和各个界面组件的属性配置信息生成属性组件数据包；

将所述静态组件数据包和所述属性组件数据包发布到终端，以使所述终端根据所述所述静态组件数据包和所述属性组件数据包进行解析渲染，完成页面的开发。

在其中一个实施例中，所述接收对界面组件的属性配置信息，包括：通过与所述界面组件对应的可视化表单接收对所述界面组件的属性配置；响应于对所述属性配置的保存操作确定所述界面组件的属性配置信息。

在其中一个实施例中，所述根据所述页面布局面板中各个界面组件的位置信息和各个界面组件的属性配置信息生成属性组件数据包，包括：当所述界面组件的属性配置信息需要调用第三方数据时，则通过第三方接口获取相应的动态数据，将所述动态数据添加到所述属性组件数据包。

一种页面开发装置，所述装置包括：

第一接收模块，用于通过页面布局面板接收添加到所述页面布局面板的界面组件；

第二接收模块，用于接收对所述界面组件的属性配置信息；

源码打包模块，用于获取添加到所述页面布局面板的各个界面组件的组件源码，将所述组件源码进行打包得到静态组件数据包；

生成模块，用于根据所述页面布局面板中各个界面组件的位置信息和各个界面组件的属性配置信息生成属性组件数据包；

发布模块，用于将所述静态组件数据包和所述属性组件数据包发布到终端，以使所述终端根据所述所述静态组件数据包和所述属性组件数据包进行解析渲染，完成开发页面的展示。

一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行如下步骤：

通过可视化页面布局面板接收添加到所述页面布局面板的界面组件；

接收对所述界面组件的属性配置信息；

获取添加到所述页面布局面板的各个界面组件的组件源码，将所述组件源码进行打包得到静态组件数据包；

根据所述页面布局面板中各个界面组件的位置信息和各个界面组件的属性配置信息生成属性组件数据包；

将所述静态组件数据包和所述属性组件数据包发布到终端，以使所述终端根据所述所述静态组件数据包和所述属性组件数据包进行解析渲染，完成开发页面的展示。

一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行如下步骤：

通过可视化页面布局面板接收添加到所述页面布局面板的界面组件；

接收对所述界面组件的属性配置信息；

获取添加到所述页面布局面板的各个界面组件的组件源码，将所述组件源码进行打包得到静态组件数据包；

根据所述页面布局面板中各个界面组件的位置信息和各个界面组件的属性配置信息生成属性组件数据包；

将所述静态组件数据包和所述属性组件数据包发布到终端，以使所述终端根据所述所述静态组件数据包和所述属性组件数据包进行解析渲染，完成开发页面的展示。

上述页面开发方法、装置、计算机设备及存储介质，通过将界面组件添加到页面布局面板上，并对界面组件的属性配置信息进行设置，获取添加到页面布局面板上的各个界面组件的组件源码，然后将各个界面组件的组件源码进行打包得到静态组件数据包，将各个界面组件的位置信息和各个界面组件的属性配置信息打包生成属性组件数据包，然后将静态组件数据包和属性组件数据包发布到终端，终端根据静态组件数据包和属性组件数据包进行解析渲染，完成开发页面的展示。上述方法通过将界面组件的组件源码和界面组件的属性配置信息分离，开发者不需要在代码层面上进行任何改动，就可以实现页面的快速开发，不仅降低了开发门槛，而且提高了开发效率。

一种页面开发方法，所述方法包括：

接收服务器发送的开发页面对应的静态组件数据包和属性组件数据包，所述静态组件数据包包括各个界面组件的组件源码，所述属性组件数据包包括各个界面组件的位置信息和各个界面组件的属性配置信息；

调用动态渲染器对所述静态组件数据包和所述属性组件数据包进行解析渲染，得到开发页面。

在其中一个实施例中，所述调用动态渲染器对所述静态组件数据包和所述属性组件数据包进行解析渲染，得到开发页面，包括：调用动态渲染器对所述静态页面数据包和所述属性页面数据包进行解析，得到各个界面组件的组件源码、各个界面组件的位置信息以及各个界面组件的属性配置信息；根据所述组件源码、位置信息和所述属性配置信息进行开发页面渲染，将渲染得到的开发页面进行展示。

在其中一个实施例中，所述根据所述组件源码、位置信息和所述属性配置信息进行开发页面渲染，将渲染得到的开发页面进行展示，包括：获取各个界面组件的优先级，根据所述优先级获取当前待渲染的目标界面组件；将所述目标界面组件的位置信息和所述属性配置信息传递给所述目标界面组件的目标界面组件源码；根据所述目标界面组件的位置信息、所述属性配置信息和所述目标界面组件源码对所述目标界面组件进行渲染，将渲染得到的开发页面进行展示。

一种页面开发装置，所述装置包括：

数据包接收模块，用于接收服务器发送的开发页面对应的静态组件数据包和属性组件数据包，所述静态组件数据包包括各个界面组件的组件源码，所述属性组件数据包包括各个界面组件的位置信息和各个界面组件的属性配置信息；

渲染模块，用于调用动态渲染器对所述静态组件数据包和所述属性组件数据包进行解析渲染，得到开发页面。

一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行如下步骤：

接收服务器发送的开发页面对应的静态组件数据包和属性组件数据包，所述静态组件数据包包括各个界面组件的组件源码，所述属性组件数据包包括各个界面组件的位置信息和各个界面组件的属性配置信息；

调用动态渲染器对所述静态组件数据包和所述属性组件数据包进行解析渲染，得到开发页面。

一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行如下步骤：

接收服务器发送的开发页面对应的静态组件数据包和属性组件数据包，所述静态组件数据包包括各个界面组件的组件源码，所述属性组件数据包包括各个界面组件的位置信息和各个界面组件的属性配置信息；

调用动态渲染器对所述静态组件数据包和所述属性组件数据包进行解析渲染，得到开发页面。

上述页面开发方法、装置、计算机设备及存储介质，首先接收服务器发送的开发页面对应的静态组件数据包和属性组件数据包，然后通过调用动态渲染器对静态组件数据包和属性组件数据包进行解析渲染，得到开发页面。上述方法中，界面组件的组件源码和界面组件的属性配置信息是分离开的，使得开发者不需要在代码层面上进行任何改动，只需要通过开发的动态渲染器对静态组件数据包和属性组件数据包进行解析渲染就可以得到开发页面，从而降低了开发门槛，且提高了开发效率。

附图说明

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

图1为一个实施例中页面开发方法的流程图；

图2A为一个实施例中一排两局部的组件布局示意图；

图2B为一个实施例中两排两布局的组件布局示意图；

图2C为一个实施例中一排三布局的组件布局示意图；

图3为一个实施例中轮播图界面组件进行属性配置的界面示意图；

图4为另一个实施例中页面开发方法的流程图；

图5为一个实施例中页面开发的流程示意图；

图6为一个实施例中页面结构的示意图；

图7为一个实施例中组件的功能特征示意图；

图8为一个实施例中页面开发装置的结构框图；

图9为另一个实施例中页面开发装置的结构框图；

图10为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

如图1所示，提出了一种页面开发方法，该页面开发方法应用于开发平台的终端，该页面开发方法具体包括以下步骤：

步骤102，通过页面布局面板接收添加到页面布局面板的界面组件。

其中，页面布局面板是指用于布局界面组件的面板。界面组件，又称“UI组件”，即user interface组件。界面组件是指在页面上布局的组件，通过界面组件构成整个开发页面的框架。在一个实施例中，页面布局面板为可视化页面布局面板，开发者可以通过可视化页面布局面板直接将相应的界面组件添加到面板上。比如，如果待开发页面需要由4个界面组件组成，则将该4个界面组件添加到页面布局面板，以便后续生成开发页面。开发者可以根据实际需求，选择要开发的页面中包含的界面组件，然后通过可视化页面布局面板将选择的界面组件添加到页面布局面板上，添加的方式可以有多种，比如，可以通过拖拽的方式将界面组件直接拖到页面布局面板上对应的位置，也可以通过选择点击的方式将界面组件添加到页面布局面板上的目标位置。

在一个实施例中，可以在页面布局面板上自由添加并组合相关的界面组件。如图2所示，为一个实施例中，在页面布局面板上添加的界面组件的示意图。图2A为一排两布局的单图组件；图2B为两排两布局的上图下文组件；图2C为一排三布局的单图组件。从图中可以看出，可以将界面组件在页面布局面板上自由地组合布局。当需要新开发一个页面时，可以通过快速进行组合来设置页面。

步骤104，接收对界面组件的属性配置信息。

其中，属性配置信息是指界面组件中包含的各个属性的信息。属性配置信息包括但不限于组件的类型、组件的数据来源、组件的优先级等。由于界面组件是与业务隔离开的，所以为了实现相应的业务功能，需要对界面组件的属性进行配置，使之符合所需要的业务属性。开发者可以通过可视化界面对每个界面组件的属性进行配置，比如，如果要开发一个领取优惠劵的页面，只需要将优惠劵对应的界面组件添加到页面布局面板，然后在属性配置的表单中填入优惠劵的ID，就可以快速生成领取该优惠劵的页面，不需要关心优惠劵在页面上如何被展示以及如何被领取的具体逻辑，这些逻辑都是封装在界面组件中的。如图3所示，为一个实施例中，对轮播图界面组件进行属性配置的界面示意图。配置的信息包括各个轮播图的展示顺序，以及各个轮播图的数据来源。

步骤106，获取添加到页面布局面板的各个界面组件的组件源码，将组件源码进行打包得到静态组件数据包。

其中，将开发页面所需要的界面组件都添加到页面布局面板上后，获取页面布局面板上各个界面组件的组件源码。具体地，可以根据各个界面组件的组件标识从组件源码数据库中获取每个界面组件的组件源码，然后将各个界面的组件源码进行打包，得到一个静态组件数据包。组件标识用于唯一标识一个组件，组件源码中包括了组件的运行逻辑和组件的样式等组件的固有信息。由于界面组件是与具体的业务完全分离开的，将添加到页面布局面板的各个界面组件的组件源码进行打包，不需要对界面组件的组件源码进行任何的修改，大大降低了开发的门槛，提高了开发的效率。

步骤108，根据页面布局面板中各个界面组件的位置信息和各个界面组件的属性配置信息生成属性组件数据包。

其中，将界面组件添加到页面布局面板上后，相应的各个界面组件在页面布局面板的位置也就确定了，根据页面布局面板上的位置就确定了各个界面组件在页面上的位置信息。将各个界面组件的位置信息和各个界面组件的属性配置信息一起打包生成属性组件数据包。属性组件数据包中包括各个组件的属性数据以及组件在页面上的布局。将各个界面组件的位置信息和属性配置信息打包生成属性组件数据包，不需要将界面组件的属性信息与界面组件的组件源码进行融合，即不需要进行代码层面上的融合，大大降低了开发的门槛，不需要开发人员有相关的专业知识就可以完成。

步骤110，将静态组件数据包和属性组件数据包发布到终端，以使终端根据静态组件数据包和属性组件数据包进行解析渲染，完成页面的开发。

其中，将得到的静态组件数据包和属性组件数据包发布到终端，终端根据接收到的静态组件数据包和属性组件数据包进行解析渲染得到开发页面。静态组件数据包和属性组件数据包中分别包括了界面组件的组件源码和界面组件的相关属性信息，两者不需要在代码层面上进行融合，即不需要对代码进行任何的修改。相对于传统的web APP的页面开发模式相比，通过开发人员预先开发组件系统、动态渲染器、可视化操作平台的方式，使得不懂技术的运营人员也能通过可视化拖拽以及填表格的方式开发页面。使得开发流程从传统的需要经过业务方的需求提出、产品经理的需求分析、设计师的资格设计、开发人员的代码编写，测试人员的功能测试，简化为可由业务运营人员独立开发页面，大大降低了开发的门槛，同时有利于提高开发的速度。另外，由于整个web APP中的页面开发是基于统一的布局面板和界面组件搭建出来的，整个的系统得到了设计的统一，使得整个系统的可维护性得到了提高。

上述页面开发方法，通过将界面组件添加到页面布局面板上，并对界面组件的属性配置信息进行设置，获取添加到页面布局面板上的各个界面组件的组件源码，然后将各个界面组件的组件源码进行打包得到静态组件数据包，将各个界面组件的位置信息和各个界面组件的属性配置信息打包生成属性组件数据包，然后将静态组件数据包和属性组件数据包发布到终端，终端根据静态组件数据包和属性组件数据包进行解析渲染，完成页面的开发。上述方法通过将界面组件的组件源码和界面组件的属性配置信息分离，开发者不需要在代码层面上进行任何改动，就可以实现页面的快速开发，不仅降低了开发门槛，而且提高了开发效率。

在一个实施例中，所述接收对界面组件的属性配置信息，包括：通过与所述界面组件对应的可视化表单接收对所述界面组件的属性配置；响应于对所述属性配置的保存操作确定所述界面组件的属性配置信息。

其中，由于界面组件与业务是分开的，为了满足业务上的需求，将界面组件添加到页面布局面板上后，还需要对界面组件进行属性配置。为了简化属性配置，通过可视化表单接收界面组件的属性配置，可以通过在可视化表单中选择相应的属性或者编辑相应的属性来完成相应的属性配置。当对界面组件进行了属性配置后，点击保存，开发者的终端响应于属性配置的保存操作，确定各个界面组件的属性配置信息。

在一个实施例中，所述根据所述页面布局面板中各个界面组件的位置信息和各个界面组件的属性配置信息生成属性组件数据包，包括：当所述界面组件的属性配置信息需要调用第三方数据时，则通过第三方接口获取相应的动态数据，将所述动态数据添加到所述属性组件数据包。

其中，由于界面组件的属性配置信息可能需要通过调用第三方数据，那么则通过第三方接口获取相应的动态数据，然后将获取到的动态数据添加到属性组件数据包，即当属性配置信息中封装了动态数据的第三方接口时，则需要通过第三方接口获取相应的动态数据，然后将该动态数据添加到属性组件数据包，便于后续发布终端接收到属性组件数据包后根据动态数据进行渲染。此外，在调用第三方接口数据时，还增加了的容错的功能。如果在调用第三方接口时出错了，则获取之前调用没出错的缓存。如果缓存也失效的话，则返回设置的兜底数据，如果兜底数据没设置的话，则客户端就会渲染出出错页，防止一片空白。

如图4所示，在一个实施例中，提出了一种页面开发方法，应用于终端，该方法具体包括以下步骤：

步骤402，接收服务器发送的开发页面对应的静态组件数据包和属性组件数据包，静态组件数据包包括各个界面组件的组件源码，属性组件数据包包括各个界面组件的位置信息和各个界面组件的属性配置信息。

其中，静态组件数据包中包括各个界面组件的组件源码。属性组件数据包中包括各个界面组件在页面中的位置信息和各个界面组件的属性配置信息。位置信息是指界面组件将要在页面上展示的位置信息。属性配置信息是指界面组件中包含的各个属性的信息。属性配置信息包括但不限于组件的类型、组件的数据来源、组件的优先级等。在一个实施例中，属性组件数据包中的数据是以JSON数据的形式进行保存的。由于JSON格式支持表单动态生成和数据校验以及格式灵活，可以实现属性的动态配置。

步骤404，调用动态渲染器对静态组件数据包和属性组件数据包进行解析渲染，得到开发页面。

其中，动态渲染器是终端中用于动态渲染开发页面的组件。开发页面是通过动态渲染器根据下载的静态组件数据包和属性组件数据包渲染而成，静态组件数据包中只包含了界面组件的组件源码，即页面的开发不需要经过代码的修改，提高了系统的稳定性，同时开发页面的发布不需要用户手动更新，可以自动更新到用户终端的版本，提高了页面开发的速度和效率。

在一个实施例中，如果在渲染的过程中，如果需要调用第三方数据，则通过第三方接口获取相应的第三方数据，将获取到的第三方数据渲染到该开发页面。

上述页面开发方法，首先接收服务器发送的开发页面对应的静态组件数据包和属性组件数据包，然后通过调用动态渲染器对静态组件数据包和属性组件数据包进行解析渲染，得到开发页面。上述方法中，界面组件的组件源码和界面组件的属性配置信息是分离开的，使得开发者不需要在代码层面上进行任何改动，只需要通过开发的动态渲染器对静态组件数据包和属性组件数据包进行解析渲染就可以得到开发页面，从而降低了开发门槛，提高了开发效率。

如图5所示，为一个实施例中，提出了一种页面开发的流程示意图。首先，由可视化web开发平台(即开发终端)进行开发页面的可视化配置，包括界面组件的选取和界面组件的属性配置，通过将界面组件添加到页面布局面板，并通过可视化表单设置各个界面组件的属性配置信息。其次，基于界面组件选择和配置生成静态组件数据包和属性组件数据包。静态组件数据包中只包含各个界面组件的组件源码，而属性组件数据包中则包含各个界面组件的位置信息和属性配置信息。再次，将得到的静态组件数据包和属性组件数据包存储到服务器，如果有需要调用的第三方数据，则通过第三方接口获取相应的动态数据，将动态数据添加到属性组件数据包。最后，服务器将静态组件数据包和属性组件数据包下发到用户终端，用户终端通过调用动态渲染器进行开发页面的渲染，得到最终的开发页面。

在一个实施例中，所述调用动态渲染器对所述静态组件数据包和所述属性组件数据包进行解析渲染，得到开发页面，包括：对所述静态页面数据包和所述属性页面数据包进行解析，得到各个界面组件的组件源码、各个界面组件的位置信息以及各个界面组件的属性配置信息；调用动态渲染器根据所述组件源码、位置信息和所述属性配置信息进行开发页面渲染，将渲染得到的开发页面进行展示。

其中，终端接收到静态组件数据包和属性组件数据包后，首先，需要对接收到的静态组件数据包和属性组件数据包进行解析，解析得到各个界面组件的组件源码、以及各个界面组件在页面上的位置信息和各个界面组件的属性配置信息。然后根据组件源码、位置信息和属性配置信息调用动态渲染器进行开发页面渲染，将渲染得到的开发页面进行展示。

在一个实施例中，所述根据所述组件源码、位置信息和所述属性配置信息进行开发页面渲染，将渲染得到的开发页面进行展示，包括：获取各个界面组件的优先级，根据所述优先级获取当前待渲染的目标界面组件；将所述目标界面组件的位置信息和所述属性配置信息传递给所述目标界面组件的目标界面组件源码；根据所述目标界面组件的位置信息、所述属性配置信息和所述目标界面组件源码对所述目标界面组件进行渲染，将渲染得到的开发页面进行展示。

其中，web页面是一个树状结构，包括根组件、head组件、body组件、容器布局组件等。不同组件的优先级顺序不同，一般在页面渲染时，是由外到内进行层层渲染，即从根组件开始进行渲染，即根组件一般为第一优先级。待根组件渲染完成，则获取第二优先级的组件，依次类推，直到由外到内一层层将整个页面都渲染出来。所以为了对页面进行渲染，首先获取各个界面组件的优先级，然后根据优先级进行渲染，为了便于描述，将当前待渲染的界面组件称为“目标界面组件”。将目标界面组件的位置信息和属性配置信息传递给目标界面组件的组件源码，具体地，每个界面组件都有自己的唯一组件标识，根据组件标识可以将界面组件的位置信息和属性配置信息传递给相应的组件源码。然后就可以根据目标界面组件源码以及相应的位置信息和属性配置信息进行相应的组件渲染，将渲染得到的开发页面进行展示。如图6所示，为一个实施例中，页面的结构示意图。

界面组件是整个可视化web开发系统的基础，如图7所示，界面组件的设计具有以下功能特征。1、界面组件具有可配置数据的功能，可以自由地进行组件的数据配置；2、界面组件具有版本控制的功能，可以用于多版本的发布；3、界面组件有接口设计，可以用于调用第三方数据；4、组件通信，各个界面组件高度解耦，通用性强，可以通过组件之间的通信进行消息的传递。5、组件渲染，可以通过动态渲染器对该组件进行渲染。

如图8所示，在一个实施例中，提出了一种页面开发方法装置，该装置包括：

第一接收模块802，用于通过页面布局面板接收添加到所述页面布局面板的界面组件；

第二接收模块804，用于接收对所述界面组件的属性配置信息；

源码打包模块806，用于获取添加到所述页面布局面板的各个界面组件的组件源码，将所述组件源码进行打包得到静态组件数据包；

生成模块808，用于根据所述页面布局面板中各个界面组件的位置信息和各个界面组件的属性配置信息生成属性组件数据包；

发布模块810，用于将所述静态组件数据包和所述属性组件数据包发布到终端，以使所述终端根据所述所述静态组件数据包和所述属性组件数据包进行解析渲染，完成开发页面的展示。

在一个实施例中，所述第二接收模块还用于通过与所述界面组件对应的可视化表单接收对所述界面组件的属性配置；响应于对所述属性配置的保存操作确定所述界面组件的属性配置信息。

在一个实施例中，所述生成模块还用于当所述界面组件的属性配置信息需要调用第三方数据时，则通过第三方接口获取相应的动态数据，将所述动态数据添加到所述属性组件数据包。

如图9所示，在一个实施例中，上述页面开发方法装置还包括：

数据包接收模块902，用于接收服务器发送的开发页面对应的静态组件数据包和属性组件数据包，所述静态组件数据包包括各个界面组件的组件源码，所述属性组件数据包包括各个界面组件的位置信息和各个界面组件的属性配置信息；

渲染模块904，用于调用动态渲染器对所述静态组件数据包和所述属性组件数据包进行解析渲染，得到开发页面。

在一个实施例中，所述渲染模块还用于调用动态渲染器对所述静态页面数据包和所述属性页面数据包进行解析，得到各个界面组件的组件源码、各个界面组件的位置信息以及各个界面组件的属性配置信息；根据所述组件源码、位置信息和所述属性配置信息进行开发页面渲染，将渲染得到的开发页面进行展示。

在一个实施例中，所述渲染模块还用于获取各个界面组件的优先级，根据所述优先级获取当前待渲染的目标界面组件；将所述目标界面组件的位置信息和所述属性配置信息传递给所述目标界面组件的目标界面组件源码；根据所述目标界面组件的位置信息、所述属性配置信息和所述目标界面组件源码对所述目标界面组件进行渲染，将渲染得到的开发页面进行展示。

图10示出了一个实施例中计算机设备的内部结构图。该计算机设备可以是终端。如图10所示，该计算机设备包括通过系统总线连接的处理器、存储器、显示屏和网络接口。其中，存储器包括非易失性存储介质和内存储器。该计算机设备的非易失性存储介质存储有操作系统，还可存储有计算机程序，该计算机程序被处理器执行时，可使得处理器实现页面开发方法。该内存储器中也可储存有计算机程序，该计算机程序被处理器执行时，可使得处理器执行页面开发方法。显示屏用于显示相应的界面，网络接口用于与外接进行通信。本领域技术人员可以理解，图10中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，本申请提供的页面开发方法方法可以实现为一种计算机程序的形式，计算机程序可在如图10所示的计算机设备上运行。计算机设备的存储器中可存储组成该页面开发装置的各个程序模板。比如，第一接收模块802、第二接收模块804、源码打包模块806、生成模块808和发布模块810。

一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行如下步骤：通过页面布局面板接收添加到所述页面布局面板的界面组件；接收对所述界面组件的属性配置信息；获取添加到所述页面布局面板的各个界面组件的组件源码，将所述组件源码进行打包得到静态组件数据包；根据所述页面布局面板中各个界面组件的位置信息和各个界面组件的属性配置信息生成属性组件数据包；将所述静态组件数据包和所述属性组件数据包发布到终端，以使所述终端根据所述所述静态组件数据包和所述属性组件数据包进行解析渲染，完成页面的开发。

在一个实施例中，所述接收对界面组件的属性配置信息，包括：通过与所述界面组件对应的可视化表单接收对所述界面组件的属性配置；响应于对所述属性配置的保存操作确定所述界面组件的属性配置信息。

在一个实施例中，所述根据所述页面布局面板中各个界面组件的位置信息和各个界面组件的属性配置信息生成属性组件数据包，包括：当所述界面组件的属性配置信息需要调用第三方数据时，则通过第三方接口获取相应的动态数据，将所述动态数据添加到所述属性组件数据包。

一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行如下步骤：接收服务器发送的开发页面对应的静态组件数据包和属性组件数据包，所述静态组件数据包包括各个界面组件的组件源码，所述属性组件数据包包括各个界面组件的位置信息和各个界面组件的属性配置信息；调用动态渲染器对所述静态组件数据包和所述属性组件数据包进行解析渲染，得到开发页面。

在一个实施例中，所述调用动态渲染器对所述静态组件数据包和所述属性组件数据包进行解析渲染，得到开发页面，包括：调用动态渲染器对所述静态页面数据包和所述属性页面数据包进行解析，得到各个界面组件的组件源码、各个界面组件的位置信息以及各个界面组件的属性配置信息；根据所述组件源码、位置信息和所述属性配置信息进行开发页面渲染，将渲染得到的开发页面进行展示。

在一个实施例中，所述根据所述组件源码、位置信息和所述属性配置信息进行开发页面渲染，将渲染得到的开发页面进行展示，包括：获取各个界面组件的优先级，根据所述优先级获取当前待渲染的目标界面组件；将所述目标界面组件的位置信息和所述属性配置信息传递给所述目标界面组件的目标界面组件源码；根据所述目标界面组件的位置信息、所述属性配置信息和所述目标界面组件源码对所述目标界面组件进行渲染，将渲染得到的开发页面进行展示。

一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行如下步骤：通过页面布局面板接收添加到所述页面布局面板的界面组件；接收对所述界面组件的属性配置信息；获取添加到所述页面布局面板的各个界面组件的组件源码，将所述组件源码进行打包得到静态组件数据包；根据所述页面布局面板中各个界面组件的位置信息和各个界面组件的属性配置信息生成属性组件数据包；将所述静态组件数据包和所述属性组件数据包发布到终端，以使所述终端根据所述所述静态组件数据包和所述属性组件数据包进行解析渲染，完成页面的开发。

在一个实施例中，所述接收对界面组件的属性配置信息，包括：通过与所述界面组件对应的可视化表单接收对所述界面组件的属性配置；响应于对所述属性配置的保存操作确定所述界面组件的属性配置信息。

在一个实施例中，所述根据所述页面布局面板中各个界面组件的位置信息和各个界面组件的属性配置信息生成属性组件数据包，包括：当所述界面组件的属性配置信息需要调用第三方数据时，则通过第三方接口获取相应的动态数据，将所述动态数据添加到所述属性组件数据包。

一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行如下步骤：接收服务器发送的开发页面对应的静态组件数据包和属性组件数据包，所述静态组件数据包包括各个界面组件的组件源码，所述属性组件数据包包括各个界面组件的位置信息和各个界面组件的属性配置信息；调用动态渲染器对所述静态组件数据包和所述属性组件数据包进行解析渲染，得到开发页面。

在一个实施例中，所述调用动态渲染器对所述静态组件数据包和所述属性组件数据包进行解析渲染，得到开发页面，包括：调用动态渲染器对所述静态页面数据包和所述属性页面数据包进行解析，得到各个界面组件的组件源码、各个界面组件的位置信息以及各个界面组件的属性配置信息；根据所述组件源码、位置信息和所述属性配置信息进行开发页面渲染，将渲染得到的开发页面进行展示。

在一个实施例中，所述根据所述组件源码、位置信息和所述属性配置信息进行开发页面渲染，将渲染得到的开发页面进行展示，包括：获取各个界面组件的优先级，根据所述优先级获取当前待渲染的目标界面组件；将所述目标界面组件的位置信息和所述属性配置信息传递给所述目标界面组件的目标界面组件源码；根据所述目标界面组件的位置信息、所述属性配置信息和所述目标界面组件源码对所述目标界面组件进行渲染，将渲染得到的开发页面进行展示。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一非易失性计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种页面开发方法，其特征在于，所述方法包括：

通过页面布局面板接收添加到所述页面布局面板的界面组件；

接收对所述界面组件的属性配置信息；

获取添加到所述页面布局面板的各个界面组件的组件源码，将所述组件源码进行打包得到静态组件数据包；

根据所述页面布局面板中各个界面组件的位置信息和各个界面组件的属性配置信息生成属性组件数据包；

将所述静态组件数据包和所述属性组件数据包发布到终端，以使所述终端根据所述所述静态组件数据包和所述属性组件数据包进行解析渲染，完成页面的开发。

2.根据权利要求1所述的方法，其特征在于，所述接收对界面组件的属性配置信息，包括：

通过与所述界面组件对应的可视化表单接收对所述界面组件的属性配置；

响应于对所述属性配置的保存操作确定所述界面组件的属性配置信息。

3.根据权利要求1所述的方法，其特征在于，所述根据所述页面布局面板中各个界面组件的位置信息和各个界面组件的属性配置信息生成属性组件数据包，包括：

当所述界面组件的属性配置信息需要调用第三方数据时，则通过第三方接口获取相应的动态数据，将所述动态数据添加到所述属性组件数据包。

4.一种页面开发方法，其特征在于，所述方法包括：

接收服务器发送的开发页面对应的静态组件数据包和属性组件数据包，所述静态组件数据包包括各个界面组件的组件源码，所述属性组件数据包包括各个界面组件的位置信息和各个界面组件的属性配置信息；

调用动态渲染器对所述静态组件数据包和所述属性组件数据包进行解析渲染，得到开发页面。

5.根据权利要求4所述的方法，其特征在于，所述调用动态渲染器对所述静态组件数据包和所述属性组件数据包进行解析渲染，得到开发页面，包括：

调用动态渲染器对所述静态页面数据包和所述属性页面数据包进行解析，得到各个界面组件的组件源码、各个界面组件的位置信息以及各个界面组件的属性配置信息；

根据所述组件源码、位置信息和所述属性配置信息进行开发页面渲染，将渲染得到的开发页面进行展示。

6.根据权利要求5所述的方法，其特征在于，所述根据所述组件源码、位置信息和所述属性配置信息进行开发页面渲染，将渲染得到的开发页面进行展示，包括：

获取各个界面组件的优先级，根据所述优先级获取当前待渲染的目标界面组件；

将所述目标界面组件的位置信息和所述属性配置信息传递给所述目标界面组件的目标界面组件源码；

根据所述目标界面组件的位置信息、所述属性配置信息和所述目标界面组件源码对所述目标界面组件进行渲染，将渲染得到的开发页面进行展示。

7.一种页面开发装置，其特征在于，所述装置包括：

第一接收模块，用于通过页面布局面板接收添加到所述页面布局面板的界面组件；

第二接收模块，用于接收对所述界面组件的属性配置信息；

源码打包模块，用于获取添加到所述页面布局面板的各个界面组件的组件源码，将所述组件源码进行打包得到静态组件数据包；

生成模块，用于根据所述页面布局面板中各个界面组件的位置信息和各个界面组件的属性配置信息生成属性组件数据包；

发布模块，用于将所述静态组件数据包和所述属性组件数据包发布到终端，以使所述终端根据所述所述静态组件数据包和所述属性组件数据包进行解析渲染，完成开发页面的展示。

8.一种页面开发装置，其特征在于，所述装置包括：

数据包接收模块，用于接收服务器发送的开发页面对应的静态组件数据包和属性组件数据包，所述静态组件数据包包括各个界面组件的组件源码，所述属性组件数据包包括各个界面组件的位置信息和各个界面组件的属性配置信息；

渲染模块，用于调用动态渲染器对所述静态组件数据包和所述属性组件数据包进行解析渲染，得到开发页面。

9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行如权利要求1至6中任一项所述方法的步骤。

10.一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行如权利要求1至6中任一项所述方法的步骤。