實戰 | 0~1基於模板開發問卷小程式

騰訊云云開發發表於2021-03-10

本文將幫助您藉助騰訊雲微搭低程式碼 WeDa 平臺,基於已有的模板快速打造出如下圖所示的問卷調查小程式。

概述

從0到1開發一款問卷小程式需要經過幾個步驟,從模板中心複製應用到自己的應用管理,然後根據需求定義資料來源。資料來源定義好後需要按照需求設計頁面,主要是完成佈局的新增和元件的定義。一切做好之後就需要本地構建然後預覽效果,只需要簡單的幾步就可以獨立開發一款屬於自己的應用。

步驟1:建立應用

  1. 騰訊雲微搭低程式碼控制檯 單擊【模板中心】,選擇需要的模板,單擊【立即使用】。
  2. 錄入應用名稱,填寫 survey,單擊【確定】。

步驟2:編輯資料來源

使用模板成功後,單擊【資料來源管理】,即可看到新加了一份名為【低碼分享活動報名表】的資料來源。

  1. 單擊名稱即可瀏覽表中的欄位名稱、欄位標識和資料型別等詳細資訊。
  2. 同時,支援在資料來源管理頁面自定義新增業務所需的欄位,單擊【新增欄位】。
  3. 可以增加一個職業的欄位,欄位標識為 job,欄位型別為字串,是否必填選擇【是】,是否列舉選擇【否】
  4. 設定完畢後單擊【確定】就增加了一個欄位。
  5. 不需要的欄位可以刪除,可以單擊操作列上的【刪除】按鈕刪掉,本文以刪掉感興趣的話題欄位為例。
  6. 新增第二個欄位所屬行業,欄位標識為 industry,欄位型別為字串,是否必填選擇【是】,是否列舉選擇【否】,設定完畢後單擊【確定】就增加了一個欄位。
  7. 由於參與問卷調查的使用者只需提交就可以,因此【動作】只勾選【新增】方法,其他都保持預設。設定完畢後單擊頁面底部的【確定】,否則剛才新增的欄位都不生效。

步驟3:修改頁面

1.資料來源設定完畢後就需要建立頁面,單擊【應用管理】,找到剛才建立的應用,單擊【編輯】按鈕進入應用編輯器。

程式碼解析

下面逐條分析當下使用模板的結構。首先是有個垂直佈局元件,它將頁面分成了三個部分:

  1. 頭部(header):頭部放置小程式的介紹,向使用者告知本次調查的目的。對應模板中的【插槽 header】。
  2. 內容(content):內容部分就是具體的調查項,在調查項結尾需要增加一個提交按鈕,方便使用者提交。對應模板中的【插槽 content】。
  3. 尾部(footer):尾部一般放置版權資訊。對應模板中的【插槽 footer】。

改造頭部

  1. 選中大綱樹中的【插槽 header】,可以看到該模板的頭部資訊是放置了四個標題元件,若不需要這麼多展示內容,可以選中具體【標題】元件單擊右鍵【刪除】。
  2. 若需要新增長文字介紹,我們可以選中【插槽 header】>【容器】元件,再單擊元件庫【通用】類目中的【文字】元件,即可在問卷的頭部增加文字,您也可以通過拖拽快速實現。修改文字的內容,可選中【文字】元件,並修改右側【元件編輯】的【文字內容】。 內容示例: 文字內容:尊敬的騰訊雲微搭低程式碼使用者,為了更好地提升騰訊雲微搭低程式碼平臺的體驗和服務,我們特展開本次的問卷調查,希望能得到您的真實想法與寶貴意見,本問卷將花費您5分鐘時間。
  3. 同時,可根據業務需求調整樣式,我們選中該文字元件所在的【容器】元件,切換到【樣式】標籤,給元件的內邊距左右各設定20的距離。

改造內容

  1. 在【插槽 content】部分,即問卷的內容部分,模板提供了姓名、手機、興趣話題和提交按鈕。若不需要某部分內容,可選中該元件,單擊右鍵【刪除】。
  2. 若要新增內容,可以選中【插槽 content】下的【插槽 content Slot】元件(即表單容器的插槽容器),再單擊元件庫中所需新增的元件,如新增【表單單選】元件。
  3. 預設是新增到最後邊,我們可以調整一下順序,拖住元件調到【按鈕】元件的前邊。
  4. 選中剛剛新增的【表單單選】元件,設定表單欄位名稱(欄位名稱填寫為 job),元件的標題(我的職業是),將佈局方式改為垂直,並依次增加單選項的內容,單選項名稱分別為前端開發、後臺開發、設計師、運營、產品策劃、其他,單選項的值分別設定為first、second、third、fourth、five、six。單選內容的 value 會被提交到資料庫裡。
  5. 按照同樣的方法增加第二個調查項,需要注意的是第二個調查項的欄位名稱需要填寫為 industry,標題設定為“我所屬的行業是”,單選項名稱分別為金融、工業、教育、醫療、政務、IT網際網路、其他,單選項的值分別為first、second、third、fourth、five、six、seven。單選內容的 value 會被提交到資料庫裡。

改造尾部

我們在問卷尾部展示版權資訊。選中【插槽 footer】插槽裡的【文字】元件,可以在右側的屬性皮膚裡修改版權資訊。

步驟4:程式碼構建與釋出

  1. 程式碼改造好後就可以進行預覽了,單擊導航條【預覽釋出】。為快速測試,您可以選擇部署方式為【雲端】,部署平臺為【網頁 h5】。
  2. 本地需要安裝好 node.js 並且按照彈出視窗提示的命令依次在命令列執行,安裝完畢後需要開啟低程式碼的編譯監控。
  3. 部署完成後便會彈出預覽二維碼和預覽的訪問地址。
  4. 構建成功後可以用手機掃描二維碼瀏覽效果。

資料管理

使用者填寫了問卷調查後,管理員可以單擊【資料來源管理】,檢視使用者提交的問卷資訊資料,單擊【資料管理後臺】,騰訊雲微搭低程式碼 LowCode 平臺自帶內容管理(CMS)後臺可以檢視和管理資料。

進入頁面後可以看到已建立的歷史專案,點選剛剛建立的新專案。
選中表單即可檢視資料。

您也可以直接在控制檯的【應用管理】中找到剛才的應用,點選應用卡片,在【資料管理後臺】中找到預覽/釋出的應用所對應的資料。【正式資料】對應的是使用釋出產生的應用資料,【測試資料】是使用預覽產生的應用資料。

相關文章