0 foundation a literature club low code development member management applet (I)

1 Chapter one ： Home page and member registration function development

Abstract ： This article uses low code technology , Use drag and drop to quickly develop a member management system , Realize the online registration of members 、 Recharge 、 Consumption and other functions . Even Xiaobai without any development foundation , As long as you follow the steps in the tutorial, you can also master app Development method of , Into the field of software development .

In daily life , Stores usually need to manage members , Such as membership card opening 、 Store value 、 Consumption, etc . There are many kinds of member management systems on the Internet , But most of them are in the same category , There are many repetitive functions . Now the new low code technology , Zero threshold can also develop its own membership management system . This paper uses low code technology , Use drag and drop development techniques , Quickly create a member management system . The development steps are as follows ：

1 Create an

2 Define data sources

3 Create a page

4 Publish app

1.1 Step one Create an

Open the lower console , Create application of member management system

1.2 Step two Define data sources

After application creation , We need to plan the functions and design the library table structure . We need to develop a registration function first , It is mainly to input the basic information of members , The information we designed to collect included names 、 Gender 、 Age 、 Telephone 、 Contact address 、 mailbox 、 WeChat ID 、 Wechat nickname 、 Birthday and other information .

Create a new data source after the information is designed

Click Add field , Add the fields we need

1.3 Step three Create a page

After the data source is defined , We need to create a page . After application creation , A home page will be generated by default , We first develop the function of the home page . Click the Edit button to enter the edit page of the application .

1.3.1 Home page production

Switch to the components menu , Let's first add a grid layout component

General app There is a navigation page , The common functions are listed in the form of nine palaces , We added the grid layout to divide the page horizontally into several columns , This is good for adding content .

Then switch back to the outline view , Select slot

After the slot is selected, we switch back to the component view , Add a container component

Add a picture and text component to the container component

Now the picture is a little big , We select the picture component , Change the width and height

Change the text content of the text component to membership registration

The default container is left aligned , We changed it to center align , Set the style of the container

For the convenience of debugging , We copy the container components into the remaining three slots

The effect we want is to distribute the columns evenly , So you need to set the grid layout style

You also need to set the interval

The menu is next to the top , Set the top margin

The default picture is not very nice , We need to go from iconfont Download the icons we need

Then click the cloud icon of the image component to upload the material , Then click use picture

So we set up , In order to jump , We need to create a new page first , Switch to page management , Create a new page

After the page is created , We need to add click events to the container , Go to the registration page

1.3.2 Membership registration page making

First, add a navigation component to the page , It is convenient for users to return to the home page

After the navigation is set , Add a form container component

Then we add the components we need in the slots of the form container , First, add a form input component , Change to name

Then add a form radio component , Change to gender

Add form input component , Change to age

Add form mobile components , Change to mobile phone

Add form input component , Change to contact address

Add form email address component , Change to mailbox

Add form input component , Change to micro signal

Add form input component , Change to wechat nickname

Add form date component , Change to birthday

Add button components , Change the button to submit

Add a submit event to the form container component , Select the data source for meeting registration

1.4 Step four Publish app

Click the preview button on the navigation bar after the page is made , Let's actually test the function