In the e-commerce applet, we usually give users a shopping cart function, which can add products to the shopping cart independently. Because the purchased item has a unit price and quantity, we need to calculate a subtotal.
The rule is subtotal = unit price * quantity
After calculating the subtotal, you need to sum up the subtotal amount of the purchased goods to calculate the total price.
To implement the shopping cart function, we have considered two options, one is to add the product to the applet cache, and then operate through the cache. Another solution is to establish a data source and add it to the data source to calculate the result each time the user selects a product.
A fan according to the column e-commerce applet
Encountered many problems during development, the following is our communication process and the process of problem location
Take some time to help me to see if the amount of summation is set to 0
to see if there is a typo in the code,
please give me some guidance, thank you
What we need to pay attention to in the fields here is that there needs to be an openid field first, which is a data permission field, which is used to identify who the data belongs to
The other is the subtotal field of commodities, and the calculation formula is selected as the type. The calculation formula will be automatically calculated according to your own algorithm
What expression do you use?
In the course, we talked about the need to calculate the total amount of the shopping cart through the API, and then use the variable to call the calculation result of the API, and bind the result to the component for display
Now the performance of the problem is that the total amount is 0, and I don't know what went wrong. The biggest obstacle encountered by general beginners is that they don't know how to debug the program. If they find that the expected effect is not obtained, they feel that they have no way to start.
General debugging is divided into back-end debugging and front-end debugging. First of all, it is necessary to judge whether the back-end returns the result normally, so I asked him to test through the API method to see if the normal result can be returned.
The returned result is 0. From the screenshot, the first is to submit the parameters, and the correct parameters are not given.
{
"openid":"这里是示例"
}
The value of the default parameter is an example here. When you are doing the test, you need to pass in the actual value. The default value will definitely not be able to find the data.
The other is to check the code to see if the parameters are passed in correctly
When we construct the input parameters, the left side is the parameter name, and the right side is the parameter value, which must conform to the syntax of the json object format
A query condition is constructed here, which literally means openid= the actual value
There is a syntax here called string literal value, which is usually wrapped in double quotes to form a string literal value, then your actual query effect becomes
openid = params.openid will definitely not be able to find out the content. In fact, we need to use the input parameter value as the query condition, so change the code to
{
"key":"openid",
"rel":"eq",
"val":params.openid
}
After changing it, it is found that the value still cannot be returned. At this time, you need to check your data. There are
two lines of product unit price here. We didn't do a good job of checking, so dirty data was stored in the database.
In actual projects, you can't think that users will enter data according to the established rules, either by negligence or intentional entry, so field type verification is necessary.
Another problem is that several pieces of data in openid are empty. This situation usually occurs when you enter through the PC. Because the openid cannot be obtained in the H5 environment, you need to publish the program as a small program for testing
After modifying the code and passing the parameters correctly, the API can return normally
After the backend returns correctly and finds that the amount is still 0, then we need to check the frontend. We obtain the API through the variable definition, then open the development and debugging tool, enter the path of the variable, and see if the page returns the data normally
If the variable does not return, it means that your parameters have not been passed in correctly, and the value cannot be obtained. We can change it and adjust it through the API in the lifecycle function. The code structure is
const result = await app.cloud.callConnector(
{
name:'API标识',
methodName:'方法标识',
params:{
openid:app.auth.currentUser.openId
}
}
)
console.log(result)
After publishing as a small program, open the debugging tool of the small program and observe the results in the window
In daily development, we must be proficient in the methods of back-end debugging, front-end debugging and small program debugging, so that when the program has problems, you can know how to solve them.