小程式開發自定義表單無程式碼方法?

即速應用開發平臺高階元件介紹—自定義表單元件

用途:其它動態元件用於接收動態資料,自定義表單用於提交動態資料,例如製作一個活動報名的自定義表單元件。可往裡拖部分元件(包括文字元件、圖片元件、按鈕元件、標題元件、分類元件、音訊元件、雙欄元件、計陣列件,以及自定義表單元件特有的基礎元件:評分元件、選項元件、單文字元件、多文字元件、上傳圖片和時間元件),其中自定義表單特有的六個元件都可以繫結相應的資料物件欄位,按鈕元件可以設定為提交表單的按鈕。

工具/原料

微信小程度開發工具

即速應用開發平臺工具

方法/步驟

進入app編輯頁面

小程式開發自定義表單無程式碼方法 即速應用方法

找到高階元件裡的自定義表單元件。在裡面直接點選新增它特有的子元件。如圖:

小程式開發自定義表單無程式碼方法 即速應用方法

小程式開發自定義表單無程式碼方法 即速應用方法

滑鼠移到自定義表單元件上方。

小程式開發自定義表單無程式碼方法 即速應用方法

點選後的狀態:(可以繼續往自定義表單裡新增子元件,注意提交按鈕是一定要加的哦!~)

小程式開發自定義表單無程式碼方法 即速應用方法

把需要的子元件統統加在自定義表單裡面。(裡面的子元件若脫離自定義表單,則該子元件無效。)滑鼠移到子元件上方,可以對其子元件進行拖動。

小程式開發自定義表單無程式碼方法 即速應用方法

為了更好的區分,微頁君把頁面背景調成了淺灰色,把自定義表單的背景調成了白色,如圖:

小程式開發自定義表單無程式碼方法 即速應用方法

小程式開發自定義表單無程式碼方法 即速應用方法

為了美觀性,微頁君把自定義表單裡子元件的上間距都調成7.(在元件樣式裡面可以調它的位置、間距、透明度等)

小程式開發自定義表單無程式碼方法 即速應用方法

微頁君給它命名,就把它作為一個以聚會為主題的資料表單吧。

小程式開發自定義表單無程式碼方法 即速應用方法

把標題置頂,在元件樣式裡面可以調節它的字型大小、顏色等。

小程式開發自定義表單無程式碼方法 即速應用方法

給自定義表單裡的每個需要命名的子元件命名。例如,你希望使用者在這個單文字中填寫它的姓名,就在右邊命名為”姓名“。

小程式開發自定義表單無程式碼方法 即速應用方法

把這些設定好後,先點選“儲存” 再點選”後臺管理“。

小程式開發自定義表單無程式碼方法 即速應用方法

在後臺中的”應用資料物件“中找到”新增資料物件“。

小程式開發自定義表單無程式碼方法 即速應用方法

填寫物件名稱以及新增欄位

小程式開發自定義表單無程式碼方法 即速應用方法

在編輯頁面,我們設有除”提交按鈕“的”名字“、”聯絡電話“、”照片“、”選項“、”留言“5個子元件,所以我們要在後臺建立5個欄位。

小程式開發自定義表單無程式碼方法 即速應用方法

填寫好後,選擇其中的子元件是否必填。選擇後,點選”儲存“。

小程式開發自定義表單無程式碼方法 即速應用方法

資料建立完畢後的狀態:

小程式開發自定義表單無程式碼方法 即速應用方法

接著,我們回到編輯頁面,儲存後重新整理。然後點選自定義表單元件,將其進行繫結剛剛建立好的”聚會“資料。

小程式開發自定義表單無程式碼方法 即速應用方法

然後再將其子元件進行繫結,姓名繫結到”姓名“。將其子元件與後臺建立的資料一一對應,繫結起來。如圖:

小程式開發自定義表單無程式碼方法 即速應用方法

小程式開發自定義表單無程式碼方法 即速應用方法

小程式開發自定義表單無程式碼方法 即速應用方法

小程式開發自定義表單無程式碼方法 即速應用方法

小程式開發自定義表單無程式碼方法 即速應用方法

小程式開發自定義表單無程式碼方法 即速應用方法

繫結完畢後,後臺所設定的必填項,在每個子元件的後面會有一個星的記號。

小程式開發自定義表單無程式碼方法 即速應用方法

接著,我們可以對其進行預覽一遍,填寫資料使用一次。

小程式開發自定義表單無程式碼方法 即速應用方法

若繫結無誤,你所填寫提交的資料,可以在這個app後臺的應用資料物件的資料管理裡面找到。

小程式開發自定義表單無程式碼方法 即速應用方法

在這裡就能看到別人所提交的資料了。

小程式開發自定義表單無程式碼方法 即速應用方法

注意事項

表單元件都需要再同一個元件庫裡面實現

元件拖動用滑鼠拖拽進去,別直接點元件,那樣元件會在不同的組庫裡面,會導致資料無法繫結的!

程式碼, 元件, 表單, 程式開發,
相關問題答案