微搭低代碼目前開放了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端設置要比移動端復雜不少，尤其對組件概念的理解上，好些屬性都需要手輸入代碼，不能完全在視圖上設置，還是有待優化的空間的。后續我們繼續分析官方模板，帶着大家一點點熟悉這個新出來的功能。
作者：微搭低代碼布道師韓鍇
