新手使用APICloud可視化開發搭建商城主頁

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的使用教程哦。