即速應用開發平臺高階元件介紹—自定義表單元件
用途:其它動態元件用於接收動態資料,自定義表單用於提交動態資料,例如製作一個活動報名的自定義表單元件。可往裡拖部分元件(包括文字元件、圖片元件、按鈕元件、標題元件、分類元件、音訊元件、雙欄元件、計陣列件,以及自定義表單元件特有的基礎元件:評分元件、選項元件、單文字元件、多文字元件、上傳圖片和時間元件),其中自定義表單特有的六個元件都可以繫結相應的資料物件欄位,按鈕元件可以設定為提交表單的按鈕。
工具/原料
微信小程度開發工具
即速應用開發平臺工具
方法/步驟
進入app編輯頁面
找到高階元件裡的自定義表單元件。在裡面直接點選新增它特有的子元件。如圖:
滑鼠移到自定義表單元件上方。
點選後的狀態:(可以繼續往自定義表單裡新增子元件,注意提交按鈕是一定要加的哦!~)
把需要的子元件統統加在自定義表單裡面。(裡面的子元件若脫離自定義表單,則該子元件無效。)滑鼠移到子元件上方,可以對其子元件進行拖動。
為了更好的區分,微頁君把頁面背景調成了淺灰色,把自定義表單的背景調成了白色,如圖:
為了美觀性,微頁君把自定義表單裡子元件的上間距都調成7.(在元件樣式裡面可以調它的位置、間距、透明度等)
微頁君給它命名,就把它作為一個以聚會為主題的資料表單吧。
把標題置頂,在元件樣式裡面可以調節它的字型大小、顏色等。
給自定義表單裡的每個需要命名的子元件命名。例如,你希望使用者在這個單文字中填寫它的姓名,就在右邊命名為”姓名“。
把這些設定好後,先點選“儲存” 再點選”後臺管理“。
在後臺中的”應用資料物件“中找到”新增資料物件“。
填寫物件名稱以及新增欄位
在編輯頁面,我們設有除”提交按鈕“的”名字“、”聯絡電話“、”照片“、”選項“、”留言“5個子元件,所以我們要在後臺建立5個欄位。
填寫好後,選擇其中的子元件是否必填。選擇後,點選”儲存“。
資料建立完畢後的狀態:
接著,我們回到編輯頁面,儲存後重新整理。然後點選自定義表單元件,將其進行繫結剛剛建立好的”聚會“資料。
然後再將其子元件進行繫結,姓名繫結到”姓名“。將其子元件與後臺建立的資料一一對應,繫結起來。如圖:
繫結完畢後,後臺所設定的必填項,在每個子元件的後面會有一個星的記號。
接著,我們可以對其進行預覽一遍,填寫資料使用一次。
若繫結無誤,你所填寫提交的資料,可以在這個app後臺的應用資料物件的資料管理裡面找到。
在這裡就能看到別人所提交的資料了。
注意事項
表單元件都需要再同一個元件庫裡面實現
元件拖動用滑鼠拖拽進去,別直接點元件,那樣元件會在不同的組庫裡面,會導致資料無法繫結的!