核酸檢測小程序教程(核酸檢測小程序教程視頻)
目錄
1 前言
2 數(shù)據(jù)源設(shè)計(jì)
2.1 檢測點(diǎn)數(shù)據(jù)源
2.2 受檢人數(shù)據(jù)源
2.3 核酸預(yù)約數(shù)據(jù)源
3 創(chuàng)建模型應(yīng)用
4 創(chuàng)建小程序
5 首頁開發(fā)
6 檢測點(diǎn)頁面開發(fā)
7 受檢人列表頁面開發(fā)
8 受檢人新增頁面開發(fā)
9 核酸預(yù)約頁面開發(fā)
10 我的頁面開發(fā)
11 創(chuàng)建用戶及授權(quán)
12 發(fā)布和預(yù)覽
1 前言
隨著疫情進(jìn)入常態(tài)化防控,為了讓市民便捷的進(jìn)行核酸檢測,好些城市都出現(xiàn)了核酸檢測點(diǎn)。居民可以去離自己最近的核酸檢測點(diǎn),進(jìn)行掃碼登記。核酸做完之后還可以在小程序直接獲取報(bào)告,非常方便。
我們本次教程就以這個(gè)實(shí)際生活場景為例,結(jié)合微搭低代碼工具來制作一款核酸檢測小程序。小程序一共分為在線預(yù)約和我的預(yù)約兩個(gè)版塊。在線預(yù)約可以增加受檢人,選擇預(yù)約地點(diǎn),預(yù)約日期。我的預(yù)約可以查看自己已經(jīng)生成的報(bào)告。
2 數(shù)據(jù)源設(shè)計(jì)
我們一共設(shè)計(jì)三個(gè)數(shù)據(jù)源,分別是檢測點(diǎn)數(shù)據(jù)源、受檢人數(shù)據(jù)源和預(yù)約數(shù)據(jù)源
2.1 檢測點(diǎn)數(shù)據(jù)源
2.2 受檢人數(shù)據(jù)源
這里證件類型需要自己創(chuàng)建一個(gè)選項(xiàng)集,選項(xiàng)的類型如下
同樣的性別也需要?jiǎng)?chuàng)建一個(gè)選項(xiàng)集,選項(xiàng)類型如下:
2.3 核酸預(yù)約數(shù)據(jù)源
檢測地點(diǎn)我們需要做成關(guān)聯(lián)關(guān)系,以便可以直接選擇地點(diǎn)
受檢人我們也需要做成關(guān)聯(lián)關(guān)系,可以直接選擇人員
其余字段見下圖:
3 創(chuàng)建模型應(yīng)用
因?yàn)樾枰蟼鲌?bào)告,所以我們需要為核酸檢測機(jī)構(gòu)創(chuàng)建一個(gè)PC端的管理應(yīng)用。微搭是通過創(chuàng)建模型應(yīng)用來自動(dòng)生成。
登錄微搭控制臺(tái),點(diǎn)擊應(yīng)用,點(diǎn)擊新建模型應(yīng)用
輸入應(yīng)用的名稱,點(diǎn)擊新建
勾選我們剛剛創(chuàng)建的數(shù)據(jù)源,完成模型應(yīng)用的創(chuàng)建
平臺(tái)會(huì)自動(dòng)生成增刪改查的頁面
點(diǎn)擊發(fā)布按鈕,會(huì)自動(dòng)進(jìn)行配置檢查,凡是提示的問題都要針對(duì)性的進(jìn)行解決
應(yīng)用發(fā)布成功后可以點(diǎn)擊鏈接進(jìn)入企業(yè)工作臺(tái)查看具體的內(nèi)容
核酸檢測機(jī)構(gòu)一般需要提前將機(jī)構(gòu)的信息錄入方便用戶進(jìn)行查看
4 創(chuàng)建小程序
模型應(yīng)用創(chuàng)建好之后,接著需要?jiǎng)?chuàng)建小程序,點(diǎn)擊應(yīng)用,點(diǎn)擊新建自定義應(yīng)用
輸入應(yīng)用的名稱,選擇小程序完成創(chuàng)建
過程中還需要再點(diǎn)擊一下創(chuàng)建空白頁
5 首頁開發(fā)
我們首頁提供一個(gè)宮格導(dǎo)航來引導(dǎo)功能,先將宮格導(dǎo)航組件添加到頁面里
修改導(dǎo)航設(shè)置屬性,將菜單調(diào)整成檢測點(diǎn)、受檢人、在線預(yù)約三個(gè)菜單
點(diǎn)擊圖標(biāo)需要進(jìn)行頁面跳轉(zhuǎn),我們需要新建三個(gè)頁面,點(diǎn)擊左上角的頁面旁邊的 號(hào),輸入頁面名稱進(jìn)行添加。分別添加檢測點(diǎn)、受檢人、在線預(yù)約頁面
頁面添加后將宮格導(dǎo)航的菜單配置到對(duì)應(yīng)頁面即可
除了頂部導(dǎo)航外,我們還需添加一個(gè)底部導(dǎo)航,用來切換首頁和我的頁面。添加一個(gè)tab欄組件
將tab欄組件的布局模式改成文字模式,標(biāo)簽列表更改為首頁和我的,選中頁面設(shè)置成首頁
按照前述創(chuàng)建頁面的方法再創(chuàng)建一個(gè)我的頁面
然后將菜單項(xiàng)的跳轉(zhuǎn)修改為對(duì)應(yīng)的頁面
6 檢測點(diǎn)頁面開發(fā)
往檢測點(diǎn)頁面添加一個(gè)數(shù)據(jù)列表組件
修改數(shù)據(jù)模型為檢測點(diǎn)
選中簡單列表標(biāo)題,將文本內(nèi)容綁定為檢測點(diǎn)名稱
選中這是簡單列表內(nèi)容,將字段綁定為詳細(xì)地址
7 受檢人列表頁面開發(fā)
檢測點(diǎn)頁面我們只需要展示信息就可以,數(shù)據(jù)是在PC端錄入的。受檢人信息需要用戶自己錄入。那錄數(shù)據(jù)的時(shí)候就需要標(biāo)識(shí)是誰錄入的數(shù)據(jù),這個(gè)標(biāo)識(shí)在小程序里就是openid。
如果是新手可能涉及到權(quán)限的一上來就要自己實(shí)現(xiàn),比如要求用戶輸入用戶名和密碼進(jìn)行登錄。這一般是因?yàn)樗季S定勢導(dǎo)致的,你用傳統(tǒng)開發(fā)思維去套用互聯(lián)網(wǎng)應(yīng)用難免會(huì)走彎路。
一般我們的小程序用戶打開時(shí)其實(shí)已經(jīng)是匿名登錄了,如果不登錄是不能去操作和訪問數(shù)據(jù)庫的。那就需要在小程序一打開的時(shí)候就獲取登錄信息,也就是拿到用戶的openid。
要怎么做呢?一般是在全局生命周期的啟動(dòng)方法里取獲取。點(diǎn)擊左上角的六個(gè)點(diǎn),點(diǎn)擊低代碼編輯器
在打開的界面點(diǎn)擊lifecycle就可以編寫獲取openid的代碼
獲取到openid如果需要其他頁面使用的,我們需要將值放到全局變量里存儲(chǔ),為此我們先需要在變量里創(chuàng)建一個(gè)全局變量,openid
在低碼編輯器的lifecycle里輸入如下代碼進(jìn)行獲取用戶的openid
export default { async onAppLaunch(launchOpts) { //console.log('---------> LifeCycle onAppLaunch', launchOpts) const { OPENID, FROM_OPENID } = await app.utils.getWXContext() let userId = FROM_OPENID || OPENID if (!userId) { const { wedaId } = await app.cloud.getUserInfo() userId = wedaId } app.dataset.state.openid = userId console.log("openid",app.dataset.state.openid) }, onAppShow(appShowOpts) { //console.log('---------> LifeCycle onAppShow', appShowOpts) }, onAppHide() { //console.log('---------> LifeCycle onAppHide') }, onAppError(options) { //console.log('---------> LifeCycle onAppError', options) }, onAppPageNotFound(options) { //console.log('---------> LifeCycle onAppPageNotFound', options) }, onAppUnhandledRejection(options) { //console.log('---------> LifeCycle onAppUnhandledRejection', options) }}12345678910111213141516171819202122232425262728
獲取到用戶的openid我們就可以進(jìn)行頁面功能開發(fā)了,先添加一個(gè)數(shù)據(jù)列表組件,數(shù)據(jù)模型選擇受檢人
我們檢測點(diǎn)的數(shù)據(jù)是對(duì)所有人開放的,所以不需要設(shè)置篩選條件。受檢人我們希望用戶只可以查詢到自己添加的數(shù)據(jù),因此需要根據(jù)用戶當(dāng)前的openid進(jìn)行過濾
字段我們選擇openid,條件我們選擇等于,值的話選擇變量,從全局變量的openid取值。按照檢測點(diǎn)頁面的數(shù)據(jù)綁定方法,我們將受檢人的姓名及證件號(hào)碼分別綁定到對(duì)應(yīng)的字段上
除了列表查詢還需要有個(gè)新增受檢人信息的功能,可以往底部添加一個(gè)按鈕,設(shè)置樣式為固定,固定到底部就可以
先創(chuàng)建一個(gè)受檢人新增頁面,然后給按鈕添加點(diǎn)擊事件,跳轉(zhuǎn)到我們的新增頁面
8 受檢人新增頁面開發(fā)
新增頁面開發(fā)比較簡單,只需要添加表單容器,選擇受檢人數(shù)據(jù)源,平臺(tái)會(huì)自動(dòng)生成頁面
用戶的openid我們已經(jīng)在全局變量里存好了,這里需要綁定到openid的輸入值,并且設(shè)置樣式為隱藏
9 核酸預(yù)約頁面開發(fā)
核酸預(yù)約新增頁面也是使用表單容器,數(shù)據(jù)源選擇核酸預(yù)約
Openid的設(shè)置方法和受檢人新增頁面相同
只對(duì)用戶開放檢測地點(diǎn)、受檢人、預(yù)約時(shí)間字段,其余都隱藏即可
遇到一個(gè)問題是,選擇檢測點(diǎn)的時(shí)候出現(xiàn)的是數(shù)據(jù)標(biāo)識(shí),我們需要顯示名稱才可以,我們需要修改一下檢測點(diǎn)數(shù)據(jù)源,將主列字段修改為檢測點(diǎn)名稱
按照同樣的方法,我們將受檢人也設(shè)置一下主列字段
再次選人的時(shí)候就正確了
還有一個(gè)問題是,我們的受檢人是所有人員,應(yīng)該是小程序用戶自己錄入的數(shù)據(jù)。需要根據(jù)當(dāng)前登錄用戶的openid過濾一下數(shù)據(jù),我們選中受檢人下拉選擇組件,選擇選項(xiàng)篩選條件
添加一個(gè)篩選條件,讓字段的openid和全局變量的openid相等做篩選
這樣就可以確保用戶在預(yù)約的時(shí)候只可以看到自己錄入的數(shù)據(jù)
10 我的頁面開發(fā)
我的頁面功能是以列表的形式展現(xiàn)當(dāng)前用戶預(yù)約過的記錄的狀態(tài)及報(bào)告的情況。先創(chuàng)建一個(gè)模型變量,用來查詢當(dāng)前登錄人的報(bào)告數(shù)據(jù)。先輸入變量標(biāo)識(shí)
數(shù)據(jù)源選擇核酸預(yù)約,方法選擇查詢列表
需要增加個(gè)篩選條件,我們還是讓字段的openid等于全局變量的openid
最終的設(shè)置結(jié)果
變量定義好之后我們就需要搭建組件,按照層級(jí),我們先放置一個(gè)普通容器,普通容器里再增加一個(gè)普通容器,里邊再放置兩個(gè)文本組件
將第一個(gè)文本組件的文本內(nèi)容修改為狀態(tài),選中內(nèi)層的普通容器,設(shè)置樣式為flex布局,兩端對(duì)齊
然后克隆四個(gè)組件
分別修改文本的內(nèi)容為受檢人、檢驗(yàn)結(jié)果、采樣時(shí)間、報(bào)告時(shí)間
在最外層的普通容器,我們綁定循環(huán)展示,綁定我們剛剛定義好的變量
循環(huán)綁定好之后,我們就可以給右側(cè)的文本依次從循環(huán)變量里綁定字段就可以
11 創(chuàng)建用戶及授權(quán)
所有功能開發(fā)好之后,軟件需要交付給業(yè)務(wù)人員使用。需要給業(yè)務(wù)人員創(chuàng)建賬號(hào),分配權(quán)限。點(diǎn)擊用戶,點(diǎn)擊新建用戶,添加用戶的信息
賬號(hào)添加好之后我們需要添加角色,來控制可以訪問哪些頁面
設(shè)置可以訪問管理后臺(tái)應(yīng)用
開通數(shù)據(jù)源訪問權(quán)限
開通訪問企業(yè)工作臺(tái)權(quán)限
權(quán)限開通好之后將用戶添加好即可
12 發(fā)布和預(yù)覽
PC端的應(yīng)用,微搭已經(jīng)配置了默認(rèn)的域名,可以直接訪問。小程序需要發(fā)布,點(diǎn)擊導(dǎo)航條的發(fā)布按鈕,做正式發(fā)布即可