H5页面设计入门教程：组件工具栏

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

基础组件

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

图片：支持JPG、PNG、GIF、SVG上传，一般也是作品大部分的呈现方式；文本：分为段落和富文本，支持文字基础字体，字号，颜色快速更改，其中段落可实现逐字出现动画；

视频：分为本地和腾讯视频，可自行上传视频或添加视频网址；

音乐：分为背景音乐和音频，一般背景音乐从头播到尾，音频作为某一页的音效使用；

幻灯：分为幻灯片、序列帧、相册，可根据需要添加使用；

热区：为透明组件，它的大小，位置可任意调整，一般作为触发动作或跳转网址；按钮：分为文字按钮和图片按钮，文字按钮可以输入任意文字，图片按钮可替换按钮的素材；

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

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

高级组件

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

交互组件

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

地图组件：地图组件基于腾讯地图，可用于显示指定地理位置、并可以进行导航。基础表单：表单一般用于活动报名、收集反馈信息等。Epub360表单是一个相对独立的功能模块，可以通过工作台进行编辑与设定，完成后通过表单组件插入作品。

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

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

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

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

拖放目标：它是一个容器组件，可以置入允许拖动的图片，并触发相应的事件。拖放目标组：用于关联多个拖拽目标（前提），并可以实现当多个目标组共同满足某一个条件时触发事件。

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

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

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

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

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

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

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

陀螺仪：可以感应手机位置（X轴／Y轴／Z轴）变化、进而控制组件的位置、角度、尺寸等。

逻辑判断

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

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

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

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

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

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

数据应用

投票组件、信息列表、统计列表、评论组件、助力列表、助力按钮、用户信息。

投票组件：投票组件增强了用户交互行为，目前限定为每个IP可以投票一次。信息列表：获取用户参与信息，列表展示，配合统计列表使用。

统计列表：获取用户信息与数量，统计百分比，列表展示，配合信息列表使用。评论组件：可以实现实名评论和匿名评论。

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

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

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

微信应用

微信拍照、微信录音、微信头像。

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

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

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

高级表单

输入框、文本框、选择开关、选择项、表单提交、下拉框。

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

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

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

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

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

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

数据应用

数据表、调试器、数据绑定、表格输出、网格列表。

数据表：可以统计用户的姓名，年龄，手机号，地址等信息的数据表格调试器：调试逻辑组件的执行情况

数据绑定：可以绑定数据

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

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

意派Epub360-专业H5设计工具

意派Coolsite360-专业响应式网站/微信小程序设计工具