最佳實戰 | 如何使用騰訊雲微搭從0到1開發企業門戶應用

應用功能模塊概述

企業門戶應用一共由五個頁面構成，並且不同的頁面具備不同的功能模塊，如下圖所示：

應用展示

企業門戶應用主要功能爲企業動態、企業信息的展示，應用詳情圖如下：

應用數據源設計

數據模型創建

在創建應用之前，我們需要知道，當應用中存在使用動態數據功能模塊時，便需要創建對應的數據模型進行管理。以企業門戶應用爲例，我們需要創建的數據模型以及字段如下：

數據錄入

數據模型創建完成後，需前往數據管理後臺進行體驗數據的錄入，步驟如下：

1. 在 數據模型 頁面中單擊數據管理後臺進入。
   
2. 進入數據管理後臺 > 我的數據源頁面，更換數據爲體驗數據。
   
3. 以企業動態表爲例，單擊管理數據進入到對應的管理後臺。
   
4. 單擊新建，進入數據創建頁面。
   
5. 在數據創建頁進行體驗數據錄入後單擊提交即可。
   

? 實際搭建應用的過程中會需要通過實時預覽來查看頁面的真實狀態，並且由於實時預覽調用的數據爲體驗數據，因此建議在開發應用前對體驗數據進行錄入，便於進行應用的開發調試。

前提條件

• 完成企業門戶應用的 數據模型設計。
• 完成 自定義應用的創建。

步驟1：新建頁面

新建一個頁面，命名爲企業門戶主頁。

步驟2：創建首頁 banner 圖模塊

在頁面右側的編輯區中選擇普通容器組件，之後在普通容器組件中放置輪播組件，隨後可通過在輪播組件中加入圖片組件來實現圖片的輪播，若存在圖片配置需求，可選中圖片組件後在右側的配置區進行圖片的替換。

? 使用普通容器可以進行組件的統一管理與樣式調整，因此在實際開發應用的過程中建議將組件按模塊放置到普通容器中，便於管理的同時也會提升開發效率。

步驟3：創建應用場景導航

通過觀察頁面設計可以發現，應用場景導航由四個導航 Tab 構成，並且排列方式爲橫向排布，因此爲了實現該功能，我們需要使用模型變量、網格佈局組件以及組件循環功能。

創建單個導航 Tab

1. 創建一個普通容器，並在容器中加入網格佈局組件，將網格組件的列比例屬性配置爲"12"。
   
2. 在網格容器的分欄插槽中拖入普通容器，並在普通容器中放置圖片與文本組件。
   

? 此處需要注意，在放置圖片與文本組件時，大綱樹中圖片組件需要在文本組件的上方，否則位置會顛倒。

創建模型變量

1. 單擊右上角的變量，進入變量編輯頁面。
   
2. 在當前頁面，單擊創建按鈕進行模型變量的創建。
   
3. 輸入變量標識，並選擇變量類型爲模型變量，數據源選擇應用場景表，變量初始化方法選擇查詢列表-內置(WedaGetRecords)。根據設計圖設計，此處只展示四個導航 Tab，因此按照條件對方法參數進行調整。
   

組件綁定循環

1. 選中普通容器組件，並在右側的屬性 > 通用配置 > 循環展示中單擊綁定循環按鈕。
   
2. 在彈出的彈窗中選擇剛剛創建的模型變量，單擊確定。
   
3. 返回編輯器頁面後，選中容器下的圖片組件，單擊右側的數據綁定按鈕。
   
4. 在彈窗中選擇循環變量 Tab，並選擇對應的數據模型字段完成數據綁定。
   
5. 按上述方式對文本組件的數據進行綁定，完成後頁面樣式如下：
   

樣式調整

循環與數據配置完成後，該模塊的樣式並沒有按照應用設計圖中那樣進行展示，因此我們需要對組件進行樣式的調整來使其達到預期，首先對圖片組件的寬高進行調整。

1. 單擊右側編輯區的樣式 Tab，將圖片組件的寬高調整爲100。
   
2. 可以看到圖片的大小變爲正常狀態，之後我們調整圖片、文本組件的居中狀態，單擊普通容器組件，在配置區的樣式 Tab 中，選擇佈局模式爲彈性佈局，主軸方向設爲垂直，主軸對齊設爲水平居中，副軸對齊設爲中點對齊。
   

   關於彈性佈局：
   設置了彈性佈局容器內的組件會根據當前設置的主軸方向、主軸對齊、副軸對齊進行佈局的調整。

3. 隨後對普通容器組件的寬度進行調整，寬度設置爲200，可以看到組件已按照設計圖中樣式進行排布。
   

步驟4：企業動態導航

創建模塊標題

創建一個普通容器，在普通容器中添加文本組件，在右側的配置區中將文本組件的內容修改爲"最新動態"，對齊方式修改爲"向左對齊"，之後單擊樣式 Tab，將文本的屬性設置爲"粗"。

創建圖文列表

添加一個普通容器，隨後在該容器下添加圖文展示項組件，隨後在右側配置區開啓該組件的自定義內容選項。

? 開啓自定義內容選項後，圖文展示項組件便可以以插槽的形式來展示內容，只需要將組件放置在主內容插槽即可。

調整圖文列表組件內容

在右側配置區刪除"內容"配置項中的文本，隨後在主內容插槽中插入兩個文本組件，修改完成後組件樣式如下圖所示：

創建模型變量

與 步驟3 的創建方式相同，創建模型變量，變量綁定企業動態表，變量初始化方法選擇查詢列表-內置(WedaGetRecords)。根據設計圖設計，此處只展示時間最新的四個動態，因此按照條件對方法參數進行調整。

組件綁定循環

1. 爲圖文展示項的父容器綁定循環，綁定方式可參見上文的 循環綁定。
   
2. 選中圖文展示項組件，爲圖文展示項組件的圖片屬性綁定數據。
   
3. 按照同樣方式爲文本組件進行數據綁定。
   

模塊樣式調整

1. 選中圖文展示項的父容器，點擊右側配置區的樣式 Tab，選擇邊框類型爲虛線，邊框寬度爲1，顏色選擇爲灰色。
   
2. 在父容器的樣式 Tab 中對圖文展示項的間距進行調整，如下圖所示：
   
3. 選中最外層容器，調整該模塊與應用場景模塊之間的間距。至此，企業動態模塊構建完成。
   

步驟5：企業合作伙伴模塊

與應用場景模塊創建方式相同，使用網格佈局、文本、圖片組件來實現。具體實現步驟可參見 步驟3。

應用場景詳情頁搭建

步驟1：新建頁面

新建應用場景詳情頁面，頁面創建流程可參見 上文。

步驟2：場景詳情模塊創建

1. 場景詳情模塊由標題與詳情內容構成，創建一個父級容器，隨後分別在父級容器中添加文本組件與富文本展示組件即可完成該模塊創建。
   
2. 修改文本字體大小，並在樣式 Tab 中進行加粗。
   

步驟3：簽約客戶模塊創建

可參見 應用場景 創建，創建方式相同。

! 詳情頁的展示內容根據跳轉傳參來進行獲取，此處模塊的變量綁定請參見 應用場景頁面邏輯設計。

企業動態詳情頁搭建

步驟1：新建頁面

新建應用場景詳情頁面，頁面創建流程可參見 上文。

步驟2：場景詳情模塊創建

1. 場景詳情模塊由標題與詳情內容構成，創建一個父級容器，隨後分別在父級容器中添加兩個文本組件（分別對應標題與日期）與富文本展示組件即可完成該模塊創建。
   
2. 修改文本字體大小，並在樣式 Tab 中進行加粗。
   

! 詳情頁的展示內容根據跳轉傳參來進行獲取，此處模塊的變量綁定請參見 首頁動態頁面邏輯設計。

動態列表頁搭建

動態列表頁搭建方式與主頁動態列表模塊搭建方式大致相同，值得注意的是，此處的動態列表頁爲展示全部動態，因此綁定的模型變量存在差異，此處模型變量應調用查看列表-內置(WedaGetList)方法。

企業聯繫頁搭建

步驟1：首頁 banner 圖模塊

搭建方式與主頁 banner 模塊相同，參見 上文。

步驟2：品牌簡介模塊

1. 創建一個普通容器，並且在容器中再添加一個寬度爲80%的容器作爲模塊背景，將該容器背景顏色設置爲灰色。
   
2. 選中父容器，在右側編輯區的樣式 Tab 中選擇彈性佈局，將剛剛用來作爲背景的容器進行居中。
   
3. 在背景容器中加入兩個文本組件，分別作爲標題與簡介內容的載體。
   
4. 選中第一個文本組件，在該組件的樣式 Tab 中將字體設置爲加粗，並將文本內容修改爲企業簡介。
   
5. 選中第二個文本組件，將該組件的對齊方式設置爲兩端對齊，並將文本內容修改爲對應的簡介內容，並根據簡介內容調整文本組件的最大行數。
   

步驟3：聯繫我們模塊

1. 與品牌簡介模塊相同，創建一個背景容器並居中，並在背景容器中添加一個文本組件作爲模塊標題，將文本組件的內容修改爲“聯繫我們”並進行加粗。
   
2. 之後在該容器中添加兩個網格佈局組件，在配置區中統一將列比例調整爲12。
   
3. 在第一個網格佈局組件的插槽中插入圖片組件與文本組件，分別將組件內容替換爲 icon 與對應文案，並根據實際需求調整組件的大小與組件位置。
   
4. 重複上述步驟，添加企業郵箱內容即可完成創建。
   

實現首頁應用場景導航跳轉到應用場景詳情頁

設計思路：通過低代碼方法獲取到當前單擊 Tab 元素對應的數據模型 ID，隨後爲 Tab 元素設置跳轉時間，並將該數據模型 ID 作爲參數傳遞到應用場景詳情頁，應用場景詳情頁根據數據模型 ID 調用 WedaGetRecords 方法獲取到對應的數據並實現在前端頁面展示。

步驟1：創建普通變量

爲企業門戶主頁頁面創建普通變量，用於接收點擊導航Tab時返回的數據模型 ID。單擊上方變量，在當前頁面創建一個普通變量命名爲 getId，數據類型選擇字符串。

步驟2：爲導航 Tab 配置事件

綁定變量賦值方法

1. 在大綱樹中選中導航 Tab 對應的普通容器，選擇右側配置區的點擊時觸發條件，調起事件配置彈窗。
   
2. 選擇執行動作爲 變量賦值 變量名選擇剛剛創建的普通變量 getId。
   
3. 單擊上圖變量值右側的數據綁定按鈕調起數據綁定彈窗，並在循環對象 Tab 中選擇 _id。
   
4. 完成變量綁定後單擊保存即可。
   

綁定頁面跳轉方法

1. 再次選中導航 Tab 對應的普通容器並選擇右側配置區的點擊時觸發條件，調起事件配置彈窗。
2. 在事件彈窗中進行頁面跳轉配置並單擊新建參數變量。
   
3. 參數變量創建完成後，單擊變量綁定按鈕。
   
4. 綁定第一步用於接收數據模型 ID 的普通變量後單擊保存即可。
   

!此處需要注意方法創建的先後順序，需要先進行變量賦值後再綁定頁面跳轉方法，否則會導致頁面跳轉時的傳參爲空值。

創建模型變量

爲應用場景詳情頁創建模型變量，使用主頁導航 Tab 傳遞的參數進行數據查詢與渲染。

1. 單擊右上角切換到應用場景詳情頁，單擊上方變量，爲該頁面創建模型變量，綁定應用場景表後選擇變量初始化方法爲查詢單條-內置(wedaGetItem)， 之後再變量初始化入參處爲數據標識進行變量綁定。
   
2. 在變量綁定彈窗中選擇剛剛通過頁面跳轉生成的參數變量後單擊保存。
   
3. 依次選中應用場景詳情頁中的組件，並在右側配置區單擊變量綁定按鈕。
   
4. 選擇剛剛創建的模型變量即可完成綁定。
   

方法測試

進入應用主頁，開啓實時預覽後單擊應用場景 Tab 按鈕，查看是否能夠正常跳轉並且詳情頁內容是否按預期展示。

實現首頁動態列表導航跳轉到動態詳情頁

設計思路：與應用場景 Tab 導航實現方式相同，通過在跳轉詳情頁時傳入數據源 ID 實現該功能。

步驟1：創建普通變量

爲當前頁面創建普通變量，用於接收點擊列表時返回的數據模型ID。單擊上方變量，在當前頁面創建一個普通變量命名爲getListID，數據類型選擇字符串。

步驟2：爲列表配置事件

綁定自定義方法

1. 在大綱樹中選中列表對應的普通容器，選擇右側配置區的點擊時觸發條件，調起事件配置彈窗。
   
2. 選擇執行動作爲 變量賦值 變量名選擇剛剛創建的普通變量 getListID。
   
3. 單擊上圖變量值右側的數據綁定按鈕調起數據綁定彈窗，並在循環對象 Tab 中選擇 _id。
   
4. 完成變量綁定後單擊保存即可。
   

綁定頁面跳轉方法

1. 再次選中列表對應的普通容器並選擇右側配置區的點擊時觸發條件，調起事件配置彈窗。
2. 在事件彈窗中進行頁面跳轉與傳參的配置後單擊保存。
   

!此處需要注意方法創建的先後順序，需要先進行變量賦值後再綁定頁面跳轉方法，否則會導致頁面跳轉時的傳參爲空值。

創建模型變量

爲企業動態詳情頁創建模型變量，使用主頁導航 Tab 傳遞的參數進行數據查詢與渲染。

1. 單擊右上角切換到企業動態詳情頁，單擊上方變量爲該頁面創建模型變量，綁定企業動態表後選擇變量初始化方法爲查詢單條-內置(wedaGetItem)， 之後在變量初始化入參處爲數據標識進行變量綁定。
   
2. 依次選中動態詳情頁中的組件，並在右側配置區單擊變量綁定按鈕。
   
3. 選擇剛剛創建的模型變量即可完成綁定。
   

方法測試

進入應用主頁，開啓實時預覽後點擊列表，查看是否能夠正常跳轉並且詳情頁內容是否按預期展示。

?動態列表頁跳轉詳情頁的操作可複用該模塊方法。

實現底部 Tab 欄跳轉

1. 由應用設計圖可見，該應用存在三個頁面需要在底部創建 Tab 欄組件，分別爲應用主頁、動態列表頁以及企業聯繫頁。
2. 以主頁爲例，進入主頁後，在左側組件區選擇 Tab 欄組件，該組件會自動固定到頁面下方。
   
3. 在右側配置區對 Tab 欄組件進行配置，參數說明如下：
   
4. 配置完成後，單擊下方的啓用路由按鈕，路由方式選擇爲跳轉，配置完成後單擊對應 Tab 即可進行頁面的跳轉。
   
5. 按照同樣的方式對動態列表頁以及企業聯繫頁進行 Tab 欄的配置即可，至此我們便完成了企業門戶應用的搭建。

雲開發平臺是幫助企業在雲端開發、部署和運行應用的一站式雲原生平臺。其安全接入、可靠運行的特性已得到220萬開發者的信賴，目前已擁有云開發、雲託管、微搭低代碼、雲開發原生網關等面向不同開發場景的產品。
雲開發平臺具備彈性伸縮免運維等 Serverless 能力，同時作爲騰訊生態連接器，連接了騰訊文檔、騰訊會議、企業微信等生態產品，幫助企業定製開發更輕鬆，助力業績增長。