Mini-programme WeChat WXSS


WXSS

WXSS (WeiXin Style Sheets) est un langage de style conçu par le framework MINA, utilisé pour décrire les styles de composants WXML.

WXSS est utilisé pour déterminer comment les composants WXML doivent être affichés.

Afin de s'adapter à la majorité des développeurs front-end, notre WXSS possède la plupart des fonctionnalités du CSS. Dans le même temps, afin d'être plus adapté au développement d'applets WeChat, nous avons étendu et modifié le CSS.

Par rapport au CSS, nos fonctionnalités étendues sont :

  • Unité de taille                                                                                                                
  • Unité de taille

rpx (responsive pixel) : peut être adapté en fonction de la largeur de l'écran. La largeur d'écran spécifiée est de 750rpx. Par exemple, sur iPhone 6, la largeur de l'écran est de 375 pixels et il y a 750 pixels physiques au total, alors 750rpx = 375px = 750 pixels physiques, 1rpx = 0,5px = 1 pixel physique.

QQ截图20170208101030.pngrem (root em) : La largeur d'écran spécifiée est de 20rem = (750/20)rpx.

  • Suggestion :
Lors du développement de mini-programmes WeChat, les concepteurs peuvent utiliser l'iPhone6 ​​​​​​comme standard pour les brouillons visuels.

Remarque :

Il y aura inévitablement quelques problèmes sur les écrans plus petits, veuillez essayer d'éviter cela lors du développement.

Import de style

Utilisez l'instruction @import pour importer la feuille de style externe, @import suivi du chemin relatif de la feuille de style externe qui doit être importée , utilisez ; indique la fin de l'instruction.

Exemple de code : @import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

/** common.wxss **/
.small-p{
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p:{
  padding:15px;
}

内联样式

MINA组件上支持使用style、class属性来控制组件的样式。

  • style：静态的样式统一写到class中。style接收动态的样式，在运行时会进行解析，所以不要将静态的样式写进style中，以免影响渲染速度。
<view style="color:{{color}};" />
  • class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.
    • <view class="normal_view" />
    rrreee

    Style en ligne

Les composants MINA prennent en charge l'utilisation des attributs de style et de classe pour contrôler le style du composant.

style : les styles statiques sont écrits uniformément dans les classes. style reçoit des styles dynamiques et les analysera au moment de l'exécution, n'écrivez donc pas de styles statiques dans style pour éviter d'affecter la vitesse de rendu.

QQ截图20170208101051.pngrrreee

class : utilisé pour spécifier des règles de style. Sa valeur d'attribut est une collection de noms de sélecteur de classe (noms de classe de style) dans les règles de style. Le nom de la classe de style n'a pas besoin d'inclure ., classe de style Séparez les noms par des espaces.

rrreee

Selector


Les sélecteurs actuellement pris en charge sont :

🎜🎜🎜🎜Style global et style local🎜🎜Les styles définis dans app.wxss sont des styles globaux, qui s'appliquent à chaque page. Les styles définis dans le fichier wxss de la page sont des styles locaux, qui s'appliquent uniquement à la page correspondante et remplaceront le même sélecteur dans app.wxss. 🎜🎜🎜🎜