App低程式碼開發的最終形態?APICloud視覺化開發初體驗

海的盡頭 發表於 2022-05-24
視覺化

作為一名APICloud 老使用者,最近看到APICloud Studio 3 新增了視覺化編輯工具,第一時間體驗了下。

總體感覺還行,有以下三大優點:

1、新增了模板頁面,新建stml檔案時可以選擇。

2、通過元件拖拽出的頁面可實時生成對應的前端程式碼,而且是沒有冗餘的程式碼,可直接使用,或進行再優化開發。因此如果產品通過這個工具來設計原型,生成的程式碼,可提供給開發直接使用。對於技術小白,又想快速做出自己的app,也可以使用此工具做為入門工具。

3、新增了API管理工具,可以除錯介面,生成請求程式碼檔案。工具的互動方面能再優化下就好了,有些操作拖動不智慧。

在使用過程中,總結一些經驗,下面給大家分享一下。

一、使用模板頁面

在pages目錄上右鍵,選擇【新建-stml檔案】,選擇註冊頁模板,輸入檔名,如下圖:

App低程式碼開發的最終形態?APICloud視覺化開發初體驗

點選建立按鈕,建立完成。可以看到自動生成了register資料夾和register.stml 檔案,依賴的元件也自動生成了,在components資料夾下,這一點很方便快捷。

App低程式碼開發的最終形態?APICloud視覺化開發初體驗

點選“眼睛”圖示可以預覽頁面,如下圖:

App低程式碼開發的最終形態?APICloud視覺化開發初體驗

點選 編輯圖示 可以開啟視覺化編輯區。

App低程式碼開發的最終形態?APICloud視覺化開發初體驗

開啟視覺化編輯區的效果如下圖:

App低程式碼開發的最終形態?APICloud視覺化開發初體驗

二、元件分類介紹

元件分為UI元件、高階元件、系統元件。

系統元件是最基本,封裝粒度最小的元件。UI 元件是封裝的較為常用的帶有預設樣式的元件,當然樣式也可以調整。高階元件是更復雜的元件,可以簡單理解為頁面級元件,比如一個購物車。

App低程式碼開發的最終形態?APICloud視覺化開發初體驗

三、使用系統元件舉例

組裝一個簡單的彈窗介面。

先拖入一個富文字【rich-text】元件。並設定margin,高度h和背景顏色。設定margin時,點選別針圖示,圖示變灰色後,可以輸入上下左右不同的margin值。如下圖:

App低程式碼開發的最終形態?APICloud視覺化開發初體驗

App低程式碼開發的最終形態?APICloud視覺化開發初體驗

rich-text nodes 屬性繫結變數:

需要先在程式碼裡定義變數名,如下圖:

App低程式碼開發的最終形態?APICloud視覺化開發初體驗

然後點選“編輯”按鈕開啟視覺化編輯介面,點選元件屬性後的別針圖示

App低程式碼開發的最終形態?APICloud視覺化開發初體驗

彈出繫結介面,如下圖:

App低程式碼開發的最終形態?APICloud視覺化開發初體驗

選中text變數,點“確定”按鈕,然後關閉繫結彈框。

繫結後程式碼介面如下:

App低程式碼開發的最終形態?APICloud視覺化開發初體驗

然後修改text 值為需要的文字即可。程式碼如下:

App低程式碼開發的最終形態?APICloud視覺化開發初體驗

下面再拖兩個按鈕放到彈窗文字下面,注意為了方便按鈕的定位,可以先拖一個view, 然後向view里加兩個按鈕。如下圖,在右側樣式皮膚,可以設定按鈕的寬和高,輸入後按Enter鍵生效。

App低程式碼開發的最終形態?APICloud視覺化開發初體驗

在事件皮膚,可以給按鈕繫結事件:

App低程式碼開發的最終形態?APICloud視覺化開發初體驗

App低程式碼開發的最終形態?APICloud視覺化開發初體驗

四、經驗總結

1、先根據頁面設計圖,規劃好幾層view。新增一層view後,設定好這層view的樣式。

2、學習flex佈局原理,弄懂原理後,對於實現頁面佈局、元素定位很有幫助,能清晰的知道操作步驟。

以上就是我初步體驗APICloud Studio 3視覺化開發的經驗,相較於市面上其他低程式碼開發平臺,使用APICloud通過元件拖拽出的頁面可實時生成對應的前端程式碼,可直接使用,或進行再優化開發,在原始碼中的修改也可反饋到視覺化編輯皮膚中。這應該就是App低程式碼開發者最終形態了吧,哈哈。歡迎感興趣的朋友一起交流。