Erste Schritte mit der WeChat-Entwicklung (7) Verwendung von weui.wxss

Was ist WeUI?

WeUI ist eine grundlegende Stilbibliothek, die vom offiziellen Designteam für Miniprogramme in Übereinstimmung mit den visuellen Designspezifikationen von WeChat angepasst wurde.

Wir haben WeUI hier in die Grundlagen aufgenommen, da WeUI ein offizielles Produkt ist und die IDE nach dem IDE-Update am 28. Oktober CSS nicht erkennen und referenzieren kann und außerdem die Möglichkeit blockiert, Stile von zu beziehen die Netzwerkdatei und ziehen Sie eine klare Grenze zwischen CSS.

》》》So stellen Sie WeUI vor

1. WeUI herunterladen
   weui.wxss
   Beachten Sie, dass es in [weui- wxss/dist /style/]-Verzeichnis, laden Sie es nicht im Verzeichnis [weui-wxss/src] herunter

2. Kopieren Sie weui.wxss in das Stammverzeichnis des Miniprogramms
   

3. Weui.wxss in app.wxss oder Seiten-Wxss importieren

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

   Nach dem Login kopieren

4. Das Obige führt weui.wxss erfolgreich ein und Weui bietet auch eine einzelne Komponente. Der Stil wird eingeführt und der Prozess ist der gleiche wie oben.

》》》So verwenden Sie WeUI

1. Die Stammkomponente verwendet class="page"

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

   Nach dem Login kopieren

2. Die Seitenskelettkomponente verwendet class="pagexxx" (beachten Sie die beiden Unterstriche)

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

   Nach dem Login kopieren

3. Andere Komponenten wurden mit weui- gefolgt vom Komponentennamen gestartet, wie class="weui-footer"

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

   Nach dem Login kopieren

4. Der Unterkomponentenstil der Komponente, wie z. B. die view.weui-footer-Komponente hat auch Links und Copyright-Informationen.

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

   Nach dem Login kopieren

   Komponenten und Unterkomponenten werden durch zwei Unterstriche verbunden, daher ist es notwendig, zu unterscheiden, wann „-“ und wann zu verwenden ist

Das Folgende Das Bild wird mit der Version des Community-Kolumnen-Miniprogramms kombiniert.

[Verwandte Empfehlungen]

1 herunterladen

WeChat-Abstimmungsquellcode

WeChat Lala Takeaway 2.2.4 entschlüsselte Open-Source-Version des WeChat Rubik's Cube-Quellcodes

Das obige ist der detaillierte Inhalt vonErste Schritte mit der WeChat-Entwicklung (7) Verwendung von weui.wxss. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!