.

3.组件工具栏详解

伯益发表于:2016年10月24日 14:58:48更新于:2019年04月22日 17:41:21

1.组件工具栏大致上分基础组件和高级组件。

组件工具.png

2.基础组件。基础组件包括图片、文本、视频、音乐、幻灯、热区、按钮、图形和联系表单。

工具.png

图片:支持JPG、PNG、GIF、SVG上传,一般也是作品大部分的呈现方式;

文本:分为段落和富文本,支持文字基础字体,字号,颜色快速更改,其中段落可实现逐字出现动画;

视频:分为本地和腾讯视频,可自行上传视频或添加视频网址;

音乐:分为背景音乐和音频,一般背景音乐从头播到尾,音频作为某一页的音效使用;

幻灯:分为幻灯片、序列帧、相册,可根据需要添加使用;

热区:为透明组件,它的大小,位置可任意调整,一般作为触发动作或跳转网址;

按钮:分为文字按钮和图片按钮,文字按钮可以输入任意文字,图片按钮可替换按钮的素材;

图形:有三角形、圆形、长方形、直线和其他常用图形

联系表单:在我们的高级组件左边,用于解决常用的收集用户数据的问题。


3.高级组件

blob.png

高级组件里包含交互组件、逻辑判断、数据应用、微信应用、高级表单、数据应用。


(1)交互组件。交互组件包含地图组件、基础表单、Layer容器、Layer幻灯、联动组件、嵌入网页、拖放目标、拖放目标组、计时器、锚点、碰撞检测、SVG、关联控制、状态组、画板、陀螺仪。

交互组件.png

地图组件:地图组件基于腾讯地图,可用于显示指定地理位置、并可以进行导航。

基础表单:表单一般用于活动报名、收集反馈信息等。Epub360表单是一个相对独立的功能模块,可以通过工作台进行编辑与设定,完成后通过表单组件插入作品。

Layer容器:用来添加制作好的Layer层,可实现长图滑动效果。

Layer幻灯:用来添加制作好的Layer层,可实现多图幻灯效果。

联动组件:用于关联多个对象,使得其中一个对象的动作,会带动其他关联对象做出相应的动作。

嵌入网页:使用嵌入网页(Html)组件,可以引入第三方的网址、嵌入代码、以及HTML包(如全景图)

拖放目标:它是一个容器组件,可以置入允许拖动的图片,并触发相应的事件。

拖放目标组:用于关联多个拖拽目标(前提),并可以实现当多个目标组共同满足某一个条件时触发事件。

计时器:可以一般用来小游戏里的截止时间倒计时、也可以固定间隔时间触发,比如翻页等。

锚点:锚点,不同于以往时间线的触发方式,在交互维度上新增了一条空间线。我们能用它来实现“滑动长页面到某一位置,才播放动画”的效果。

碰撞检测:可以侦测组件的位置变化,当不同组件之间碰撞时,利用触发器触发各种动作。

SVG:它作为矢量图图片格式,具有广泛的用途,Epub360可以对SVG的路径或形状,进行描绘和变形的动画播放控制。

关联控制:是Epub360特色组件,可以将各个组件进行逻辑上的关联、通过手势进行统一控制,可通过控制一个元素,多个元素发生变化。

状态组:组件有自己的尺寸、位置、边框底色样式等,这些样式属性的组合组件也可以构成不同的状态。

画板:类似于小游戏中,你画我猜,有可调粗细和颜色的画笔,还可以生成图片、再配合动画效果,也能完成有趣的动画。

陀螺仪:可以感应手机位置(X轴/Y轴/Z轴)变化、进而控制组件的位置、角度、尺寸等。


(2)逻辑判断。逻辑判断包含参数变量、全局变量、系统参数、条件判断、分享变量。

逻辑判断.png

参数变量:极大的扩展了交互功能的灵活性,可以通过点击、触发动画、切换页面等,改变参数组件的值,还可以基于参数值,动态调整动画等其他组件的属性参数值。

全局变量:类似于放在masterpage里的参数变量组件,但只需要记录数值、不需要考虑显示。相对于参数变量组件,设置也更简单。

系统参数:系统参数组件,可以用于进行操作系统判断、是否微信中打开的判断等,使得H5作品运行环境和细节控制方面,有更高的控制能力。

条件判断:可以将多个参数变量组件,组织到一个条件中。一般用于答题、游戏等逻辑部分比较多的H5中。

分享变量:可以在分享的时候记录参数变量,当别人打开的时候显示之前参数变量。


(3)数据应用。投票组件、信息列表、统计列表、评论组件、助力列表、助力按钮、用户信息。

数据应用.png

投票组件:投票组件增强了用户交互行为,目前限定为每个IP可以投票一次。

信息列表获取用户参与信息,列表展示,配合统计列表使用。

统计列表:获取用户信息与数量,统计百分比,列表展示,配合信息列表使用。

评论组件:可以实现实名评论和匿名评论。

助力列表:所谓“助力”,是基于用户关系,让用户发起并邀请朋友一起参与活动,列表可以显示参与用户的头像。

助力按钮:用户可通过点击助力按钮来实现助力活动。

用户信息:可获取助力者的用户信息,如头像,昵称。


(4)微信应用。微信拍照、微信录音、微信头像。

微信应用.png

微信拍照:可以调用微信拍照功能,支持拍照和上传照片。

微信录音:可以调用微信录音功能,支持录音回放和上传音频。

微信头像:可以获取用户微信微信头像与昵称。


(5)高级表单。输入框、文本框、选择开关、选择项、表单提交、下拉框。

高级表单.png

输入框:可以输入文本,手机号,邮箱等信息的组件

文本框:可以输入大段文本的组件

选择开关:其实就是按钮组件

选择项:可以勾选的单选复选的组件

表单提交:表单填写完后提交组件

下拉框:可以用来下拉选择信息的组件


(6)数据应用。数据表、调试器、数据绑定、表格输出、网格列表。

数据应用beta.png

数据表:可以统计用户的姓名,年龄,手机号,地址等信息的数据表格

调试器:调试逻辑组件的执行情况

数据绑定:可以绑定数据

表格输出:可以制作统计数据表格

网格列表:用于展示收集到的用户信息和随时刷新信息