CN109725902A - 一种复杂交互逻辑的h5页面制作方法和系统 - Google Patents

Abstract

本发明提供了复杂交互逻辑的H5页面制作方法，该方法包括：S1.截获创建Blockly底层指令；S2.截获创建自定义块指令；S3.截获生成代码指令；S4.截获代码融合指令；S5.截获H5页面展示指令。本发明还提供了复杂交互逻辑的H5页面制作系统，该系统包括：Blockly模块、自定义块模块、代码生成模块、代码融合模块及H5页面展示模块；该方法和系统应用于营销策划平台，面向各终端用户，使非专业营销人士能进行策划或浏览活动的动画页面，通过使用Blockly作为编辑底层，并在此底层上扩展若干个模块，实现无需技术开发人员参与、使用者无需编写代码，即可编辑出具有复杂交互逻辑的H5页面的效果。

Description

一种复杂交互逻辑的H5页面制作方法和系统

技术领域

本发明涉及计算机技术领域，特别是涉及一种复杂交互逻辑的H5页面制作方法和系统。

背景技术

随着互联网的发展，企业营销活动的种类越来越多，其内容也越来越丰富；其中，H5页面作为一种在移动媒体传播的使用HTML5(Hyper Text Markup Language 5，第五代超文本标记语言)技术标准的互联网营销广告载体，已经越来越正规化和产业化。为了迎合市场以及用户需要，诸多企业研发了各式各样的营销活动策划平台供用户进行活动策划与发布；为了丰富活动策划方案的内容，营销活动策划平台会提供各种元素对象给予用户进行活动策划，以达到用户策划的活动内容能具有吸睛点，且活动页面尽可能丰富多彩的效果；现有技术中，实现营销活动策划的方式具有多种；

随着编程领域的不断发展，许多编程领域的研发人员相继研发出各类具有可视化编辑的产品和技术，其中，Blockly是谷歌公司研发出的一款编程工具；具体的，它是一种基于web的可视化的编程工具，使用者无需具备书写编程代码的技能却仍然可以编写程序，因其构成程序的命令和参数都是图形化，形象地说，类似于各种“积木块”，使用者仅仅只需要通过鼠标拖动，让“积木块”之间相互组合配套，即可输出为指定语言(比如JavaScript)的具体程序代码。

但是目前市场上，这种无代码编程的应用场景，都是在儿童教育领域，并未有任何能让这种可以大幅降低技术成本的程序组织方式，进入商业化产品这种实际应用级的市场。

因此，本发明有必要提供一种复杂交互逻辑的H5页面制作方法，帮助无编程能力的使用者们可通过本方法编辑出形象生动的H5页面，在使用便捷的同时，也可降低高质量H5页面的制作成本。

发明内容

为解决以上技术问题，本发明提供一种复杂交互逻辑的H5页面制作方法和系统，该方法使用Blockly作为编辑底层，并在此底层上扩展若干个模块，实现无需技术开发人员参与、使用者无需编写代码，即可编辑出具有复杂交互逻辑的H5页面的效果；具有高效便捷、低制作成本等优点，其营销内容丰富生动，能达到较好的营销效果。

为了达到上述目的，本发明采用的技术方案如下：

一种复杂交互逻辑的H5(Hyper Text Markup Language 5，HTML5，第五代超文本标记语言)页面制作方法，所述方法包括：

S1.截获创建Blockly底层指令，将所述创建Blockly底层指令携带的信息传送至系统；根据该指令信息，生成以Blockly代码作为可编辑底层；

S2.截获创建自定义块指令，将所述创建自定义块指令携带的信息传送至系统；根据该指令信息，在Blockly底层上，创建若干个自定义块；

S3.截获生成代码指令，将所述生成代码指令携带的信息传送至系统；根据该指令信息，将所述Blockly底层及若干个自定义块输出至系统，生成语言代码，并标记为待融合状态；

S4.截获代码融合指令，将所述代码融合指令携带的信息传送至系统；根据该指令信息，读取所述标记为待融合状态的语言代码，将其与H5元素合成JSON并存储至系统，生成逻辑交互H5页面；

S5.截获H5页面展示指令，将所述H5页面展示指令携带的信息传送至系统；根据该指令信息，读取该逻辑交互H5页面的JSON，并解析为元素信息及加密代码字符串，还原加密代码字符串为JavaScript代码，并执行对应的代码指令，展示H5页面。

具体的，所述H5元素为开始标签(即opening tag)到结束标签(即closing tag)的所有代码。

本发明还提供了一种复杂交互逻辑的H5页面制作系统，包括：

Blockly模块，用于用户通过终端设备在网页上创建Blockly底层；所述Blockly底层包括若干个基本块类型，所述基本块类型包括逻辑块、循环块、数学块、文本块、清单块、颜色块、变量块、函数块。

自定义块模块，用于获取Blockly底层，并在Blockly底层上创建自定义块；所述自定义块包括交互事件块、元素动画块、功能扩展块。

代码生成模块，用于获取Blockly底层及自定义块，并将Blockly及自定义块转化为用户所需的语言代码，并标记为待融合状态。

代码融合模块，用于获取标记为待融合状态的语言代码，并将其与H5元素融合为JSON，并保存至系统，生成逻辑交互H5页面；

H5页面展示模块，用于将逻辑交互H5页面解析后，进行展示。

所述交互事件块包括：

人机交互单元，用于获取用户在H5页面上的操作行为，判断操作行为是否触发一个或多个单元内所存储的行为事件模型，并对用户的操作行为产生响应；

功能封装单元，用于内部执行用户的行为所触发的事件，例如受用户点击事件触发产生的发送响应，则由功能封装单元内部执行发送行为。

具体的，所述功能封装单元，执行包括但不限于发送、接收广播(虚拟自定义名称的事件)，H5翻页、播放时刻、结束事件，表单提交、提交成功事件，各个元素自身的入场、动画开始、动画完成、退场、出界事件，元素间碰撞事件，屏幕边缘碰撞事件等。

所述元素动画块，用于获取用户的操作行为，对H5页面的元素、动画的属性进行调节。

优选的，所述语言代码为JavaScript语言。

优选的，所述行为事件模型包括点击事件、按下事件、滑动事件、重力感应事件、晃动事件等。

优选的，所述元素或动画的属性包括元素或动画的位置、大小、旋转角度、方向。

具体的，H5元素的位置、大小、旋转角度、透明度、方向层级的阶段性持续变化形成一个运动的过程(可视为动态变化的动画)，动作往往可以作为对某个交互事件的响应来使用。制作H5时，一般有已经封装好的动作，包括但不限于淡入/淡出，放大/缩小，抖动/跳动，向上、下、左、右飞入/飞出，向上、下、左、右展开/折叠等等；用户还可以直接设置运动过程各个属性的变化量，再通过补间来完成运动。

所述功能扩展块，具有多个扩展接口，用于扩展H5页面的功能；所述扩展接口包括：

多媒体接口，用于外接视频播放模块、音乐播放模块等多媒体模块；

第三方接口，用于外接第三方平台，进行数据交互；如访问微信、微博、淘宝等平台的用户昵称、头像等。

本发明又提供了一种电子装置，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时，实现如本发明前述的复杂交互逻辑的H5页面制作方法；

本发明又提供了一种计算机可读介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明前述的复杂交互逻辑的H5页面制作方法。

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

本发明的有益效果：

本发明提供了一种用于H5页面的复杂交互逻辑制作方法和系统，该方法和系统应用于营销策划平台，面向各终端用户，使非专业营销人士能进行策划或浏览活动的动画页面，通过使用Blockly作为编辑底层，并在此底层上扩展若干个模块，实现无需技术开发人员参与、使用者无需编写代码，即可编辑出具有复杂交互逻辑的H5页面的效果；具有高效便捷、低制作成本等优点。

附图说明

图1为本发明提供的复杂交互逻辑的H5页面制作方法流程示意图；

图2为使用本发明提供的复杂交互逻辑的H5页面制作过程；

图3为本发明提供的复杂交互逻辑的H5页面制作系统的结构示意图。

具体实施方式

下面结合附图对本发明的具体实施方式作进一步说明。

如图1～2所示，本发明提供了一种复杂交互逻辑的H5页面制作方法，该方法包括：

S1.截获创建Blockly底层指令，将所述创建Blockly底层指令携带的信息传送至系统；根据该指令信息，生成以Blockly代码作为可编辑底层；

S2.截获创建自定义块指令，将所述创建自定义块指令携带的信息传送至系统；根据该指令信息，在Blockly底层上，创建交互事件块、元素动画块和功能扩展块；

S3.截获生成代码指令，将所述生成代码指令携带的信息传送至系统；根据该指令信息，将所述Blockly底层、交互事件块、元素动画块和功能扩展块输出至系统，生成语言代码，并标记为待融合状态；

S4.截获代码融合指令，将所述代码融合指令携带的信息传送至系统；根据该指令信息，读取所述标记为待融合状态的语言代码，将待融合状态的语言代码与H5元素合成JSON并存储至系统，生成逻辑交互H5页面；

S5.截获H5页面展示指令，将所述H5页面展示指令携带的信息传送至系统；根据该指令信息，读取该逻辑交互H5页面的JSON，并解析为元素信息及加密代码字符串，还原加密代码字符串为JavaScript代码。

如图3所示，上述复杂交互逻辑制作方法应用于一种复杂交互逻辑的H5页面制作系统，所述系统包括：

Blockly模块，用于用户通过终端设备在网页上创建Blockly底层；所述Blockly底层包括若干个基本块类型，所述基本块类型包括逻辑块、循环块、数学块、文本块、清单块、颜色块、变量块、函数块。

自定义块模块，用于获取Blockly底层并创建自定义块；所述自定义块包括交互事件块、元素动画块、功能扩展块。

代码生成模块，用于获取Blockly底层及自定义块，并将Blockly及自定义块转化为用户所需的语言代码，并标记为待融合状态。

代码融合模块，用于获取标记为待融合状态的语言代码，并将其与H5元素融合为JSON，并保存至系统，生成逻辑交互H5页面；

H5页面展示模块，用于将逻辑交互H5页面解析后，进行展示。

所述交互事件块包括：

人机交互单元，用于获取用户在H5页面上的操作行为，判断操作行为是否触发一个或多个单元内所存储的行为事件模型，并对用户的操作行为产生响应；

功能封装单元，用于内部执行用户的行为所触发的事件，例如受用户点击事件触发产生的发送响应，则由功能封装单元内部执行发送行为。

所述元素动画块，用于获取用户的操作行为，对H5页面的元素、动画的属性进行调节。

所述行为事件模型包括点击事件、按下事件、滑动事件、重力感应事件、晃动事件等。

所述元素或动画的属性包括元素或动画的位置、大小、旋转角度、方向。

具体的，H5元素的位置、大小、旋转角度、透明度、方向层级的阶段性持续变化形成一个运动的过程(可视为动态变化的动画)，动作往往可以作为对某个交互事件的响应来使用。制作H5时，一般有已经封装好的动作，包括但不限于淡入/淡出，放大/缩小，抖动/跳动，向上、下、左、右飞入/飞出，向上、下、左、右展开/折叠等等；用户还可以直接设置运动过程各个属性的变化量，再通过补间来完成运动。

所述功能扩展块，具有多个扩展接口，用于扩展H5页面的功能；所述扩展接口包括：

多媒体接口，用于外接视频播放模块、音乐播放模块等多媒体模块；例如外界视频播放模块，可以进行播放视频，拥有播放开始、暂停、完成等事件。

第三方接口，用于外接第三方平台，进行数据交互；如访问微信用户昵称、头像等。

根据上述说明书的揭示和教导，本发明所属领域的技术人员还可以对上述实施方式进行变更和修改。因此，本发明并不局限于上面揭示和描述的具体实施方式，对发明的一些修改和变更也应当落入本发明的权利要求的保护范围内。此外，尽管本说明书中使用了一些特定的术语，但这些术语只是为了方便说明，并不对本发明构成任何限制。

Claims (10)

1.一种复杂交互逻辑的H5页面制作系统，其特征在于，所述系统包括：

Blockly模块，用户通过终端设备在网页上创建Blockly底层,所述Blockly底层包括若干个基本块类型；

自定义块模块，用于获取Blockly底层，并在Blockly底层上创建自定义块；所述自定义块包括交互事件块、元素动画块、功能扩展块；

代码生成模块，用于获取Blockly底层及自定义块，并将Blockly及自定义块转化为用户所需的语言代码，并标记为待融合状态；

代码融合模块，用于获取标记为待融合状态的语言代码，并将其与H5元素融合为JSON，并保存至系统，生成逻辑交互H5页面；

H5页面展示模块，用于将逻辑交互H5页面解析后，进行展示。

2.根据权利要求1所述的系统，其特征在于，所述基本块类型包括逻辑块、循环块、数学块、文本块、清单块、颜色块、变量块、函数块。

3.根据权利要求1所述的系统，其特征在于，所述交互事件块包括：

人机交互单元，用于获取用户在H5页面上的操作行为，判断操作行为是否触发一个或多个单元内所存储的行为事件模型，并对用户的操作行为产生响应；

功能封装单元，用于内部执行用户的行为所触发的事件。

4.根据权利要求1所述的系统，其特征在于，所述元素动画块获取用户的操作行为，对H5页面的元素、动画的属性进行调节。

5.根据权利要求4所述的系统，其特征在于，所述元素或动画的属性包括元素或动画的位置、大小、旋转角度、方向。

6.根据权利要求1所述的系统，其特征在于，所述功能扩展块，具有多个扩展接口，用于扩展H5页面的功能；所述扩展接口包括：

多媒体接口，用于外接多媒体模块；

第三方接口，用于外接第三方平台，进行数据交互。

7.根据权利要求1所述的系统，其特征在于，所述语言代码为JavaScript语言。

8.一种应用于如权利要求1所述系统的复杂交互逻辑的H5页面制作方法，其特征在于，所述方法包括：

S1.截获创建Blockly底层指令，将所述创建Blockly底层指令携带的信息传送至系统；根据该指令信息，生成以Blockly代码作为可编辑底层；

S2.截获创建自定义块指令，将所述创建自定义块指令携带的信息传送至系统；根据该指令信息，在Blockly底层上，创建若干个自定义块；

S3.截获生成代码指令，将所述生成代码指令携带的信息传送至系统；根据该指令信息，将所述Blockly底层及若干个自定义块输出至系统，生成语言代码，并标记为待融合状态；

S4.截获代码融合指令，将所述代码融合指令携带的信息传送至系统；根据该指令信息，读取所述标记为待融合状态的语言代码，将其与H5元素合成JSON并存储至系统，生成逻辑交互H5页面；

S5.截获H5页面展示指令，将所述H5页面展示指令携带的信息传送至系统；根据该指令信息，读取该逻辑交互H5页面的JSON，并解析为元素信息及加密代码字符串，还原加密代码字符串为JavaScript代码，并执行对应的代码指令，展示H5页面。

9.一种电子装置，其特征在于，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时，实现如权利要求8所述的制作方法。

10.一种计算机可读介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求8所述的制作方法。