核酸检测小程序实战教程

全栈程序员-站长 • 2026年3月17日下午7:14 • 未分类 • 阅读 2

1 前言

随着疫情进入常态化防控，为了让市民便捷的进行核酸检测，好些城市都出现了核酸检测点。居民可以去离自己最近的核酸检测点，进行扫码登记。核酸做完之后还可以在小程序直接获取报告，非常方便。

我们本次教程就以这个实际生活场景为例，结合微搭低代码工具来制作一款核酸检测小程序。小程序一共分为在线预约和我的预约两个版块。在线预约可以增加受检人，选择预约地点，预约日期。我的预约可以查看自己已经生成的报告。

2 数据源设计

我们一共设计三个数据源，分别是检测点数据源、受检人数据源和预约数据源

2.1 检测点数据源

在这里插入图片描述

2.2 受检人数据源

在这里插入图片描述

这里证件类型需要自己创建一个选项集，选项的类型如下

在这里插入图片描述

2.3 核酸预约数据源

3 创建模型应用

因为需要上传报告，所以我们需要为核酸检测机构创建一个PC端的管理应用。微搭是通过创建模型应用来自动生成。

核酸检测机构一般需要提前将机构的信息录入方便用户进行查看

4 创建小程序

过程中还需要再点击一下创建空白页

在这里插入图片描述

5 首页开发

点击图标需要进行页面跳转，我们需要新建三个页面，点击左上角的页面旁边的+号，输入页面名称进行添加。分别添加检测点、受检人、在线预约页面

在这里插入图片描述

6 检测点页面开发

7 受检人列表页面开发

检测点页面我们只需要展示信息就可以，数据是在PC端录入的。受检人信息需要用户自己录入。那录数据的时候就需要标识是谁录入的数据，这个标识在小程序里就是openid。

如果是新手可能涉及到权限的一上来就要自己实现，比如要求用户输入用户名和密码进行登录。这一般是因为思维定势导致的，你用传统开发思维去套用互联网应用难免会走弯路。

一般我们的小程序用户打开时其实已经是匿名登录了，如果不登录是不能去操作和访问数据库的。那就需要在小程序一打开的时候就获取登录信息，也就是拿到用户的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) } }

8 受检人新增页面开发

用户的openid我们已经在全局变量里存好了，这里需要绑定到openid的输入值，并且设置样式为隐藏

在这里插入图片描述

9 核酸预约页面开发

这样就可以确保用户在预约的时候只可以看到自己录入的数据

10 我的页面开发

11 创建用户及授权

权限开通好之后将用户添加好即可

12 发布和预览

PC端的应用，微搭已经配置了默认的域名，可以直接访问。小程序需要发布，点击导航条的发布按钮，做正式发布即可

在这里插入图片描述

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/220966.html原文链接：https://javaforall.net

核酸检测小程序实战教程

目录

1 前言