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.
WeUI herunterladen
weui.wxss
Beachten Sie, dass es in [weui- wxss/dist /style/]-Verzeichnis, laden Sie es nicht im Verzeichnis [weui-wxss/src] herunter
Kopieren Sie weui.wxss in das Stammverzeichnis des Miniprogramms
Weui.wxss in app.wxss oder Seiten-Wxss importieren
/**app.wxss**/ @import 'weui.wxss';
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.
Die Stammkomponente verwendet class="page"
<view class="page"> </view>
Die Seitenskelettkomponente verwendet class="pagexxx" (beachten Sie die beiden Unterstriche)
<view class="page"> <!--页头--> <view class="pagehd"></view> <!--主体--> <view class="pagebd"></view> <!--没有页脚--> </view>
Andere Komponenten wurden mit weui- gefolgt vom Komponentennamen gestartet, wie class="weui-footer"
<view class="weui-footer">我是页脚</view>
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>
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]
2. 3.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!