CN117806617B - 一种用于页面搭建的互动组件及构建方法 - Google Patents

Abstract

本发明涉及计算机技术领域，具体涉及一种用于页面搭建的互动组件及构建方法；互动组件内置数据模型和动作模型，数据模型用于定义字段的名称、类型、枚举、结构和释义，动作模型用于定义不同类型互动组件所需的动作以及动作的类型、功能和关联字段，动作的类型包括接口类动作和交互类动作，每个互动组件具有唯一的组件标识，多个互动组件形成组合组件，组合组件具有唯一的组合标识，互动组件和/或其他组件形成页面模板，存储于模板生成器的Vuex模块中，且每个页面模板具有唯一模板标识；本发明互动组件内置数据模型和动作模型，具有更好的适配性和扩展性，减少页面搭建的工作量，通过互动组件的组合实现组合内数据互通，增加互动组件的功能。

Description

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

技术领域

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

背景技术

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

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

附图说明

图1为本发明实施例中数据模型部分实例示意图。

图2为本发明实施例中动作模型部分实例示意图。

图3为本发明实施例中一种用于页面搭建的互动组件的构建方法流程图。

具体实施方式

下面结合具体实施例对本发明作进一步的详细说明。

需要说明的是，这些实施例仅用于说明本发明，而不是对本发明的限制，在本发明的构思前提下本方法的简单改进，都属于本发明要求保护的范围。

互动组件作为一段JavaScript代码，在互动组件开发完成后打包成zip压缩包，然后通过组件管理模块将组件包上传到系统中即可使用，组件上传之后存放在服务器上。当模板中配置了互动组件后，会保存该组件的加载地址到模板数据中，在模板生成器解析到该地址后，会远程请求组件代码，通过Vue.component提供的动态组件功能注册组件到模板中。

互动组件内置数据模型和动作模型，参见图1，数据模型用于定义字段的名称、类型、枚举、结构和释义。

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

在组件开发阶段时，根据数据模型可以定义好测试数据，方便组件的开发调试；在组件实际使用时，按照数据模型的字段传入组件所需的数据，即可正常渲染，通过一套数据模型，可以保证组件在开发、调试、使用阶段的数据一致性，避免二次转换和组件接入时的数据异常。

动作模型是实现互动组件和外界交互的桥梁。例如组件内的数据获取、接口调用，或者在组件整个生命周期中，某个阶段可能会需要外界介入做一些处理。这些都依赖动作模型来实现。

动作模型和数据模型实现了互动组件的动静分离。数据模型实现了互动组件的静，它统一了组件的数据接入标准；动作模型实现了互动组件的动，将变动的数据和自定义业务逻辑从客户端接入通过动作接入。数据模型和动作模型确立后，组件的开发就只需要关注组件自身的JS逻辑层的实现，实现快速开发、快速配置、快速应用。

互动组件和/或其他元素形成组件模板，存储于模板生成器的Vuex模块中，且每个组件模板具有唯一模板标识。

元素可以包括图片、文字、音频、视频、图文和H5基础元件等；H5基础元件包括按钮、输入框、轮播图、宫格位、标题栏和分隔栏等。

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

具体地，上述提到的组件标识用于唯一标识该互动组件的ID。在互动组件开发过程中，将互动组件拖动到页面画布上时，互动组件将会获取到其ID。更具体地，通过$triggerHook方法触发动作，该方法中携带组件标识。

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

模板生成器使用在客户端，基本功能是把由页面搭建平台创建好的模板数据进行渲染。模板生成器还作为中转桥梁，将组件内触发的动作模型传递到客户端，由客户端自定义处理业务逻辑，然后再将处理后的结果返回给组件。客户端指微信小程序、app内嵌页面、H5页面等。

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

具体以抽奖活动为例，当在模板中配置了抽奖组件和抽奖结果弹窗组件后，模板生成器会通过关联组件关系图自动识别到两者之间的内在联系。只需要将这两个组件进行组合，在抽奖完成后就会自动打开抽奖结果弹窗页面。关联组合关系图可以更新和扩展，方便后续接入更多的业务能力。

模板生成器和互动组件基于uni-app框架开发，在H5端或小程序端通过安装模板生成器、上传互动组件和远程加载组件或安装组件包形成页面配置。实现一套配置，兼容多个终端平台的效果。

参见图3，为一种用于页面搭建的互动组件的构建方法，包括：

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

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

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

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

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

模板生成器和所述互动组件基于uni-app框架开发，在H5端或小程序端通过安装模板生成器、上传互动组件和远程加载组件或安装组件包形成页面配置。

远程加载组件是利用前端Vue框架可以异步组件的机制去实现。在页面搭建平台中配置模板时，添加了互动组件到模板中，模板内就会保存该互动组件的加载地址。相应的，在H5端通过该地址就能加载到对应的互动组件。

互动组件和/或其他组件形成页面模板，存储于模板生成器的Vuex模块中，且每个页面模板具有唯一模板标识。

使用已上传的互动组件，可以搭建出不同类型的活动模板。将互动组件拖入到编辑区后，右侧属性栏会显示该组件的属性配置和规则配置。通过属性配置可以设置组件的样式，而规则配置则用于配置活动需要的规则信息，例如参与客群、活动规则限制、活动奖品信息、活动话术信息等等。同一个互动组件，可以有N种样式配置，同时也可以配置N种活动规则，可以配置到N个模板中，以此实现高复用度和高扩展性。

同一个模板中可能涉及到多个互动组件，并且可能位于不同的页面之中。由于组件之间的数据相互独立。比如模板中用到了4个互动组件，分别是九宫格组件、抽奖记录组件、实时抽奖显示组件、抽奖结果组件，其中前3个组件在第一页，第二个组件作为弹窗放置在第二页。编辑器提供“互动组件组合”功能。打开组合按钮会显示当前模板中可供组合的组件信息。通过选中多个组件并进行组合，组合后的组件之间即可实现数据互通。组合能力可以重组现有的组合，可以在一个模板中进行多个组合，为模板的创建提供更多的自定义能力。

对于一些独立的，以文字形式展示的但又需要绑定动态数据的信息，页面搭建平台提供了“活动模型字段”。通过添加文字元素，设置文本内容为“活动模型字段”，选择对应的字段则展示对应的动态内容。与相应的互动组件组合在一起，获取对应的数据。

在页面交互栏，可以统一配置模板内页面之间的交互。交互配置面板也分为左中右三大区域。左侧显示所有页面和当前编辑页面的图层，中间预览区方便选中页面上的元素，右侧显示已配置的全部动作和添加新动作的交互细节。交互细节有打开模板页面、关闭模板页面、打开APP页面、拨打电话、返回上一页等。交互能力可以扩展，以便支撑更多的业务场景。

除了营销活动模板之外，对于H5楼层页面也可以通过页面搭建平台去创建。营销活动模板内的元素可以在页面内自由摆放，而对于H5楼层页面，在移动端一般会遵从从上到下依次排列的布局模式，且H5楼层页面会有很多简单而通用的组件。因此，在页面搭建平台内，增加基础元件物料区。基础元件包括了按钮、输入框、轮播图、宫格位、标题栏、分隔栏等H5楼层页面常见的元素。同时，通过互动组件与上述基础元件合用，通过基础元件+互动组件相结合的能力，可以实现常用的、复杂的H5楼层页面配置。

最后说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管通过参照本发明的优选实施例已经对本发明进行了描述，但本领域的普通技术人员应当理解，可以在形式上和细节上对其作出各种各样的改变，而不偏离所附权利要求书所限定的本发明的精神和范围。

Claims (8)

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

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

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

所述动作通过客户端根据动作模型定义动作的具体业务逻辑，通过模板生成器向互动组件注入，包括：

将客户端定义动作的具体业务逻辑作为一个JS函数，将接收的互动组件数据、互动组件规则和动作参数作为JS函数的参数对动作的具体业务逻辑进行定义；

若动作为接口类动作，则通过Promise.resolve返回处理后的数据，返回处理后的数据符合数据模型定义的字段内容，若动作为交互类动作，则通过Promise.resolve返回true或false，表示该动作执行成功或失败。

2.根据权利要求1所述的用于页面搭建的互动组件，其特征在于，所述组合组件通过内置的关联组件关系图进行互动组件间的业务逻辑；其中关联组件关系图包括动作和动作之间的关系、动作和组件之间的关系以及组件和组件之间的关系；动作和动作之间的关系会在动作完成时触发组合组件内的关联动作，动作和组件之间的关系在动作完成时显示组合组件内关联组件所在页面或在组件完成时触发组合组件内的关联动作，组件和组件之间的关系会在一个组件内部的特定触发动作完成后显示或触发组合内的另一个组件。

3.根据权利要求1所述的用于页面搭建的互动组件，其特征在于，所述模板生成器和所述互动组件基于uni-app框架开发，在H5端或小程序端通过安装模板生成器、上传互动组件和远程加载组件或安装组件包形成页面配置。

4.根据权利要求1所述的用于页面搭建的互动组件，其特征在于，所述互动组件和/或其他元素形成页面模板，存储于模板生成器的Vuex模块中，且每个模板具有唯一模板标识。

5.一种用于页面搭建的互动组件的构建方法，其特征在于，包括：

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

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

每个互动组件具有唯一的组件标识，且其信息存放在compRecords对象中，以组件标识作为键值；多个互动组件形成组合组件，组合组件具有唯一的组合标识，且组合组件的关联信息存放到templateCombinations中以模板标识-组合标识作为键值的数组中；互动组件通过动作模型获取的数据存放在combinationDatas对象中的以模板标识-组合标识为键值的对象中；

当多个互动组件形成组合组件时，组合组件内的互动组件根据模板标识和组合标识，通过模板标识-组合标识键值从combinationDatas对象中获取该模板下组合组件内的所有数据，实现组合组件内互动组件的数据互通；

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

6.根据权利要求5所述的构建方法，其特征在于，所述组合组件通过内置的关联组件关系图进行互动组件间的业务逻辑；其中关联组件关系图种包括动作和动作之间的关系、动作和组件之间的关系以及组件和组件之间的关系；动作和动作之间的关系会在动作完成时触发组合组件内的关联动作，动作和组件之间的关系在动作完成时显示组合组件内关联组件所在页面或在组件完成时触发组合组件内的关联动作，组件和组件之间的关系会在一个组件内部的特定触发动作完成后显示或触发组合内的另一个组件。

7.根据权利要求5所述的构建方法，其特征在于，所述模板生成器和所述互动组件基于uni-app框架开发，在H5端或小程序端通过安装模板生成器、上传互动组件和远程加载组件或安装组件包形成页面配置。

8.根据权利要求5所述的构建方法，其特征在于，所述互动组件和/或其他组件形成组件模板，存储于模板生成器的Vuex模块中，且每个组件模板具有唯一模板标识。