概述
日常我們作為個人賬戶開通騰訊雲微搭低碼功能后，可以有兩個應用的創建權限，那我們今天就充分利用這兩個資源，打造一款屬於自己的在線預約小程序。
小程序的功能分為兩部分，第一部分是預約功能，打開小程序可以登記預約的信息，登記完成之后可以進行提交。第二部分是查詢功能，可以通過按條件查詢到最新的預約信息。
通過本教程的學習，您可以收獲以下知識點：
- 全局變量的使用
- 低碼方法中查詢數據庫
- 頁面之間傳參
- 表單提交
低碼開發流程
微搭低碼開發分為幾個部分，創建應用、定義數據源、創建頁面、拖拽組件、定義組件樣式、實現業務邏輯等。
預約功能實現
創建應用
登錄騰訊雲微搭低碼平台，在應用管理菜單點擊【創建空白應用】按鈕，輸入應用標識：appointment，應用名稱：預約登記，點擊【確定】按鈕
創建數據源
點擊騰訊雲微搭低碼控制台左側導航欄的數據源管理欄目，點擊【新建數據源】按鈕，在下拉菜單中我們選擇自建數據源。
在彈出的頁面中輸入數據源名稱：預約登記，數據源標識：appointment，點擊【確定】按鈕
在打開的頁面點擊【編輯】按鈕，我們需要創建我們自己需要的字段
在打開的編輯頁面中，點擊【添加字段】按鈕
錄入字段名稱：輔導科目，字段標識：course，數據類型選擇為字符串，點擊【確定按鈕】
按照上述方法依次設置以下字段
- 字段名稱：學生年級，字段標識：grade，數據類型：字符串
- 字段名稱：聯系人姓名，字段標識：name，數據類型：字符串
- 字段名稱：手機號，字段標識：phone，數據類型：字符串
- 字段名稱：微信號，字段標識：microno，數據類型：字符串
- 字段名稱：地址，字段標識：address，數據類型：字符串
- 字段名稱：要求，字段標識：require，數據類型：字符串
設置好后如下圖，點擊【確定】按鈕完成數據源的創建
創建頁面
在應用管理中找到我們剛才創建的預約登記應用，點擊【編輯】按鈕打開應用
默認會給我們創建一個頁面，我們使用這個默認頁面即可
在左側切換到組件頁簽，我們開始設計頁面
打開表單組件列表，選擇【表單容器】組件
選中【表單容器】下邊的插槽，我們在插槽里增加一個【表單輸入】組件
將表單字段標題修改為輔導科目，表單字段名稱修改為course，打開是否必填的選項（注意：表單字段名稱需要和數據源設計的字段保持一致）
按照上述方法依次設置學生年級、聯系人姓名、手機號、微信號、地址、要求等信息
輸入信息設置好后，需要再增加一個【按鈕】組件
修改按鈕標題為提交，用於form組件為提交
選中【表單容器】組件，切換到事件頁簽
觸發條件為submit(提交)，動作類型選擇數據源，點擊【確定添加】按鈕
數據源名稱選擇預約登記，方法名為創建單條記錄
提交事件設置好后我們再增加一個提交成功的事件，觸發條件選擇dataSource成功，動作類型選擇平台方法，執行動作選擇showToast顯示消息提示
修改標題為提交成功
組件設置好后為了讓數據源和應用綁定，我們需要定義變量，在導航欄點擊【變量管理】
在打開的編輯器里展開我們的首頁，點擊狀態變量旁邊的+號
變量標識、變量名設置為appointment，變量類別選擇數據源，數據源選擇預約登記，數據類型選擇新紀錄，變量更新動作選擇創建單條記錄，設置好后點擊【提交】
發布
一切都設置好后點擊【預覽發布】按鈕
我們選擇本地預覽
構建成功后用手機掃描體驗，可以提交幾條數據
查詢功能實現
預約功能實現之后，我們就需要實現一下查詢的功能，總體的流程是可以輸入預約科目，點擊查詢按鈕查詢符合條件的記錄，我們用低代碼實現第二個需求。
創建應用
打開騰訊雲微搭低碼控制台，點擊導航欄的應用管理，點擊【創建空白應用】按鈕，輸入應用標識：query，應用名稱：查詢信息，點擊【確定】按鈕
創建頁面
點擊應用的編輯按鈕，進入到低代碼的編輯器，我們使用默認創建的首頁即可
我們的頁面總共有兩個功能，有一個課程類別的文本輸入框，然后輸入信息后可以點擊查詢按鈕，切換到【組件】頁簽，展開表單選項，點擊【表單輸入】組件
修改表單字段名稱為course，表單字段標題設置為輔導科目，布局方式選擇為水平
然后增加一個【按鈕】組件，按鈕標題設置為查詢
點擊查詢的話需要獲取文本輸入組件的值，然后傳遞到列表頁面做結果展示，所以我們需要先定義個全局變量，點擊導航欄的【變量管理】，在彈出的頁面點擊全局（global）下邊狀態變量旁邊的+號，變量標識和變量名都設置為queryparms，變量類別選擇無模型數據類型選擇array，初始值設置為
[
{
"_id": "28ee4e3e60483ef409d5d9845b6555f9",
"grade": "可可",
"_openid": "7cd9812204a74a5baf8866621e14fe11",
"address": "",
"course": "可可",
"createdAt": 1615347444375,
"updatedAt": 1615347444375,
"microno": "",
"name": "可可",
"phone": "可可",
"require": ""
}
]
設置好后點擊【提交】按鈕
接着我們需要定義查詢按鈕的低代碼方法getList，點擊導航欄的【低代碼編輯】，在打開的編輯器中找到index下邊的handle旁邊的+號，在彈出的窗口中輸入方法的名稱getList，點擊【保存】按鈕
輸入如下代碼
export default async function({event, data}) {
let course = $page.widgets.id1.value
if(course!=null && course!=''){
let result = await app.dataSources.appointment.getList({
course:course
})
app.dataset.state. queryparms = result.data
app.navigateTo({
pageId:'detail'
})
}else{
app.showToast({
title:'請填寫內容',
icon:'none'
})
}
}
代碼解析：
代碼的邏輯是先獲取文本框的值，然后判斷是否取到了，如果取到了就執行數據庫的查詢，然后把查詢結果賦值給全局變量，並進行頁面跳轉。如果沒取到值就彈出一個提示框要求填寫內容。
低代碼設置好后，我們需要在按鈕上增加點擊事件，選中【按鈕】組件，切換到事件頁簽，我們選擇tap點擊，然后選擇低代碼方法
事件定義好后我們增加詳情頁的頁面，點擊【創建新頁面】按鈕，輸入標題為詳情頁，頁面ID為detail，點擊【確定】按鈕
在新創建的頁面中增加一個列表元素組件
設置列表元素組件的循環展示for，點擊旁邊的超鏈接
在彈出的窗口選擇全局變量querparms，點擊【確定】按鈕
點擊標題旁邊的超鏈接
在彈出的窗口選擇for循環，選擇course
按照同樣的方法設置一下標題下描述
右側內容我們需要將數據庫的日期類型轉換一下顯示，設置成表達式
${new Date(forItems.id8.createdAt).getFullYear()}-${new
Date(forItems.id8.createdAt).getMonth()+1}-${new
Date(forItems.id8.createdAt).getDate()}
這樣詳情頁就設置好了
發布
點擊導航欄的預覽發布按鈕，我們選擇本地預覽
構建成功后用手機掃描體驗
