CN112732254A - 网页开发方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请涉及一种网页开发方法、装置、计算机设备和存储介质，通过获取页面的配置信息；配置信息包括基础库的版本信息，基础库包括多套用于渲染页面的运行脚本；将配置信息发送至服务器，以指示服务器根据配置信息生成入口文件；接收服务器返回的入口文件，从入口文件中获取版本信息；发送运行环境标识和版本信息至服务器；以指示服务器根据运行环境标识和版本信息进行查找，从版本信息所对应的目标基础库中得到运行环境标识所对应的目标运行脚本；接收服务器返回的目标运行脚本，执行目标运行脚本，并根据入口文件渲染页面。本申请通过响应于页面绘制操作所获取的配置信息实现了对不同端的网页开发，缩短了网页开发的时间成本。

Description

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

技术领域

本申请涉及计算机应用技术领域，特别是涉及一种网页开发方法、装置、计算机设备和存储介质。

背景技术

随着互联网技术的发展，各种前端应用开发需求爆发式增长。传统软件开发采用文字式编码方式，每开发一个前端应用，即使是一些交互比较简单的网页，也需要开发人员花费大量时间进行开发。另外，开发人员还要花费很大精力与需求定制人员进行沟通，才能保证开发人员能够开发出满足需求的页面。

然而，传统技术中的开发方式影响着网页开发的时间成本。

发明内容

基于此，有必要针对上述技术问题，提供一种能够减低网页开发时间成本的网页开发方法、装置、计算机设备和存储介质。

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

获取页面的配置信息；所述配置信息包括基础库的版本信息，所述基础库包括多套用于渲染页面的运行脚本；

将所述配置信息发送至服务器，以指示所述服务器根据所述配置信息生成入口文件；

接收所述服务器返回的入口文件，从所述入口文件中获取所述版本信息；

发送运行环境标识和所述版本信息至所述服务器；以指示所述服务器根据所述运行环境标识和所述版本信息进行查找，从所述版本信息所对应的目标基础库中得到所述运行环境标识所对应的目标运行脚本；

接收所述服务器返回的目标运行脚本，执行所述目标运行脚本，并根据所述入口文件渲染所述页面。

在其中一个实施例中，所述页面的配置信息还包括页面组件配置信息和交互逻辑配置信息；所述获取页面的配置信息，包括：

响应于页面组件的拖拽操作，获取所述页面组件配置信息；

响应于页面交互逻辑的配置操作，获取所述交互逻辑配置信息；

响应于所述基础库的选择操作，获取所述版本信息。

在其中一个实施例中，所述页面交互逻辑包括页面跳转、调用接口、提交表单、链接埋点、回到页面顶部中的至少一个。

在其中一个实施例中，所述接收所述服务器返回的入口文件，包括：

接收所述服务器返回的访问信息，响应于所述访问信息的访问操作，接收所述服务器返回的入口文件；所述访问信息用于表征所述入口文件的访问途径。

在其中一个实施例中，所述将所述配置信息发送至服务器，以指示所述服务器根据所述配置信息生成入口文件，包括：

将所述配置信息发送至第一服务器，以指示所述第一服务器扫描所述配置信息，根据所述配置信息确定所述页面所需要的目标组件，将所述目标组件的脚本加入在所述入口文件中，并将所述入口文件发送至第二服务器，以指示所述第二服务器根据所述入口文件的地址生成所述访问信息；

所述接收所述服务器返回的访问信息；响应于所述访问信息的访问操作，接收所述服务器返回的入口文件，包括：

接收所述第二服务器返回的访问信息；响应于所述访问信息的访问操作，接收所述第二服务器返回的入口文件。

在其中一个实施例中，所述基础库部署在所述第二服务器上；所述发送运行环境标识和所述版本信息至所述服务器，包括：

发送所述运行环境标识和所述版本信息至所述第二服务器；以指示所述第二服务器根据所述运行环境标识和所述版本信息进行查找，从所述版本信息所对应的目标基础库中得到所述运行环境标识所对应的目标运行脚本。

在其中一个实施例中，所述基础库的生成，包括：

获取原始运行脚本和多个运行环境参数；

根据各所述运行环境参数对所述原始运行脚本进行代码解析，得到多套所述运行脚本；各所述运行脚本分别具有对应的运行环境标识，所述运行脚本所对应的运行环境标识与所述运行脚本解析时所使用的运行环境参数对应。

在其中一个实施例中，所述根据各所述运行环境参数对所述原始运行脚本进行代码解析，得到多套所述运行脚本，包括：

将所述原始运行脚本的代码字符串解析成抽象语法树；

根据各所述运行环境参数，对所述抽象语法树进行转换操作，得到多套抽象语法数据；

根据各所述抽象语法数据，生成各所述运行环境参数所对应的运行脚本。

在其中一个实施例中，所述执行所述目标运行脚本，并根据所述入口文件渲染所述页面，包括：

执行所述目标运行脚本，根据所述入口文件获取渲染所述页面所需的目标组件，通过所述目标组件渲染所述页面。

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

获取终端发送的页面的配置信息；所述配置信息包括基础库的版本信息，所述基础库包括多套用于渲染页面的运行脚本；

根据所述配置信息生成入口文件，并返回所述入口文件至所述终端，以指示所述终端从所述入口文件中获取所述版本信息；

接收所述终端发送的运行环境标识和所述版本信息；

根据所述运行环境标识和所述版本信息进行查找，从所述版本信息所对应的目标基础库中得到所述运行环境标识所对应的目标运行脚本；

返回所述目标运行脚本至所述终端。

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

配置信息获取模块，用于获取页面的配置信息；所述配置信息包括基础库的版本信息，所述基础库包括多套用于渲染页面的运行脚本；

配置信息发送模块，用于将所述配置信息发送至服务器，以指示所述服务器根据所述配置信息生成入口文件；

入口文件接收模块，用于接收所述服务器返回的入口文件，从所述入口文件中获取所述版本信息；

环境版本发送模块，用于发送运行环境标识和所述版本信息至所述服务器；以指示所述服务器根据所述运行环境标识和所述版本信息进行查找，从所述版本信息所对应的目标基础库中得到所述运行环境标识所对应的目标运行脚本；

目标脚本执行模块，用于接收所述服务器返回的目标运行脚本，执行所述目标运行脚本，并根据所述入口文件渲染所述页面。

一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述任一实施例中方法步骤。

一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任一实施例中方法步骤。

上述网页开发方法、装置、计算机设备和存储介质，通过获取页面的配置信息；所述配置信息包括基础库的版本信息，所述基础库包括多套用于渲染页面的运行脚本；将所述配置信息发送至服务器，以指示所述服务器根据所述配置信息生成入口文件；接收所述服务器返回的入口文件，从所述入口文件中获取所述版本信息；发送运行环境标识和所述版本信息至所述服务器；以指示所述服务器根据所述运行环境标识和所述版本信息进行查找，从所述版本信息所对应的目标基础库中得到所述运行环境标识所对应的目标运行脚本；接收所述服务器返回的目标运行脚本，执行所述目标运行脚本，并根据所述入口文件渲染所述页面。本申请通过响应于页面绘制操作所获取的配置信息实现了对不同端的网页开发，缩短了网页开发的时间成本。

附图说明

图1为一个实施例中网页开发方法的应用环境图；

图2a为一个实施例中网页开发方法的流程示意图；

图2b为一个实施例中选择基础库的示意图；

图3a为一个实施例中S210步骤的流程示意图；

图3b为一个实施例中事件配置的示意图；

图3c至3d为一个实施例中绘制的页面预览的示意图；

图3e为一个实施例中引入组件的示意图；

图4a为一个实施例中网页开发方法的应用环境图；

图4b为一个实施例中网页开发方法的流程示意图；

图4c至图4d为一个实施例中代码解析过程中的示意图；

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

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

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

具体实施方式

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

本申请提供的网页开发方法，可以应用于如图1所示的应用环境中。其中，终端102通过网络与服务器104进行通信。终端102获取页面的配置信息；配置信息包括基础库的版本信息，基础库包括多套用于渲染页面的运行脚本；终端102将配置信息发送至服务器104，以指示服务器104根据配置信息生成入口文件；终端102接收服务器104返回的入口文件，从入口文件中获取版本信息；终端102发送运行环境标识和版本信息至服务器104；以指示服务器104根据运行环境标识和版本信息进行查找，从版本信息所对应的目标基础库中得到运行环境标识所对应的目标运行脚本；终端102接收服务器104返回的目标运行脚本，执行目标运行脚本，并根据入口文件渲染页面。

其中，终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备，服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

在一个实施例中，如图2a所示，提供了一种网页开发方法，以该方法应用于图1中的终端为例进行说明，包括以下步骤：

S210、获取页面的配置信息。

其中，配置信息包括基础库的版本信息，基础库包括多套用于渲染页面的运行脚本。页面的配置信息可以是用于表征页面结构或者页面属性的数据，比如可以是页面信息数据，包括页面的标题、页面的结构、页面内组件的层次结构、页面内组件的配置信息、事件等信息。具体的，用户在终端的显示界面进行页面的绘制，响应于页面的绘制操作，终端获取页面的配置信息。

S220、将配置信息发送至服务器。

其中，配置信息用于指示服务器根据配置信息生成入口文件。入口文件为用于存储页面渲染所需要的信息，比如页面渲染所需组件的信息、页面布局信息等。具体的，终端将配置信息发送给服务器，服务器对配置信息进行扫描，确定页面所依赖的组件等信息，并生成入口文件。

S230、接收服务器返回的入口文件，从入口文件中获取版本信息。

具体的，在服务器生成入口文件之后，入口文件中存储有页面渲染需要使用的配置信息。为了让终端能够正常显示绘制的页面，服务器将入口文件向终端发送，终端接收到服务器返回的入口文件。终端从入口文件中读取版本信。若终端显示统一页面，但是该页面可以是小程序页面，也可以是H5页面，小程序页面与H5页面分别对应不同的页面类别，小程序页面与H5页面却呈现相同的显示效果，即为同一显示页面。因此，用于渲染页面的运行脚本为多套，同一个显示效果所对应的多套运行脚本构成一个基础库，每个基础库对应有版本信息。如图2b所示，为保证了已发布页面的稳定性，每次发布页面时都可以选择指定基础库的版本，非最新基础库，且理论上不会更新。因此，配置信息包括基础库的版本信息，又，服务器根据配置信息生成入口文件，并返回值终端，进而终端可以从入口文件中读取到版本信息。

S240、发送运行环境标识和版本信息至服务器。

其中，服务器根据运行环境标识和版本信息进行查找，从版本信息所对应的目标基础库中得到运行环境标识所对应的目标运行脚本。具体的，由于基础库部署在服务器中，若需要得到渲染页面的目标运行脚本，这需要在服务器中进行查找，因此将版本信息发送至服务器。另外，终端向服务器请求获取入口文件时，向服务器发送请求，该请求中携带有终端的运行环境标识，比如终端运行的是小程序还是浏览器APP。因此，服务器接收到终端发送的运行环境标识和版本信息。

S250、接收服务器返回的目标运行脚本，执行目标运行脚本，并根据入口文件渲染页面。

具体的，服务器根据运行环境标识和版本信息进行查找，从版本信息所对应的目标基础库中得到运行环境标识所对应的目标运行脚本，服务器向终端发送目标运行脚本，终端接收服务器返回的目标运行脚本，终端执行目标运行脚本，并根据入口文件渲染页面。

上述网页开发方法中，通过获取页面的配置信息；配置信息包括基础库的版本信息，基础库包括多套用于渲染页面的运行脚本；将配置信息发送至服务器，以指示服务器根据配置信息生成入口文件；接收服务器返回的入口文件，从入口文件中获取版本信息；发送运行环境标识和版本信息至服务器；以指示服务器根据运行环境标识和版本信息进行查找，从版本信息所对应的目标基础库中得到运行环境标识所对应的目标运行脚本；接收服务器返回的目标运行脚本，执行目标运行脚本，并根据入口文件渲染页面。本实施例通过响应于页面绘制操作所获取的配置信息实现了对不同端的网页开发，缩短了网页开发的时间成本。进一步地，通过提前在服务器端部署基础库，避免脚本解析所花费的时间，加速网页发布的速度。

在一个实施例中，页面的配置信息还包括页面组件配置信息和交互逻辑配置信息。如图3a所示，获取页面的配置信息，包括：

S310、响应于页面组件的拖拽操作，获取页面组件配置信息。

其中，组件是可以重复使用的页面模块代码。基础组件可以是类似图片、文字、区块等最基础的组件，通过基础组件可以构成页面的功能。模板组件可以将若干基础组件进行拼装而形成的更高级的页面模块，通过模板组件一般会实现某些业务功能。具体的，用户可以是绘制人员，且并不具有通过编写代码进行网页制作的能力。用户获取网页的设计稿，对比着网页的设计稿，可以将现有基础组件或者模板组件进行拼装，从而绘制出满足要求的页面。在此过程中，用户可以将有可能多次用到的通用部分上传成为模板组件，以供之后或者其他用户使用。

S320、响应于页面交互逻辑的配置操作，获取交互逻辑配置信息。

其中，如图3b所示，页面交互逻辑包括页面跳转、调用接口、提交表单、链接埋点、回到页面顶部中的至少一个。具体的，用户可以结合实际需要为网页添加必要的事件(比如点击某个区域可以跳转页面，或者点击某个区域可以改变其他某个区域的显示状态，或者调用其他后台接口)。通过这些手段，用户可以灵活搭建各种满足动态需求的页面。

S330、响应于基础库的选择操作，获取版本信息。

具体的，为保证了已发布页面的稳定性，每次发布页面时都可以选择指定基础库的版本，非最新基础库，且理论上不会更新，因此，响应于基础库的选择操作，获取版本信息，配置信息包括基础库的版本信息。

示例性地，如图3c和图3d所示，绘制人员(不具备网页编程能力的用户)根据设计稿，可以将现有基础组件或者模板组件进行拼装，从而绘制出满足要求的页面。在此过程中，此人可以将有可能多次用到的通用部分上传成为模板组件，以供之后或者其他人员使用。之后，绘制人员可以根据需要给网页添加必要的事件(比如点击某个区域可以跳转页面，或者点击某个区域可以改变另外某个区域地显示状态，或者调用其他后台接口)，最终可以生成描述页面数据的配置信息，终端可以将配置信息上传至服务器，服务器根据配置信息生成入口文件，并向终端返回入口文件的存储地址(以网络链接和/或二维码的形式)。绘制人员访问该存储地址，从而看到最终的页面，完成页面的绘制。

进一步地，对于基础组件，用户可以直接将任意其他的第三方组件库，将基础组件的源码文件夹直接放到开发项目中的一个专门放置组件的文件夹内，同时再一个注册所有组件的文件内引入该组件，同时配置该组件所需要的传入参数、组件名称等信息，即可完成引入。之后只需简单的配置，即可完成对接，同时，还会自动生成该组件的配置内容，如图3e所示，无需开发人员额外完成配置表单的编写。

本实施例中，通过响应于页面组件的拖拽操作，获取页面组件配置信息；响应于页面交互逻辑的配置操作，获取交互逻辑配置信息；响应于基础库的选择操作，获取版本信息，实现通过简单的拖拽操作、配置操作以及选择操作能够让不具备编程能力的用户进行网页开发，达到减低网页开发要求，节省具有编程能力的开发人员的时间，降低网页开发的时间成本。

在一个实施例中，接收服务器返回的入口文件，包括：接收服务器返回的访问信息，响应于访问信息的访问操作，接收服务器返回的入口文件。

其中，访问信息用于表征入口文件的访问途径。具体的，服务器根据配置信息生成入口文件。服务器根据入口文件的存储地址生成访问信息，访问信息可以是一个网络链接，也可以是包含有网络链接的信息码，比如二维码。服务器将生成的访问信息发送至终端，终端展示该访问信息。响应于访问信息的访问操作，向服务器发送入口文件的请求指令，服务器将入口文件返回至终端。

示例性的，服务器将生成的访问链接发送至终端，终端展示该访问信息。用户可以点击该访问链接，响应于访问信息的点击操作，向服务器发送入口文件的请求指令，服务器将入口文件返回至终端。或者，服务器将生成的二维码发送至终端，终端展示该二维码。用户可以点击该访问链接，响应于二维码的识别操作，向服务器发送入口文件的请求指令，服务器将入口文件返回至终端。

在一个实施例中，本申请提供的网页开发方法还可以应用于如图4a所示的应用环境中。其中，终端102通过网络与第一服务器410、第二服务器420进行通信。终端102获取页面的配置信息；终端102配置信息包括基础库的版本信息，基础库包括多套用于渲染页面的运行脚本，基础库部署在第二服务器420上。终端102将配置信息发送至第一服务器410，以指示第一服务器410扫描配置信息，根据配置信息确定页面所需要的目标组件，将目标组件的脚本加入在入口文件中，并将入口文件发送至第二服务器420，以指示第二服务器420根据入口文件的地址生成访问信息；终端102接收第二服务器420返回的访问信息；响应于访问信息的访问操作，终端102接收第二服务器420返回的入口文件。终端102发送运行环境标识和版本信息至第二服务器420；以指示第二服务器420根据运行环境标识和版本信息进行查找，从版本信息所对应的目标基础库中得到运行环境标识所对应的目标运行脚本。中，终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备，第一服务器410以及第二服务器420可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

进一步地，如图4b所示，将配置信息发送至服务器，以指示服务器根据配置信息生成入口文件，包括：

S410、将配置信息发送至第一服务器。

接收服务器返回的访问信息；响应于访问信息的访问操作，接收服务器返回的入口文件，包括：

S420、接收第二服务器返回的访问信息；响应于访问信息的访问操作，接收第二服务器返回的入口文件。

其中，配置信息用于指示第一服务器扫描配置信息，根据配置信息确定页面所需要的目标组件，将目标组件的脚本加入在入口文件中，并将入口文件发送至第二服务器，以指示第二服务器根据入口文件的地址生成访问信息。具体的，用户通过终端触发绘制页面的操作，响应于页面的绘制操作，终端获取页面的配置信息，并将页面的配置信息向第一服务器发送，第一服务器接收到页面的配置信息。由于配置信息是基于用户对基础组件或者模板组件的拖拽操作、时间配置操作、基础库选择操作等而产生，第一服务器可以根据页面的配置信息确定渲染页面所需要的目标组件，接着将目标组件的脚本加入入口文件中，最后第一服务器将包含有页面配置信息的入口文件发送至第二服务器中，第二服务器接收到入口文件，并将入口文件进行存储。第二服务器根据入口文件的存储地址生成访问信息，并将访问信息返回至终端，终端接收并显示第二服务器返回的访问信息。通过访问信息响应于用户对访问信息的访问操作，终端向第二服务器发送获取入口文件的请求，第二服务器将终端请求的入口文件返回至终端。需要说明的是，第一服务器可以将页面的配置信息进行保存，以方便绘制人员下次对页面继续绘制或者修改。

本实施例中，通过将终端生成的配置信息发送至第一服务器，通过第一服务器生成入口文件并发送至第二服务器，为页面渲染提供数据基础。且第二服务器向终端返回入口文件的访问信息，确保页面渲染的正常执行。进一步地，入口文件仅仅包括与该页面所使用的组件的配置信息，在进行页面渲染时，只需要从第二服务器获取所使用的组件，实现按需引入组件代码，加速网页的生成速度，减少用户等待时间，改善用户体验。

在一个实施例中，基础库部署在第二服务器上；发送运行环境标识和版本信息至服务器，包括：发送运行环境标识和版本信息至第二服务器；以指示第二服务器根据运行环境标识和版本信息进行查找，从版本信息所对应的目标基础库中得到运行环境标识所对应的目标运行脚本。

具体地，预先将基础库部署在第二服务器中，基础库包括多套用于渲染页面的运行脚本，基础库具有对应的版本信息，比如版本号。基础库中的多套运行脚本分别与页面运行环境对应。当终端向第二服务器发送请求时，可以将从入口文件中读取的版本信息发送至第二服务器，也可以将终端的页面的运行环境标识发送至第二服务器，第二服务器接收到运行环境标识。第二服务器根据版本信息查找对应的目标基础库，目标基础库包括多套运行脚本，根据运行环境标识在目标基础库进行查找，得到运行环境标识所对应的目标运行脚本。本实施例中，不仅通过提前在第二服务器端部署基础库，避免脚本解析所花费的时间，加速网页发布的速度。而且为不具备编程能力的用户执行网页开发工作提供了前提，不具备编程能力的用户通过拖拽组件或者配置操作即可完成网页开发工作。

在一个实施例中，基础库的生成，包括：获取原始运行脚本和多个运行环境参数；根据各运行环境参数对原始运行脚本进行代码解析，得到多套运行脚本。

其中，各运行脚本分别具有对应的运行环境标识，运行脚本所对应的运行环境标识与运行脚本解析时所使用的运行环境参数对应。具有编程能力的开发者可以事先完成原始运行脚本的编写，原始运行脚本只有一套，但是网页需要运行在不同的运行环境中，则需要对原始运行脚本进行解析，将其解析为多套运行脚本，通过多套运行脚本使多个运行环境均可以基于原始运行脚本显示相同的页面和显示效果。具体地，各个运行环境对应运行环境参数。获取原始运行脚本和多个运行环境参数，当解析器解析该原始运行脚本时，根据任一运行环境参数对原始运行脚本进行代码解析，得到与该运行环境参数对应的运行脚本。因此，通过多个运行环境参数，利用解析器分别对对原始运行脚本进行代码解析，即可得到多套运行脚本。

本实施例中，通过原始运行脚本和多个运行环境参数得到多套运行脚本，为后续基于页面可视化的绘制操作即可得到多个运行环境所需要的运行代码提供了基础，极大地提升了开发效率。而且在此基础上可以实现了自动化发布，避免人工发布出现的错误。

在一个实施例中，根据各运行环境参数对原始运行脚本进行代码解析，得到多套运行脚本，包括：将原始运行脚本的代码字符串解析成抽象语法树；根据各运行环境参数，对抽象语法树进行转换操作，得到多套抽象语法数据；根据各抽象语法数据，生成各运行环境参数所对应的运行脚本。

其中，抽象语法树(abstract syntax code，AST)是源代码的抽象语法结构的树状表示，树上的每个节点都表示源代码中的一种结构，之所以说是抽象的，是因为抽象语法树并不会表示出真实语法出现的每一个细节，比如说，嵌套括号被隐含在树的结构中，并没有以节点的形式呈现。通过抽象语法树可以将代码从一种机器读不懂的大段文字，解析成机器能读得懂的一种抽象的数据。具体地，依次通过对原始运行脚本进行词法分析、语法分析以构建语法树，将原始运行脚本的代码字符串解析成抽象语法树，并通过语义分析检查程序正确性，在确定正确后，对抽象语法树进行转换操作。由于需要生成多套与多个运行环境对应的运行脚本，因此，根据各运行环境参数，分别对抽象语法树进行转换操作，得到多套抽象语法数据，从而根据多套抽象语法数据，生成各运行环境参数所对应的运行脚本。

示例性的，如图4c和4d所示，基于原始运行脚本得到小程序的运行脚本(即微信小程序代码)和Web运行脚本(即H5代码)。

本实施例中，通过将将原始运行脚本的代码字符串解析成抽象语法树；根据各运行环境参数，对抽象语法树进行转换操作，得到多套抽象语法数据；根据各抽象语法数据，生成各运行环境参数所对应的运行脚本，针对在多个运行环境显示相同页面的需求，可以极大地减少了开发者的工作量，通过一套原始运行脚本既可以在多个运行环境中展示同一显示效果，不再需要将同一功能或者同一效果多次编写代码，极大地提高了开发效率。

在一个实施例中，执行目标运行脚本，并根据入口文件渲染页面，包括：执行目标运行脚本，根据入口文件获取渲染页面所需的目标组件，通过目标组件渲染页面。

具体地，由于入口文件中包括有页面渲染所需的组件的配置信息、事件的配置信息等，终端在获取到目标运行脚本后，执行目标运行脚本，并根据入口文件渲染页面所需要使用的配置信息和目标组件，利用这些配置信息和目标组件对页面进行渲染。配置信息可以包括页面的标题、页面的结构、页面中组件的层次结构、页面中组件的配置信息以及事件的配置信息等，还可以包括组件的布局信息、背景色等。进一步地，本实施中通过拖拽组件绘制的页面是动态，通过该页面可以与服务端进行交互，并可以执行自定义命令的操作。

在获取页面的配置信息后，该配置信息为梳妆的，结构如图所示。递归该配置信息，对于单个组件，分别提取其布局信息、脚本信息、组件所配置的特有信息等。每种信息都有一个专用的处理器，用于处理一部分数据。可以把组件使用所有的处理器，一层一层地包裹起来，如果其有子元素，就在其内部渲染子元素。具体如图所示，包括处理数据层、布局层、脚本层和内部组件。处理数据层用于对数据进行处理并传递给后续处理层。布局层用于获取布局配置信息，在页面上进行绘制，将其他数据传递给后续处理层，脚本层用于获取脚本信息，并进行处理，将处理过的脚本及时间传递给后续处理层，内部组件用于根据组件需要的方式把数据传递至组件，并使其按照正确的方式进行渲染。

在一个实施例中，本申请提供一种网页开发方法，如图5所示，该方法包括以下步骤：

S510、获取页面的配置信息。

其中，配置信息包括基础库的版本信息，页面的配置信息还包括页面组件配置信息和交互逻辑配置信息；基础库包括多套用于渲染页面的运行脚本；基础库部署在第二服务器上；基础库的生成，包括：获取原始运行脚本和多个运行环境参数；将原始运行脚本的代码字符串解析成抽象语法树；根据各运行环境参数，对抽象语法树进行转换操作，得到多套抽象语法数据；根据各抽象语法数据，生成各运行环境参数所对应的运行脚本。各运行脚本分别具有对应的运行环境标识，运行脚本所对应的运行环境标识与运行脚本解析时所使用的运行环境参数对应。

具体地，响应于页面组件的拖拽操作，获取页面组件配置信息；响应于页面交互逻辑的配置操作，获取交互逻辑配置信息；响应于基础库的选择操作，获取版本信息。页面交互逻辑包括页面跳转、调用接口、提交表单、链接埋点、回到页面顶部中的至少一个。

S520、将配置信息发送至第一服务器。

其中，第一服务器扫描配置信息，根据配置信息确定页面所需要的目标组件，将目标组件的脚本加入在入口文件中，并将入口文件发送至第二服务器，以指示第二服务器根据入口文件的地址生成访问信息。访问信息用于表征入口文件的访问途径。

S530、接收第二服务器返回的访问信息；响应于访问信息的访问操作，接收第二服务器返回的入口文件。

S540、发送运行环境标识和版本信息至第二服务器。

其中，第二服务器根据运行环境标识和版本信息进行查找，从版本信息所对应的目标基础库中得到运行环境标识所对应的目标运行脚本。

S550、接收服务器返回的目标运行脚本。

S560、执行目标运行脚本，根据入口文件获取渲染页面所需的目标组件，通过目标组件渲染页面。

应该理解的是，虽然上述流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，上述流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

在一个实施例中，本申请提供一种网页开发方法，该方法应用于图1中的服务器，该方法包括以下步骤：

S610、获取终端发送的页面的配置信息；所述配置信息包括基础库的版本信息，所述基础库包括多套用于渲染页面的运行脚本；

S620、根据所述配置信息生成入口文件，并返回所述入口文件至所述终端，以指示所述终端从所述入口文件中获取所述版本信息；

S630、接收所述终端发送的运行环境标识和所述版本信息；

S640、根据所述运行环境标识和所述版本信息进行查找，从所述版本信息所对应的目标基础库中得到所述运行环境标识所对应的目标运行脚本；

S650、返回所述目标运行脚本至所述终端。

关于本实施例中的各步骤的具体方式已经在前文有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。并且根据前文有关该方法的实施例的描述，服务器侧还可以包括其他实施例，此处将不做赘述。

在一个实施例中，如图6所示，提供了一种网页开发装置，包括：配置信息获取模块610、配置信息发送模块620、入口文件接收模块630、环境版本发送模块640和目标脚本执行模块650，其中：

配置信息获取模块610，用于获取页面的配置信息；所述配置信息包括基础库的版本信息，所述基础库包括多套用于渲染页面的运行脚本；

配置信息发送模块620，用于将所述配置信息发送至服务器，以指示所述服务器根据所述配置信息生成入口文件；

入口文件接收模块630，用于接收所述服务器返回的入口文件，从所述入口文件中获取所述版本信息；

环境版本发送模块640，用于发送运行环境标识和所述版本信息至所述服务器；以指示所述服务器根据所述运行环境标识和所述版本信息进行查找，从所述版本信息所对应的目标基础库中得到所述运行环境标识所对应的目标运行脚本；

目标脚本执行模块650，用于接收所述服务器返回的目标运行脚本，执行所述目标运行脚本，并根据所述入口文件渲染所述页面。

在一个实施例中，所述页面的配置信息还包括页面组件配置信息和交互逻辑配置信息；配置信息获取模块610，还用于响应于页面组件的拖拽操作，获取所述页面组件配置信息；响应于页面交互逻辑的配置操作，获取所述交互逻辑配置信息；响应于所述基础库的选择操作，获取所述版本信息。

在一个实施例中，所述页面交互逻辑包括页面跳转、调用接口、提交表单、链接埋点、回到页面顶部中的至少一个。

在一个实施例中，入口文件接收模块630，还用于接收所述服务器返回的访问信息，响应于所述访问信息的访问操作，接收所述服务器返回的入口文件；所述访问信息用于表征所述入口文件的访问途径。

在一个实施例中，配置信息发送模块620，还用于将所述配置信息发送至第一服务器，以指示所述第一服务器扫描所述配置信息，根据所述配置信息确定所述页面所需要的目标组件，将所述目标组件的脚本加入在所述入口文件中，并将所述入口文件发送至第二服务器，以指示所述第二服务器根据所述入口文件的地址生成所述访问信息；

入口文件接收模块630，还用于接收所述第二服务器返回的访问信息；响应于所述访问信息的访问操作，接收所述第二服务器返回的入口文件。

在一个实施例中，所述基础库部署在所述第二服务器上；环境版本发送模块640，还用于发送所述运行环境标识和所述版本信息至所述第二服务器；以指示所述第二服务器根据所述运行环境标识和所述版本信息进行查找，从所述版本信息所对应的目标基础库中得到所述运行环境标识所对应的目标运行脚本。

在一个实施例中，该装置还包括基础库生成模块，用于获取原始运行脚本和多个运行环境参数；根据各所述运行环境参数对所述原始运行脚本进行代码解析，得到多套所述运行脚本；各所述运行脚本分别具有对应的运行环境标识，所述运行脚本所对应的运行环境标识与所述运行脚本解析时所使用的运行环境参数对应。

在一个实施例中，基础库生成模块，还用于将所述原始运行脚本的代码字符串解析成抽象语法树；根据各所述运行环境参数，对所述抽象语法树进行转换操作，得到多套抽象语法数据；根据各所述抽象语法数据，生成各所述运行环境参数所对应的运行脚本。

在一个实施例中，目标脚本执行模块，还用于执行所述目标运行脚本，根据所述入口文件获取渲染所述页面所需的目标组件，通过所述目标组件渲染所述页面。

关于网页开发装置的具体限定可以参见上文中对于网页开发方法的限定，在此不再赘述。上述网页开发装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图7所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、运营商网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种网页开发方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图7中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述任一实施例中的网页开发方法的步骤。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述任一实施例中的网页开发方法的步骤。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-Only Memory，ROM)、磁带、软盘、闪存或光存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic Random Access Memory，DRAM)等。

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

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

Claims (13)

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

获取页面的配置信息；所述配置信息包括基础库的版本信息，所述基础库包括多套用于渲染页面的运行脚本；

将所述配置信息发送至服务器，以指示所述服务器根据所述配置信息生成入口文件；

接收所述服务器返回的入口文件，从所述入口文件中获取所述版本信息；

发送运行环境标识和所述版本信息至所述服务器；以指示所述服务器根据所述运行环境标识和所述版本信息进行查找，从所述版本信息所对应的目标基础库中得到所述运行环境标识所对应的目标运行脚本；

接收所述服务器返回的目标运行脚本，执行所述目标运行脚本，并根据所述入口文件渲染所述页面。

2.根据权利要求1所述的方法，其特征在于，所述页面的配置信息还包括页面组件配置信息和交互逻辑配置信息；所述获取页面的配置信息，包括：

响应于页面组件的拖拽操作，获取所述页面组件配置信息；

响应于页面交互逻辑的配置操作，获取所述交互逻辑配置信息；

响应于所述基础库的选择操作，获取所述版本信息。

3.根据权利要求2所述的方法，其特征在于，所述页面交互逻辑包括页面跳转、调用接口、提交表单、链接埋点、回到页面顶部中的至少一个。

4.根据权利要求1所述的方法，其特征在于，所述接收所述服务器返回的入口文件，包括：

接收所述服务器返回的访问信息，响应于所述访问信息的访问操作，接收所述服务器返回的入口文件；所述访问信息用于表征所述入口文件的访问途径。

5.根据权利要求4所述的方法，其特征在于，所述将所述配置信息发送至服务器，以指示所述服务器根据所述配置信息生成入口文件，包括：

将所述配置信息发送至第一服务器，以指示所述第一服务器扫描所述配置信息，根据所述配置信息确定所述页面所需要的目标组件，将所述目标组件的脚本加入在所述入口文件中，并将所述入口文件发送至第二服务器，以指示所述第二服务器根据所述入口文件的地址生成所述访问信息；

所述接收所述服务器返回的访问信息；响应于所述访问信息的访问操作，接收所述服务器返回的入口文件，包括：

接收所述第二服务器返回的访问信息；响应于所述访问信息的访问操作，接收所述第二服务器返回的入口文件。

6.根据权利要求5所述的方法，其特征在于，所述基础库部署在所述第二服务器上；所述发送运行环境标识和所述版本信息至所述服务器，包括：

发送所述运行环境标识和所述版本信息至所述第二服务器；以指示所述第二服务器根据所述运行环境标识和所述版本信息进行查找，从所述版本信息所对应的目标基础库中得到所述运行环境标识所对应的目标运行脚本。

7.根据权利要求6所述的方法，其特征在于，所述基础库的生成，包括：

获取原始运行脚本和多个运行环境参数；

根据各所述运行环境参数对所述原始运行脚本进行代码解析，得到多套所述运行脚本；各所述运行脚本分别具有对应的运行环境标识，所述运行脚本所对应的运行环境标识与所述运行脚本解析时所使用的运行环境参数对应。

8.根据权利要求7所述的方法，其特征在于，所述根据各所述运行环境参数对所述原始运行脚本进行代码解析，得到多套所述运行脚本，包括：

将所述原始运行脚本的代码字符串解析成抽象语法树；

根据各所述运行环境参数，对所述抽象语法树进行转换操作，得到多套抽象语法数据；

根据各所述抽象语法数据，生成各所述运行环境参数所对应的运行脚本。

9.根据权利要求1至8任一项所述的方法，其特征在于，所述执行所述目标运行脚本，并根据所述入口文件渲染所述页面，包括：

执行所述目标运行脚本，根据所述入口文件获取渲染所述页面所需的目标组件，通过所述目标组件渲染所述页面。

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

获取终端发送的页面的配置信息；所述配置信息包括基础库的版本信息，所述基础库包括多套用于渲染页面的运行脚本；

根据所述配置信息生成入口文件，并返回所述入口文件至所述终端，以指示所述终端从所述入口文件中获取所述版本信息；

接收所述终端发送的运行环境标识和所述版本信息；

根据所述运行环境标识和所述版本信息进行查找，从所述版本信息所对应的目标基础库中得到所述运行环境标识所对应的目标运行脚本；

返回所述目标运行脚本至所述终端。

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

配置信息获取模块，用于获取页面的配置信息；所述配置信息包括基础库的版本信息，所述基础库包括多套用于渲染页面的运行脚本；

配置信息发送模块，用于将所述配置信息发送至服务器，以指示所述服务器根据所述配置信息生成入口文件；

入口文件接收模块，用于接收所述服务器返回的入口文件，从所述入口文件中获取所述版本信息；

环境版本发送模块，用于发送运行环境标识和所述版本信息至所述服务器；以指示所述服务器根据所述运行环境标识和所述版本信息进行查找，从所述版本信息所对应的目标基础库中得到所述运行环境标识所对应的目标运行脚本；

目标脚本执行模块，用于接收所述服务器返回的目标运行脚本，执行所述目标运行脚本，并根据所述入口文件渲染所述页面。

12.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至10中任一项所述的方法的步骤。

13.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至10中任一项所述的方法的步骤。

Images