目錄

【iVX 初級工程師培訓教程 10篇文拿證】01 了解 iVX 完成新年賀卡
【iVX 初級工程師培訓教程 10篇文拿證】02 數值綁定及自適應網站制作
【iVX 初級工程師培訓教程 10篇文拿證】03 事件及猜數字小游戲
【iVX 初級工程師培訓教程 10篇文拿證】04 畫布及我和 iVX 合照
【iVX 初級工程師培訓教程 10篇文拿證】05 畫布及飛機大戰游戲制作
【iVX 初級工程師培訓教程 10篇文拿證】06 數據庫及服務
【iVX 初級工程師培訓教程 10篇文拿證】07 08 新聞頁制作
【iVX 初級工程師培訓教程 10篇文拿證】09 聊天室制作

高分提升請查看專欄：
iVX入門到精通
大話 IVX 實戰到精通

一、了解 iVX

iVX 是一門編程語言，但與常規的編程不同，iVX是一款無代碼的開發語言，對于不懂開發的初學者來說，拋棄了常規編程語言中的代碼，使開發更加簡單并高效；iVX 在開發某些功能時自帶了對應的模塊，開發起來更加高效，并且對于程序員來說可以導出其代碼進行二次開發，極大的增加了開發效率且不失靈活。

iVX不僅是一門編程語言，還是一個IDE；開發者不需要下載對應的環境就可以在線的進行開發，在發布項目時還可以直接進行部署，并支持域名的解析；在這一方面，iVX 減省了對應的運維成本，開發者只需要關注應用功能，維護不再成為開發者頭疼的事情。

二、項目創建

我們可以通過 iVX 的IDE鏈接進入開發界面：https://editor.ivx.cn/

點擊鏈接進入到IDE頁面后將會出現如下窗口，根據個人需要選擇不同的類型進行開發。

在選擇項目創建時，將會看到有 絕對定位 應用和 相對定位 應用，這兩者的區別分別如下：

• 絕對定位：使用絕對的 xy 坐標繪制應用元素（例如圖片所在位置根據 xy 確定），之后將會通過示例詳細講解；
• 相對定位：根據元素的相對位置在界面中進行定位，相對定位不會存在 xy 值（除非相對定位中存在一個絕對定位組件，例如畫布）。

本次項目以絕對定位為例，選擇絕對定位類型的 webApp項目，點擊創建即可進入該項目的編輯界面：

點擊創建后將會看到一個IDE界面如下：

在以上圖片示例中可以看到幾個常用區域：

• 組件面板：在以上界面中，左側為組件面板，組件面板是 iVX 中的可添加元素區域，在組件欄中可以找到你想要的元素添加至項目中，開發簡單點擊即可添加；
• 屬性面板：屬性面板可以更改組件的屬性，例如文本的顏色、大小，圖片的來源、邊框等；
• 預覽工具：預覽區域可以對項目進行配置、發布以及獲取預覽地址；
• 對象樹：該項目中所有添加的元素在對象樹中都可以找得到；
• 事件及其他工具：添加事件、服務等內容； 舞臺區：項目編輯、即時顯示窗口；

三、常用組件

iVX 的組件一般是常規 Web、App 等開發中的常見元素，例如以下截圖中所示：

特殊一點的組件還有變量組件：

在 iVX 中組件大體可以分為 可視組件、功能組件、容器組件，其中可視組件就是圖片、文本這類；功能組件就是 for 組件、if 組件 、表格組件等這一類；容器組件可以理解為是 行列、變量等組件。

這些組件咱們將會在接下來的章節中進行講解說明。

四、絕對定位與賀卡制作

4.1 絕對定位

絕對定位在 iVX 中指使用絕對的 xy 坐標對某一個元素進行位置上的定位。

首先我們選擇前臺表示在前臺下添加組件，隨后點擊頁面，接下來咱們在頁面上進行組件的添加。

添加后的元素將會在對象樹中進行顯示：

接下來鼠標點擊頁面1，即可在左側的組件面板中找到對應的內容進行添加。以文本為例，點擊文本組件，鼠標將會變成一個十字可繪制的樣式，點擊后在舞臺區進行繪制：

繪制完畢后得到一個文本，在對象樹中點擊添加的文本組件，可在屬性面板中更改對應的文本內容：

更改完文本后即可在舞臺區中看到對應更改的內容：

此時咱們可以看到這個元素的屬性面板中有 xy 值，這個 xy 值是以舞臺區左上角為原點，越往右 x 值越大，越往下 y 值越大，更改 xy 值可以更改此元素在界面中的位置：

4.2 賀卡制作

明白了基本的絕對定位內容后，咱們通過圖片和文本繪制一個基本的賀卡界面，并在最后添加動態效果讓其更加精美。

4.2.1 賀卡界面繪制

首先在對象樹中刪除之前添加的元素內容，可以右鍵點擊刪除，也可以選擇組件后再 delete：

刪除完畢后，在組件面板中找到圖片，并且在舞臺區進行繪制：

隨后在彈出的資源選擇器中選擇對應的圖片進行上傳即可：

此時圖片將會在舞臺區域中進行顯示，并且可以拖動小點更改大小，或者直接拖動圖片更改位置：

更改圖片位置大小，并且拖動到合適位置：

接著右鍵圖片可復制圖片：

再選擇頁面進行黏貼：

選中其中一漲圖片，并且在對應屬性中找到 y 軸旋轉，輸入 180 使其與 y 軸進行水平翻轉：

此時將會得到一張完全翻轉的圖片：

最后再把這個圖片移動至合適的位置即可：

接著添加一張門的圖片：

若你想這個圖片完全居中，那么可以在屬性中找到 x 軸原點，將其置于 50% 處；因為在 ivx 中，圖片的左上角為起始點，需要將圖片的x原點置于中間，給予屏幕寬度大小的一半，即可完成居中：

接著更改 x 坐標為屏幕的一半即可，屏幕寬度尺寸可以在對象樹之上進行更改或查看：

接著把圖片 x 坐標改成 375 的一半 187 即可使其圖片居中：

咱們接下來繼續添加其他圖片直到界面繪制成以下：

若你想將梅花放置于其他圖片之下，你只需要將圖片在對象樹中的位置至于那張圖片之下，這樣就可以是其他圖片覆蓋這張圖片。

接下來使用中文文本繪制出文本區域，使用中文文本的好處是可以使字體有中文文本樣式：

在文本中輸入新年快樂，并更改其顏色、字體、大小：

最后我們點擊預覽查看效果：

我們可以按F12更改當前瀏覽器為手機 Web 樣式：

此時我們發現頁面太死板并不是特別好看，我們點擊頂部云朵圖片，左側的組件欄將會發現更變，選擇出現的動效組件可以添加動態效果：

接著在動效組件中咱們可以選擇某一個動效類型，接著選擇預覽即可進行查看效果，若覺得動效時間太長，可以增加動畫時長，此時動畫播放就會變慢，最后打開循環播放即可：

隨后我們右鍵復制這個動態效果，復制到其他圖片之中將會是頁面更加生動：

隨后我們預覽發現，更改手機屏幕尺寸將會有部分內容留白，因為手機長度不一樣：

此時我們只需要在頁面中添加一個橫幅組件，并且設置這個橫幅用于居于屏幕底部，再將需要居于屏幕底部的組件添加到橫幅之中即可：

此時可以看到，頁面之上有一個補丁，這個補丁就是橫幅的位置，在橫幅的屬性中選擇橫幅的位置為左下：

接下來把橫幅的背景色改為透明、長寬改為0：

接下來將底部的元素在對象樹中拖拽至橫幅之中，此時發現狗和云朵都不在頁面之上，這是因為橫幅之中是有自己的 xy 值，狗和云朵有之前的 xy 值，此時將會根據坐標值顯示：

接下來只需要把元素拖拉上來即可，隨后更改頁面的背景色為紅色，點擊預覽即可完成：