目錄

1 前言

2 數(shù)據(jù)源設(shè)計

2.1 檢測點數(shù)據(jù)源

2.2 受檢人數(shù)據(jù)源

2.3 核酸預(yù)約數(shù)據(jù)源

3 創(chuàng)建模型應(yīng)用

4 創(chuàng)建小程序

5 首頁開發(fā)

6 檢測點頁面開發(fā)

7 受檢人列表頁面開發(fā)

8 受檢人新增頁面開發(fā)

9 核酸預(yù)約頁面開發(fā)

10 我的頁面開發(fā)

11 創(chuàng)建用戶及授權(quán)

12 發(fā)布和預(yù)覽

1 前言

隨著疫情進入常態(tài)化防控，為了讓市民便捷的進行核酸檢測，好些城市都出現(xiàn)了核酸檢測點。居民可以去離自己最近的核酸檢測點，進行掃碼登記。核酸做完之后還可以在小程序直接獲取報告，非常方便。

我們本次教程就以這個實際生活場景為例，結(jié)合微搭低代碼工具來制作一款核酸檢測小程序。小程序一共分為在線預(yù)約和我的預(yù)約兩個版塊。在線預(yù)約可以增加受檢人，選擇預(yù)約地點，預(yù)約日期。我的預(yù)約可以查看自己已經(jīng)生成的報告。

2 數(shù)據(jù)源設(shè)計

我們一共設(shè)計三個數(shù)據(jù)源，分別是檢測點數(shù)據(jù)源、受檢人數(shù)據(jù)源和預(yù)約數(shù)據(jù)源

2.1 檢測點數(shù)據(jù)源

2.2 受檢人數(shù)據(jù)源

這里證件類型需要自己創(chuàng)建一個選項集，選項的類型如下

同樣的性別也需要創(chuàng)建一個選項集，選項類型如下：

2.3 核酸預(yù)約數(shù)據(jù)源

檢測地點我們需要做成關(guān)聯(lián)關(guān)系，以便可以直接選擇地點

受檢人我們也需要做成關(guān)聯(lián)關(guān)系，可以直接選擇人員

其余字段見下圖：

3 創(chuàng)建模型應(yīng)用

因為需要上傳報告，所以我們需要為核酸檢測機構(gòu)創(chuàng)建一個PC端的管理應(yīng)用。微搭是通過創(chuàng)建模型應(yīng)用來自動生成。

登錄微搭控制臺，點擊應(yīng)用，點擊新建模型應(yīng)用

輸入應(yīng)用的名稱，點擊新建

勾選我們剛剛創(chuàng)建的數(shù)據(jù)源，完成模型應(yīng)用的創(chuàng)建

平臺會自動生成增刪改查的頁面

點擊發(fā)布按鈕，會自動進行配置檢查，凡是提示的問題都要針對性的進行解決

應(yīng)用發(fā)布成功后可以點擊鏈接進入企業(yè)工作臺查看具體的內(nèi)容

核酸檢測機構(gòu)一般需要提前將機構(gòu)的信息錄入方便用戶進行查看

4 創(chuàng)建小程序

模型應(yīng)用創(chuàng)建好之后，接著需要創(chuàng)建小程序，點擊應(yīng)用，點擊新建自定義應(yīng)用

輸入應(yīng)用的名稱，選擇小程序完成創(chuàng)建

過程中還需要再點擊一下創(chuàng)建空白頁

5 首頁開發(fā)

我們首頁提供一個宮格導(dǎo)航來引導(dǎo)功能，先將宮格導(dǎo)航組件添加到頁面里

修改導(dǎo)航設(shè)置屬性，將菜單調(diào)整成檢測點、受檢人、在線預(yù)約三個菜單

點擊圖標需要進行頁面跳轉(zhuǎn)，我們需要新建三個頁面，點擊左上角的頁面旁邊的 號，輸入頁面名稱進行添加。分別添加檢測點、受檢人、在線預(yù)約頁面

頁面添加后將宮格導(dǎo)航的菜單配置到對應(yīng)頁面即可

除了頂部導(dǎo)航外，我們還需添加一個底部導(dǎo)航，用來切換首頁和我的頁面。添加一個tab欄組件

將tab欄組件的布局模式改成文字模式，標簽列表更改為首頁和我的，選中頁面設(shè)置成首頁

按照前述創(chuàng)建頁面的方法再創(chuàng)建一個我的頁面

然后將菜單項的跳轉(zhuǎn)修改為對應(yīng)的頁面

6 檢測點頁面開發(fā)

往檢測點頁面添加一個數(shù)據(jù)列表組件

修改數(shù)據(jù)模型為檢測點

選中簡單列表標題，將文本內(nèi)容綁定為檢測點名稱

選中這是簡單列表內(nèi)容，將字段綁定為詳細地址

7 受檢人列表頁面開發(fā)

檢測點頁面我們只需要展示信息就可以，數(shù)據(jù)是在PC端錄入的。受檢人信息需要用戶自己錄入。那錄數(shù)據(jù)的時候就需要標識是誰錄入的數(shù)據(jù)，這個標識在小程序里就是openid。

如果是新手可能涉及到權(quán)限的一上來就要自己實現(xiàn)，比如要求用戶輸入用戶名和密碼進行登錄。這一般是因為思維定勢導(dǎo)致的，你用傳統(tǒng)開發(fā)思維去套用互聯(lián)網(wǎng)應(yīng)用難免會走彎路。

一般我們的小程序用戶打開時其實已經(jīng)是匿名登錄了，如果不登錄是不能去操作和訪問數(shù)據(jù)庫的。那就需要在小程序一打開的時候就獲取登錄信息，也就是拿到用戶的openid。

要怎么做呢？一般是在全局生命周期的啟動方法里取獲取。點擊左上角的六個點，點擊低代碼編輯器

在打開的界面點擊lifecycle就可以編寫獲取openid的代碼

獲取到openid如果需要其他頁面使用的，我們需要將值放到全局變量里存儲，為此我們先需要在變量里創(chuàng)建一個全局變量，openid

在低碼編輯器的lifecycle里輸入如下代碼進行獲取用戶的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我們就可以進行頁面功能開發(fā)了，先添加一個數(shù)據(jù)列表組件，數(shù)據(jù)模型選擇受檢人

我們檢測點的數(shù)據(jù)是對所有人開放的，所以不需要設(shè)置篩選條件。受檢人我們希望用戶只可以查詢到自己添加的數(shù)據(jù)，因此需要根據(jù)用戶當(dāng)前的openid進行過濾

字段我們選擇openid，條件我們選擇等于，值的話選擇變量，從全局變量的openid取值。按照檢測點頁面的數(shù)據(jù)綁定方法，我們將受檢人的姓名及證件號碼分別綁定到對應(yīng)的字段上

除了列表查詢還需要有個新增受檢人信息的功能，可以往底部添加一個按鈕，設(shè)置樣式為固定，固定到底部就可以

先創(chuàng)建一個受檢人新增頁面，然后給按鈕添加點擊事件，跳轉(zhuǎn)到我們的新增頁面

8 受檢人新增頁面開發(fā)

新增頁面開發(fā)比較簡單，只需要添加表單容器，選擇受檢人數(shù)據(jù)源，平臺會自動生成頁面

用戶的openid我們已經(jīng)在全局變量里存好了，這里需要綁定到openid的輸入值，并且設(shè)置樣式為隱藏

9 核酸預(yù)約頁面開發(fā)

核酸預(yù)約新增頁面也是使用表單容器，數(shù)據(jù)源選擇核酸預(yù)約

Openid的設(shè)置方法和受檢人新增頁面相同

只對用戶開放檢測地點、受檢人、預(yù)約時間字段，其余都隱藏即可

遇到一個問題是，選擇檢測點的時候出現(xiàn)的是數(shù)據(jù)標識，我們需要顯示名稱才可以，我們需要修改一下檢測點數(shù)據(jù)源，將主列字段修改為檢測點名稱

按照同樣的方法，我們將受檢人也設(shè)置一下主列字段

再次選人的時候就正確了

還有一個問題是，我們的受檢人是所有人員，應(yīng)該是小程序用戶自己錄入的數(shù)據(jù)。需要根據(jù)當(dāng)前登錄用戶的openid過濾一下數(shù)據(jù)，我們選中受檢人下拉選擇組件，選擇選項篩選條件

添加一個篩選條件，讓字段的openid和全局變量的openid相等做篩選

這樣就可以確保用戶在預(yù)約的時候只可以看到自己錄入的數(shù)據(jù)

10 我的頁面開發(fā)

我的頁面功能是以列表的形式展現(xiàn)當(dāng)前用戶預(yù)約過的記錄的狀態(tài)及報告的情況。先創(chuàng)建一個模型變量，用來查詢當(dāng)前登錄人的報告數(shù)據(jù)。先輸入變量標識

數(shù)據(jù)源選擇核酸預(yù)約，方法選擇查詢列表

需要增加個篩選條件，我們還是讓字段的openid等于全局變量的openid

最終的設(shè)置結(jié)果

變量定義好之后我們就需要搭建組件，按照層級，我們先放置一個普通容器，普通容器里再增加一個普通容器，里邊再放置兩個文本組件

將第一個文本組件的文本內(nèi)容修改為狀態(tài)，選中內(nèi)層的普通容器，設(shè)置樣式為flex布局，兩端對齊

然后克隆四個組件

分別修改文本的內(nèi)容為受檢人、檢驗結(jié)果、采樣時間、報告時間

在最外層的普通容器，我們綁定循環(huán)展示，綁定我們剛剛定義好的變量

循環(huán)綁定好之后，我們就可以給右側(cè)的文本依次從循環(huán)變量里綁定字段就可以

11 創(chuàng)建用戶及授權(quán)

所有功能開發(fā)好之后，軟件需要交付給業(yè)務(wù)人員使用。需要給業(yè)務(wù)人員創(chuàng)建賬號，分配權(quán)限。點擊用戶，點擊新建用戶，添加用戶的信息

賬號添加好之后我們需要添加角色，來控制可以訪問哪些頁面

設(shè)置可以訪問管理后臺應(yīng)用

開通數(shù)據(jù)源訪問權(quán)限

開通訪問企業(yè)工作臺權(quán)限

權(quán)限開通好之后將用戶添加好即可

12 發(fā)布和預(yù)覽

PC端的應(yīng)用，微搭已經(jīng)配置了默認的域名，可以直接訪問。小程序需要發(fā)布，點擊導(dǎo)航條的發(fā)布按鈕，做正式發(fā)布即可