CN116974558B - 一种营销计费活动h5页面开发平台及开发方法 - Google Patents

Abstract

本发明公开了一种营销计费活动H5页面开发平台及开发方法。平台包括设计开发模块和解析运行模块；设计开发模块具体包括样式设计器、事件设计器、流程设计器、对象编辑器和页面可视化编辑器；解析运行模块具体包括语法解析器、代码生成器和云服务适配器；本发明打破一般业务活动开发的繁琐流程，让开发人员高效能处理批量的，近似的营销计费活动页面，针对用户信息获取‑验证码下发‑确认支付‑计费返回结果的固定核心流程，简化开发流程，有更充足的时间处理个性化的活动页面需求，提高开发效率，减少人工成本。

Description

一种营销计费活动H5页面开发平台及开发方法

技术领域

本发明涉及H5页面开发技术领域，尤其是一种营销计费活动H5页面开发平台及开发方法。

背景技术

随着IT行业数字化技术的提升，各类IT企业业务活动场景的数字化开发要求逐渐加深。

现有技术中IT企业一般通过以下流程进行业务活动的开发：

1、开发人员在接收业务人员的业务活动需求后，与业务端进行需求沟通交流，确定业务活动页面所需的UI样式、类型和模块。

2、开发人员基于确定的业务活动需求进行业务活动页面开发工作。

3、开发人员完成业务活动页面开发工作后，业务人员对业务活动页面进行验收。

然而由于营销计费活动的流程相对固定，因此营销计费活动页面开发逻辑也大同小异。从这个角度出发，传统的业务活动开发流程显得较为冗余，每次营销活动页面开发所耗费的资源较高，营销活动页面的开发效率存在较大提升空间。

发明内容

有鉴于此，本发明实施例提供一种营销计费活动H5页面开发平台及开发方法。

本发明的第一方面提供了一种营销计费活动H5页面开发平台，包括设计开发模块和解析运行模块；

所述设计开发模块具体包括样式设计器、事件设计器、流程设计器、对象编辑器和页面可视化编辑器；

所述样式设计器用于获取并选择预设营销页面的UI样式，对所述营销页面的UI样式进行整合编排；

所述事件设计器用于获取并选择营销计费事件，在所述营销页面中设置触发事件、查询事件、编辑事件和返回事件；

所述流程设计器用于对所述营销页面中设置的多个营销计费事件进行流程编排，确定所述营销页面中设置的多个营销计费事件的执行顺序；

所述对象编辑器用于将外部对象插入所述营销页面或将所述营销页面中的对象进行编辑或删除；

所述页面可视化编辑器用于展示所述营销页面，对所述营销页面设计的UI样式和设置的事件及执行顺序进行调试；

所述解析运行模块具体包括语法解析器、代码生成器和云服务适配器；

所述语法解析器用于对基于所述营销页面导出的第一描述文件进行语法解析，得到关于字段属性、样式属性和流程属性的键值对信息；

所述代码生成器用于根据所述键值对信息生成与键值对信息对应的代码源数据；所述代码源数据能够应用于H5页面之中；

所述云服务适配器用于为所述代码源数据配置云服务环境，将所述代码源数据部署在云端。

进一步地，所述样式设计器获取并选择预设营销页面的UI样式，对所述营销页面的UI样式进行整合编排，具体包括以下步骤：

初始化所述营销页面，设置所述营销页面的基本属性；所述营销页面的基本属性包括宽度、高度、颜色、边框、边距和补白；

对所述营销页面进行分块处理，将所述营销页面划分为多个区域；

为每个区域各自设置区域的基本属性和布局样式；所述布局样式包括顺序布局、浮动布局、定位布局。

进一步地，所述事件设计器获取并选择营销计费事件，具体通过自预设事件库调用和/或自定义事件上传的方式获取并选择营销计费事件；所述在营销页面中设置触发事件、查询事件、编辑事件和返回事件，具体包括以下步骤：

确定所述触发事件、查询事件、编辑事件和返回事件的基本属性；所述事件的基本属性包括透明度、宽度、高度、颜色、旋转角度、边框、边距、补白和动画效果；

将所述触发事件、查询事件、编辑事件和返回事件设置于目标位置；

当所述触发事件、查询事件、编辑事件和返回事件关联于外部数据源时，确定所述触发事件、查询事件、编辑事件和返回事件的数据接口。

进一步地，所述流程设计器对所述营销页面中设置的多个营销计费事件进行流程编排，确定所述营销页面中设置的多个营销计费事件的执行顺序，具体包括以下步骤：

根据营销计费活动的实际需求建立事件处理流水线；所述事件处理流水线依顺序设计有多个节点；

将所述触发事件、查询事件、编辑事件和返回事件置入所述事件处理流水线的各个节点中，以事件处理流水线顺序为所述营销页面中设置的多个营销计费事件的执行顺序。

进一步地，针对营销计费活动而言，所述触发事件具体包括目标商品选择营销计费事件、验证类型选择营销计费事件、支付类型选择营销计费事件、网关认证事件和附赠权益选择营销计费事件；

所述查询事件具体包括目标商品信息查询事件、业务说明查询事件、隐私协议查询事件和资费详情查询事件；

所述编辑事件具体包括：用户号码编辑事件、滑块认证事件、语音认证事件和短信验证事件；

所述返回事件具体包括：交易取消事件和计费完成事件。

进一步地，针对营销计费活动而言，所述事件处理流水线包括依顺序设计的订单/号码获取节点、业务展示/确认节点、一次操作认证节点、二次验证节点和计费确认回调节点；

所述订单/号码获取节点中包括用户号码编辑事件和交易取消事件；

所述业务展示/确认节点中包括目标商品信息查询事件、业务说明查询事件、隐私协议查询事件、资费详情查询事件和交易取消事件；

所述一次操作认证节点中包括网关认证事件、滑块认证事件、语音认证事件和交易取消事件；

所述二次验证节点中包括短信验证事件和交易取消事件；

所述计费确认回调节点中包括计费完成事件和交易取消事件。

进一步地，所述第一描述文件为JSON描述文件；所述语法解析器对基于所述营销页面导出的第一描述文件进行语法解析，得到关于字段属性、样式属性和流程属性的键值对信息，具体通过以下步骤完成：

根据自有语法解析信息库中所涉及的基础字段属性、基础样式属性和基础流程属性对所述第一描述文件进行解析，将所述第一描述文件中涉及的字段属性、样式属性和流程属性转义为键值对信息形式；

其中，所述自有语法解析信息库中所涉及的基础字段属性包括文本、数字、日期时间、按钮、框体和alert提示；所述自有语法解析信息库中所涉及的基础样式属性包括透明度、宽度、高度、颜色、旋转角度、边框、边距、补白、动画效果、对象和数据源；所述自有语法解析信息库中所涉及的基础流程属性包括预设的多个营销计费事件处理流水线。

进一步地，所述云服务适配器为所述代码源数据配置云服务环境，具体包括以下步骤：

配置所述代码源数据的nodejs环境和npm环境；

执行npm安装项目中所述代码源数据涉及的依赖项；

对所述代码源数据进行打包处理，得到测试环境包和生产环境包；

将所述代码源数据上传目标FTP路径，并为所述代码源数据设置版本号。

进一步地，所述云服务适配器将所述代码源数据部署在云端之后，所述云服务适配器执行以下步骤：

获取营销计费活动的目标域名地址，将所述代码源数据应用至所述目标域名地址下的服务器路径中；

为所述目标域名地址配置代理逻辑和映射逻辑。

本发明第二方面公开一种营销计费活动H5页面开发方法，包括以下步骤：

获取并选择预设营销页面的UI样式，对所述营销页面的UI样式进行整合编排；

获取并选择营销计费事件，在所述营销页面中设置触发事件、查询事件、编辑事件和返回事件；

对所述营销页面中设置的多个营销计费事件进行流程编排，确定所述营销页面中设置的多个营销计费事件的执行顺序；

将外部对象插入所述营销页面或将所述营销页面中的对象进行编辑或删除；

对所述营销页面设计的UI样式和设置的事件及执行顺序进行调试；

对基于所述营销页面导出的第一描述文件进行语法解析，得到关于字段属性、样式属性和流程属性的键值对信息；

根据所述关于字段属性、样式属性和流程属性的键值对信息生成与键值对信息对应的代码源数据；所述代码源数据能够应用于H5页面之中；

为所述代码源数据配置云服务环境，将所述代码源数据部署在云端。

本发明实施例还公开了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器可以从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行前面的方法。

本发明的实施例具有如下方面有益效果：本发明一种营销计费活动H5页面开发平台及开发方法，打破一般业务活动开发的繁琐流程，让开发人员高效能处理批量的，近似的营销计费活动页面，针对用户信息获取-验证码下发-确认支付-计费返回结果的固定核心流程，简化开发流程，有更充足的时间处理个性化的活动页面需求，提高开发效率，减少人工成本。

本发明的附加方面和优点将在下面的描述部分中给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明一种营销计费活动H5页面开发平台设计结构图；

图2是本发明一种营销计费活动H5页面开发平台和开发方法步骤流程图；

图3是本发明一种营销计费活动H5页面开发平台样式设计器实施流程图；

图4是本发明一种营销计费活动H5页面开发平台事件设计器设置营销活动相关事件的实施流程图；

图5是本发明一种营销计费活动H5页面开发平台流程设计器设置营销活动相关事件流水线的实施流程图；

图6是本发明一种营销计费活动H5页面设计营销计费活动的页面触发事件执行流程图；

图7是本发明一种营销计费活动H5页面设计营销计费活动的页面查询事件执行流程图；

图8是本发明一种营销计费活动H5页面设计营销计费活动的页面编辑事件执行流程图；

图9是本发明一种营销计费活动H5页面设计营销计费活动的页面返回事件执行流程图；

图10是本发明一种营销计费活动H5页面开发平台语法解析器实施流程图；

图11是本发明一种营销计费活动H5页面开发平台代码生成器所生成代码源数据示意图；

图12是本发明一种营销计费活动H5页面开发平台所设计多个营销计费活动的前端效果图。

具体实施方式

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

现有的营销计费活动核心流程具体包括用户号码填写-验证码下发-确认支付-计费返回结果几个步骤节点；为了简化营销计费活动的开发，让开发人员高效能处理批量的，近似的营销计费活动页面，本实施例提供一种营销计费活动H5页面开发平台和开发方法。

如图1所示，本实施例一种营销计费活动H5页面开发平台，包括设计开发模块和解析运行模块。其中设计开发模块主要用于获取想要开发的营销活动的各种组成部分，组合拼装后提交解析运行模块来进行页面活动的正式编译生成。本实施例一种营销计费活动H5页面开发平台开发流程参考图2。

本实施例中设计开发模块具体包括样式设计器、事件设计器、流程设计器、对象编辑器和页面可视化编辑器。

样式设计器：如图3所示，本实施例样式设计器用于获取并选择预设营销页面的UI样式，对营销页面的UI样式进行整合编排。本实施例中可用于营销页面整合编排的UI样式为样式设计器预先设定，样式设计器所执行步骤包括以下S101-S103：

S101.初始化营销页面，设置营销页面的基本属性；营销页面的基本属性包括宽度、高度、颜色、边框、边距和补白；

S102.对营销页面进行分块处理，将营销页面划分为多个区域；

S103.为每个区域各自设置区域的基本属性和布局样式；布局样式包括顺序布局、浮动布局、定位布局。

本实施例中样式设计器在提供初始的营销页面后，用户通过样式设计器对营销页面进行页面编排。具体地，用户首先设置营销页面的基本属性，包括宽度、高度、颜色、边框、边距和补白等；设置完成后，用户对营销页面上各个区域进行划分，得到一个个独立的可视区域栏目和/或可交互区域栏目，每个区域栏目具有独立性的逻辑功能如头部、导航栏、主体内容区域、侧边栏、底部等。由于每个区域栏目的功能不同，因此需要针对不同区域栏目各自设置基本属性和布局样式。区域栏目的基本属性包括宽度、高度、颜色、边框、边距和补白等，布局样式则包括顺序布局、浮动布局、定位布局等，布局样式主要用于确定各个区域栏目之间的相互关系。其中，顺序布局表示H5页面的默认布局方式，即按照预设顺序对各个区域栏目进行布局；浮动布局表示将区域栏目抽象为一个块，使得区域栏目可以在页面范围内移动；定位布局则表示根据区域栏目的绝对坐标或相对坐标确定区域栏目的布局。本实施例中样式设计器通过对营销页面整体和每个区域栏目的设定，使得营销页面的UI样式满足营销计费活动所要求的样式效果。

事件设计器：如图4所示，事件设计器用于获取并选择营销计费事件，在营销页面中设置触发事件、查询事件、编辑事件和返回事件。本实施例营销计费活动的实现主要依赖于各种事件的组合，通过预设事件库或自定义上传的方式导入事件，样式设计器所执行步骤包括以下S201-S203：

S201.确定触发事件、查询事件、编辑事件和返回事件的基本属性；事件的基本属性包括透明度、宽度、高度、颜色、旋转角度、边框、边距、补白和动画效果；

S202.将触发事件、查询事件、编辑事件和返回事件设置于目标位置；

S203.当触发事件、查询事件、编辑事件和返回事件关联于外部数据源时，确定触发事件、查询事件、编辑事件和返回事件的数据接口。

本实施例中用户通过事件设计器将营销计费活动所需的事件添加至营销页面中，或对营销页面中已存在的事件进行复制。本实施例事件设计器设置的事件具体包括触发事件、查询事件、编辑事件和返回事件四类。其中触发事件至营销页面中供目标用户触发启动相应流程的事件；以营销计费活动为例，触发事件具体包括目标商品选择营销计费事件、验证类型选择营销计费事件、支付类型选择营销计费事件、网关认证事件和附赠权益选择营销计费事件。查询事件一般关联于外部数据接口，供目标用户查询既有的条款、规定或情况；以营销计费活动为例，查询事件具体包括目标商品信息查询事件、业务说明查询事件、隐私协议查询事件和资费详情查询事件。编辑事件指供目标用户编辑特定内容的事件；以营销计费活动为例，具体包括用户号码编辑事件、滑块认证事件、语音认证事件和短信验证事件。返回事件指停止相关事件流程的事件；以营销计费活动为例，具体包括交易取消事件和计费完成事件。

在一部分实施例中，在预设事件库中的事件无法满足营销计费活动的设计需求时，用户可以自行创建事件并导入，以满足用户特定的设计需求。

流程设计器：如图5所示，流程设计器用于对营销页面中设置的多个营销计费事件进行流程编排，确定营销页面中设置的多个营销计费事件的执行顺序，即事件流水线。通过编排特定的事件流水线，实现用户行为调用链路的可视化编辑。具体地，用户通过流程设计器根据营销计费活动的实际需求建立事件处理流水线；将触发事件、查询事件、编辑事件和返回事件置入事件处理流水线的各个节点中，以事件处理流水线顺序为营销页面中设置的多个营销计费事件的执行顺序。

如图5所示，以营销计费活动为例，事件处理流水线包括依顺序设计的订单/号码获取节点、业务展示/确认节点、一次操作认证节点、二次验证节点和计费确认回调节点。其中，订单/号码获取节点中包括用户号码编辑事件和交易取消事件；业务展示/确认节点中包括目标商品信息查询事件、业务说明查询事件、隐私协议查询事件、资费详情查询事件和交易取消事件；一次操作认证节点中包括网关认证事件、滑块认证事件、语音认证事件和交易取消事件；二次验证节点中包括短信验证事件和交易取消事件；计费确认回调节点中包括计费完成事件和交易取消事件。营销计费活动的主要流程为用户号码填写-验证码下发-确认支付-计费返回结果，因此针对特定的营销计费流程设计事件处理流水线，使得开发人员不需要重新设计事件流水线，而只需要将所需的各个事件填入预先设定的事件处理流水线中，能够简化开发人员的开发流程。

图6-图9示出了营销计费活动中各种事件的执行流程。

参考图6，当用户在H5页面中触发目标商品选择营销计费事件时，页面后台会锁定被选择的商品作为交易对象；当用户在H5页面中触发认证类型选择营销计费事件时，页面后台会锁定被选择的认证类型(网关认证/滑块认证/语音认证)作为登录操作认证的认证类型，并在页面中返回用户所选的认证事件；当用户在H5页面中触发支付类型选择营销计费事件时，页面后台会锁定被选择的支付类型并启动相应的支付流程；当用户在H5页面中触发附赠权益选择营销计费事件时，页面后台会锁定被选择的权益加入交易内容；当用户触发网关认证事件时，页面后台会通过运营商网关认证能力完成用户的身份校验。

参考图7，当用户在H5页面中触发目标商品查询事件时，页面后台会通过与目标商品相关的数据接口调取目标商品信息并显示在页面中；当用户在H5页面中触发业务说明查询事件时，页面后台会通过与业务说明相关的数据接口调取业务说明并显示在页面中；当用户在H5页面中触发隐私协议查询事件时，页面后台会通过与隐私协议相关的数据接口调取隐私协议并显示在页面中；当用户在H5页面中触发资费详情查询事件时，页面后台会通过与资费详情相关的数据接口调取资费详情并显示在页面中。

参考图8，当用户在H5页面中编辑用户号码时，页面后台会将用户编辑的号码与交易绑定，并将用户号码显示于页面上；当用户在H5页面中进行滑块认证时，页面后台会校验用户拖动滑块的结果，根据滑块认证结果对用户进行身份校验；当用户在H5页面中进行语音认证时，页面后台会保存用户输入的音频信息并上传至专用的音频校验平台，接收音频校验平台返回的结果进行身份校验；当用户在H5页面中进行短信验证时，页面后台会生成验证码并通过用户编辑的号码发送含有验证码的短信，用户在页面中填写验证码后，页面后台核对用户填写验证码是否与生成的验证码一致，以完成短信验证。

参考图9，当交易完成或交易被取消时，页面后台会将交易取消的信息向渠道商/经销商/合作商发送该次交易结果。

对象编辑器：本实施例中对象编辑器用于将外部对象插入营销页面或将营销页面中的对象进行编辑或删除。本实施例中支持编辑的外部对象包括图片、音频和视频，通过外部链接或本地上传的方式将对象导入对象编辑器；通过对象编辑器将对象插入营销页面中，或在对象编辑器中对已经插入的对象进行编辑或删除。

页面可视化编辑器：页面可视化编辑器用于展示营销页面，对营销页面设计的UI样式和设置的事件及执行顺序进行调试。由于营销页面设计时各种元素之间可能会形成冲突，此时如直接对页面进行解析运行则会对解析运行模块的资源形成无效占用，生成冲突的代码源数据。因此基于页面可视化编辑器，在用户完成样式设计器、事件设计器、流程设计器和对象编辑器操作后，可以通过页面可视化编辑器对页面进行调试，在页面出现错误时返回调整，节约开发资源。

本实施例中解析运行模块具体包括语法解析器、代码生成器和云服务适配器；

语法解析器：语法解析器用于对基于营销页面导出的第一描述文件进行语法解析，得到关于字段属性、样式属性和流程属性的键值对信息。本实施例中第一描述文件为JSON描述文件；语法解析器对基于营销页面导出的第一描述文件进行语法解析，得到关于字段属性、样式属性和流程属性的键值对信息，具体通过以下步骤完成：

S301.根据自有语法解析信息库中所涉及的基础字段属性、基础样式属性和基础流程属性对第一描述文件进行解析，将第一描述文件中涉及的字段属性、样式属性和流程属性转义为键值对信息形式；

如图10所示，自有语法解析信息库中所涉及的基础字段属性包括文本、数字、日期时间、按钮、框体和alert提示；自有语法解析信息库中所涉及的基础样式属性包括透明度、宽度、高度、颜色、旋转角度、边框、边距、补白、动画效果、对象和数据源；自有语法解析信息库中所涉及的基础流程属性包括预设的多个营销计费事件处理流水线。本实施例通过语法解析器对JSON描述文件进行语法解析绑定工作。根据自有语法解析JSON信息库所涉及的字段，进一步获取JSON描述文件中的Key-Value键值对信息进行后续处理。

代码生成器用于根据关于字段属性、样式属性和流程属性的键值对信息生成与键值对信息对应的代码源数据；代码源数据能够应用于H5页面之中。如图11所示，本实施例代码生成器基于语法解析器所形成的键值对信息将对应营销页面的位置、样式、图片、音视频、文字、事件等信息，填充至预设vue/html模板文件当中，最后进行初步JS混淆并完成H5页面的代码源数据生成。

云服务适配器：本实施例中云服务适配器用于为代码源数据配置云服务环境，将代码源数据部署在云端。具体地，云服务适配器为代码源数据配置云服务环境，包括以下步骤：

S401.配置代码源数据的nodejs环境和npm环境；

S402.执行npm安装项目中代码源数据涉及的依赖项；

S403.对代码源数据进行打包处理，得到测试环境包和生产环境包；

S404.将代码源数据上传目标FTP路径，并为代码源数据设置版本号。

本实施例中云服务适配器将代码生成器所生成的代码源数据通过svn上传至事先准备好的svn目录当中。用户进一步设置自动或人工点击确认，通过jenkins系统slave节点服务器中的npm组件来对代码源数据进行打包操作。操作步骤指令如下：

(1)node-v显示slave节点服务器的nodejs环境版本。

(2)npm-v显示slave节点服务器的npm环境版本。

(3)npm install执行npm安装项目所涉依赖。

(4)npm run build:test构建测试环境前端单页应用项目。

(5)npm run build:prod构建生产环境前端单页应用项目。

(6)上传特定FTP路径，设置版本号。

在一部分实施例中，当云服务适配器将代码源数据部署在云端之后，用户还可以通过云服务适配器获取营销计费活动的目标域名地址，将代码源数据应用至目标域名地址下的服务器路径中；并为目标域名地址配置代理逻辑和映射逻辑。具体地，用户选择营销计费活动所在的域名；云服务适配器执行shell脚本wget获取npm run build构建上传的代码源数据，并应用至所选域名下相应的服务器路径当中。进一步地，还可以额外配置nginx转发、新域名映射等逻辑，确保线上/测试的地址能正常访问到营销计费活动的H5页面。

作为一种具体的实施例，H5网页后台模块基于Spring Boot及MVC模式相关的JAVA系统级架构组件开发，暴露基于Restful风格形式的web接口供前端使用，包含触发事件、查询事件、编辑事件和返回事件等组件的加载服务，具备前后端交互相关的RSA非对称加密、域名校验、时间戳校验、防重放、签名鉴权、IP/号码黑名单等前后端交互及安全拦截能力。

如图12所示，展示本实施例营销计费活动的前端效果图。可见，基于本实施例的营销计费活动开发流程能够针对用户信息获取-验证码下发-确认支付-计费返回结果的固定核心流程进行模板化开发，使用同一种事件流水线完成多个营销计费活动的开发，节省开发成本。

本实施例针对营销计费活动提供事件组件给开发者进行模板化开发，免去现有开发流程中重复的代码编写流程，同时针对生成的json描述类文件，本实施例提供编译解析之余，还将提供云服务部署以及网关域名配套等相应服务。

本发明实施例还公开一种营销计费活动H5页面开发方法，包括以下步骤：

S501.获取并选择预设营销页面的UI样式，对营销页面的UI样式进行整合编排；

S502.获取并选择营销计费事件，在营销页面中设置触发事件、查询事件、编辑事件和返回事件；

S503.对营销页面中设置的多个营销计费事件进行流程编排，确定营销页面中设置的多个营销计费事件的执行顺序；

S504.将外部对象插入营销页面或将营销页面中的对象进行编辑或删除；

S505.对营销页面设计的UI样式和设置的事件及执行顺序进行调试；

S506.对基于营销页面导出的第一描述文件进行语法解析，得到关于字段属性、样式属性和流程属性的键值对信息；

S507.根据关于字段属性、样式属性和流程属性的键值对信息生成与键值对信息对应的代码源数据；代码源数据能够应用于H5页面之中；

S508.为代码源数据配置云服务环境，将代码源数据部署在云端。

本发明实施例的方法应用与本发明实施例的平台中，具有与本发明实施例平台相当的有益效果。

本发明实施例还公开了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器可以从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行前面的方法。

在一些可选择的实施例中，在方框图中提到的功能/操作可以不按照操作示图提到的顺序发生。例如，取决于所涉及的功能/操作，连续示出的两个方框实际上可以被大体上同时地执行或所述方框有时能以相反顺序被执行。此外，在本发明的流程图中所呈现和描述的实施例以示例的方式被提供，目的在于提供对技术更全面的理解。所公开的方法不限于本文所呈现的操作和逻辑流程。可选择的实施例是可预期的，其中各种操作的顺序被改变以及其中被描述为较大操作的一部分的子操作被独立地执行。

此外，虽然在功能性模块的背景下描述了本发明，但应当理解的是，除非另有相反说明，所述的功能和/或特征中的一个或多个可以被集成在单个物理装置和/或软件模块中，或者一个或多个功能和/或特征可以在单独的物理装置或软件模块中被实现。还可以理解的是，有关每个模块的实际实现的详细讨论对于理解本发明是不必要的。更确切地说，考虑到在本文中公开的装置中各种功能模块的属性、功能和内部关系的情况下，在工程师的常规技术内将会了解该模块的实际实现。因此，本领域技术人员运用普通技术就能够在无需过度试验的情况下实现在权利要求书中所阐明的本发明。还可以理解的是，所公开的特定概念仅仅是说明性的，并不意在限制本发明的范围，本发明的范围由所附权利要求书及其等同方案的全部范围来决定。

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

在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，“计算机可读介质”可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

尽管已经示出和描述了本发明的实施例，本领域的普通技术人员可以理解：在不脱离本发明的原理和宗旨的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由权利要求及其等同物限定。

以上是对本发明的较佳实施进行了具体说明，但本发明并不限于所述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做出种种的等同变形或替换，这些等同的变形或替换均包含在本申请权利要求所限定的范围内。

Claims (7)

1.一种营销计费活动H5页面开发平台，其特征在于，包括设计开发模块和解析运行模块；

所述设计开发模块具体包括样式设计器、事件设计器、流程设计器、对象编辑器和页面可视化编辑器；

所述样式设计器用于获取并选择预设营销页面的UI样式，对所述营销页面的UI样式进行整合编排；

所述事件设计器用于获取并选择营销计费事件，在所述营销页面中设置触发事件、查询事件、编辑事件和返回事件；

所述流程设计器用于对所述营销页面中设置的多个营销计费事件进行流程编排，确定所述营销页面中设置的多个营销计费事件的执行顺序；

所述对象编辑器用于将外部对象插入所述营销页面或将所述营销页面中的对象进行编辑或删除；

所述页面可视化编辑器用于展示所述营销页面，对所述营销页面设计的UI样式和设置的营销计费事件及执行顺序进行调试；

所述解析运行模块具体包括语法解析器、代码生成器和云服务适配器；

所述语法解析器用于对基于所述营销页面导出的第一描述文件进行语法解析，得到关于字段属性、样式属性和流程属性的键值对信息；

所述代码生成器用于根据所述键值对信息生成与键值对信息对应的代码源数据；所述代码源数据能够应用于H5页面之中；

所述云服务适配器用于为所述代码源数据配置云服务环境，将所述代码源数据部署在云端；

所述流程设计器对所述营销页面中设置的多个营销计费事件进行流程编排，确定所述营销页面中设置的多个营销计费事件的执行顺序，具体包括以下步骤：

根据营销计费活动的实际需求建立事件处理流水线；所述事件处理流水线依顺序设计有多个节点；

将所述触发事件、查询事件、编辑事件和返回事件置入所述事件处理流水线的各个节点中，以事件处理流水线顺序为所述营销页面中设置的多个营销计费事件的执行顺序；

其中，针对营销计费活动而言，所述触发事件具体包括目标商品选择营销计费事件、验证类型选择营销计费事件、支付类型选择营销计费事件、网关认证事件和附赠权益选择营销计费事件；

所述查询事件具体包括目标商品信息查询事件、业务说明查询事件、隐私协议查询事件和资费详情查询事件；

所述编辑事件具体包括：用户号码编辑事件、滑块认证事件、语音认证事件和短信验证事件；

所述返回事件具体包括：交易取消事件和计费完成事件；

针对营销计费活动而言，所述事件处理流水线包括依顺序设计的订单/号码获取节点、业务展示/确认节点、一次操作认证节点、二次验证节点和计费确认回调节点；

所述订单/号码获取节点中包括用户号码编辑事件和交易取消事件；

所述业务展示/确认节点中包括目标商品信息查询事件、业务说明查询事件、隐私协议查询事件、资费详情查询事件和交易取消事件；

所述一次操作认证节点中包括网关认证事件、滑块认证事件、语音认证事件和交易取消事件；

所述二次验证节点中包括短信验证事件和交易取消事件；

所述计费确认回调节点中包括计费完成事件和交易取消事件。

2.根据权利要求1所述的一种营销计费活动H5页面开发平台，其特征在于，所述样式设计器获取并选择预设营销页面的UI样式，对所述营销页面的UI样式进行整合编排，具体包括以下步骤：

初始化所述营销页面，设置所述营销页面的基本属性；所述营销页面的基本属性包括宽度、高度、颜色、边框、边距和补白；

对所述营销页面进行分块处理，将所述营销页面划分为多个区域；

为每个区域各自设置区域的基本属性和布局样式；所述布局样式包括顺序布局、浮动布局、定位布局。

3.根据权利要求1所述的一种营销计费活动H5页面开发平台，其特征在于，所述事件设计器获取并选择营销计费事件，具体通过自预设事件库调用和/或自定义事件上传的方式获取并选择营销计费事件；所述在营销页面中设置触发事件、查询事件、编辑事件和返回事件，具体包括以下步骤：

确定所述触发事件、查询事件、编辑事件和返回事件的基本属性；所述事件的基本属性包括透明度、宽度、高度、颜色、旋转角度、边框、边距、补白和动画效果；

将所述触发事件、查询事件、编辑事件和返回事件设置于目标位置；

当所述触发事件、查询事件、编辑事件和返回事件关联于外部数据源时，确定所述触发事件、查询事件、编辑事件和返回事件的数据接口。

4.根据权利要求1所述的一种营销计费活动H5页面开发平台，其特征在于，所述第一描述文件为JSON描述文件；所述语法解析器对基于所述营销页面导出的第一描述文件进行语法解析，得到关于字段属性、样式属性和流程属性的键值对信息，具体通过以下步骤完成：

根据自有语法解析信息库中所涉及的基础字段属性、基础样式属性和基础流程属性对所述第一描述文件进行解析，将所述第一描述文件中涉及的字段属性、样式属性和流程属性转义为键值对信息形式；

其中，所述自有语法解析信息库中所涉及的基础字段属性包括文本、数字、日期时间、按钮、框体和alert提示；所述自有语法解析信息库中所涉及的基础样式属性包括透明度、宽度、高度、颜色、旋转角度、边框、边距、补白、动画效果、对象和数据源；所述自有语法解析信息库中所涉及的基础流程属性包括预设的多个营销计费事件处理流水线。

5.根据权利要求1所述的一种营销计费活动H5页面开发平台，其特征在于，所述云服务适配器为所述代码源数据配置云服务环境，具体包括以下步骤：

配置所述代码源数据的nodejs环境和npm环境；

执行npm安装项目中所述代码源数据涉及的依赖项；

对所述代码源数据进行打包处理，得到测试环境包和生产环境包；

将所述代码源数据上传目标FTP路径，并为所述代码源数据设置版本号。

6.根据权利要求1所述的一种营销计费活动H5页面开发平台，其特征在于，所述云服务适配器将所述代码源数据部署在云端之后，所述云服务适配器执行以下步骤：

获取营销计费活动的目标域名地址，将所述代码源数据应用至所述目标域名地址下的服务器路径中；

为所述目标域名地址配置代理逻辑和映射逻辑。

7.一种营销计费活动H5页面开发方法，其特征在于，包括以下步骤：

获取并选择预设营销页面的UI样式，对所述营销页面的UI样式进行整合编排；

获取并选择营销计费事件，在所述营销页面中设置触发事件、查询事件、编辑事件和返回事件；

对所述营销页面中设置的多个营销计费事件进行流程编排，确定所述营销页面中设置的多个营销计费事件的执行顺序；

将外部对象插入所述营销页面或将所述营销页面中的对象进行编辑或删除；

对所述营销页面设计的UI样式和设置的事件及执行顺序进行调试；

对基于所述营销页面导出的第一描述文件进行语法解析，得到关于字段属性、样式属性和流程属性的键值对信息；

根据所述关于字段属性、样式属性和流程属性的键值对信息生成与键值对信息对应的代码源数据；所述代码源数据能够应用于H5页面之中；

为所述代码源数据配置云服务环境，将所述代码源数据部署在云端；

所述对所述营销页面中设置的多个营销计费事件进行流程编排，确定所述营销页面中设置的多个营销计费事件的执行顺序，具体包括以下步骤：

根据营销计费活动的实际需求建立事件处理流水线；所述事件处理流水线依顺序设计有多个节点；

将所述触发事件、查询事件、编辑事件和返回事件置入所述事件处理流水线的各个节点中，以事件处理流水线顺序为所述营销页面中设置的多个营销计费事件的执行顺序；

其中，针对营销计费活动而言，所述触发事件具体包括目标商品选择营销计费事件、验证类型选择营销计费事件、支付类型选择营销计费事件、网关认证事件和附赠权益选择营销计费事件；

所述查询事件具体包括目标商品信息查询事件、业务说明查询事件、隐私协议查询事件和资费详情查询事件；

所述编辑事件具体包括：用户号码编辑事件、滑块认证事件、语音认证事件和短信验证事件；

所述返回事件具体包括：交易取消事件和计费完成事件；

针对营销计费活动而言，所述事件处理流水线包括依顺序设计的订单/号码获取节点、业务展示/确认节点、一次操作认证节点、二次验证节点和计费确认回调节点；

所述订单/号码获取节点中包括用户号码编辑事件和交易取消事件；

所述业务展示/确认节点中包括目标商品信息查询事件、业务说明查询事件、隐私协议查询事件、资费详情查询事件和交易取消事件；

所述一次操作认证节点中包括网关认证事件、滑块认证事件、语音认证事件和交易取消事件；

所述二次验证节点中包括短信验证事件和交易取消事件；

所述计费确认回调节点中包括计费完成事件和交易取消事件。