Before, I have introduced the use of WXML for interface layout in applet development, but WXML is only the skeleton of an interface. To make our applet look beautiful and tall, we need a mechanism to add style to it. The development framework of the applet adopts almost the same mechanism as CSS (Cascading Style Sheets) used in web development, called WXSS.
WXSS is used to describe the component style of WXML, which is used to determine how the components of WXML should be displayed. In order to adapt to the majority of front-end developers, it is designed to support most of the features in CSS (but note that most of them are not supported), and there are some extensions and modifications of their own. For example, a new size unit rpx has been introduced, as well as the import mechanism of @import, an external style (in other words, isn't this function also available in CSS...)
Regarding CSS, I will not introduce its usage here. This content is a bit too much. Friends who have not learned CSS can find materials to learn by themselves. Here I mainly want to explain the difference between WXSS and CSS.
style settings
In the WXML file, we can style the component through the style and class attributes. However, due to the existence of the data binding function of WXML, we can dynamically set the attribute value of style and class. for example:
<view style="color:{{color}};padding:{{padding}};">Hello</view><view class="message-{{type}}">{{message}}</view>However, we should try to avoid using style to set the style of the component. It is better to define the style as a style rule and put it in the style file (.wxss), and then set it through the class attribute. Because components receive dynamic styles through style, they will be parsed at runtime, affecting rendering performance.
limited selector
Unlike CSS, the types of selectors supported by WXSS in Mini Programs are limited. The official documentation clearly lists the supported selectors. Currently, there are only the following selectors:
- .class: class selector, such as .error-msg, it will select all components with class="error-msg"
- #id: ID selector, such as #my-container, it will select the component with id="my-container"
- element: element selector, such as view, it will select all view components
- element, element: multiple selectors, such as view, button, it will select all view and button components
- ::after: such as view::after, which inserts content after the view component
- ::before: such as view::after, which inserts content before the view component
In fact, I have tried some selectors that are available in CSS. The applet does not officially declare that selectors supported in WXSS can also take effect. But some of them will crash the WeChat web developer tool. Therefore, don't use such unsupported selectors in actual development. Although it is a little troublesome in some scenarios, the above supports it. The selector is basically enough.
Global and local styles
There are global styles and local styles in WXSS.
The styles defined in the app.wxss file are global styles that will work on every page.
The wxss file defined as the same name as the page is called a local style, which only works for the corresponding page, and the style has a higher priority than the global style and can override the global style.
new dimension unit
Finally, let's talk about the new and expanded size units in WXSS, which is very helpful for screen adaptation.
- rpx (responsive pixel, responsive px), simply put, no matter what size device, always think that the screen width is 750rpx
- rem (root em, root em) is also very simple, that is, no matter what size of device, the width of the screen is always considered to be 20rem.
So the conversion between rpx and rem is:
1rem = (750/20)rpx = 37.5rpxThe designer's design draft is generally based on px, so in the development stage, developers need to convert between px and rpx, which can be calculated as follows:
rpx = (屏幕实际宽度/750)px
px = (750/屏幕实际宽度)rpxTherefore, if the designer's design is based on the screen size of the iPhone 6 (the screen width of the iPhone 6 is 375px), then:
1rpx = (375/750)px = 0.5px
1px = (750/375)rpx = 2rpxIs it easy to understand?
Well, about the key points of the WeChat applet style WXSS, I will explain it here. Please correct me if I am wrong. Thank you.
Now I mainly write things in shorthand. For more articles, see my shorthand book.