七功能性组件与事件逻辑(IVX 快速开发教程)
Posted 1_bit
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了七功能性组件与事件逻辑(IVX 快速开发教程)相关的知识,希望对你有一定的参考价值。
七、功能性组件与事件逻辑
由于 iVX 极度易用的特性,在 iVX 中开发微信小程序、WebApp、小游戏应用的开发流程大致相同。介绍完基础可视化组件后通过后台的服务、数据库与事件结合即可完成一个应用的开发;此篇将会介绍 iVX 功能性组件与事件,包括微信小程序、小游戏事件。
文章目录
7.1 变量组件
变量组件 在 iVX 中我们可以当做是一个存储数据的容器,该容器可以存储不同类型的数据,在 iVX 中如下几个变量组件:
- 文本变量
- 数值变量
- 布尔变量
- 通用变量
- 一维数组
- 二位数组
- 对象变量
- 对象数组
- 时间变量
在此小节中我们介绍几个常用的变量 文本变量 、数值变量 、布尔变量、一维数组 、 二位数组、对象变量、对象数组。
7.1.1 文本变量与数据绑定
文本变量 是一种存储文本数据类型的容器,例如 “你好吗?”、“今天吃饭了吗?”、“hello iVX” 这些都是文本内容,我们可以将这些内容存储到文本变量之中。
我们先在前台中新增一个 文本变量:
增加完 文本变量 后,为了演示数据绑定,在此新建一个 文本框组件。
在 iVX 中 数据绑定 指某一组件的属性不指定固定的值,使用其它组件属性、变量值或公式等进行设定;完成该设定后,当前组件的值将会永远与绑定的值相等。
每个数据的右侧有一个数据绑定的按钮:
点击该 按钮 后将会出现一个箭头,通过该箭头可以在对象树中选择需要绑定数据的组件:
也可以在 下拉选项 中选择需要绑定数据的内容:
在此我们为当前文本的内容属性绑定为变量的值,操作流程如下:
绑定后此时我们点击该变量,修改变量的内容为 “你好 iVX”:
之后预览内容,将会发现当前界面显示的内容为 “你好 iVX”:
7.1.2 数值变量与布尔变量
数值变量 指该变量存储类型为数字,例如 1、2、3、4、5、6、99、999、3.14 等数据都属于数字类型,该类型不能存储字符类型数据,否则该变量的数值将自动归零:
布尔变量 则是存储 “真” 与 “假” 类型的变量,不需要具体输入值,只需要打开真假开关即可。布尔变量打开开关则是为真,关闭开关则是为假,一般用于某些状态的设定,演示如下:
7.1.3 一维数组
在此小节之上,我们学习的变量都只能存储一个值,在 iVX 中拥有存储多个值的变量类型,如 一维数组。一维数组 可以在变量中设置多个值,这个 一维数组变量 可以看做是一个数据集合,这个数据集合可以存储不同类型的数据:
以上为一个数组的示例,其中黄色区域为数组的数据,红色区域表示对应黄色区域数据对应的位置,例如 一维数组 中第 “0” 个数据是 “你好”、第 “1” 个数据是 “1” 以此类推;我们可以发现,一维数组中对数据的 “表示” 是从 0 开始的,而非是 1,这点是我们需要注意的。上图中绿色部分是一个加号,该加号表示点击后增加一个所选择类型的数据:
该变量的创建及添加值方式如下:
7.1.4 循环组件
在 iVX 中 循环组件 可以对组件循环生成,若同一个组件拥有重复内容,但只是部分属性不一致,并且要求使用多个,这时使用 循环组件 是一个很好的选择。
首先修改 一维数组 的内容如下:
接着我们点击 循环组件 添加到页面中,并且添加一个 文本组件 位于 循环组件 之下(组件可以拖拽到某个组件之下作为子对象):
接下来我们需要重复显示 一维数组 的内容显示到 文本组件 中,点击 循环组件 将数据来源绑定为 一维数组 值:
此时我们在 文本组件 中将内容绑定为当前数据:
循环组件 可以对数据来源的数组进行值的自动获取,循环组件 将会获取数组中的每一个值,第 1 次自动循环将会获取第 0 个值、第 2 次循环将会获取数组中的第 2 个值,以此类推;其中 当前数据 指的是此次循环获取到数组中的值,由于 循环组件 对 文本组件 进行了循环,就意味着对该 文本组件 进行了重复生成并且赋予了新的文本属性,那么此时将会使用 文本组件 显示出所有数据中值的内容:
7.1.5 二维数组与嵌套循环
数组除了 一维数组 外还有 二维数组。一维数组 我们可以当做是一种相同属性的内容,在之前我们在 一维数组 中存储的值是名字文本的集合,那么如何在一个数组中就存储名字、性别、年龄等信息呢?这个时候就需要使用 二维数组 完成这个需求,二维数组 的数组结构更像是一个 Excel 表格,以下展示一个二维数组 内容:
在以上 二维数组 演示中,从列来看名字这一列的内容存储的是名字信息、性别这一列内容存储的是性别信息、年龄这一列内容存储的是年龄信息,若横排来看则是第 0 行则是小明的性别和年龄信息、第 1 行是小红的性别和年龄信息;横排数据完成了一个人物的信息所有信息,以下演示如何创建一个 二维数组 并且创建一个值:
此时已经创建了一个 二维数组,如何显示这个 二维数组 的值呢?这时需要使用完成循环嵌套对数据进行值的获取。在使用 循环组件 对数据进行取值时,第 1 次所取到的值为当前 二维数组 的第 0 行值,也就是如下图示所框选的内容:
此时我们可以当做第 0 行为一个 一维数组,那么这时需要获取这一行的内容那么则需要再加一个 循环组件 进行获取,也就是如下的 对象树 的示例:
此时为第 1 个循环创建组件 “循环创建1” 绑定来源数据为 二维数组,当 “循环创建1” 组件获取到第 0 行数据时,再将这第 0 行数据绑定给 “循环创建2” 组件进行循环。此时在 “循环创建2” 组件中添加一个 文本组件 作为该组件的子对象:
将该 文本组件 的内容绑定为 “当前数据2” 即可完成数据的显示,“当前数据2” 指的是第2个 循环组件 所获取的内容。完整操作流程如下演示:
7.1.6 对象变量
在学习 一维数组 时,我们在这个数组中添加了多个内容,若这些内容较为杂乱,并不是统一的一个属性值,那么我们此时将不知道该值的作用是什么,此时我们可以使用 对象变量 解决这个问题。
对象变量 与 一维数组 不同,对象变量 允许给值添加 一个标识,例如如下演示:
以下是创建一个 对象变量 的步骤:
用 对象变量 对 文本组件 进行数据绑定,我们可以很方便的根据我们想要的数据进行值的显示:
操作流程如下:
7.1.7 对象数组
对象数组 内有多个对象变量,与 二维数组 最大的不同则是可以使用标识确定自己想要显示的内容,一个 对象数组 示例如下:
创建 对象数组 的流程如下:
对象数组 可以使用 循环组件 进行值的显示:
但此时使用 循环组件 可以很方便的显示所需的数据,在 文本组件 中选择数据为 “当前数据1” 后,将会显示一个具体属性值进行选择:
操作流程如下:
7.2 事件逻辑
事件逻辑是整个项目的核心,若没有事件逻辑这个项目则是一个静态界面,没有任何的 “功能”。·我们可以将界面当做一个电饭锅的外壳,则事件逻辑是其内部的功能。电饭锅的外观有一个按钮,若没有功能按下了则不会运行任何行为,只有添加了按下按钮后要处理的事件逻辑,才可以给这个电饭锅赋予对应的功能。
7.2.1 文件接口与按钮
文件接口组件 是一个获取本地文件的功能性组件,我们可以通过 文件接口组件 获取文件的路径、宽、高等信息,但该组件需要一个事件进行触发,在此我们对 按钮组件 添加点击后的事件,对 文件接口组件 进行操作。
文件接口组件 位于组件栏的上部:
我们此时为该页面添加 按钮组件 与 文件接口组件 后的对象树如下:
接着我们为 按钮组件 添加事件。为某组件添加事件只需要点击该组件后,点击 对象树 右侧的事件 按钮组件 即可:
操作流程如下:
该组件添加事件后,将会在组件右侧出现一个事件图标,点击该图标可以跳转到事件的编辑窗口:
此时我们点击 件编辑框 中触发事件下拉选项可以看到多个触发事件,选择对应的 触发事件 即可对某个对象进行某个操作(动作):
在 iVX 中事件触发块显示颜色为蓝色,而动作块显示颜色为深绿色:
此时我们选择 触发事件 为“点击”:
接着选择操作的对象为 文件接口组件:
最后一步只需要对这个 文件接口组件 设置一个所需要的动作即可。在这里我们的需求是获取本地图片,只需要在选择动作中设置对应操作即可:
设置完毕后,将会出现一个回调事件:
回调 指的是读取本地图片后你需要继续做什么事情,若在 回调 中选择成功则是指成功读取到图片后需要做什么,也可以选择其他的读取状态:
在这里我们需要显示所选择的图片,显示图片需要一个 图片组件,在页面中创建一个 图片组件,但并不选择图片内容:
随后在 回调 中使用 图片组件 进行设置图片地址操作:
最后在地址中设置值为读取结果的 base64 图片即可完成图片的显示:
操作步骤及演示如下:
7.2.2 通过按钮点击更改文本内容
总体来说事件的操作只需要根据给予的 触发条件 对某个组件进行所设定范围内的操作即可,以下通过一个示例加强对事件的理解,具体其他操作将在之后的实战训练中再熟练事件的操作即可。
以下演示通过点击 按钮组件,将一个 文本组件 的值替换成另一个 文本组件 内容。首先将必要的组件添加至页面之中,对象树如下:
此处设置目标文本的文本内容为 “iVX”,之后我们为“按钮1” 新增事件。选择 “按钮1” 后点击右侧的事件选项即可添加事件,在事件中我们将 “按钮1” 的 触发事件 设置为点击:
所需要操作的对象为 “待替换文本”,动作为设置属性:
随后设置内容为目标文本内容:
操作流程如下:
7.2.3 页面跳转
在 iVX 中使用前台进行页面的跳转,现在创建 2 个页面如下:
一个页面为红色一个页面为蓝色,在页面1中添加一个按钮,点击按钮将会跳转到页面2:
操作流程如下:
7.3 小游戏
在 iVX 中小游戏拥有的特殊组件不多,常用组件有以下几个:
- 圆形组件
- 矩形组件
- 多边形组件
- 物理世界组件
- 触发器组件
- 对象组组件
7.3.1 圆形
在小游戏中使用 圆形组件 可以绘制一个椭圆,操作流程如下:
7.3.2 矩形
在小游戏中使用 矩形组件 可以绘制一个矩形,操作流程如下:
7.3.3 绘制多边形
在小游戏中使用 多边形组件 可以绘制一个多边形,操作流程如下:
7.3.4 触发器
触发器组件 在小游戏中时比较重要的组件,通过 触发器组件 可以自动创建角色,方便操作。
我们选择前台,点击 触发器组件 添加到前台:
随后在 触发器组件 的属性中选择触发时间间隔与开启自动播放。自动播放若你需要自动启动,一定要开启,否则 触发器组件 将无法自动生效:
触发器组件 具体使用方法我们将在实战中进行讲解。
7.3.5 物理世界
物理世界组件 可以模拟现实世界中的物理规则,我们在页面中添加一个物理世界并在物理世界下添加 矩形组件:
操作流程如下:
此时添加的 矩形组件 还未能有物理属性,我们需要点击 矩形组件,在左侧组件栏中点击添加一个 物体组件,让该组件属于物体:
操作流程如下:
最后我们通过浏览器预览内容,将会发现该矩形自动掉落:
那如何让该 矩形组件 反方向进行运动呢?这个时候在该 矩形组件 中再添加一个 运动组件:
随后点击 运动组件,设置 运动组件 的运动反向为垂直 90° 向上,并且运动速度为负数即可反方向运动,但是在此一定要注意要开启自动播放,否则该运动效果将不会生效:
操作流程如下:
以上是关于七功能性组件与事件逻辑(IVX 快速开发教程)的主要内容,如果未能解决你的问题,请参考以下文章