最佳實戰 | 使用微搭低程式碼10分鐘快速搭建企業門戶應用

CloudBase雲開發發表於2022-04-14

本文以下圖展示的企業門戶應用為例,我們來學習如何使用微搭進行企業門戶應用的快速搭建。

使用騰訊文件快速建立資料模型與資料管理後臺

我們可以通過匯入騰訊文件的 Excel 檔案進行資料模型與資料管理後臺的快速建立

  1. 在控制檯的 建立應用 頁面,選擇新建資料管理應用。
  2. 選擇新建方式為從 Excel 新建
  3. 選擇匯入外部文件,並對騰訊文件進行授權操作。
  4. 授權完成後可以選擇對應的 Excel 檔案進行匯入,可單擊下方的示例模板進行示例檔案的下載。
  5. 匯入完成後,會自動根據 Excel 檔案識別出資料模型欄位以及資料模型中儲存的資料,如下圖所示,確認無誤後單擊下一步
  6. 輸入名稱後,即可自動完成資料模型的生成與資料管理後臺的建立。

從空白開始建立門戶應用

建立空白應用

  1. 在控制檯的 建立應用 頁面,選擇新建門戶應用。
  2. 選擇從空白新建。
  3. 輸入應用名稱後即可完成空白應用的建立,建立完成後頁面會自動跳轉到應用編輯器。

建立企業門戶主頁

  1. 在指引中選擇空白頁進行建立。
  2. 在頁面中新增輪播圖元件。
  3. 在右側輪播圖的右側配置區中新增輪播圖需要展示的圖片。
  4. 隨後選擇標題元件,並修改標題元件的相關配置。
  5. 隨後在標題元件樣式配置區中,將標題元件的上下邊距調整為20,便於頁面展示更加清晰。
  6. 隨後新增宮格導航元件,用於場景能力的相關展示。
  7. 在右側的元件配置區中為宮格導航進行圖片與標題配置。
  8. 宮格導航配置完成後,我們右鍵選中剛剛建立的標題元件,選擇克隆,將克隆後的標題元件拖拉至宮格導航元件的下方並修改標題元件文字內容。
  9. 新增一個列表檢視元件,選擇模板為卡片列表
  10. 在右側對列表檢視元件進行資料繫結配置,在右側資料模型配置中選擇通過 Excel 生成的資料模型。
  11. 資料配置完成後,我們需要對列表檢視的樣式進行調整。 在大綱書中選中列表檢視下方的普通容器,在元件的樣式配置區將邊框調整為
  12. 隨後我們對列表檢視中的圖片進行資料繫結,選中列表檢視下的圖片元件,隨後在右側配置區中單擊資料繫結按鈕,繫結對應的資料欄位。
  13. 重複上述方法,為文字元件進行資料繫結,繫結完成後效果如下:
  14. 之後我們修改列表檢視的配置,使此處僅展示4條資料,並且分頁模式修改為不分頁。
  15. 之後我們可以使用相同的方式進行"合作伙伴"模組的構建,合作伙伴的相關資料需要我們通過欄位進行查詢,我們可以通過列表檢視的配置區進行資料篩選。
  16. 為列表檢視檢視配置完成資料模型後,單擊下方的資料篩選彈窗,配置篩選條件為 category 等於"合作",如下圖所示:
  17. 配置完成後將元件與資料進行繫結,可以看到列表檢視僅會展示合作伙伴的相關資料, 至此我們的企業門戶主頁建立完成。

建立企業動態列表頁

  1. 建立一個新頁面,並命名為"企業動態列表"。
  2. 拖入列表檢視元件,選擇模板為圖文列表
  3. 為列表檢視繫結資料模型後,將列表中的圖片、文字依次與資料進行繫結即可完成圖文列表頁的構建。

建立關於我們頁面

  1. 之後再次新增一個頁面,並命名為""關於我們"。
  2. 新建一個普通容器,在普通容器下新增一個圖片元件並繫結需要展示的圖片素材,並將圖片元件的寬度調整為100%。
  3. 之後再次新建一個普通容器,並在普通容器下新增一個標題元件,並按需求進行文案的調整。 標題元件的大小設定為"3",對齊方式設定為"左"。
  4. 再次新建普通容器,並在普通容器下新增一個富文字元件,並在富文字元件的配置區中進行展示內容的輸入。
  5. 之後我們對頁面的佈局樣式進行細微調整,將標題元件的全部內間距調整為20,富文字元件的左右內間距調整為20,至此我們便完成了"關於我們"頁面的建立。

建立內容詳情頁面

  1. "內容詳情""頁面與"關於我們"頁面佈局基本類似,我們可以克隆功能進行頁面的複製,並單擊頁面設定按鈕修改頁面名稱為"內容詳情"。
  2. 在複製後的頁面中新增一個文字元件,並將文字元件的左右間距調整為20,用於詳情頁子標題的展示。
  3. 隨後我們在元件區中選擇資料檢視元件,將資料檢視元件自帶的普通容器刪除,並將大綱樹的全部元件拖入資料檢視元件下。
  4. 為資料檢視元件繫結資料模型,隨後依次為內容詳情頁面的圖片、文字、富文字元件進行資料欄位繫結,繫結完成後我們便完成了內容詳情頁的搭建。

實現內容列表到內容詳情頁的頁面跳轉邏輯

  1. 選中企業門戶主頁列表檢視下的普通容器元件,並在右側元件配置區單擊行為配置按鈕。
  2. 為普通容器配置單擊後跳轉至內容詳情頁的事件,單擊下方的新建頁面引數,建立一個名為\_id 的頁面引數。
  3. 頁面引數建立完成後,單擊頁面引數右側的資料繫結按鈕
  4. 在資料繫結彈窗中,選擇資料標識欄位,繫結完成後儲存即可。
  5. 之後在內容詳情頁選中資料檢視元件,並單擊右側配置區的資料篩選,調起資料篩選彈窗。
  6. 在彈窗中設定篩選條件為資料標識 等於 \_id 後儲存。
  7. 至此我們便完成了內容列表跳轉內容詳情頁面的跳轉邏輯,同理我們也同樣可以按照上述方式實現動態列表頁跳轉內容詳情頁的相關邏輯。

配置應用的底部導航

為每一個頁面底部新增一個 Tab 欄元件來實現應用的底部導航,Tab 欄配置如下圖所示:

為內容詳情頁新增頂部導航

進入內容詳情頁面,新增一個頂部導航元件,並將頂部導航元件移動至大綱樹的最上級。

釋出應用

至此我們便已完成了企業門戶應用的搭建,單擊右上角釋出,選擇對應的釋出平臺即可完成應用的釋出。

相關文章