Cloud development completes simple applet

1. Interface display

First open the applet, there are three pages: homepage, log, my

First on my page, click the login button to log in, and the user’s WeChat avatar and WeChat nickname will be displayed

Next come to the home page, click the plus and minus button, the record page will generate a click log synchronously.

2. Cloud development initialization

(1) Create a new cloud development folder cloud

(2) Add code to the project.config.json file, and specify the cloud development file as the cloud folder we just created

(3) Go to the app.js file and replace the original code with the following code

After saving, the cloud development file behind here will specify the lc428 cloud development environment we created now, and there will be a cloud logo on the folder.

3. Login function

1. Add a login button in the pages/me/me.wxml file

2. Add the onGotUserInfo method and userInfo variable to the me.js file

Click the login button, the user's information will be printed out in the console, as follows

However, there is no openid field in the obtained information. Openid is the unique identifier of each WeChat account. WeChat nickname, avatar, and address may change, but openId will not change. We must implement the login function and identify customers. To get this openid field.

The openid field is sensitive information, we need to get it from the WeChat server, this will use our cloud function, create a cloud function in the cloud folder we created, right click-create a new Node.js cloud function, name it For login

You can see that he will create two files for us by default, index.js and package.json configuration files. The package.json file is generally not operated, and the main operation is the index.js file.

Open the index.js file and write some code for us by default. The first two lines of code are the SDK plug-in that must be included in each cloud function file, which is the http request processing plug-in, and then init initialization.

We delete the unnecessary code, you can see that the following has helped us get the openid, we delete the others, leaving only the openid. Finally, the code in the login/index.js file is as follows

After the cloud function is modified, be sure to right-click the cloud function, select Create and Deploy (or Upload and Deploy), and a pop-up window showing successful deployment will appear, and the modification will take effect.

3. Next to the pages/me/me.js file, call the cloud function, or use wx.cloud.callFunction in the onGotUserInfo method to call the login cloud function

In this way, the user information and openid are obtained

Next, we will display the obtained user information and hide the login button

Then come to the me.wxss file to add a style

The page display after login is as follows:

4. Keep the user logged in

Now every time you refresh, the obtained user information is gone. If we want to keep the user logged in, we need to obtain the user information and save the user information to the cache, so that after refreshing the page, we directly check whether there is any in the cache. User information can determine whether you have logged in, instead of requesting the backend to retrieve user information again and again

Go to the me.js file, modify the onGotUserInfo method, and add code to success

Then add the onLoad applet life cycle function to get the user information in the cache, which is triggered when the page loads. A page will only be called once

In this way, we refresh the page and the user information will be automatically obtained, and there is no need to log in repeatedly

4. Insertion and query of cloud database

1. Improve the style of the
home page The home page is mainly to create two buttons, and display the current addition and subtraction values, clear the code in the pages/index/index.wxml file, and add +1 and -1 buttons

Then, clear the code of the pages/index/index.wxss file and paste the following code

Now save the file to see the effect

2. Click the plus and minus button on the homepage to print the plus and minus information in the console

Add data-add=“1” bindtap=“addLog” method above the two buttons in the pages/index/index.wxml file

The parameters need to be written in the previous data-add, where add is defined by ourselves, and it can be replaced by other words

Then go to the pages/index/index.js file, clear the original code, and create the addLog method

Now click the plus and minus button, the number of add can be printed in the console, and then we will insert this data into the database

3. Add addition and subtraction record data to the database

Click the cloud development button above in the WeChat developer tool to come to the cloud development backend, you need to create a database collection logs

After the collection is created, click Permission Settings to change the permission of the data record to be readable by all users, and only the creator can read and write

Then come to the cloud cloud development file to create a cloud function createlog, in the cloud/createlog/index.js file, realize the function of inserting a record into the logs data table

After modifying the cloud function createlog, don’t forget to deploy the function, right-click the cloud function, select upload and deploy: cloud installation dependency option

Next, edit the addlog method of the pages/index/index.js file, call the cloud function createlog, and pass the three parameters add, date, and openid

Let’s test it. Click the plus and minus button on the homepage, and the data will be inserted into the database.

In this way, the home page function is complete. Next, we will read the inserted data and display it in the logs page.

5. Reading of cloud database

Mainly edit the pages/logs folder.
First, create a cloud function getlogs, and add code to the cloud/getlogs/index.js file

Then go to the pages/logs/logs.js file to create the getlogs method, call the getlogs cloud function, and pass the openid parameter to the cloud function

Through the onShow lifecycle function, call the getlogs method
so that every time you switch to the log page, the getlogs method will be called.
After you click the plus or minus button on the homepage, switch to the log page, and the new log records will be automatically updated to improve user experience

Finally, come to the pages/logs/logs.wxml file to add code to traverse to display log data

Add styles to the pages/logslogs.wxss file

Finally, look at the effect of the record page