交互网页编排方法及装置与流程

本申请涉及网页开发领域，具体而言，涉及一种交互网页编排方法及装置。

背景技术：

在进行报告中常常存在一些业务处理，如图表之间的联动、图表的定时更新以及其他的复杂业务处理。使用传统的网页web开发，需要开发人员经过专业的培训学习，学习周期长，学习成本高，最后通过编写代码的形式开发相应的网页。该方法，操作繁琐，耗费了大量时间和精力。同时现有的网页生成技术无法在网页制作过程中直观的看到最终发布的网页的效果。针对不同的平台，还要考虑到兼容性问题。进而导致开发周期长，对企业来说增加了运营成本。同时，对于一些非开发人员的设计者，有好想法，好的创意，但是由于其本身对网页技术不是特别了解，进而不能将好的创意实现，只能寻求专业人员的帮助。

技术实现要素：

为了克服现有技术中的上述不足，本申请的目的之一在于提供一种交互网页编排方法，所述方法的步骤包括：

通过浏览器提供一网页编辑界面，在所述网页编辑界面显示至少一个编排素材和至少一个交互编排组件，所述编排素材用于编排交互网页；所述交互编排组件用于配置交互流程，所述交互编排组件包括用于配置网页交互流程的交互流程配置选项；

响应用户在所述网页编辑界面上的编排素材选取操作，将用户选中的至少一个所述编排素材作为目标编排素材；

响应用户在所述网页编辑界面上的交互编排组件选取操作，将用户选中的多个交互编排组件作为目标交互编排组件；

响应用户在所述网页编辑界面上对多个所述目标交互编排组件之间交互关系的配置操作，确定与所述目标编排素材之间的交互逻辑，所述配置操作通过所述交互流程配置选项完成；

根据所述目标编排素材及所述目标编排素材交互逻辑生成相应的配置文件；

根据所述配置文件生成相应的交互网页。

可选地，所述网页编辑界面包括编排素材画布区，所述编排素材画布区用于显示所述目标编排素材；所述响应用户在所述网页编辑界面上的选取操作，将用户选中的至少一个所述编排素材作为目标编排素材的步骤包括：

根据所述用户拖拽所述目标编排素材到所述编排画布区的位置，将所目标编排素材显示到所述编排画布区相应的位置。

可选地，所述网页编辑界面还包括交互流程编排画布区，所述网页流程编排画布区用于显示交互编排组件和配置网页交互流程，所述响应用户在所述网页编辑界面上的交互编排组件选取操作，将用户选中的多个交互编排组件作为目标交互编排组件的步骤包括：

根据所述用户拖拽所述目标编排组件到所述交互流程编排画布区的位置，将所目标编排组件显示到所述交互流程编排画布区相应的位置。

可选地，所述响应用户在所述网页编辑界面上的对多个所述目标交互编排组件之间交互关系的配置操作，确定与所述目标编排素材之间的交互逻辑，所述配置操作通过所述交互流程配置选项完成的步骤包括：

根据所述用户对所述交互配置流程选项的交互流程配置操作，将所述目标交互编排组件通过线段进行连接，所述交互操作流程沿所述线段执行；

根据所述用户的配置操作，生成相应的配置文件。

可选地，所述配置文件包括操作类型和操作属性，所述操作类型预设有相对应的代码片段；所述根据所述配置文件生成相应的交互网页的步骤包括：

根据所述配置文件获取其中的操作类型和操作属性；

根据所述操作类型获取所述操作类型对应的代码片段，所述操作属性作为代码片段运行时的参数；

根据所述代码片段生成交互网页。

可选地，所述交互事件编排组件包括开始组件、绑定事件组件、业务处理组件、延迟处理组件、频率执行组件、数据处理组件、逻辑处理组件、多任务完成组件和脚本注入组件；

所述开始组件用来表示一个交互流程的开始节点，一个流程只有一个开始节点，所述开始组件只能连接绑定事件组件；

所述绑定事件组件用于绑定用户的交互操作事件；

所述业务处理组件用于表示对所述交互操作事件的处理方式，所述处理方式包括联动处理、请求处理、页面跳转处理、信息提示和遮罩处理；

所述延迟处理组件用于实现任务的异步执行；

所述频率执行组件用于配置任务按照一定时间规律执行；

所述逻辑处理组件用于控制任务执行过程中的分支走向；

所述多任务完成组件用于满足当需要几个任务节点都完成执行才能执行下一个任务的场景；

所述脚本注入组件用于现有组件无法完成的场景，通过编写相应的脚本执行相应的任务。

本申请的另一目的在于提供一种交互网页编排装置，所述交互网页编排装置包括界面显示模块、编排素材选取模块、交互编排组件选取模块、交互逻辑配置模块、配置文件生成模块和网页生成模块；

所述界面显示装置用于通过浏览器提供一网页编辑界面，在所述网页编辑界面显示至少一个编排素材和至少一个交互编排组件，所述编排素材用于编排交互网页；所述交互编排组件用于配置交互流程，所述交互编排组件包括用于配置网页交互流程的交互流程配置选项；

所述编排素材选取模块用于响应用户在所述网页编辑界面上的编排素材选取操作，将用户选中的至少一个所述编排素材作为目标编排素材；

所述交互逻辑配置模块用于响应用户在所述网页编辑界面上的交互编排组件选取操作，将用户选中的多个交互编排组件作为目标交互编排组件；

所述交互逻辑配置模块响应用户在所述网页编辑界面上的对多个所述目标交互编排组件之间交互关系的配置操作，确定与所述目标编排素材之间的交互逻辑，所述配置操作通过所述交互流程配置选项完成；

所述配置文件生成模块用于根据所述目标编排素材及所述目标编排素材交互逻辑生成相应的配置文件；

所述网页生成模块用于根据所述配置文件生成相应的交互网页。

可选地，所述网页编辑界面包括编排素材画布区，所述编排素材选取模块通过以下方式选取目标编排素材：

根据所述用户拖拽所述目标编排素材到所述编排画布区的位置，将所目标编排素材显示到所述编排画布区相应的位置。

可选地，所述网页编辑界面还包括交互流程编排画布区，所述交互画布编排装置通过以下方式选取目标交互编排组件：

根据所述用户拖拽所述目标编排组件到所述交互流程编排画布区的位置，将所目标编排组件显示到所述交互流程编排画布区相应的位置。

可选地，所述配置文件生成模块通过以下方式生成配置文件：

根据所述用户对所述交互配置流程选项的交互流程配置操作，将所述目标交互编排组件通过线段进行连接，所述交互操作流程沿所述线段执行；

根据所述用户的配置操作，生成相应的配置文件。

相对于现有技术而言，本申请至少具有以下有益效果：

本申请实施例提供的交互网页编排方法及装置，通过浏览器提供一交互网页编辑界面，所述编辑界面提供有预设的网页编排素材和交互编排组件，通过用户拖拽的方式选取相应的网页编排素材和交互编排组件。用户根据需要的网页交互逻辑对所述交互编排组件进行配置，并根据所述配置生成相应的配置文件。根据所述配置文件生成相应的网页。所述交互网页编排方法及装置减少了网页的开发周期和企业运营成本，具有极高的市场推广价值。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本申请实施例提供的交互网页编排系统的结构图；

图2为本申请实施例提供的交互网页编排方法的步骤流程图；

图3为本申请实施例提供的步骤s600的子步骤示意图；

图4为本申请实施例提供的网页交互编排装置的结构图。

图标：100-交互网页编排系统；140-交互模块；130-处理器；300-交互网页编排装置；120-机器可读存储器；3001-界面显示模块；3002-编排素材选取模块；3003-交互编排组件选取模块；3004-交互逻辑配置模块；3005-配置文件生成模块；3006-网页生成模块。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

请参照图1，图1是本申请较佳实施例提供交互网页编排系统100的结构图。所述交互网页编排系统100包括交互模块140、处理器130、交互网页编排装置300和机器可读存储器120。

所述机器可读存储器120、处理器130、交互模块140和交互网页编排装置300各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接，以实现数据信号或控制信号的传输。

其中，所述机器可读存储器120可以是，但不限于，随机存取存储器(randomaccessmemory，ram)，只读存储器(readonlymemory，rom)，可编程只读存储器(programmableread-onlymemory，prom)，可擦除只读存储器(erasableprogrammableread-onlymemory，eprom)，电可擦除只读存储器(electricerasableprogrammableread-onlymemory，eeprom)等。其中，机器可读存储器120用于存储程序，所述处理器130在接收到执行指令后，执行所述程序。

其中，所述机器可读存储器120可以是，但不限于，随机存取存储器(randomaccessmemory，ram)，只读存储器(readonlymemory，rom)，可编程只读存储器(programmableread-onlymemory，prom)，可擦除只读存储器(erasableprogrammableread-onlymemory，eprom)，电可擦除只读存储器(electricerasableprogrammableread-onlymemory，eeprom)等。其中，所述机器可读存储器120用于存储程序，处理器130在接收到执行指令后，执行所述程序。所述处理器130以及其他可能的组件对所述机器可读存储器120的访问可在所述存储控制器的控制下进行。

所述处理器130可能是一种集成电路芯片，具有信号的处理能力。上述的处理器130可以是通用处理器包括中央处理器(centralprocessingunit，cpu)、网络处理器(networkprocessor，np)等；还可以是数字信号处理器(dsp)、专用集成电路(asic)、现场可编程门阵列(fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

请参照图2，图2为应用于图1所示的交互网页编排系统100的的交互网页编排方法的步骤流程图，以下将对所述交互网页编排方法包括的各个步骤进行详细阐述。

步骤s100，通过浏览器提供一网页编辑界面，在所述网页编辑界面显示至少一个编排素材和至少一个交互编排组件，所述编排素材用于编排交互网页；所述交互编排组件用于配置交互流程，所述交互编排组件包括用于配置网页交互流程的交互流程配置选项。

可选地，用户通过浏览器访问服务器获取所述网页编辑界面，所述网页界面用于编排交互网页。在所述网页编辑界面显示有预设的编排素材和交互编排组件。所述编排素材用于编排交互网页，作为交互网页的基本元素。所述编排素材包括图表、图片、表格和按钮等常见网页标签中对应的元素。所述交互编排组件用于配置交互网页的交互流程。

步骤s200，响应用户在所述网页编辑界面上的编排素材选取操作，将用户选中的至少一个所述编排素材作为目标编排素材。

可选地，所述网页编辑界面包括编排素材画布区，所述编排素材画布区用户显示所述目标编排素材。用户通过交互模块140选取所述网页编辑界面提供的编排素材。所述交互模块140包括鼠标或者触摸屏。所述用户通过所述交互模块140选中所需要的目标编排素材，并将所述目标编排素材拖拽到所述编排素材画布区。所述编画布区对所述目标编排素材进行显示。

同时，所述用户根据交互网页的交互逻辑，对所述目标编排素材进行排版操作。所述用户通过交互模块140对所述目标编排素材进行拖拽操作，然后将所述目标素材放置到所述编排素材画布区合适的位置。

步骤s300，响应用户在所述网页编辑界面上的交互编排组件选取操作，将用户选中的多个交互编排组件作为目标交互编排组件。

可选地，所述网页编辑界面还包括交互流程编排画布区，所述网页流程编排画布区用于显示交互编排组件和配置交互网页的交互流程。所述网页编排画布区包括有预设的交互编排组件，所述用户通过交互模块140选取相应的目标交互编排组件，并将所述交互编排组件拖拽到所述流程编排画布区。

步骤s400，响应用户在所述网页编辑界面上的对多个所述目标交互编排组件之间交互关系的配置操作，确定与所述目标编排素材之间的交互逻辑，所述配置操作通过所述交互流程配置选项完成。

可选地，所述预设的交互编排组件包括开始组件、绑定事件组件、业务处理组件、延迟处理组件、频率执行组件、逻辑处理组件、多任务完成组件和脚本注入组件。所述交互编排组件用于配置交互流程组或者交互流程，已配置好的交互流程可作为交互流程组的子流程，所述交互流程组包括至少一个交互流程。

所述用户在所述交互流程编排画布区通过所述目标交互编排组件预设的配置选项根据网页交互逻辑进行配置。其中，所述网页交互的流程走向，用户根据所述网页需要的交互流程走向，将所述目标交互流程编排组件通过线段进行连接。所述网页的交互流程沿所述线段执行。

可选地，所述一个交互流程包括一个开始组件，所述开始组件表示一个流程的开始节点，一个交互流程有且只有一个开始节点。其中所述开始组件只能连接绑定事件组件。所述绑定事件组件用于绑定用户对某个目标编排素材的交互事件类型。所述交互事件类型包括用户对所述目标编排素材的双击事件或者拖动事件等。

可选地，所述业务处理组件用于配置对所述事件交互组件的产生事件的处理方式。所述处理方式包括联动处理、请求处理、页面跳转处理、信息提示和遮罩处理。所述联动处理用于配置对所述交互事件作出相应的某个目标编排素材。所述请求处理用于配置网络请求，所述网络请求方式包括post、get和from。所述页面跳转处理用于配置当发生请求之后，是否需要跳转到外部页面，其中，所述跳转方式包括不保留当前页面，跳转的页面覆盖当前页面；或者跳转到新的页面，保留当前页面两种方式。所述信息提示用于对用户的非法操作发出提醒信息。所述提醒信息类型包括确认提示信息、警告信息和反馈信心，并使用不同的颜色对不同的提信息类型进行区分。所述遮罩处理用于显示交互过程中处理的等待过程，比如使用沙漏表示正在处理。

可选地，所述延迟处理组件用于使得任务异步执行。所述延迟时间可以通过交互流程配置选项设置。

可选地，所述频率执行组件用于配置任务按照一定时间间隔规律执行。频率间隔时间支持毫秒、秒、分钟和小时。所述用户同时可以通过交互流程配置选项配置相应的执行的次数，当任务循环执行的次数到达预设的执行次数，则停止循环。

可选地，用户可以通过所述开始组件的交互流程配置选项配置交互流程全局参数。所述互流程全局参数用于在所述网页的交互流程中进行传递。所述逻辑处理组件用于配置交互流程的执行过程中的分支走向。用户通过所述逻辑处理组件的预设交互流程配置选项配置交互流程的执行过程中的下一个节点的交互编排组件，同时配置相应的任务执行条件。所述逻辑处理组件包括一个用于编辑任务执行条件的编辑框。用户通过在所述编辑框编辑逻辑判断式子。所述逻辑判断式子在所述交互网页交互的过程中，通过任务执行条件判断交互逻辑的分支走向。

可选地，所述多任务完成组件用于满足当需要多个任务节点都完成执行操作才能执行下一个任务的应用场景。

可选地，所述脚本注入组件用于在所述用户无法通过对预设的交互编排组件对应的交互流程配置选项进行配置实现交互操作的场景。用户通过脚本注入组件编写相应的脚本实现一些复杂的交互动作。

步骤s500，根据所述目标编排素材及所述目标编排素材交互逻辑生成相应的配置文件。

可选地，根据所述用户对所述目标交互编排组件的配置结果，生成相应的配置文件。

步骤s600，根据所述配置文件生成相应的交互网页。

如图3所示的s600的子步骤示意图，下面就所s600的各个子步骤进行详细阐述。

步骤s6001，根据所述配置文件获取其中的操作类型和操作属性。

可选地，所述浏览器提供的网页编辑界面包括配置文件解析引擎。所述配置文件包括操作类型和所述操作类型对应的操作属性，所述操作类型对应相应的代码片段。所述解析引擎读取所述配置文件，并从中解析出操作类型和操作属性。

步骤s6002，根据所述操作类型获取所述操作类型对应的代码片段，所述操作属性作为代码片段运行时的参数。

可选地的，所述配置文件解析引擎预设有代码片段，所述配置文件解析引擎通过所述操作类型查找所述操作类型对应的代码片段。所述代码片段包括javascript代码片段、css代码片段和html代码片段。其中，所述操作类型对应的操作属性，在所述操作类型对应的代码片段运行时传递给所述操作类型对应的代码片段作为参数。

步骤s6003，根据所述代码片段生成交互网页。

可选地，所述配置文件解析引擎根据解析所述配置文件获得的代码片段生成相应的交互网页。

本实施例还提供一种交互网页编排装置300，该交互网页编排装置300可以包括至少一个可以软件或固件(firmware)的形式存储于所述机器可读存储器120中。所述处理器130可以用于执行所述机器可读存储器120中存储的可执行模块，例如所述角度校正装置所包括的软件功能模块及计算机程序等。

如图4所示，所述交互网页编排装置300从功能上划分，所述交互网页编排装置300包括界面显示模块3001、编排素材选取模块3002、交互编排组件选取模块3003、交互逻辑配置模块3004、配置文件生成模块3005和网页生成模块3006。

所述界面显示模块3001用于通过浏览器提供一网页编辑界面，在所述网页编辑界面显示至少一个编排素材和至少一个交互编排组件，所述编排素材用于编排交互网页；所述交互编排组件用于配置交互流程，所述交互编排组件包括用于配置网页交互流程的交互流程配置选项。

本实施例中，所述界面显示模块3001用于执行图2中的步骤s100，关于所述界面显示模块3001的详细描述可以参考步骤s100。

所述编排素材选取模块3002用于响应用户在所述网页编辑界面上的编排素材选取操作，将用户选中的至少一个所述编排素材作为目标编排素材。

本实施例中，所述编排素材选取模块3002用于执行如图2中的步骤s200，关于所述编排素材选取模块3002的详细描述可以参考步骤s200。

所述交互逻辑配置模块3004用于响应用户在所述网页编辑界面上的交互编排组件选取操作，将用户选中的多个交互编排组件作为目标交互编排组件。

本实施例中，所述交互编排组件选取模块3003用于执行图2中的步骤s300，关于所述交互编排组件选取模块3003的详细描述可以参考步骤s300。

所述交互逻辑配置模块3004根据所述用户在所述网页编辑界面上的对多个所述目标交互编排组件之间交互关系的配置操作，确定与所述目标编排素材之间的交互逻辑，所述配置操作通过所述交互流程配置选项完成。

本实施例中，所述交互逻辑配置模块3004用于执行图2中的步骤s400，关于所述交互逻辑配置模块3004的详细描述可以参考步骤s400。

所述配置文件生成模块3005用于根据所述目标编排素材及所述目标编排素材交互逻辑生成相应的配置文件。

本实施例中，所述配置文件生成模块3005用于执行图2中的步骤s500，关于所述配置文件生成模块3005的详细描述可以参考步骤s500。

所述网页生成模块3006用于根据所述配置文件生成相应的交互网页。

本实施例中，所述网页生成模块3006用于执行图2中的步骤s600，关于所述网页生成模块3006的详细描述可以参考步骤s600。

可选地，在本实施例中，所述网页编辑界面包括编排素材画布区，所述编排素材选取模块3002通过以下方式选取目标编排素材。

根据所述用户拖拽所述目标编排素材到所述编排画布区的位置，将所述目标编排素材显示到所述编排画布区相应的位置。

可选地，在本实施例中，所述网页编辑界面还包括交互流程编排画布区，所述交互画布编排装置通过以下方式选取目标交互编排组件。

根据所述用户拖拽所述目标编排组件到所述交互流程编排画布区的位置，将所目标编排组件显示到所述交互流程编排画布区相应的位置。

可选地，在本实施例中，所述配置文件生成模块3005通过以下方式生成配置文件。

根据所述用户对所述交互配置流程选项的交互流程配置操作，将所述目标交互编排组件通过线段进行连接，所述交互操作流程沿所述线段执行；

根据所述用户的配置操作，生成相应的配置文件。

综上所述，本申请提供的交互网页编排方法及装置，通过浏览器提供一交互网页编辑界面，所述编辑界面提供有预设的网页编排素材和交互编排组件，通过用户拖拽的方式选取相应的网页编排素材和交互编排组件。用户根据需要的网页交互逻辑对所述交互编排组件进行配置，并根据所述配置生成相应的配置文件。根据所述配置文件生成相应的网页。所述交互网页编排方法及装置减少了网页的开发周期和企业运营成本，具有极高的市场推广价值。

在本申请所提供的实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read-onlymemory)、随机存取存储器(ram，randomaccessmemory)、磁碟或者光盘等各种可以存储程序代码的介质。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应所述以权利要求的保护范围为准。