通過這段時間的學習,這次就國產化軟件設計平台--浮木雲的基本概念簡單形成簡單的學習記錄。大家如果感興趣的話,可自行去搜索查看試用。
下面介紹的就是浮木雲的基礎概念了,有:應用、子應用、導航、頁面、畫布、組件、交互編排、動作卡片、屬性配置、樣式配置、結構樹、自定義組件、源碼導出、應用發佈等。
1. 應用
在浮木雲平台中,每個應用都被視為單個完整的軟件項目或軟件系統。這意味着每個應用都有其獨特的需求和特點,可以對其進行單獨規劃、設計和開發。在應用管理下不同軟件項目或系統都是單獨的應用。
2. 子應用
所謂的子應用就是在應用下的小應用,打個比方就是單獨的購物系統項目中可以有前台購物系統和後台商品管理系統;這個購物系統項目就是應用,而前台購物系統和後台商品管理系統就是兩個子應用,下面用紅色標記的就是應用下的子應用。
3. 導航
導航指的是頁面中的菜單;導航也分為好幾種樣式:頂部導航、側邊導航、融合導航、無導航。可以給不同的子應用選擇不同的導航樣式。對於不同的導航也可以進行自定義的配置。
(1)頂部導航:頁面中的菜單在頁面上方。
(2)側邊導航:頁面中的菜單在頁面側邊。
(3)融合導航:頁面中的菜單在頁面上方和側邊;上方是一級菜單、側邊是二級菜單。
(4)無導航:頁面中沒有菜單。
自定義配置就是通過導航菜單數據配置和導航菜單樣式配置對選中的導航進行樣式和數據的配置。
(1)導航菜單數據配置是可以配置菜單數據,即菜單的名稱,如下圖:
(2)導航菜單樣式配置是配置菜單的背景顏色、選中顏色等樣式,如下圖:
4. 頁面
每個子應用包含多個頁面,不同的頁面展示不同的設計內容。頁面分為web頁面和app頁面,同時web頁面也有很多不同的尺寸,使用者可以根據實際的需求選擇不同的尺寸頁面。
這就是在浮木雲上搭建的頁面,如下圖:
5. 畫布
畫布位於工作台界面的中間區域,就是用來承載頁面的。
![圖片]
6. 組件
組件就是在搭建頁面時使用的元素,通過使用不同效果的組件來搭建出不同樣式的頁面。組件分為:容器、基礎組件、輸入組件、地圖組件、圖標組件等。
(1)容器:容器可以確立頁面框架,內部可以放置其他組件。
(2)基礎組件:基礎組件中有按鈕組件、文字組件等組件,就是系統中使用頻率較高的組件。
(3)輸入組件:輸入組件中有輸入框、文本域等組件;能夠在這類組件中輸入文字。
(4)地圖組件:當頁面中需要地圖相關功能時,可以使用地圖組件來完成相關功能。在一些地圖導航場景中就可以使用地圖組件。
(5)圖表組件:通過可視化圖表組件來展示業務中的統計數據。
還有些創意組件適用於比較複雜的業務場景中使用可以支持複雜的交互效果和樣式,比如:日曆、表格等。日曆組件可以用作篩選日期等業務場景、表格組件能詳細的展示相關信息。
7. 交互編排
交互編排就是給組件配置事件。通過給不同的組件配置不同的事件來實現頁面的動態交互效果;例如:點擊某個按鈕就進行頁面的跳轉、點擊按鈕就有彈窗彈出。
8. 動作卡片
動作卡片是給組件配置的事件,可以通過拖拽多個相應的動作卡片和編排這些動作卡片的順序來實現組件事件,滿足動態交互的效果。比如需要實現頁面跳轉的效果,就將當前頁面跳轉卡片拖拽到畫布中,使用箭頭將畫布中的首尾圖標進行連接,並配置跳轉到哪個頁面即可。
9. 屬性配置
屬性配置就是給被選中的組件配置屬性。不同的組件有不同的屬性,可以通過配置原生屬性、擴展設置等屬性來調整組件,從而調整搭建的頁面。原生屬性中就是設置組件名稱、尺寸等屬性。在表格的擴展設置中可以設置表格數據、表格列、操作按鈕設置等。
10. 樣式配置
樣式配置就是給選中的組件配置佈局樣式、背景樣式等,佈局樣式中可以設置被選中組件的高度、寬度、頂部、左側、右側、底部等邊距,背景樣式中可以設置背景圖片、顏色、邊框的樣式等。
11. 結構樹
結構樹就是在搭建頁面時使用的組件由於嵌套關係而形成的樹狀結構,下圖就是當前頁面的結構樹:
12. 自定義組件
自定義組件是將搭建的組件保存下來,可以供後面搭建頁面時多次使用。
13. 源碼導出
源碼導出就是將搭建的模板導出對應的前端代碼,代碼是vue格式的,需要對應的環境才能運行。點擊浮木雲頁面中的源碼導出,如下圖:
點擊源碼導出後,導出的源碼如下:
14. 應用發佈
應用發佈是將構建完成的應用託管到浮木雲,之後我們可以通過瀏覽器訪問已經發布的應用。
此外,浮木雲包含多種類型模板,可以根據自己的實際業務需求引用這些應用模版,通過應用這些模塊,無需手寫代碼,便可快速形成業務系統的基礎頁面。
15. 結語
以上分享的就是浮木雲的基礎知識了,希望對大家的浮木雲學習帶來幫助,少走彎路,後期還會繼續分享自己的學習心得,大家感興趣的話可以持續關注。