- Release Notes and Announcements
- Product Introduction
- About Platform Prerequisites
- Guidelines for Code Integration
- Get Demo and SDK
- Accessing via Android Devices
- Accessing via iOS Devices
- Guide to Mini Program Development
- Mini program introduction and development environment
- Mini program code composition
- Framework
- API
- API Overview
- Fundamentals
- Routing
- Redirect
- Forwarding
- Interface
- Network
- Data Caching
- Data Analysis
- canvas
- Media
- WXML
- File
- Device
- Contact person
- Vibration
- Battery Level
- Screen
- Memory
- Device Orientation
- Accessibility
- Network
- Keyboard
- Phone number
- Accelerometer
- Compass
- Gyroscope
- SMS
- Code scanning
- Encryption
- NFC－Ndef
- NFC－NfcA
- NFC－NfcB
- NFC－NfcF
- NFC－NfcV
- WiFi
- Calendar
- Clipboard
- NFC－getNFCAdapter
- NFC－NFCAdapter
- NFC－IsoDep
- NFC－MifareClassic
- NFC－MifareUltralight
- Bluetooth - Low Energy Central Device
- Bluetooth - Low Energy Peripheral Device
- Bluetooth - Beacon
- Bluetooth - General
- Location
- Open Interfaces
- Custom APIs
- Sensitive API
- Components
- Open source component statement
- FAQs
- Release Notes and Announcements
- Product Introduction
- About Platform Prerequisites
- Guidelines for Code Integration
- Get Demo and SDK
- Accessing via Android Devices
- Accessing via iOS Devices
- Guide to Mini Program Development
- Mini program introduction and development environment
- Mini program code composition
- Framework
- API
- API Overview
- Fundamentals
- Routing
- Redirect
- Forwarding
- Interface
- Network
- Data Caching
- Data Analysis
- canvas
- Media
- WXML
- File
- Device
- Contact person
- Vibration
- Battery Level
- Screen
- Memory
- Device Orientation
- Accessibility
- Network
- Keyboard
- Phone number
- Accelerometer
- Compass
- Gyroscope
- SMS
- Code scanning
- Encryption
- NFC－Ndef
- NFC－NfcA
- NFC－NfcB
- NFC－NfcF
- NFC－NfcV
- WiFi
- Calendar
- Clipboard
- NFC－getNFCAdapter
- NFC－NFCAdapter
- NFC－IsoDep
- NFC－MifareClassic
- NFC－MifareUltralight
- Bluetooth - Low Energy Central Device
- Bluetooth - Low Energy Peripheral Device
- Bluetooth - Beacon
- Bluetooth - General
- Location
- Open Interfaces
- Custom APIs
- Sensitive API
- Components
- Open source component statement
- FAQs
WXSS (WeiXin Style Sheets) is a stylistic language, utilized to delineate the aesthetic of WXML components. It determines the visual presentation of WXML components.
To facilitate the usage by a broad spectrum of front-end developers, WXSS has adopted a majority of CSS features. Concurrently, to better cater to the requirements of developing TMF mini-programs, WXSS has undergone certain expansions and modifications.
Compared to CSS, WXSS has extended the following features:
Note:
For iOS versions 8 and below, when utilizing flexbox layout, the attribute
display: -webkit-flex needs to be added.Dimensional Units
rpx (responsive pixel): This unit adapts according to the screen width. The screen width is set to be 750rpx. For instance, on an iPhone 6, the screen width is 375px, comprising 750 physical pixels, hence 750rpx = 375px = 750 physical pixels, and 1rpx = 0.5px = 1 physical pixel.
In the development on the Tencent Cloud Mini Program platform, we utilize rpx as the unit of measurement to cater to the needs of different screen sizes. Below is the conversion relationship between rpx and px:
When the device screen width is 750px, 1rpx equals 0.5px.
When the device screen width is 750px, 1px equals 2rpx.
The conversion relationship between rpx and px varies according to different device screen widths. For instance:
On an iPhone 5, the device screen width is 320px, hence 1rpx equals 0.42px and 1px equals 2.34rpx.
On an iPhone 6, the device screen width is 375px, hence 1rpx equals 0.5px and 1px equals 2rpx.
On an iPhone 6 Plus, the device screen width is 414px, hence 1rpx equals 0.552px and 1px equals 1.81rpx.
It is recommended that designers use the iPhone 6 as the standard for visual drafts when designing applications or mini-programs. However, it should be noted that some glitches may occur on smaller screens, thus it is essential to avoid such situations during development.
Style Importation
The
@import statement can be used to import external style sheets. The @import is followed by the relative path of the external style sheet to be imported, and the statement is terminated with a ;.Sample Code:
/ common.wxss /.small-p {padding:5px;}
/ app.wxss /@import "common.wxss";.middle-p {padding:15px;}
Inline Styles
The framework components support the use of style and class attributes to control the style of the components.
Style: Static styles should be uniformly written into the class. The style accepts dynamic styles, which will be parsed at runtime. Please try to avoid writing static styles into the style to prevent affecting the rendering speed.
<view style="color:{{color}};" />
Class: Used to specify style rules, its attribute value is a collection of class selector names (style class names) in the style rules. The style class names do not need to be prefixed with a
., and the style class names are separated by spaces.<view class="normal_view" />
Selector
The selectors currently supported are:
Selector | Example | Example Description |
.class | .intro | Select all components with class="intro" |
#id | #firstname | Select the component with id="firstname" |
element | view | Select all view components |
element，element | view, checkbox | Select all view components and checkbox components within the document. |
::after | view::after | Insert content following the view component. |
::before | view::before | Insert content preceding the view component. |
Global styles versus local styles
Styles defined in app.wxss are global styles, applicable to every page. Styles defined in a page's wxss file are local styles, only applicable to the corresponding page, and will override the same selectors in app.wxss.
Yes
No
Was this page helpful?