一种用于页面搭建的互动组件及构建方法与流程

本发明涉及计算机，具体涉及一种用于页面搭建的互动组件及构建方法。

背景技术：

1、页面搭建平台通常由物料选择区、页面搭建区、属性编辑区3部分组成。3个区域一般呈横向布局排列。用户在物料选择区选择合适的元素后，通过点击选中或者拖拽的方式，添加到页面搭建区里。在搭建区中可对元素的大小、位置等进行实时调整，也可以通过右侧的属性编辑区进行更详细的配置，例如颜色、透明度、显示效果、背景、动画等，编辑配置的效果可在页面搭建区内实时预览。

2、目前主流的页面搭建平台，使用的素材主要是图片、文字、音频、视频、图文这几类，生成出的模板偏向于内容展示型，通常用于内容营销、推广海报、品牌宣传等场景，通过图片+文字的形式向客户传达信息。

3、在市场现有的活动场景中，功能更丰富、吸引力更强的营销类活动日益受到客户和用户的青睐。常见的如抽奖类、领取类、报名类、助力类、分享类活动等等。这些活动往往伴随数据的动态获取、活动规则的灵活配置、玩法的千变万化、与服务端的交互密切等特点。这与上述的内容型的静态模板相比功能更强大，实现方式也更复杂。目前绝大多数的搭建平台都不能实现这类配置，少数的搭建平台虽然有类似的功能，可以配置活动规则，但是模板固化严重，缺乏灵活性和扩展能力，无法满足市场的需求。

技术实现思路

1、针对上述现有技术的不足，本发明旨在提供一种用于页面搭建的互动组件及构建方法，以解决现有营销活动页面搭建平台难以配置互动组件或配置该种组件时使用的模板固化严重，缺乏灵活性和扩展能力的问题。

2、为了解决上述问题，本发明采用了如下的技术方案：

3、一种用于页面搭建的互动组件，所述互动组件内置数据模型和动作模型，所述数据模型用于定义字段的名称、类型、枚举、结构和释义；

4、所述动作模型用于定义不同类型互动组件所需的动作以及动作的类型、功能和关联字段，动作的类型包括接口类动作和交互类动作，其中接口类动作用于按数据模型定义的字段内容获取互动组件所需的数据，交互类动作用于扩展组件的业务逻辑；

5、每个互动组件具有唯一的组件标识，且其信息存放在comprecords对象中，以组件标识作为键值；多个互动组件形成组合组件，组合组件具有唯一的组合标识，且组合组件的关联信息存放到templatecombinations中以模板标识-组合标识作为键值的数组中；互动组件通过动作模型获取的数据存放在combinationdatas对象中的以模板标识-组合标识为键值的对象中；当多个互动组件形成组合组件时，组合组件内的互动组件根据模板标识和组合标识，通过模板标识-组合标识键值从combinationdatas对象中获取该模板下组合组件内的所有数据，实现组合组件内互动组件的数据互通。

6、作为一种可实施方式，所所述动作通过客户端根据动作模型定义动作的具体业务逻辑，通过模板生成器向互动组件注入，包括：将客户端定义动作的具体业务逻辑作为一个js函数，将接收的互动组件数据、互动组件规则和动作参数作为js函数的参数对动作的具体业务逻辑进行定义；若动作为接口类动作，则通过promise.resolve返回处理后的数据，返回处理后的数据符合数据模型定义的字段内容，若动作为交互类动作，则通过promise.resolve返回true或false，表示该动作执行成功或失败。

7、作为一种可实施方式，所述组合组件通过内置的关联组件关系图进行互动组件间的业务逻辑；其中关联组件关系图种包括动作和动作之间的关系、动作和组件之间的关系以及组件和组件之间的关系；动作和动作之间的关系会在动作完成时触发组合组件内的关联动作，动作和组件之间的关系在动作完成时显示组合组件内关联组件所在页面或在组件完成时触发组合组件内的关联动作，组件和组件之间的关系会在组件完成时显示或触发组合内的另一组件。

8、作为一种可实施方式，所述模板生成器和所述互动组件基于uni-app框架开发，在h5端或小程序端通过安装模板生成器、上传互动组件和远程加载组件或安装组件包形成页面配置。

9、作为一种可实施方式，所述互动组件和/或其他组件形成组件模板，存储于模板生成器的vuex模块中，且每个组件模板具有唯一模板标识。

10、一种用于页面搭建的互动组件的构建方法，包括：

11、在互动组件内置数据模型和动作模型，通过所述数据模型定义字段的名称、类型、枚举、结构和释义；

12、通过动作模型用于定义不同类型互动组件所需的动作以及动作的类型、功能和关联字段，动作的类型包括接口类动作和交互类动作，其中接口类动作用于按数据模型定义的字段内容获取互动组件所需的数据，交互类动作用于扩展组件的业务逻辑；

13、每个互动组件具有唯一的组件标识，且其信息存放在comprecords对象中，以组件标识作为键值；多个互动组件形成组合组件，组合组件具有唯一的组合标识，且组合组件的关联信息存放到templatecombinations中以模板标识-组合标识作为键值的数组中；互动组件通过动作模型获取的数据存放在combinationdatas对象中的以模板标识-组合标识为键值的对象中；当多个互动组件形成组合组件时，组合组件内的互动组件根据模板标识和组合标识，通过模板标识-组合标识键值从combinationdatas对象中获取该模板下组合组件内的所有数据，实现组合组件内互动组件的数据互通。

14、作为一种可实施方式，所述动作通过客户端根据动作模型中的动作定义动作的具体业务逻辑，通过模板生成器向互动组件注入，将客户端定义动作的具体业务逻辑作为一个js函数，将接收互动组件数据、互动组件规则和动作参数作为js函数的参数对动作的具体业务逻辑进行定义；若动作为接口类动作，则通过promise.resolve返回处理后的数据，返回处理后的数据符合数据模型定义的字段内容，若动作为交互类动作，则通过promise.resolve返回true或false，表示该动作执行成功或失败。

15、作为一种可实施方式，所述组合组件通过内置的关联组件关系图进行互动组件间的业务逻辑；其中关联组件关系图种包括动作和动作之间的关系、动作和组件之间的关系以及组件和组件之间的关系；动作和动作之间的关系会在动作完成时触发组合组件内的关联动作，动作和组件之间的关系在动作完成时显示组合组件内关联组件所在页面或在组件完成时触发组合组件内的关联动作，组件和组件之间的关系会在一个组件内部的特定触发动作完成后显示或触发组合内的另一个组件。

16、作为一种可实施方式，所述模板生成器和所述互动组件基于uni-app框架开发，在h5端或小程序端通过安装模板生成器、上传互动组件和远程加载组件或安装组件包形成页面配置。

17、作为一种可实施方式，所述互动组件和/或其他组件形成组件模板，存储于模板生成器的vuex模块中，且每个组件模板具有唯一模板标识。

18、本发明的有益效果在于：本发明通过互动组件实现灵活的页面配置，互动组件内置数据模型和动作模型，具有更好的适配性和扩展性，减少页面配置或更新的工作量，并通过互动组件的组合实现组合内数据互通且使互动组件具有更多的搭配方式，增加互动组件的功能。通过接入互动组件，扩展了页面搭建平台的能力，使得通过传统的表单模式配置活动，过渡到可视化模式配置活动。通过组件的配置和组合，一套互动组件可以生成多个活动模板，减少了传统模式下的前端开发工作量，提升了效率。