1概述

• 全局變量的使用

• 低碼方法中查詢(xún)數據庫

• 頁(yè)面之間傳參

• 表單提交

2低碼開(kāi)發(fā)流程

3預約功能實(shí)現

3.1創(chuàng )建應用

3.2創(chuàng )建數據源

在打開(kāi)的頁(yè)面點(diǎn)擊【編輯】按鈕，我們需要創(chuàng )建我們自己需要的字段

在打開(kāi)的編輯頁(yè)面中，點(diǎn)擊【添加字段】按鈕

錄入字段名稱(chēng)：輔導科目，字段標識：course，數據類(lèi)型選擇為字符串，點(diǎn)擊【確定按鈕】

按照上述方法依次設置以下字段

• 字段名稱(chēng)：學(xué)生年級，字段標識：grade，數據類(lèi)型：字符串

• 字段名稱(chēng)：聯(lián)系人姓名，字段標識：name，數據類(lèi)型：字符串

• 字段名稱(chēng)：手機號，字段標識：phone，數據類(lèi)型：字符串

• 字段名稱(chēng)：微信號，字段標識：microno，數據類(lèi)型：字符串

• 字段名稱(chēng)：地址，字段標識：address，數據類(lèi)型：字符串

• 字段名稱(chēng)：要求，字段標識：require，數據類(lèi)型：字符串

設置好后如下圖，點(diǎn)擊【確定】按鈕完成數據源的創(chuàng )建

3.3創(chuàng )建頁(yè)面

在應用管理中找到我們剛才創(chuàng )建的預約登記應用，點(diǎn)擊【編輯】按鈕打開(kāi)應用

默認會(huì )給我們創(chuàng )建一個(gè)頁(yè)面，我們使用這個(gè)默認頁(yè)面即可

在左側切換到組件頁(yè)簽，我們開(kāi)始設計頁(yè)面

打開(kāi)表單組件列表，選擇【表單容器】組件

選中【表單容器】下邊的插槽，我們在插槽里增加一個(gè)【表單輸入】組件

按照上述方法依次設置學(xué)生年級、聯(lián)系人姓名、手機號、微信號、地址、要求等信息

輸入信息設置好后，需要再增加一個(gè)【按鈕】組件

修改按鈕標題為提交，用于form組件為提交

選中【表單容器】組件，切換到事件頁(yè)簽

觸發(fā)條件為submit(提交)，動(dòng)作類(lèi)型選擇數據源，點(diǎn)擊【確定添加】按鈕

數據源名稱(chēng)選擇預約登記，方法名為創(chuàng )建單條記錄

修改標題為提交成功

組件設置好后為了讓數據源和應用綁定，我們需要定義變量，在導航欄點(diǎn)擊【變量管理】

在打開(kāi)的編輯器里展開(kāi)我們的首頁(yè)，點(diǎn)擊狀態(tài)變量旁邊的+號

3.4發(fā)布

一切都設置好后點(diǎn)擊【預覽發(fā)布】按鈕

我們選擇本地預覽

構建成功后用手機掃描體驗，可以提交幾條數據

4查詢(xún)功能實(shí)現

4.1創(chuàng )建應用

4.2創(chuàng )建頁(yè)面

點(diǎn)擊應用的編輯按鈕，進(jìn)入到低代碼的編輯器，我們使用默認創(chuàng )建的首頁(yè)即可

修改表單字段名稱(chēng)為course，表單字段標題設置為輔導科目，布局方式選擇為水平

然后增加一個(gè)【按鈕】組件，按鈕標題設置為查詢(xún)

[
  {
    "_id": "28ee4e3e60483ef409d5d9845b6555f9",
    "grade": "可可",
    "_openid": "7cd9812204a74a5baf8866621e14fe11",
    "address": "",
    "course": "可可",
    "createdAt": 1615347444375,
    "updatedAt": 1615347444375,
    "microno": "",
    "name": "可可",
    "phone": "可可",
    "require": ""
  }
]

設置好后點(diǎn)擊【提交】按鈕

輸入如下代碼

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:'請填寫(xiě)內容',
            icon:'none'
        })
    }
}

代碼解析：

事件定義好后我們增加詳情頁(yè)的頁(yè)面，點(diǎn)擊【創(chuàng )建新頁(yè)面】按鈕，輸入標題為詳情頁(yè)，頁(yè)面ID為detail，點(diǎn)擊【確定】按鈕

在新創(chuàng )建的頁(yè)面中增加一個(gè)列表元素組件

設置列表元素組件的循環(huán)展示for，點(diǎn)擊旁邊的超鏈接

在彈出的窗口選擇全局變量querparms，點(diǎn)擊【確定】按鈕

點(diǎn)擊標題旁邊的超鏈接

在彈出的窗口選擇for循環(huán)，選擇course

按照同樣的方法設置一下標題下描述

右側內容我們需要將數據庫的日期類(lèi)型轉換一下顯示，設置成表達式

`${new Date(forItems.id8.createdAt).getFullYear()}-${new Date(forItems.id8.createdAt).getMonth()+1}-${new Date(forItems.id8.createdAt).getDate()}`

這樣詳情頁(yè)就設置好了

4.3發(fā)布

點(diǎn)擊導航欄的預覽發(fā)布按鈕，我們選擇本地預覽

構建成功后用手機掃描體驗