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

1 Chapter 6 ： Member query function development

This practical tutorial uses Tencent cloud micro to build low code , Quickly build a small program for member management , It is convenient for businesses to manage members through small programs . The function is divided into member information registration 、 Recharge 、 consumption 、 Invoice and member query function . The contents of historical articles are as follows ：

1、 Home page and member registration function

2、 Member recharge function

3、 Member recharge record function

4、 Member consumption function

5、 Invoice management function

In this article, we continue our development , After the home page function is developed, we can add a member query function in the bottom navigation bar , It is convenient for merchants to query member information , Browse the history of recharge and consumption . The development process continues our previous

Define data sources

Define page

Development function

Preview release

1.1 Define data sources

Because we are developing the query function , So there is no need to add a new data source , Just use our member registration data source

1.2 Define page

We need two pages , One is the list page of members , One is the member details page , Let's create them in the page management .

1.3 Development function

We choose the home page , Then add one inside tab Column component

We need to download the icons on the navigation bar first , Each icon is divided into checked and unchecked states , We distinguish by color

Then we upload the icon to resource management , And set it in the component

Then we download the second icon , members , Set in the same way

What we need to pay attention to here is that the navigation component will route by itself , We choose redirection as the routing method

Then set our selected value to the home page

Of the first menu name Set to index

Of the second menu name Set to memberlist

The values we set here are and page ID One to one correspondence

Generally, the first level navigation menus can be switched to each other , We also add a navigation component to the member list page , Let the two pages switch to each other

After the navigation bar is completed , We need to develop the member list function , First add a list container component

Then add a list element component to the list container component

After the component is added, we need to add a state variable , We get a collection of members from a data source

And then show it in the loop of the list element component for Bind the variable

We bind the title to the member's name

The content on the right is bound to the mobile number of the member

Add a click event , Go to the details page , A low code method is defined here

export default function({event, data}) {

app.navigateTo({

pageId: 'memberdetail', // page Id

params: {memberid: data.target},

});

}

In this way, the list page will be developed . Then we develop the details page , On the details page, let's define variables first , Based on the incoming id To get member information , First, add a parameter variable

Then define a variable to get member details

After the variable is defined , We just need to bind variables to the components of the page

1.4 Preview release

After the development , Click preview to view the effect in real time

1.5 summary

Through six chapters , We introduced the development process of a membership management applet , In general, it is very simple to use low code development , Basically, drag and drop the page , Define the table structure in the data source and add the business logic in the background . In fact, it is consistent with the traditional development process , But the biggest advantage over traditional development is drag and drop development , Secondly, the launch is a one-off process , It doesn't feel very difficult .

And the biggest benefit is the release H5 Exemption from filing , No operation and maintenance , You can use it directly , If you think you're good at it , Now register an account to start your development journey .