天天看點

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

APICloud的可視化開發功能,聽說隻要上手托拉拽就可以完成各種頁面的開發,不需要寫代碼,可以大大減少開發的用時,主要是對新手非常友好的。今天就來體驗一下,看看能否用最少的時間完成一個商城首頁面的建立呢?

首先下載下傳并安裝開發工具APICloud Studio 3。打開後建立項目:

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

然後找到pages/main/main.stml頁面檔案,點選左上角的綠色圖示,就可以從代碼開發切換成可視化開發的界面了。

因為可視化工具是深度捆綁的AVM多端引擎,是以隻有擴充名為.stml的檔案,才有可視化開發的功能,才可以顯示綠色的小按鈕,其他格式的檔案是沒有辦法進入可視化開發界面的。

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

之後我們就進入到了可視化開發界面中,看一下左邊的元件欄,一共分為三種元件。

UI元件是将項目的UI設計頁面中常見的各功能元素及其樣式,進行了抽象封裝而形成的元件。包含各種常用的小功能,按鈕、清單、圖檔檢視、文本輸入框等等。

進階元件也可以看做是具備功能邏輯的UI元件。每一個進階元件都具備一個完整的獨立功能,也可以看做是具備功能邏輯的UI元件。進階元件中包括了帶按鈕功能的标題欄、計數器、清單、輪播圖等等,樣式和功能還是非常豐富的,直接拖拽到中間的畫布區域就可以生成了,可以随心所欲的組合,還可以自由修改。

系統元件是将頁面元素進行了最基本的抽象,而形成的搭建頁面的所需的最簡基礎元件,是建構頁面的最小單元,其中的元件都是最基礎的小功能,比如input輸入框、text顯示文本資訊,form表單等等。

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

之後開始進行商城首頁的搭建,我們來設想一下大緻的布局,首先要有一個首頁的頂部導航欄,然後需要搜尋按鈕,搜尋按鈕下面需要一個輪播圖元件,之後再下面就是商品分類和商品清單了。

首先我們在進階元件中搜尋導航欄,找到一個簡約風格的,拖入到中間的畫布區域中

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

從右側屬性設定欄可以修改導航欄的名字,我們就修改為“商城首頁”

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

接下來需要一個搜尋框鈕來搜尋商品,找到搜尋元件,拖入到畫布中,之後再找一個輪播圖元件放到搜尋框的下面

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

在元件屬性中可以設定輪播圖想要播放的圖檔,以及輪播圖的布局和尺寸等屬性。

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

接下來我們需要在進階元件中找到商品分類和商品清單,選擇分類清單和商品清單-縱向布局拖入到畫布中

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

商品清單的各種屬性也是可以自己進行設定的,非常友善吧

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

現在我們的商城首頁面就基本搭建好了,非常簡單快速吧。除自己搭建頁面之外,APICloud Studio3還提供了豐富的模闆頁面,有詳情頁、登入頁,購物車頁面等等,我們一起來看一下。

首先在pages中建立一個一個stml檔案,因為剛才說到可視化工具是深度捆綁的AVM多端引擎,是以隻有擴充名為.stml的檔案,才有可視化開發的功能。

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

建立檔案的時候提供了很多模闆,我們可以選擇一個電商下單頁來看一下,名稱為order

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

建立完成,這時pages中就出現了order頁面,我們打開order頁面,再次點選切換可視化的綠色小箭頭,下單頁面就生成了,下單頁面中的屬性同樣可以根據自己的需求進行修改。

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

隻用了幾分鐘,就建立好了兩個頁面,可視化開發的功能真是很友善了。我們可以在模拟器或者真機中看一下最終呈現的效果,同步到模拟器或者真機的操作如果還有不太了解的同學,可以看一下APICloud Studio3的使用教程哦。