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