Premiers pas avec le développement WeChat (7) Comment utiliser weui.wxss

Qu'est-ce que WeUI ?

WeUI est une bibliothèque de styles de base personnalisée par l'équipe de conception officielle pour les mini-programmes conformément aux spécifications de conception visuelle de WeChat.

Nous mettons ici WeUI dans les bases car WeUI est un produit officiel, et après la mise à jour de l'IDE le 28 octobre, l'IDE ne peut pas reconnaître et référencer les CSS, et il bloque également la possibilité d'obtenir des styles à partir de le fichier réseau et tracez une ligne claire entre les fichiers CSS.

》》》Comment présenter WeUI

1. Téléchargez WeUI
   weui.wxss
   Notez qu'il est dans [weui- wxss/dist /style/], ne le téléchargez pas dans le répertoire [weui-wxss/src]

2. Copiez weui.wxss dans le répertoire racine du mini programme
   

3. Importez weui.wxss dans app.wxss ou page wxss

   /**app.wxss**/
   @import 'weui.wxss';

4. Ce qui précède introduit avec succès weui.wxss, et weui fournit également un seul composant. Le style est introduit et le processus est le même que ci-dessus.

》》》Comment utiliser WeUI

1. Le composant racine utilise class="page"

   <view class="page">
   </view>

2. Le composant squelette de page utilise class="pagexxx" (notez les deux traits de soulignement)

   <view class="page">
   <!--页头-->
   <view class="pagehd"></view>
   <!--主体-->
   <view class="pagebd"></view>
   <!--没有页脚-->
   </view>

3. D'autres composants ont été démarrés avec weui- suivi du nom du composant, tel que class="weui-footer"

   <view class="weui-footer">我是页脚</view>

4. Le style de sous-composant du composant, tel que le composant view.weui-footer a également liens et informations sur les droits d'auteur.

   <view class="weui-footer">
   <view class="weui-footerlinks">
       <navigator url="" class="weui-footerlink">小黄象</navigator>
   </view>
   <view class="weui-footertext">Copyright © 精品专栏组</view>
   </view>

   Les composants et sous-composants sont reliés par deux traits de soulignement, il est donc nécessaire de distinguer quand utiliser "-" et quand utiliser

Ce qui suit l'image est combinée avec weui.wxss La version du mini-programme de la colonne communautaire est en cours d'amélioration ing

[Recommandations associées]

Code source de la plateforme de compte public WeChat. télécharger

2. Code source de vote WeChat

3. WeChat Lala Takeaway 2.2.4 version open source décryptée du code source de WeChat Rubik's Cube

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!