七、功能性組件與事件邏輯

由于 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° 向上，并且運動速度為負數即可反方向運動，但是在此一定要注意要開啟自動播放，否則該運動效果將不會生效：

操作流程如下：