目錄

1 前言

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

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

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

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

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

4 創(chuàng)建小程序

5 首頁開發(fā)

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

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

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

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

10 我的頁面開發(fā)

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

12 發(fā)布和預覽

1 前言

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

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

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

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

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

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

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

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

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

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

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

其余字段見下圖：

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

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

登錄微搭控制臺，點擊應用，點擊新建模型應用

輸入應用的名稱，點擊新建

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

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

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

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

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

4 創(chuàng)建小程序

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

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

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

5 首頁開發(fā)

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

修改導航設置屬性，將菜單調整成檢測點、受檢人、在線預約三個菜單

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

頁面添加后將宮格導航的菜單配置到對應頁面即可

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

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

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

然后將菜單項的跳轉修改為對應的頁面

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

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

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

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

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

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

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

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

一般我們的小程序用戶打開時其實已經是匿名登錄了，如果不登錄是不能去操作和訪問數(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ù)據(jù)，因此需要根據(jù)用戶當前的openid進行過濾

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

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

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

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

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

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

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

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

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

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

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

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

再次選人的時候就正確了

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

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

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

10 我的頁面開發(fā)

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

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

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

最終的設置結果

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

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

然后克隆四個組件

分別修改文本的內容為受檢人、檢驗結果、采樣時間、報告時間

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

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

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

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

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

設置可以訪問管理后臺應用

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

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

權限開通好之后將用戶添加好即可

12 發(fā)布和預覽

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