开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 核酸检测小程序实战教程 -> 正文阅读

[移动开发]核酸检测小程序实战教程

1 前言

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

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

2 数据源设计

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

2.1 检测点数据源

在这里插入图片描述

2.2 受检人数据源

在这里插入图片描述

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

在这里插入图片描述

同样的性别也需要创建一个选项集，选项类型如下：
在这里插入图片描述

2.3 核酸预约数据源

检测地点我们需要做成关联关系，以便可以直接选择地点
在这里插入图片描述

受检人我们也需要做成关联关系，可以直接选择人员
在这里插入图片描述

其余字段见下图：
在这里插入图片描述

3 创建模型应用

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

登录微搭控制台，点击应用，点击新建模型应用
在这里插入图片描述

输入应用的名称，点击新建
在这里插入图片描述

勾选我们刚刚创建的数据源，完成模型应用的创建
在这里插入图片描述

平台会自动生成增删改查的页面
在这里插入图片描述

点击发布按钮，会自动进行配置检查，凡是提示的问题都要针对性的进行解决
在这里插入图片描述

应用发布成功后可以点击链接进入企业工作台查看具体的内容
在这里插入图片描述

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

4 创建小程序

模型应用创建好之后，接着需要创建小程序，点击应用，点击新建自定义应用
在这里插入图片描述

输入应用的名称，选择小程序完成创建
在这里插入图片描述

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

在这里插入图片描述

5 首页开发

我们首页提供一个宫格导航来引导功能，先将宫格导航组件添加到页面里
在这里插入图片描述

修改导航设置属性，将菜单调整成检测点、受检人、在线预约三个菜单
在这里插入图片描述

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

在这里插入图片描述

页面添加后将宫格导航的菜单配置到对应页面即可
在这里插入图片描述

除了顶部导航外，我们还需添加一个底部导航，用来切换首页和我的页面。添加一个tab栏组件
在这里插入图片描述

将tab栏组件的布局模式改成文字模式，标签列表更改为首页和我的，选中页面设置成首页
在这里插入图片描述

按照前述创建页面的方法再创建一个我的页面
在这里插入图片描述

然后将菜单项的跳转修改为对应的页面
在这里插入图片描述

6 检测点页面开发

往检测点页面添加一个数据列表组件
在这里插入图片描述

修改数据模型为检测点
在这里插入图片描述

选中简单列表标题，将文本内容绑定为检测点名称
在这里插入图片描述

选中这是简单列表内容，将字段绑定为详细地址
在这里插入图片描述

7 受检人列表页面开发

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

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

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

要怎么做呢？一般是在全局生命周期的启动方法里取获取。点击左上角的六个点，点击低代码编辑器
在这里插入图片描述

在打开的界面点击lifecycle就可以编写获取openid的代码
在这里插入图片描述

获取到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)
  }
}