Some problems and solutions encountered on the way to learn WeChat applets

css3

Box-sizing attributes:

https://www.w3cschool.cn/cssref/css3-pr-box-sizing.html

justify-content property

https://www.w3cschool.cn/cssref/css3-pr-justify-content.html

Flex layout:

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Why should es6 create a class with an empty constructormethod?

constructorThe method is the default method of the class, and the method is newautomatically called when the object instance is generated through the command.

A class must have constructormethods, if not explicitly defined, an empty constructormethod will be added by default.

http://es6.ruanyifeng.com/#docs/class

ES6 arrow function:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

The working principle of this in ES6:

1. In the global scope or ordinary function, this points to the global object window.
2. Who calls this in the method call to whom
3. In the constructor or constructor prototype object this points to the instance of the constructor

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this

https://bonsaiden.github.io/JavaScript-Garden/zh/#function.this

 

The applet removes the border of the button component

After removing the button background of the applet with plain='true', the CSS setting border: none Effective solution to the problem:

The small program button has a border by default. After opening the debugger and viewing the console, it is found that the CSS priority issue is related to the setting of plain="true"

It can be solved by increasing the css priority when setting the style:

The src path of the <image> component reports an error:

 Reason: When writing the API, the image url set in the background became localhost/zerg/public/images/banner_1.png.

Solution: Modify the image path returned from the background to http://localhost/zerg/public/images/banner_1.png