這段時(shí)間對(duì)浮木云這個(gè)原型工具開(kāi)始展開(kāi)研究，希望有朝一日讓他成為我的原型標(biāo)配工具。所以我會(huì)針對(duì)浮木云所學(xué)到的知識(shí)進(jìn)行簡(jiǎn)單的記錄，以便后續(xù)回頭翻閱查看。

接下來(lái)，我針對(duì)浮木云的基本知識(shí)形成簡(jiǎn)單的記錄，基本知識(shí)包括：應(yīng)用、子應(yīng)用、導(dǎo)航、頁(yè)面、畫(huà)布、組件、交互編排、動(dòng)作卡片、屬性配置、樣式配置、結(jié)構(gòu)樹(shù)、自定義組件、源碼導(dǎo)出、應(yīng)用發(fā)布等。

應(yīng)用

在浮木云平臺(tái)中，每個(gè)應(yīng)用都被視為單個(gè)完整的軟件項(xiàng)目或軟件系統(tǒng)。這意味著每個(gè)應(yīng)用都有其獨(dú)特的需求和特點(diǎn)，可以對(duì)其進(jìn)行單獨(dú)規(guī)劃、設(shè)計(jì)和開(kāi)發(fā)。在應(yīng)用管理下不同軟件項(xiàng)目或系統(tǒng)都是單獨(dú)的應(yīng)用。

?

子應(yīng)用

所謂的子應(yīng)用就是在應(yīng)用下的小應(yīng)用，打個(gè)比方就是單獨(dú)的人員管理系統(tǒng)項(xiàng)目中可以有前端系統(tǒng)和后臺(tái)人員管理系統(tǒng)；這個(gè)人員管理系統(tǒng)項(xiàng)目就是應(yīng)用，而前端系統(tǒng)和后臺(tái)人員管理系統(tǒng)就是兩個(gè)子應(yīng)用，下面用紅色標(biāo)記的就是應(yīng)用下的子應(yīng)用。。

導(dǎo)航

導(dǎo)航指的是頁(yè)面中的菜單；導(dǎo)航也分為好幾種樣式：頂部導(dǎo)航、側(cè)邊導(dǎo)航、融合導(dǎo)航、無(wú)導(dǎo)航?？梢越o不同的子應(yīng)用選擇不同的導(dǎo)航樣式。對(duì)于不同的導(dǎo)航也可以進(jìn)行自定義的配置。

（1）頂部導(dǎo)航：頁(yè)面中的菜單在頁(yè)面上方。

（2）側(cè)邊導(dǎo)航：頁(yè)面中的菜單在頁(yè)面?zhèn)冗叀?/p>

（3）融合導(dǎo)航：頁(yè)面中的菜單在頁(yè)面上方和側(cè)邊；上方是一級(jí)菜單、側(cè)邊是二級(jí)菜單。

（4）無(wú)導(dǎo)航：頁(yè)面中沒(méi)有菜單。

自定義配置就是通過(guò)導(dǎo)航菜單數(shù)據(jù)配置和導(dǎo)航菜單樣式配置對(duì)選中的導(dǎo)航進(jìn)行樣式和數(shù)據(jù)的配置。

（1）導(dǎo)航菜單數(shù)據(jù)配置是可以配置菜單數(shù)據(jù)，即菜單的名稱，如下圖：

（2）導(dǎo)航菜單樣式配置是配置菜單的背景顏色、選中顏色等樣式，如下圖：

頁(yè)面

每個(gè)子應(yīng)用包含多個(gè)頁(yè)面，不同的頁(yè)面展示不同的設(shè)計(jì)內(nèi)容。頁(yè)面分為web頁(yè)面和app頁(yè)面，同時(shí)web頁(yè)面也有很多不同的尺寸，使用者可以根據(jù)實(shí)際的需求選擇不同的尺寸頁(yè)面。

這就是在浮木云上搭建的頁(yè)面，如下圖：

畫(huà)布

畫(huà)布位于工作臺(tái)界面的中間區(qū)域，就是用來(lái)承載頁(yè)面的。

組件

組件就是在搭建頁(yè)面時(shí)使用的元素，通過(guò)使用不同效果的組件來(lái)搭建出不同樣式的頁(yè)面。組件分為：容器、基礎(chǔ)組件、輸入組件、地圖組件、圖標(biāo)組件等。

（1）容器：容器可以確立頁(yè)面框架，內(nèi)部可以放置其他組件。

（2）基礎(chǔ)組件：基礎(chǔ)組件中有按鈕組件、文字組件等組件，就是系統(tǒng)中使用頻率較高的組件。

（3）輸入組件：輸入組件中有輸入框、文本域等組件；能夠在這類組件中輸入文字。

（4）地圖組件：當(dāng)頁(yè)面中需要地圖相關(guān)功能時(shí)，可以使用地圖組件來(lái)完成相關(guān)功能。在一些地圖導(dǎo)航場(chǎng)景中就可以使用地圖組件。

（5）圖表組件：通過(guò)可視化圖表組件來(lái)展示業(yè)務(wù)中的統(tǒng)計(jì)數(shù)據(jù)。

還有些創(chuàng)意組件適用于比較復(fù)雜的業(yè)務(wù)場(chǎng)景中使用可以支持復(fù)雜的交互效果和樣式，比如：日歷、表格等。日歷組件可以用作篩選日期等業(yè)務(wù)場(chǎng)景、表格組件能詳細(xì)的展示相關(guān)信息。

交互編排

交互編排就是給組件配置事件。通過(guò)給不同的組件配置不同的事件來(lái)實(shí)現(xiàn)頁(yè)面的動(dòng)態(tài)交互效果；例如：點(diǎn)擊某個(gè)按鈕就進(jìn)行頁(yè)面的跳轉(zhuǎn)、點(diǎn)擊按鈕就有彈窗彈出。

動(dòng)作卡片

動(dòng)作卡片是給組件配置的事件，可以通過(guò)拖拽多個(gè)相應(yīng)的動(dòng)作卡片和編排這些動(dòng)作卡片的順序來(lái)實(shí)現(xiàn)組件事件，滿足動(dòng)態(tài)交互的效果。比如需要實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的效果，就將當(dāng)前頁(yè)面跳轉(zhuǎn)卡片拖拽到畫(huà)布中，使用箭頭將畫(huà)布中的兩個(gè)圖標(biāo)進(jìn)行連接，并配置跳轉(zhuǎn)到哪個(gè)頁(yè)面即可。。

屬性配置

屬性配置就是給被選中的組件配置屬性。不同的組件有不同的屬性，可以通過(guò)配置原生屬性、擴(kuò)展設(shè)置等屬性來(lái)調(diào)整組件，從而調(diào)整搭建的頁(yè)面。

原生屬性中就是設(shè)置組件名稱、尺寸等屬性。

在表格的擴(kuò)展設(shè)置中可以設(shè)置表格數(shù)據(jù)、表格列、基礎(chǔ)按鈕設(shè)置等。

樣式配置

樣式配置就是給選中的組件配置布局樣式、背景樣式等，布局樣式中可以設(shè)置被選中組件的高度、寬度、頂部、左側(cè)、右側(cè)、底部等邊距，背景樣式中可以設(shè)置背景圖片、顏色、邊框的樣式等。

結(jié)構(gòu)樹(shù)

結(jié)構(gòu)樹(shù)就是在搭建頁(yè)面時(shí)使用的組件由于嵌套關(guān)系而形成的樹(shù)狀結(jié)構(gòu)，下圖就是當(dāng)前頁(yè)面的結(jié)構(gòu)樹(shù)：

自定義組件

自定義組件是將搭建的組件保存下來(lái)，可以供后面搭建頁(yè)面時(shí)多次使用。

源碼導(dǎo)出

源碼導(dǎo)出就是將搭建的模板導(dǎo)出對(duì)應(yīng)的前端代碼，代碼是vue格式的，需要對(duì)應(yīng)的環(huán)境才能運(yùn)行。

點(diǎn)擊浮木云頁(yè)面中的源碼導(dǎo)出，如下圖：

點(diǎn)擊源碼導(dǎo)出后，導(dǎo)出的源碼如下：

應(yīng)用發(fā)布

應(yīng)用發(fā)布是將構(gòu)建完成的應(yīng)用托管到浮木云，之后我們可以通過(guò)瀏覽器訪問(wèn)已經(jīng)發(fā)布的應(yīng)用。

此外，浮木云包含多種類型模板，可以根據(jù)自己的實(shí)際業(yè)務(wù)需求引用這些應(yīng)用模版，通過(guò)應(yīng)用這些模塊，無(wú)需手寫(xiě)代碼，便可快速形成業(yè)務(wù)系統(tǒng)的基礎(chǔ)頁(yè)面。