APICloud的可視化開發功能，聽說隻要上手托拉拽就可以完成各種頁面的開發，不需要寫代碼，可以大大減少開發的用時，主要是對新手非常友好的。今天就來體驗一下，看看能否用最少的時間完成一個商城首頁面的建立呢？
首先下載下傳并安裝開發工具APICloud Studio 3。打開後建立項目：
然後找到pages/main/main.stml頁面檔案，點選左上角的綠色圖示，就可以從代碼開發切換成可視化開發的界面了。
因為可視化工具是深度捆綁的AVM多端引擎，是以隻有擴充名為.stml的檔案，才有可視化開發的功能，才可以顯示綠色的小按鈕，其他格式的檔案是沒有辦法進入可視化開發界面的。
之後我們就進入到了可視化開發界面中，看一下左邊的元件欄，一共分為三種元件。
UI元件是将項目的UI設計頁面中常見的各功能元素及其樣式，進行了抽象封裝而形成的元件。包含各種常用的小功能，按鈕、清單、圖檔檢視、文本輸入框等等。
進階元件也可以看做是具備功能邏輯的UI元件。每一個進階元件都具備一個完整的獨立功能，也可以看做是具備功能邏輯的UI元件。進階元件中包括了帶按鈕功能的标題欄、計數器、清單、輪播圖等等，樣式和功能還是非常豐富的，直接拖拽到中間的畫布區域就可以生成了，可以随心所欲的組合，還可以自由修改。
系統元件是将頁面元素進行了最基本的抽象，而形成的搭建頁面的所需的最簡基礎元件，是建構頁面的最小單元，其中的元件都是最基礎的小功能，比如input輸入框、text顯示文本資訊，form表單等等。
之後開始進行商城首頁的搭建，我們來設想一下大緻的布局，首先要有一個首頁的頂部導航欄，然後需要搜尋按鈕，搜尋按鈕下面需要一個輪播圖元件，之後再下面就是商品分類和商品清單了。
首先我們在進階元件中搜尋導航欄，找到一個簡約風格的，拖入到中間的畫布區域中
從右側屬性設定欄可以修改導航欄的名字，我們就修改為“商城首頁”
接下來需要一個搜尋框鈕來搜尋商品，找到搜尋元件，拖入到畫布中，之後再找一個輪播圖元件放到搜尋框的下面
在元件屬性中可以設定輪播圖想要播放的圖檔，以及輪播圖的布局和尺寸等屬性。
接下來我們需要在進階元件中找到商品分類和商品清單，選擇分類清單和商品清單-縱向布局拖入到畫布中
商品清單的各種屬性也是可以自己進行設定的，非常友善吧
現在我們的商城首頁面就基本搭建好了，非常簡單快速吧。除自己搭建頁面之外，APICloud Studio3還提供了豐富的模闆頁面，有詳情頁、登入頁，購物車頁面等等，我們一起來看一下。
首先在pages中建立一個一個stml檔案，因為剛才說到可視化工具是深度捆綁的AVM多端引擎，是以隻有擴充名為.stml的檔案，才有可視化開發的功能。
建立檔案的時候提供了很多模闆，我們可以選擇一個電商下單頁來看一下，名稱為order
建立完成，這時pages中就出現了order頁面，我們打開order頁面，再次點選切換可視化的綠色小箭頭，下單頁面就生成了，下單頁面中的屬性同樣可以根據自己的需求進行修改。
隻用了幾分鐘，就建立好了兩個頁面，可視化開發的功能真是很友善了。我們可以在模拟器或者真機中看一下最終呈現的效果，同步到模拟器或者真機的操作如果還有不太了解的同學，可以看一下APICloud Studio3的使用教程哦。