App低程式碼開發的最終形態?APICloud視覺化開發初體驗
作為一名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里加兩個按鈕。如下圖,在右側樣式面板,可以設定按鈕的寬和高,輸入後按回車鍵生效。
在事件面板,可以給按鈕繫結事件:
四、經驗總結
1、先根據頁面設計圖,規劃好幾層view。新增一層view後,設定好這層view的樣式。
2、學習flex佈局原理,弄懂原理後,對於實現頁面佈局、元素定位很有幫助,能清晰的知道操作步驟。
以上就是我初步體驗APICloud Studio 3視覺化開發的經驗,相較於市面上其他低程式碼開發平臺,使用APICloud通過元件拖拽出的頁面可實時生成對應的前端程式碼,可直接使用,或進行再優化開發,在原始碼中的修改也可反饋到視覺化編輯面板中。這應該就是App低程式碼開發者最終形態了吧,哈哈。歡迎感興趣的朋友一起交流。
- Vue專案之使用EditorConfig, Eslint和Prettier實現程式碼規範
- 如何使用 DataAnt 監控 Apache APISIX
- 基於 Nebula Graph 構建百億關係知識圖譜實踐
- 元宇宙 3D 開荒場 - 探味奇遇記
- 摺疊面板元件的設計與實現
- web技術分享| 【高德地圖】實現自定義的軌跡回放
- Vue3中的teleport節點傳送
- Flutter 常見異常分析
- React Native如何做線上錯誤與效能監控
- shell指令碼程式設計學習筆記——變數
- Object.prototype.toString.call()的原理
- 玩轉 AbortController 控制器
- Go十大常見錯誤第2篇:benchmark效能測試的坑
- 技術分享 | dbslower 工具學習之探針使用
- TypeScript 中令人迷惑的物件型別:Object、{}和 object
- 探針技術-JavaAgent 和位元組碼增強技術-Byte Buddy
- 解決方案| 快對講綜合排程系統
- 解鎖Markdown高階用法,提升寫作效率
- MAUI模板專案閃退問題
- 關於這個知識點,我被讀者罵到回家種田