實戰 | 使用微搭低程式碼3分鐘開發表單應用

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

本文從0到1 ,以循序漸進的方式利用騰訊雲微搭低程式碼平臺搭建出常見的表單展示應用,讓您快速上手騰訊雲微搭低程式碼平臺核心功能。

步驟1:建立應用

  1. 登入 騰訊雲微搭低程式碼 控制檯。
  2. 單擊新建應用-從空白新建,填寫應用資訊:

    • 應用名稱:輸入應用名稱。
    • 支援平臺:選擇應用支援釋出的平臺。
  3. 單擊新建,即可建立應用。

步驟2:建立資料來源模型

  1. 單擊左側主選單欄中的資料來源管理,進入資料來源管理頁面。
  2. 單擊新建自建資料來源
  3. 進入新建資料來源頁面,配置如下資訊:

    • 資料庫名稱:輸入資料庫名稱。
    • 資料來源標識:作為資料來源模型的唯一標識,不可重複。
    • 欄位配置:一個資料來源模型可由多個欄位組成。例如“人員”資料來源模型中可有“姓名、年齡”等欄位,由此模型可建立“管理人員、員工、遊客”等資料來源變數。注意 _idcreatedAtupdatedAt 為資料來源內建欄位,不允許修改。 單擊新增,頁面右側將彈出欄位設定小視窗,配置如下相關資訊:

      • 欄位名稱:輸入欄位名稱。
      • 欄位標識:作為欄位的唯一標識,不可重複。
      • 資料型別:選擇相對應的資料型別。
      • 是否必填:欄位是否必填。
      • 是否唯一:欄位是否唯一。
      • 是否列舉:該欄位是否只能在有限個列舉值中取值。例如性別欄位,可設定列舉值為:男、女。
  4. 我們這裡分別建立姓名和手機號兩個欄位,單擊確定,即可完成資料來源模型的建立。

步驟3:低程式碼應用編輯

  1. 資料來源設定完畢後就需要建立頁面,進入應用管理頁面,找到剛才建立的應用,進入應用編輯器。
  2. 編輯器分為三個部分,可歸納為選單區,元件頁面選擇區,編輯預覽區。

使用表單容器生成表單應用

  1. 在編輯器中使用表單容器繫結剛剛建立的資料來源。
  2. 在彈出的彈窗中單擊確定後表單即可自動生成。

建立資訊展示頁面

  1. 在編輯器中新建立一個頁面。
  2. 進入新建立的頁面,為頁面建立模型變數。
  3. 填寫變數標識後單擊儲存
  4. 在頁面中新增容器,並在容器下方新增資訊展示元件。
  5. 為容器繫結迴圈。

    勾選新建立的模型變數,單擊確定
  6. 可以看到,模型變數配置成功後,容器下方的元件會根據資料量進行遍歷。
  7. 為列表項元件配置資料。

    選擇繫結迴圈物件,勾選需要繫結的欄位單擊確認

! 迴圈物件中可繫結的資料依賴於元件上層容器所繫結的模型變數。
  1. 單擊確定後可看到元件已成功配置了資料。

頁面測試

  1. 頁面整體搭建完成後對頁面功能進行測試,首先在編輯器開啟實時預覽隨後在表單頁進行三次資訊提交。
  2. 來到資訊展示頁,可看到資訊已成功遍歷展示,至此應用搭建完成。

步驟4:釋出應用

  1. 單擊頁面右上角的釋出,在彈出的部署應用視窗中進行預覽釋出配置。
  2. 釋出完成後通過掃描二維碼即可訪問釋出的應用。

相關文章