微搭低代碼官方模板解析（一）

微搭低代碼目前開放了PC端功能，使用方法是須要在模板中心啓用模板，模板建立成功後會自動增長PC端的組件庫及建立須要的數據源。本文就結合目前官方提供的模板，按照示例程序本身搭建一遍。經過模板的搭建來熟悉官方組件庫的用法。

建立頁面

首先本身新建一個頁面，咱們須要按照官方模板的首頁本身搭建一下。

官方首頁邏輯解析

官方的首頁其實就是起到一個引導的做用，經過大的圖片來引導用戶點擊

而後咱們切換到組件視圖來分析一下首頁都使用了哪些組件

它的佈局組件使用了節點組件，節點組件就至關於咱們html裏的div，我畫個示例圖來分析一下佈局的結構

第一層結構是這樣子的，那麼咱們按照分析的第一層結構先添加一下本身的佈局

實現佈局

節點組件是在通用分類裏，增長的方式是點擊一下組件的名稱

可是添加進去發現頁面沒有變化，須要把預覽的效果關閉了

這樣就能夠看到效果了

而後切換到組件視圖，咱們選擇節點組件的插槽

在插槽裏再次添加兩個節點組件

這樣外層的佈局就製做好了。

官方模板內容區域佈局解析

咱們能夠看到內容區域分爲上下兩部分，上邊是標題，下邊是快捷功能引導區域

官方模板是使用了節點組件和柵格組件

內容區域佈局實現

咱們先選中內容區域節點組件的插槽

在通用分類裏添加節點組件

而後在佈局分類裏添加刪格組件

組件搭建好後的效果

官方模板標題區域解析

標題區域比較簡單，其實就是實現標題的兩行的效果

組件樹裏是經過文本組件來實現的

標題區域功能實現

咱們也按照官方的思路，在標題的節點組件裏增長兩個文本組件

可是兩個文本組件是橫向排列的，和官方模板的效果不符，這個時候就須要設置一下組件的樣式。通常是設置父容器的佈局

首先是設置父容器的寬度，咱們設置成1040PX

內邊距的上邊距設置38PX，只能輸入數字，因此須要使用樣式的編輯器手動改一下字

外邊距的話左邊和右邊都是auto

而後就是設置文本組件的樣式，佈局的話改爲塊佈局

內邊距給一個32PX的大小

字體的話設置成12PX，顏色設置成藍色

把文本的內容改爲首頁

接着咱們設置第二個文本組件的樣式，給它一個外邊距，各爲20，佈局的話設置成塊佈局

字體的話說設置成20PX 加粗

修改文本的內容爲我的工做臺

這樣標題區域就設置好了

快捷功能引導區官方模板分析

從功能上講是放置了三個模塊的快捷操做，佈局上是一行四列，因此模板裏放置了四個組件

快捷功能引導區功能實現

咱們也按照官方的思路，在節點組件裏添加四個組件

咱們須要在柵格組件上設置樣式，佈局設置成flex，主軸對齊是兩端對齊

外邊距的話，上下是86PX，左右是auto

寬度設置成1040PX

裏邊的節點組件的樣式，佈局設置成內聯塊，寬度320PX

邊框設置爲實線，顏色rgb(220, 227, 243)，寬度1PX，圓角20PX

外層容器樣式設置好後，就須要設置裏邊的內容，裏邊的內容仍是添加一個節點組件

可是節點的類型要修改爲圖片，圖片的地址官方已經提供了

https://main.qcloudimg.com/raw/f28e2d68d4718c2978ae8036c8dc9990.png

樣式的話佈局設置成內聯塊佈局，寬度100%，高度360PX

背景的話使用顏色填充，填充色爲rgb(0, 50, 149)

邊框設置爲20PX

在當前節點再增長兩個文本組件，用來顯示模塊的名稱

定位的話設置成絕對定位，並設置距上邊36PX，距左邊36PX

設置字號爲20PX，加粗，顏色設置成白色

修改文本的內容爲人選信息列表

咱們按照一樣的方式設置一下第二個文本組件的樣式

樣式設置好後咱們就須要給圖片增長一個點擊事件，選擇平臺方法裏的導航便可

這樣設置就都完成了

總結

整體上PC端設置要比移動端複雜很多，尤爲對組件概念的理解上，好些屬性都須要手輸入代碼，不能徹底在視圖上設置，仍是有待優化的空間的。後續咱們繼續分析官方模板，帶着你們一點點熟悉這個新出來的功能。

做者：微搭低代碼佈道師韓鍇