作為一名APICloud 老使用者，最近看到APICloud Studio 3 新增了視覺化編輯工具，第一時間體驗了下。
總體感覺還行，有以下三大優點：
1、新增了模板頁面，新建stml檔案時可以選擇。
2、通過元件拖拽出的頁面可實時生成對應的前端程式碼，而且是沒有冗餘的程式碼，可直接使用，或進行再優化開發。因此如果產品通過這個工具來設計原型，生成的程式碼，可提供給開發直接使用。對於技術小白，又想快速做出自己的app，也可以使用此工具做為入門工具。
3、新增了API管理工具，可以除錯介面，生成請求程式碼檔案。工具的互動方面能再優化下就好了，有些操作拖動不智慧。
在使用過程中，總結一些經驗，下面給大家分享一下。
一、使用模板頁面
在pages目錄上右鍵，選擇【新建-stml檔案】，選擇註冊頁模板，輸入檔名，如下圖：
點選建立按鈕，建立完成。可以看到自動生成了register資料夾和register.stml 檔案，依賴的元件也自動生成了，在components資料夾下，這一點很方便快捷。
點選“眼睛”圖示可以預覽頁面，如下圖：
點選 編輯圖示 可以開啟視覺化編輯區。
開啟視覺化編輯區的效果如下圖：
二、元件分類介紹
元件分為UI元件、高階元件、系統元件。
系統元件是最基本，封裝粒度最小的元件。UI 元件是封裝的較為常用的帶有預設樣式的元件，當然樣式也可以調整。高階元件是更復雜的元件，可以簡單理解為頁面級元件，比如一個購物車。
三、使用系統元件舉例
組裝一個簡單的彈窗介面。
先拖入一個富文字【rich-text】元件。並設定margin，高度h和背景顏色。設定margin時，點選別針圖示，圖示變灰色後，可以輸入上下左右不同的margin值。如下圖：
給rich-text 的nodes 屬性繫結變數：
需要先在程式碼裡定義變數名，如下圖：
然後點選“編輯”按鈕開啟視覺化編輯介面，點選元件屬性後的別針圖示
彈出繫結介面，如下圖：
選中text變數，點“確定”按鈕，然後關閉繫結彈框。
繫結後程式碼介面如下：
然後修改text 值為需要的文字即可。程式碼如下：
下面再拖兩個按鈕放到彈窗文字下面，注意為了方便按鈕的定位，可以先拖一個view, 然後向view里加兩個按鈕。如下圖，在右側樣式皮膚，可以設定按鈕的寬和高，輸入後按Enter鍵生效。
在事件皮膚，可以給按鈕繫結事件：
四、經驗總結
1、先根據頁面設計圖，規劃好幾層view。新增一層view後，設定好這層view的樣式。
2、學習flex佈局原理，弄懂原理後，對於實現頁面佈局、元素定位很有幫助，能清晰的知道操作步驟。
以上就是我初步體驗APICloud Studio 3視覺化開發的經驗，相較於市面上其他低程式碼開發平臺，使用APICloud通過元件拖拽出的頁面可實時生成對應的前端程式碼，可直接使用，或進行再優化開發，在原始碼中的修改也可反饋到視覺化編輯皮膚中。這應該就是App低程式碼開發者最終形態了吧，哈哈。歡迎感興趣的朋友一起交流。