幼儿园核酸预约登记小程序实战开发(下篇)

我们上篇介绍了核酸检测小程序的需求分析及数据源设计,本篇我们介绍一下如何开发具体的功能。

首页

首页我们是通过按钮来进行引导用户,进入不同的页面进行操作。首先放置一个普通容器
幼儿园核酸预约登记小程序实战开发(下篇)_第1张图片
我们需要让容器铺满整个页面,可以设置容器的宽为100%,高为100vh
幼儿园核酸预约登记小程序实战开发(下篇)_第2张图片
容器里可以增加两个按钮,修改按钮的标题分别设置成我是学生和我是老师
幼儿园核酸预约登记小程序实战开发(下篇)_第3张图片
现在按钮顶到了最上边,我们可以设置一点外边距来让按钮下来一点
幼儿园核酸预约登记小程序实战开发(下篇)_第4张图片
我们要实现的功能是点击按钮就可以跳转到对应的页面,需要给按钮设置点击事件
幼儿园核酸预约登记小程序实战开发(下篇)_第5张图片
设置为平台方法的跳转方法
幼儿园核酸预约登记小程序实战开发(下篇)_第6张图片
按照同样的方法也将我是学生按钮设置对应的跳转事件
幼儿园核酸预约登记小程序实战开发(下篇)_第7张图片

学生导航页

在页面列表中选中学生导航页
幼儿园核酸预约登记小程序实战开发(下篇)_第8张图片
可以往页面中添加宫格导航组件
幼儿园核酸预约登记小程序实战开发(下篇)_第9张图片
按照我们的需求将导航的标题修改好
幼儿园核酸预约登记小程序实战开发(下篇)_第10张图片

教师导航页

按照学生导航的功能,设置教师导航页
幼儿园核酸预约登记小程序实战开发(下篇)_第11张图片

班级添加

预约登记先需要班主任将班级信息录入,我们先添加数据列表组件用来显示已经录入的班级信息
幼儿园核酸预约登记小程序实战开发(下篇)_第12张图片
选择我们的班级数据源,并且绑定好对应的字段
幼儿园核酸预约登记小程序实战开发(下篇)_第13张图片
添加一个图片组件用来显示新增的图标
幼儿园核酸预约登记小程序实战开发(下篇)_第14张图片
设置图片的宽和高各为150
幼儿园核酸预约登记小程序实战开发(下篇)_第15张图片
图片的话从素材里选择
幼儿园核酸预约登记小程序实战开发(下篇)_第16张图片
为了让图片固定在右下角,我们需要设置一下图片的定位,改为固定定位
幼儿园核酸预约登记小程序实战开发(下篇)_第17张图片
给按钮定义一个点击事件,跳转到新增页面
幼儿园核酸预约登记小程序实战开发(下篇)_第18张图片
在新增页面放置表单容器,选择数据源,新增页面就做好了
幼儿园核酸预约登记小程序实战开发(下篇)_第19张图片
我们录入班级方便后续测试
幼儿园核酸预约登记小程序实战开发(下篇)_第20张图片

学生信息添加

学生信息添加也使用表单容器,设置学生数据源即可
幼儿园核酸预约登记小程序实战开发(下篇)_第21张图片
有一个问题是现在所属班级显示的是数据标识,为了正确显示,我们需要将班级表的主列字段设置为班级名称
幼儿园核酸预约登记小程序实战开发(下篇)_第22张图片
修改之后我们在选择班级是就显示正确了
幼儿园核酸预约登记小程序实战开发(下篇)_第23张图片

预约登记

预约时候需要先选择班级,然后再级联选择学生,现在学生有点问题,我们改为关联关系,将学生表的主列字段改为学生的姓名
幼儿园核酸预约登记小程序实战开发(下篇)_第24张图片
幼儿园核酸预约登记小程序实战开发(下篇)_第25张图片
要想班级和学生做级联选择,需要先定义一个变量,在班级切换的时候将选中值赋值给变量
幼儿园核酸预约登记小程序实战开发(下篇)_第26张图片
给所属班级定义一个onchange事件,调用平台的setState方法
幼儿园核酸预约登记小程序实战开发(下篇)_第27张图片
有了这个变量,我们就可以将预约学生的筛选条件按照选中的班级进行过滤
幼儿园核酸预约登记小程序实战开发(下篇)_第28张图片
幼儿园核酸预约登记小程序实战开发(下篇)_第29张图片
因为现在还没有自动生成二维码的组件,我们就先将信息登记好。登记好之后教师就可以在检测结果里主动的修改数据,将检测结果进行修改就可以。

总结

我们本篇使用组件的方式,以零代码的形式开发了一个预约登记的小程序。随着官方组件的完善及丰富,日后开发小程序不再是一件难事,普通人也可以快速的掌握,这就是低码最大的魅力所在。

先自我介绍一下,小编13年上师交大毕业,曾经在小公司待过,去过华为OPPO等大厂,18年进入阿里,直到现在。深知大多数初中级java工程师,想要升技能,往往是需要自己摸索成长或是报班学习,但对于培训机构动则近万元的学费,着实压力不小。自己不成体系的自学效率很低又漫长,而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家,初衷也很简单,就是希望帮助到想自学又不知道该从何学起的朋友,同时减轻大家的负担。添加下方名片,即可获取全套学习资料哦

你可能感兴趣的:(面试,学习路线,阿里巴巴,android,前端,后端)