三、集成開(kāi)發(fā)環(huán)境界面介紹

通過(guò)本節(jié)你將了解 iVX 在線集成開(kāi)發(fā)環(huán)境 界面，快速建立對(duì) 在線集成開(kāi)發(fā)環(huán)境 的認(rèn)識(shí)。

文章目錄

• 三、集成開(kāi)發(fā)環(huán)境界面介紹
• • • 3.1 界面區(qū)域
    • 3.2 舞臺(tái)
    • 3.3 組件工具欄
    • 3.4 對(duì)象樹(shù)/素材面板
    • 3.5 屬性面板
    • 3.6 菜單面板
    • 3.7 邏輯工具面板
    • 3.8 輔助工具

---

3.1 界面區(qū)域

在線集成開(kāi)發(fā)環(huán)境 界面分為以下幾個(gè)區(qū)域：

• 舞臺(tái)
• 組件工具欄
• 對(duì)象樹(shù)/素材面板
• 素材面板
• 屬性面板
• 菜單欄
• 邏輯工具欄
• 輔助工具

以下將創(chuàng)建一個(gè)默認(rèn)設(shè)置的 WebApp 對(duì) 在線集成開(kāi)發(fā)環(huán)境 界面的主要區(qū)域進(jìn)行介紹。

3.2 舞臺(tái)

創(chuàng)建一個(gè)默認(rèn)設(shè)置的 WebApp 應(yīng)用后，在出現(xiàn)的窗口中間的白色區(qū)域即為舞臺(tái)：

在 舞臺(tái) 中可以編輯當(dāng)前應(yīng)用的 UI 界面，該舞臺(tái)與 Photoshop 等主流圖像處理軟件中的 “畫(huà)布” 類似，它定義了項(xiàng)目的編輯區(qū)域，所有對(duì)界面的編輯和創(chuàng)作都在這一區(qū)域通過(guò)可視化的方式進(jìn)行編輯。

3.3 組件工具欄

在 在線集成開(kāi)發(fā)環(huán)境 界面中，最左側(cè)區(qū)域?yàn)?組件欄 ：

在 組件欄 中的小圖標(biāo)則是組件，這些組件都有特定的功能和用法；例如需要在 舞臺(tái)區(qū) 中添加圖片，需要在組件欄中找到圖片組件，點(diǎn)擊后即可添加至 舞臺(tái)區(qū) 中。

了解 iVX 組件的功能及使用方法是 iVX 進(jìn)行開(kāi)發(fā)的基礎(chǔ)。iVX 組件豐富，包括基礎(chǔ)網(wǎng)頁(yè)應(yīng)用、小程序應(yīng)用、小游戲應(yīng)用的基礎(chǔ)元素組件以及一些的動(dòng)效組等。iVX 組件并不只限于 UI 元素，還包括后臺(tái)組件，可編輯的邏輯、服務(wù)、數(shù)據(jù)庫(kù)等，具體的使用方式在該教程中將會(huì)詳細(xì)講解。

iVX 組件在不同類型應(yīng)用下略有不同，但基礎(chǔ)組件相同。若出現(xiàn)不會(huì)使用的組件，想要了解其功能，我們可以通過(guò)鼠標(biāo)懸浮任意一個(gè)組件幾秒，點(diǎn)擊其出現(xiàn)的 “查看詳情” 即可查看該組件的使用文檔。

3.4 對(duì)象樹(shù)/素材面板

對(duì)象樹(shù) 是當(dāng)前項(xiàng)目中包括前后臺(tái)所有對(duì)象的管理窗口，以樹(shù)狀結(jié)構(gòu)對(duì)組件進(jìn)行可視化的展示，位于 在線集成開(kāi)發(fā)環(huán)境 界面的最右側(cè)：

通過(guò)對(duì) 對(duì)象樹(shù) 對(duì)象進(jìn)行操作，可以實(shí)現(xiàn)對(duì)選中對(duì)象的屬性更改；例如調(diào)整對(duì)象之間的層級(jí)關(guān)系、復(fù)制、刪除對(duì)象、對(duì)象重命名、搜索對(duì)象、為對(duì)象添加動(dòng)畫(huà)、添加數(shù)據(jù)庫(kù)、添加服務(wù)等操作。具體操作將在之后教程中詳細(xì)講解。

3.5 屬性面板

當(dāng)我們通過(guò) 對(duì)象樹(shù) 或 舞臺(tái) 任意點(diǎn)選一個(gè)對(duì)象時(shí)，可以看到組件欄右側(cè)將對(duì)應(yīng)顯示該對(duì)象的屬性面板：

一般情況下對(duì)象擁有多種屬性，比如表示位置信息的 X 與 Y 坐標(biāo)、尺寸屬性寬度與高度等；在屬性欄中可以編輯這些屬性改變當(dāng)前對(duì)象的外觀或者對(duì)應(yīng)功能。

3.6 菜單面板

菜單面板位于 在線集成開(kāi)發(fā)環(huán)境 界面 的頂部，主要分為左、中、右三個(gè)區(qū)域：

菜單欄 左側(cè)主要功能為文件操作、文件保存、后端資源管理、前端資源管理：

菜單欄 中部主要功能為對(duì)項(xiàng)目的發(fā)布、預(yù)覽以及配置：

菜單欄 右側(cè)主要功能為項(xiàng)目的對(duì)其操作、等間距操作、舞臺(tái)（畫(huà)布）大小操作、輔助線可視設(shè)置以及舞臺(tái)縮放大小設(shè)置：

3.7 邏輯工具面板

邏輯工具面板 位于 對(duì)象樹(shù) 窗格右側(cè)，用于為對(duì)象添加事件、自定義函數(shù)、動(dòng)作組、服務(wù)等交互邏輯功能：

3.8 輔助工具

當(dāng)我們?cè)谑褂弥杏龅饺魏螁?wèn)題時(shí)，都可以通過(guò)查看文檔、教學(xué)視頻或直接求助于客服來(lái)解答疑問(wèn)：

客服系統(tǒng)可通過(guò)右下角的幫助按鈕進(jìn)行訪問(wèn)：

總結(jié)

以上是生活随笔為你收集整理的三、界面介绍（IVX快速手册）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。