CN117008901A - 网页页面制作方法、装置、系统及存储介质 - Google Patents

Abstract

本发明公开了一种网页页面制作方法、装置、系统及存储介质，属于计算机技术领域。本发明通过对当前网页页面进行分析，得到选择的目标业务组件；基于所述目标业务组件从组件缓存中确定目标业务组件的组件属性标识，其中，所述组件缓存中存放有JSON串的组件代码、组件标识以及组件属性标识；根据所述组件属性标识获取所述目标业务组件对应的属性信息；基于所述属性信息进行网页页面制作，可直接从组件缓存中查询组件的属性信息，从而进行网页制作，通过组件缓存自动获取配置信息，提高网页制作的可复用性和效率。

Description

网页页面制作方法、装置、系统及存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种网页页面制作方法、装置、系统及存储介质。

背景技术

现有的网页制作如果是单独的海报宣传只要进行UI设计发布即可，但是如果涉及到动态业务展示、推广、受理等情况就需要单独进行功能开发，而这个过程周期相对较长，不具有可复用性，且需要专业人员来完成。

现有的网页通过传统开发模式进行，存在如下缺陷：开发周期相对较长，而H5更多的应用场景是快营销，互动性强，即时性强，可复用性较低，单个功能开发无法在其他H5开发中进行复用，造成资源的浪费。

发明内容

本发明的主要目的在于提供一种网页页面制作方法、装置、系统及存储介质，旨在解决现有技术网页开发效率低的技术问题。

为实现上述目的，本发明提供了一种网页页面制作方法，所述方法包括以下步骤：

对当前网页页面进行分析，得到选择的目标业务组件；

基于所述目标业务组件从组件缓存中确定目标业务组件的组件属性标识，其中，所述组件缓存中存放有JSON串的组件代码、组件标识以及组件属性标识；

根据所述组件属性标识获取所述目标业务组件对应的属性信息；

基于所述属性信息进行网页页面制作。

可选地，所述基于所述目标业务组件从组件缓存中确定目标业务组件的组件属性标识之前，还包括：

获取原始组件；

定义所述原始组件的组件代码及组件属性；

基于所述原始组件和所述组件属性得到原始组件的组件标识以及组件属性标识；

将所述组件代码、所述组件标识以及所述组件属性标识通过代码自动转换，得到JSON串，并将所述JSON串存放至组件缓存。

可选地，所述基于所述原始组件和所述组件属性得到原始组件的组件标识以及组件属性标识，包括：

获取所述原始组件的组件类型；

根据所述组件类型以及组件类型与组件标识之间的第一对应关系，得到原始组件的组件标识；

获取组件属性与组件属性标识之间的第二对应关系；

通过所述第二对应关系和所述组件属性得到原始组件的组件属性标识。

可选地，所述通过所述第二对应关系和所述组件属性得到原始组件的组件属性标识，包括：

对所述组件属性进行商业能力绑定，并与绑定的商业能力中的出入参进行匹配，得到业务组件以及业务组件属性；

通过所述业务组件属性和所述第二对应关系生成业务组件的组件属性标识。

可选地，所述将所述组件代码、所述组件标识以及所述组件属性标识通过代码自动转换，得到JSON串，并将所述JSON串存放至组件缓存之后，还包括：

基于所述组件代码得到组件的解析代码和组件属性的解析代码；

将所述组件的解析代码和所述组件属性的解析代码更新至渲染引擎中。

可选地，所述基于所述属性信息进行网页页面制作，包括：

将所述目标业务组件的属性信息在预设位置展示；

对非组件的内容进行属性值设定；

对设置完成的页面的属性进行预览；

在预览结束后，选择发布渠道，并确定发布条件；

基于所述发布渠道和所述发布条件发布网页页面，得到访问链接；

响应于基于所述访问链接的访问信息，通过所述组件缓存和渲染引擎进行页面信息加载展示，完成网页页面制作。

可选地，所述响应于基于所述访问链接的访问信息，通过所述组件缓存和渲染引擎进行页面信息加载展示，完成网页页面制作，包括：

响应于基于所述访问链接的访问信息，触发页面加载；

收集加载的页面上的组件标识以及属性值信息；

基于所述组件标识从所述组件缓存中得到对应的组件代码，并根据所述组件标识得到对应的组件属性；

将所述组件标识、所述组件代码、所述组件属性以及所述属性值信息输入至渲染引擎，以使所述渲染引擎进行解析，反馈目标代码；

基于所述目标代码进行加载并展示网页页面，完成网页页面制作。

此外，为实现上述目的，本发明还提出一种网页页面制作装置，所述网页页面制作装置包括：

分析模块，用于对当前网页页面进行分析，得到选择的目标业务组件；

确定模块，用于基于所述目标业务组件从组件缓存中确定目标业务组件的组件属性标识，其中，所述组件缓存中存放有JSON串的组件代码、组件标识以及组件属性标识；

获取模块，用于根据所述组件属性标识获取所述目标业务组件对应的属性信息；

制作模块，用于基于所述属性信息进行网页页面制作。

此外，为实现上述目的，本发明还提出一种网页页面制作系统，所述网页页面制作系统上执行上文所述的网页页面制作方法。

此外，为实现上述目的，本发明还提出一种存储介质，所述存储介质上存储有网页页面制作程序，所述网页页面制作程序被处理器执行时实现如上文所述的网页页面制作方法的步骤。

本发明通过对当前网页页面进行分析，得到选择的目标业务组件；基于所述目标业务组件从组件缓存中确定目标业务组件的组件属性标识，其中，所述组件缓存中存放有JSON串的组件代码、组件标识以及组件属性标识；根据所述组件属性标识获取所述目标业务组件对应的属性信息；基于所述属性信息进行网页页面制作，可直接从组件缓存中查询组件的属性信息，从而进行网页制作，通过组件缓存自动获取配置信息，提高网页制作的可复用性和效率。

附图说明

图1为本发明网页页面制作方法第一实施例的流程示意图；

图2为本发明网页页面制作系统的结构示意图；

图3为本发明网页页面制作方法第二实施例的流程示意图；

图4为本发明网页页面制作方法一实施例中JSON串的生成示意图；

图5为本发明网页页面制作方法一实施例中网页页面制作整体过程示意图；

图6为本发明网页页面制作方法第三实施例的流程示意图；

图7为本发明网页页面制作方法一实施例中网页页面、组件以及商业能力之间的关系示意图；

图8为本发明网页页面制作方法第四实施例的流程示意图；

图9为本发明网页页面制作方法一实施例中编排发布中心各模块间的逻辑关系示意图；

图10为本发明网页页面制作方法一实施例中网页页面发布示意图；

图11为本发明网页页面制作装置第一实施例的结构框图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。

本发明实施例提供了一种网页页面制作方法，参照图1，图1为本发明网页页面制作方法第一实施例的流程示意图。

本实施例中，所述网页页面制作方法包括以下步骤：

步骤S10：对当前网页页面进行分析，得到选择的目标业务组件。

需要说明的是，本实施例的执行主体可为网页页面制作系统，还可为其它可实现相同或相似功能的系统，本实施例对此不作限制，本实施例以网页页面制作系统为例进行说明。

如图2所示，图2为网页页面制作系统结构示意图，网页页面制作系统包括：业务中心、中台运营中心以及SAAS层应用，中台运营中心包括商业能力管理中心、网页组件管理中心以及网页编排发布中心，各中心的作用介绍如下，业务中心主要由业务中台(O域、B域、M域等业务系统组成)、数据中台和技术中台组合而成，提供丰富的商业能力注册到BMG(中台能力运营中心)，并提供后端处理能力。商业能力管理中心，提供对业务中心注册服务的注册、编排、发布、场景管理以及其他管理功能，同时将调用商业能力的请求路由到对应的业务中心完成完整的业务逻辑。目前系统已经提供了丰富的商业能力，形成了具有一定规模的商业能力库。网页组件管理中心，网页组件管理中心用于完成组件的管理、组件扩展属性的管理、组件与商业能力绑定关系的维护以及协议适配。具体包括：页面组件和业务组件，本系统自带了丰富的页面组件，包括按钮、文本框、下拉列表、单选框、复选框、树形结构、标签、分组表单、表格等等，用来创建H5页面的基本要素，同时对应页面组件的自定义属性，以便适应不同的场景使用；基于选定的一组页面组件，对页面组件进行业务属性的编辑，绑定商业能力以及对应商业能力的入参和出参，将带有了业务属性的组件组合定义为业务组件；业务组件可以根据实际业务需求进行定制开发，保存为模板；业务组件具有即拖即用的属性；同时按照业务归属、类型归属、使用级别等维度进行分类管理；业务组件具有自定义性，可以随业务需求完成，也可提前规划完成，随着不断的使用，会形成一个非常全面组件库，如：统一认证鉴权、激励体系、考勤管理、圈子社交、分享、云店等，以满足通用或者个性化场景使用。

在商业能力与业务组件绑定过程中，图二中的协议适配组件模块有非常关键的作用。通过判断业务组件ID的名称、输入项/输出项属性、是否列表展示等信息，自动与绑定的商业能力中出入参进行匹配，快速识别对应关系，并在配置页面中展示匹配关系。针对未匹配到的出入参关联关系，可以在配置页面进行指定关联。由于在设计上做了前后端的完全分离，此处并不需要配置数据源。

网页编排发布中心用于完成H5页面的管理(维护、预览以及发布等能力)、页面扩展属性的管理、模板管理、使用者管理、页面与组件编排关系的维护以及接入应用管理等功能。

因此当需要进行网页页面制作时，可对页面进行分析，从而得到选择的组件信息，即目标业务组件。目标业务组件为用户选择的业务组件信息。

步骤S20：基于所述目标业务组件从组件缓存中确定目标业务组件的组件属性标识，其中，所述组件缓存中存放有JSON串的组件代码、组件标识以及组件属性标识。

在具体实施中，当检测到选择的目标业务组件后，可对目标业务组件进行属性设置，则可基于目标业务组件从组件缓存中确定目标业务组件的组件标识和组件属性标识，组件缓存为存储组件的组件标识、组件属性标识以及组件代码的容器，可在进行网页页面制作之前建立组件缓存，从而在进行网页页面制作时，直接从组件缓存中查询需要的信息。

步骤S30：根据所述组件属性标识获取所述目标业务组件对应的属性信息。

在具体实施中，组件属性标识与组件的属性信息之间存在对应关系，因此可根据组件属性标识获取目标业务组件对应的属性信息。

以活动规则组件为例，当检测到运营人员拖拽该组件到新建H5页面(假设页面标识定义为2022ZXQY)的对应位置的行为时，根据组件得到组件属性标识，从而通过组件属性标识从组件缓存中自动获取该组件的属性信息在设计器的右侧展示。

步骤S40：基于所述属性信息进行网页页面制作。

在具体实施中，可将属性信息设置对应的位置，并在完成属性设置后，对设置完成的页面的属性进行预览，并对预览进行调整，进行若干次调整预览达到预期效果后，进行发布，并生成发布信息，从而进行页面加载展示，完成网页页面制作。

本实施例通过对当前网页页面进行分析，得到选择的目标业务组件；基于所述目标业务组件从组件缓存中确定目标业务组件的组件属性标识，其中，所述组件缓存中存放有JSON串的组件代码、组件标识以及组件属性标识；根据所述组件属性标识获取所述目标业务组件对应的属性信息；基于所述属性信息进行网页页面制作，可直接从组件缓存中查询组件的属性信息，从而进行网页制作，通过组件缓存自动获取配置信息，提高网页制作的可复用性和效率。

参考图3，图3为本发明网页页面制作方法第二实施例的流程示意图。

基于上述第一实施例，本实施例网页页面制作方法在所述步骤S20之前，还包括：

步骤S11：获取原始组件。

原始组件可为提前收集的各种类型的组件，可通过收集不同的组件，从而建立组件缓存。

例如获取一个设计稿，经过分析设计稿页面发现有四处组件需要进行处理，其他内容为静态图片加载，四处内容分别为：活动规则、推荐商品、服务协议以及立即升级，则原始组件为活动规则、推荐商品、服务协议以及立即升级。识别方法可用现有技术中的诸如文本识别、图像识别等方法，本实施例对此不作限制。

步骤S12：定义所述原始组件的组件代码及组件属性。

可根据识别出的内容，设计出与不同类型的内容相对应的原始组件以及样式，并根据组件样式定义原始组件的组件代码以及组件属性。

以设计稿的内容“活动规则”为例，对该“活动规则”内容进行分析，该活动规则的内容较多，如果使用能够将活动规则内容全部展示在页面的方式，页面不够显示，因此，根据业务组件开发人员的计算设备输入的跟“活动规则”有关的组件类型标识生成对应的弹窗组件，用来展示说明规则内容，采用弹窗组件的方式，既能够满足将说明规则内容全部展示，也可以节约组件占用页面的空间。

经过设计该组件包含如下关键属性：背景图片：设置为页面素材图片；弹窗样式：设为圆角遮罩样式；组件位置：设置组件在页面中所处的相对位置或者绝对位置；弹窗内容：设输入弹窗提示的内容信息；其他属性：如宽、高等。

步骤S13：基于所述原始组件和所述组件属性得到原始组件的组件标识以及组件属性标识。

在具体实施中，组件与组件标识之间存在对应关系，组件属性与组件属性标识之间也存在对应关系，因此可基于原始组件和组件属性得到原始组件的组件标识以及组件属性标识。

步骤S14：将所述组件代码、所述组件标识以及所述组件属性标识通过代码自动转换，得到JSON串，并将所述JSON串存放至组件缓存。

需要说明的是，可将组件代码、组件标识以及组件属性标识通过系统代码自动转换，组织为JSON串并将得到的JSON串存放至组件缓存。

以活动规则组件为例，生成类似如下图4所示的JSON串，此部分标识相当于html开发中的key，对应的value(属性值)将在组件使用环节根据具体页面的使用要求进行设置，形成最终的key-value对象，以实现前后台数据分离，同时实现组件的复用能力。

可选地，当建立组件缓存后，可将组件、属性的解析代码以类库的方式更新到渲染引擎中，用以支持后续的页面渲染，因此在步骤S14之后，还包括：基于所述组件代码得到组件的解析代码和组件属性的解析代码；将所述组件的解析代码和所述组件属性的解析代码更新至渲染引擎中。

组件代码中包括有组件的解析代码以及组件属性的解析代码，则可将组件的解析代码以及组件属性的解析代码以类库的方式更新至渲染引擎中。从而在后续页面渲染时，直接调用渲染引擎中的解析代码，提高渲染的效率。

如图5所示，图5为网页页面制作整体过程示意图，该页面制作过程包括四个环节，分别是商业能力开发环节、业务组件设计开发环节、H5页面设计开发环节和H5使用加载环节，其中，商业能力开发环节的执行主体是商业能力开发人员的计算设备，业务组件设计开发环节的执行主体是业务组件开发人员的计算设备，H5页面设计开发环节的执行主体是页面开发人员的计算设备，H5使用加载环节的执行主体的运行人员的计算设备，本提案的重点是业务组件设计开发环节中的组件缓存和渲染引擎，业务组件设计开发人员的计算设备将组件代码、组件标识以及组件属性标识，通过系统代码自动转换、组织为JSON串存放至组件缓存，该组件缓存中的组件代码等信息用于在H5使用加载环节中进行页面代码加载，将组件、属性的解析代码以类库的方式更新到渲染引擎中，用以在H5使用加载环节中页面渲染，该方法实现了页面框架、样式与JSON数据分离存储，这样H5页面设计开发环节的页面开发人员的计算设备在页面设计过程中不用加载页面框架对应的代码信息，节约了页面开发人员的计算设备的数据存储空间，提升了页面开发人员的计算设备的页面设计开发效率。

本实施例通过获取原始组件；定义所述原始组件的组件代码及组件属性；基于所述原始组件和所述组件属性得到原始组件的组件标识以及组件属性标识；将所述组件代码、所述组件标识以及所述组件属性标识通过代码自动转换，得到JSON串，并将所述JSON串存放至组件缓存，从而提前构建网页页面制作所需的组件，直接通过组件缓存加载数据，加载速度快，提高网页页面制作的效率。

参考图6，图6为本发明网页页面制作方法第三实施例的流程示意图。

基于上述第二实施例，本实施例网页页面制作方法所述步骤13，具体包括：

步骤S131：获取所述原始组件的组件类型。

需要说明的是，不同的组件类型不相同，因此可获取原始组件的组件类型。

步骤S132：根据所述组件类型以及组件类型与组件标识之间的第一对应关系，得到原始组件的组件标识。

可以理解的是，组件类型和组件标识之间存在第一对应关系，因此可根据组件类型以及第一对应关系，得到原始组件的组件标识。

以活动规则为例，其对应的组件类型为“弹窗组件”，计算设备可以根据预先设置的组件类型与组件标识的对应关系，确定出与“弹窗组件”的标识为Dialog_Sytle5。

步骤S133：获取组件属性与组件属性标识之间的第二对应关系。

类似的，属性与属性标志之间存在第二对应关系，因此可获取组件属性与组件属性标识之间的第二对应关系。

步骤S134：通过所述第二对应关系和所述组件属性得到原始组件的组件属性标识。

从而可根据第二对应关系以及组件属性得到原始组件的组件属性标识，例如在组件设计器中选定了组件的关键属性，则生成对应的组件属性标识为：背景图片：Dialog_Sytle5.background-image；弹窗样式：Dialog_Sytle5.border-radius；组件位置：Dialog_Sytle5.position；弹窗内容：Dialog_Sytle5.text；其他属性：Dialog_Sytle5.weight,Dialog_Sytle5.height。

进一步地，通过所述第二对应关系和所述组件属性得到原始组件的组件属性标识的步骤具体包括：对所述组件属性进行商业能力绑定，并与绑定的商业能力中的出入参进行匹配，得到业务组件以及业务组件属性；通过所述业务组件属性和所述第二对应关系生成业务组件的组件属性标识。

在具体实施中，当系统自动检测到组件具有绑定商业能力的属性，系统会在扩展属性设置中自动获取商业能力列表，选择对应的商业能力后，在右侧会自动显示商业能力对应的入参、出参信息，通过关键字匹配等节点自动关联此组件中的同名节点信息，并显示对应关系。针对动态加载系统会自动根据出参列表的数据组个数进行加载循环，并自动增加页面高度。为最大程度实现各层级能力的可复用、提升H5页面制作效率，H5页面、业务组件、商业能力均实现了多对多的关系。如图7所示，图7为网页页面、组件以及商业能力之间的关系示意图，一个业务组件可以关联绑定多个商业能力，一个商业能力也可以被多个不同的业务组件所绑定；一个页面可以关联编排多个组件，一个组件也可以被多个不同的页面所编排；H5页面可以通过模板化的方式进行高效复用。

本实施例通过获取所述原始组件的组件类型；根据所述组件类型以及组件类型与组件标识之间的第一对应关系，得到原始组件的组件标识；获取组件属性与组件属性标识之间的第二对应关系；通过所述第二对应关系和所述组件属性得到原始组件的组件属性标识，可通过组件类型与组件标识之间的第一对应关系以及属性与属性标识之间的第二对应关系快速得到组件的组件标识和组件属性标识，提高网页页面制作的效果和准确性。

参考图8，图8为本发明网页页面制作方法第四实施例的流程示意图。

基于上述第一实施例，本实施例网页页面制作方法所述步骤S40，具体包括：

步骤S401：将所述目标业务组件的属性信息在预设位置展示。

需要说明的是，当得到目标业务组件的属性信息后，可将此属性信息在设计器的右侧展示。

步骤S402：对非组件的内容进行属性值设定。

在具体实施中，网页页面上除了组件，还包括有非组件的内容，例如其他内容为静态图片，则可只设置静态图片加载即可。因此可对非组件的内容进行属性值设定个，例如：背景图片：选择已经准备的背景图片，选择后系统自动上传到服务器对应目录，以便加载；弹窗样式：选择圆角，角度为45度，遮罩；组件位置：绝对位置，根据拖拽的位置自动获取；弹窗内容：“活动规则具体提示信息，将准备好的信息直接复制到文本框即可”；其他属性：高25px，宽100px。此处设定的具体信息将作为对应key的value，将页面中所有组件标识和属性值信息进行转换并存储在生成的H5文件中，作为后续加载的重要信息，例如按照一定的规则保存在2022ZXQY页面，从而便于后续的网页页面制作。通过将各类必要标识信息进行收集和转储，并不加载对应组件的代码块，代码块加载在渲染阶段完成，实现真正的低代码运行方案。

步骤S403：对设置完成的页面的属性进行预览。

应理解的是，当属性信息以及属性值设置完成后，可对设置完成的页面的属性信息预览。并在预览时确认设计是否存在问题，经过多次调整预览达到预期效果后，预览结束。

步骤S404：在预览结束后，选择发布渠道，并确定发布条件。

当预览结束后，则可选择发布渠道，提交审批完成之后，确定具备发布的条件。发布条件可包括发布时间、发布位置等。

步骤S405：基于所述发布渠道和所述发布条件发布网页页面，得到访问链接。

当确定发布条件后，可根据发布渠道和发布条件按需正式发布网页页面(直接生效，无需发布部署)，从而生成访问链接。例如可生成带参数的URL(Uniform ResourceLocator，统一资源定位器)和二维码图片供对应SAAS层应用嵌套、分享使用。

如图9所示，图9为编排发布中心各模块间的逻辑关系示意图，一个新的H5页面制作需求，可以选择使用已有模板进行修改，也可以完全新建一个。对于已有模板的模式，可以选择简单修改信息直接预览发布使用，也可以针对模板进行个性化修改，形成新的模板。对于完全新建的H5页面，需要对页面属性和页面包含的组件进行选择和编排。

两种模式下通过页面预览达到应有效果之后，可以保存为新的模板。发布环节首先选择制作的H5需要对哪些应用渠道开放，提交审核请求，审核完成之后即可选择直接发布生效，生成特定的URL连接，无需上线即可直接使用。

步骤S406：响应于基于所述访问链接的访问信息，通过所述组件缓存和渲染引擎进行页面信息加载展示，完成网页页面制作。

当用户通过扫码或者URL直接访问时，系统自动识别URL信息，从而获取组件缓存中的数据并通过渲染引擎快速完成页面信息加载展示，完成网页页面制作。

具体地，通过组件缓存以及渲染引擎进行页面加载展示的步骤具体包括：响应于基于所述访问链接的访问信息，触发页面加载；收集加载的页面上的组件标识以及属性值信息；基于所述组件标识从所述组件缓存中得到对应的组件代码，并根据所述组件标识得到对应的组件属性；将所述组件标识、所述组件代码、所述组件属性以及所述属性值信息输入至渲染引擎，以使所述渲染引擎进行解析，反馈目标代码；基于所述目标代码进行加载并展示网页页面，完成网页页面制作。

需要说明的是，用户的计算设备自动收集设置完成的页面所包含的组件标识以及属性值信息，并根据组件标识从组件缓存中获取对应于组件标识的组件代码，并根据组件标识得到相对应的组件属性，从而通过组件缓存完成页面信息加载。

在具体实施中，通过将组件标识、组件代码、组件属性以及属性值信息一并传输至渲染引擎，渲染引擎根据输入信息启动解析流程，通过渲染引擎中的对应的解析代码进行解析，输出可被页面加载识别的目标代码，在网页页面获得代码后，完成加载并展示最终效果，客户端用户即可按需使用页面功能。针对动态加载，系统会自动根据出参列表的数据组个数进行加载循环，并自动增加页面高度。

H5页面上线免发布能力的关键在于编排发布中心的设计采用了页面框架、样式与JSON数据分离的方案，如下图10所示，在H5页面审核通过后点击发布按钮即可直接生效，同时生成可对外访问的URL连接和二维码。通过扫码或者在浏览器中输入URL均可打开H5页面，在页面进行加载时会启动内置的H5渲染器，渲染引擎快速获取相关数据进行加载渲染，通过使用缓存技术，确保了加载的响应速度。加载完成后即可完整的展示所对应的H5页面。

本实施例通过将所述目标业务组件的属性信息在预设位置展示；对非组件的内容进行属性值设定；对设置完成的页面的属性进行预览；在预览结束后，选择发布渠道，并确定发布条件；基于所述发布渠道和所述发布条件发布网页页面，得到访问链接；响应于基于所述访问链接的访问信息，通过所述组件缓存和渲染引擎进行页面信息加载展示，可快速对目标业务组件以及非组件的内容进行设置，从而快速通过组件进行网页页面的加载展示。

参照图11，图11为本发明网页页面制作装置第一实施例的结构框图。

如图11所示，本发明实施例提出的网页页面制作装置包括：

分析模块10，用于对当前网页页面进行分析，得到选择的目标业务组件。

确定模块20，用于基于所述目标业务组件从组件缓存中确定目标业务组件的组件属性标识，其中，所述组件缓存中存放有JSON串的组件代码、组件标识以及组件属性标识。

获取模块30，用于根据所述组件属性标识获取所述目标业务组件对应的属性信息。

制作模块40，用于基于所述属性信息进行网页页面制作。

本实施例通过对当前网页页面进行分析，得到选择的目标业务组件；基于所述目标业务组件从组件缓存中确定目标业务组件的组件属性标识，其中，所述组件缓存中存放有JSON串的组件代码、组件标识以及组件属性标识；根据所述组件属性标识获取所述目标业务组件对应的属性信息；基于所述属性信息进行网页页面制作，可直接从组件缓存中查询组件的属性信息，从而进行网页制作，通过组件缓存自动获取配置信息，提高网页制作的可复用性和效率。

在一实施例中，所述确定模块20，还用于获取原始组件；定义所述原始组件的组件代码及组件属性；基于所述原始组件和所述组件属性得到原始组件的组件标识以及组件属性标识；将所述组件代码、所述组件标识以及所述组件属性标识通过代码自动转换，得到JSON串，并将所述JSON串存放至组件缓存。

在一实施例中，所述确定模块20，还用于获取所述原始组件的组件类型；根据所述组件类型以及组件类型与组件标识之间的第一对应关系，得到原始组件的组件标识；获取组件属性与组件属性标识之间的第二对应关系；通过所述第二对应关系和所述组件属性得到原始组件的组件属性标识。

在一实施例中，所述确定模块20，还用于对所述组件属性进行商业能力绑定，并与绑定的商业能力中的出入参进行匹配，得到业务组件以及业务组件属性；通过所述业务组件属性和所述第二对应关系生成业务组件的组件属性标识。

在一实施例中，所述确定模块20，还用于基于所述组件代码得到组件的解析代码和组件属性的解析代码；将所述组件的解析代码和所述组件属性的解析代码更新至渲染引擎中。

在一实施例中，所述制作模块40，还用于将所述目标业务组件的属性信息在预设位置展示；对非组件的内容进行属性值设定；对设置完成的页面的属性进行预览；在预览结束后，选择发布渠道，并确定发布条件；基于所述发布渠道和所述发布条件发布网页页面，得到访问链接；响应于基于所述访问链接的访问信息，通过所述组件缓存和渲染引擎进行页面信息加载展示，完成网页页面制作。

在一实施例中，所述制作模块40，还用于响应于基于所述访问链接的访问信息，触发页面加载；收集加载的页面上的组件标识以及属性值信息；基于所述组件标识从所述组件缓存中得到对应的组件代码，并根据所述组件标识得到对应的组件属性；将所述组件标识、所述组件代码、所述组件属性以及所述属性值信息输入至渲染引擎，以使所述渲染引擎进行解析，反馈目标代码；基于所述目标代码进行加载并展示网页页面，完成网页页面制作。

此外，本发明实施例还提出一种网页页面制作系统，所述网页页面制作系统上执行上文所述的网页页面制作方法。

由于本网页页面制作系统采用了上述所有实施例的全部技术方案，因此至少具有上述实施例的技术方案所带来的所有有益效果，在此不再一一赘述。

此外，本发明实施例还提出一种存储介质，所述存储介质上存储有网页页面制作程序，所述网页页面制作程序被处理器执行时实现如上文所述的网页页面制作方法的步骤。

由于本存储介质采用了上述所有实施例的全部技术方案，因此至少具有上述实施例的技术方案所带来的所有有益效果，在此不再一一赘述。

应当理解的是，以上仅为举例说明，对本发明的技术方案并不构成任何限定，在具体应用中，本领域的技术人员可以根据需要进行设置，本发明对此不做限制。

需要说明的是，以上所描述的工作流程仅仅是示意性的，并不对本发明的保护范围构成限定，在实际应用中，本领域的技术人员可以根据实际的需要选择其中的部分或者全部来实现本实施例方案的目的，此处不做限制。

另外，未在本实施例中详尽描述的技术细节，可参见本发明任意实施例所提供的网页页面制作方法，此处不再赘述。

此外，需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如只读存储器(Read Only Memory，ROM)/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种网页页面制作方法，其特征在于，所述网页页面制作方法包括：

对当前网页页面进行分析，得到选择的目标业务组件；

基于所述目标业务组件从组件缓存中确定目标业务组件的组件属性标识，其中，所述组件缓存中存放有JSON串的组件代码、组件标识以及组件属性标识；

根据所述组件属性标识获取所述目标业务组件对应的属性信息；

基于所述属性信息进行网页页面制作。

2.如权利要求1所述的网页页面制作方法，其特征在于，所述基于所述目标业务组件从组件缓存中确定目标业务组件的组件属性标识之前，还包括：

获取原始组件；

定义所述原始组件的组件代码及组件属性；

基于所述原始组件和所述组件属性得到原始组件的组件标识以及组件属性标识；

将所述组件代码、所述组件标识以及所述组件属性标识通过代码自动转换，得到JSON串，并将所述JSON串存放至组件缓存。

3.如权利要求2所述的网页页面制作方法，其特征在于，所述基于所述原始组件和所述组件属性得到原始组件的组件标识以及组件属性标识，包括：

获取所述原始组件的组件类型；

根据所述组件类型以及组件类型与组件标识之间的第一对应关系，得到原始组件的组件标识；

获取组件属性与组件属性标识之间的第二对应关系；

通过所述第二对应关系和所述组件属性得到原始组件的组件属性标识。

4.如权利要求3所述的网页页面制作方法，其特征在于，所述通过所述第二对应关系和所述组件属性得到原始组件的组件属性标识，包括：

对所述组件属性进行商业能力绑定，并与绑定的商业能力中的出入参进行匹配，得到业务组件以及业务组件属性；

通过所述业务组件属性和所述第二对应关系生成业务组件的组件属性标识。

5.如权利要求2所述的网页页面制作方法，其特征在于，所述将所述组件代码、所述组件标识以及所述组件属性标识通过代码自动转换，得到JSON串，并将所述JSON串存放至组件缓存之后，还包括：

基于所述组件代码得到组件的解析代码和组件属性的解析代码；

将所述组件的解析代码和所述组件属性的解析代码更新至渲染引擎中。

6.如权利要求1所述的网页页面制作方法，其特征在于，所述基于所述属性信息进行网页页面制作，包括：

将所述目标业务组件的属性信息在预设位置展示；

对非组件的内容进行属性值设定；

对设置完成的页面的属性进行预览；

在预览结束后，选择发布渠道，并确定发布条件；

基于所述发布渠道和所述发布条件发布网页页面，得到访问链接；

响应于基于所述访问链接的访问信息，通过所述组件缓存和渲染引擎进行页面信息加载展示，完成网页页面制作。

7.如权利要求6所述的网页页面制作方法，其特征在于，所述响应于基于所述访问链接的访问信息，通过所述组件缓存和渲染引擎进行页面信息加载展示，完成网页页面制作，包括：

响应于基于所述访问链接的访问信息，触发页面加载；

收集加载的页面上的组件标识以及属性值信息；

基于所述组件标识从所述组件缓存中得到对应的组件代码，并根据所述组件标识得到对应的组件属性；

将所述组件标识、所述组件代码、所述组件属性以及所述属性值信息输入至渲染引擎，以使所述渲染引擎进行解析，反馈目标代码；

基于所述目标代码进行加载并展示网页页面，完成网页页面制作。

8.一种网页页面制作装置，其特征在于，所述网页页面制作装置包括：

分析模块，用于对当前网页页面进行分析，得到选择的目标业务组件；

确定模块，用于基于所述目标业务组件从组件缓存中确定目标业务组件的组件属性标识，其中，所述组件缓存中存放有JSON串的组件代码、组件标识以及组件属性标识；

获取模块，用于根据所述组件属性标识获取所述目标业务组件对应的属性信息；

制作模块，用于基于所述属性信息进行网页页面制作。

9.一种网页页面制作系统，其特征在于，所述网页页面制作系统上执行如上述权利要求1至7中任一项所述的网页页面制作方法。

10.一种存储介质，其特征在于，所述存储介质上存储有网页页面制作程序，所述网页页面制作程序被处理器执行时实现如权利要求1至7中任一项所述的网页页面制作方法。