WeChat Cloud Development Study Notes (1)

Cloud development learning documents

1. Project initialization

1. After registering the small program, the test number is not used when
creating a new project, and the cloud development with id is used . 2. After the project is created, useless configuration items including cloud functions are deleted and only one index page is left

Insert picture description here


. 3. In the app. Delete the redundant page configuration in json, only leave the index, delete the public css, and other configurations do not need to be changed
4. Delete the html css js in the index and reconfigure the second option in the page when configuring js.

Insert picture description here


After the js configuration is successful, the effect is as follows:

Insert picture description here

Second, use the cloud console to control the database

Insert picture description here


You can create table data. Click to add record:

Insert picture description here


Insert picture description here

A total of seven data types:

Insert picture description here
Insert picture description here

Three, display the contents of the database on the page

Access control:

Insert picture description here


It is best to change to the following option: to facilitate subsequent development: the

Insert picture description here


following is to learn about the addition, deletion, and modification of the database: the
official learning document
mainly has the following learning steps:

Insert picture description here


1. Initialize the database:

const db = wx.cloud.database()
Insert picture description here


2. Call the function to link to the database:

Insert picture description here


3. Query the data. At this time, the doc data is queried

Insert picture description here


html page rendering:

Insert picture description here


If you want to render multiple pieces of data, you can remove the data table selected by doc:
that's it:
get all the data directly and then loop:

Insert picture description here


page rendering data: wx "for" rendering:

Insert picture description here

You can only put fields in the doc, not other things.
Where gets an array. Knowing one of the values, you can put it back into an entire array.

Fourth, insert data into the database

Two methods:

Insert picture description here


Promise method:

Insert picture description here


Insert picture description here


Check the increase success in the database:

Insert picture description here

The point to note is that the content will be added once by clicking once. Now this point will not be solved. I will do it later and write it back
. Print it in the console to see if it is successful:

Insert picture description here


Successful printing:

Insert picture description here


Solve the problem of clicking once to load. Questions that will not be repeated later.
1. Add wx.loading: to the addData function and click as shown in the figure

Insert picture description here


2. Add wx.hideLoding at the end:
it will automatically disappear after loading:

Insert picture description here

Five, submit the form to add to the database

Use form to
define structure and style:

Insert picture description here


write behavior in js:

Insert picture description here


write here first. Go to the back test