Announcement: Tencent Cloud Mini Program Platform Renamed to Tencent Cloud Super App as a Service on January 2, 2025
Console Updates
Android SDK Updates
iOS SDK Updates
Flutter SDK Updates
IDE Updates
Base Library Updates
WXSS Style
WX Style Sheets (WXSS) is a style language used to describe the style of WXML component styles.
WXSS is similar to CSS in Web development. In order to be more suitable for mini program development, WXSS has been extended and modified based on CSS.
File composition
Project common style: The
app.wxss in the root directory is the project common style and will be injected into every page of mini programs. Page style: A WXSS file with the same name and at the same level as the page registered with app.json. In the above example, pages/rpx/index is registered and the file pages/rpx/index.wxss is the style for page pages/rpx/index.wxml. Other styles: Other styles can be referenced by project common styles and page styles. For referencing methods, see WXSS Reference section in this document.
Unlike web development, you don't need to optimize the number of style files requested for mini program development. You just focus on the code organization. Style files will go through compilation optimization and detailed compilation will be introduced later.
Dimension unit
In WXSS, the rpx (responsive pixel) was introduced. You can use this to adapt to different screen width to make development easier.
For example, if px is used, a page will have too much white space for the same element displayed under different screen width.
The following shows that the rpx is used:
After the mini program code is compiled, rpx will be converted to px. The conversion uses 375 physical pixels as a standard, which means 1 rpx = 1 px on a screen with 375 physical pixels width.
For example, on iPhone 6, the screen width is 375 px, and there are 750 physical pixels in total, then 1 rpx = 375 / 750 physical pixels = 0.5 px.
WXSS reference
In CSS, developers can reference another style file like this: @import url ('./ test_0.css')
This does not merge test_0.css into index.css on the request, which means that when index.css is requested, there will be an additional request for test_0.css.
In the mini program, we can still implement style reference in a way as shown below:
@import './test_0.wxss'
Since WXSS will be compiled and packaged into the object file, users only need to download it once. And there will be no redundant file requests due to style references during usage.
Inline style
WXSS inline style is consistent with that in Web development:
<!--index.wxml--><!--Inline style--><view style="color: red; font-size: 48rpx"></view>
Mini programs support dynamically updating inline styles:
<!--index.wxml--><!-- Dynamically changing inline styles--><!--{eleColor: 'red',eleFontsize: '48rpx'}--><view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>
Selectors
The following selectors are supported:
Type | Selector | Example | Description |
class selector | .class | .intro | Selects all components with class = "intro" |
ID selector | #id | #firstname | Selects the components with id = "firstname" |
element selector | element | view checkbox | Selects `view` components of all documents and all `checkbox` components |
pseudo-element selector | ::after | view::after | Insert content after the `view` component |
pseudo-element selector | ::before | view::before | Insert content before the `view` component |
The priority of WXSS is similar to that of CSS, with weights as shown below:
The higher the weight, the higher the priority. The style set later takes precedence over the style set earlier, given the same priority.
The priority weights of WXSS selectors:
view{ // Weight is 1color: blue}.ele{ // Weight is 10color: red}#ele{ // Weight is 100color: pink}view#ele{ //Weight 1 + 100 = 101, highest priority, and element color is orangecolor: orange}view.ele{ // Weight is 1 + 10 = 11color: green}
Official style library
To ease the workload for developers, we provide the WeUI.wxss basic style library.
WeUI is a UI library designed by our official design team specifically for mini programs, ensuring a more consistent user experience. It includes various native widgets, including button, cell, dialog, progress, toast, article, action sheet, and icon.
Help and Support
Was this page helpful?
You can also Contact sales or Submit a Ticket for help.
Help us improve! Rate your documentation experience in 5 mins.
Feedback