七、功能性组件与事件逻辑（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° 向上，并且运动速度为负数即可反方向运动，但是在此一定要注意要开启自动播放，否则该运动效果将不会生效：

操作流程如下：