WeChat applet development-a few common tips

Insert picture description here

When using the swiper carousel component, if theSlot (swiper-item)There is a fixed height style, thenWrapped outside (swiper) Must be greater than or equal to the height A of the style inside (don't ask why you don't believe you try, don't write this, there is a problem with the certificate display ...)

The image tag of the applet must be given in the styleWidth Height, Otherwise the picture display will be displayed according to the original picture size, wrapped outsideviewThe label will not work (when you are still a div box layout ...)

Custom components are generally namedindexAll the files at the beginning (js / json / wxml / wxss), the json file in the directory of the wxml file to be used, can be used by giving him a custom tag name when introducing. . . (Normally I do this ... ok)
Custom components cannot be defined using ordinary style classes (adding class styles to components), generally do not take effect, and can only use external style classes (general third-party components have external style classes)
I personally think that the principle of component design should be based on stability and ease of use, and find a balance point (style, skeleton, logic, behavior) among them. Components with high usability are usually very troublesome to implement internally , The stability will not be too high, so find a balance point to design

.container{
	display: flex;
	flex-diretion: row/column;
	align-item: center;
}

The flex float can be centered horizontally or vertically at all times, known as the floating three swordsmen. . . . . (Wanjin oil ...)
Small program development, if a page has multiple tags or tags and components, or when the tags and image tags are used in succession, the results are displayed, there is a small gap between the tags and tags, add styles to use display:flex Can solve this type of problem

Adding the API component of the WeChat applet to app.json sets the background color, but there is a problem that it cannot be displayed during development. . . It can only be displayed on a real device, but there is still a problem with the display
On each page where you want to modify the background colorviewAdding the class style to the tag may still be bad. The page cannot be reused, and when youviewWhen there are too few elements in the label, the background color is black, and when displayed, it is half black. . . Half white. Because the background color is fullviewThe content area defined by the label will not be affected in other places. . . . .
When we look at the page style, we can see the compiled source code, the outermost one is nestedpageTags, you can add styles in the global app.wxss or wxss of the current page. . . . (I am currently using ... still very easy to use)

I will update the follow-up tips to the article one by one, I hope to help you! ! ! . . . .

Published 24 original articles · praised 33 · visits 2391