In the previous part, we introduced the requirement analysis and data source design of nucleic acid detection applet , In this article, we will introduce how to develop specific functions .

home page

On the homepage, we use buttons to guide users , Enter different pages to operate . First place an ordinary container

We need to make the container cover the whole page , You can set the width of the container to 100%, High for 100vh

Two buttons can be added to the container , The title of the Modify button is set as I am a student and I am a teacher

Now the button is on top , We can set a little outer margin to make the button come down a little

The function we want to achieve is to click the button to jump to the corresponding page , You need to set the click event for the button

Jump method set as platform method

Follow the same method to set the jump event corresponding to the I am a student button

Student navigation page

Select the student navigation page in the page list

You can add grid navigation components to the page

Modify the navigation title according to our requirements

Teacher navigation page

According to the function of student navigation , Set up the teacher navigation page

Class add

To make an appointment for registration, the head teacher needs to input the class information , We first add a data list component to display the entered class information

Choose our class data source , And bind the corresponding fields

Add a picture component to display the new icon

Set the width and height of the picture to 150

For pictures, choose from the material

In order to fix the picture in the lower right corner , We need to set the location of the picture , Change to fixed positioning

Define a click event for the button , Jump to new page

Place the form container on the new page , Select data source , The new page is ready

We enter the class for subsequent tests

Student information added

Form containers are also used for adding student information , Just set up the student data source

There is a problem that the class you belong to now displays the data ID , In order to correctly display , We need to set the main column field of the class table as the class name

After the modification, we will show the correct class selection

Appointment registration

When making an appointment, you need to choose a class first , Then cascade to select students , Now the students have some problems , Let's change it to relevance , Change the main column field of the student table to the student's name


To make cascading choices between classes and students , You need to define a variable first , Assign the selected value to the variable when switching classes

Define a onchange event , Call the platform setState Method

With this variable , We can filter the screening conditions of the reserved students according to the selected class


Because there is no component to automatically generate QR code , Let's register the information first . After registration, teachers can actively modify the data in the test results , Modify the test results .

summary

The way we use components in this article , A small program for appointment registration is developed in the form of zero code . With the improvement and enrichment of official components , It is no longer difficult to develop small programs in the future , Ordinary people can also quickly master , This is the biggest charm of low code .