Einführung in WXSS im WeChat Mini-Programm

不言
Freigeben: 2018-06-27 17:40:38
Original
2112 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die relevanten Informationen des WeChat-Applets WXSS vor und fügt einfachen Beispielcode bei. Freunde in Not können sich auf

WXSS

WXSS( WeiXin Style) beziehen Sheets) ist eine von MINA entwickelte Stilsprache, die zur Beschreibung von WXML-Komponentenstilen verwendet wird.

WXSS wird verwendet, um zu bestimmen, wie WXML-Komponenten angezeigt werden sollen.

Um sich an die Mehrheit der Frontend-Entwickler anzupassen, verfügt unser WXSS über die meisten Funktionen von CSS. Gleichzeitig haben wir das CSS erweitert und geändert, um es besser für die Entwicklung von WeChat-Applets zu eignen.

Im Vergleich zu CSS sind unsere erweiterten Funktionen:

Maßeinheit
Stilimport

Größeneinheit

rpx (responsive Pixel): kann entsprechend der Bildschirmbreite angepasst werden. Die angegebene Bildschirmbreite beträgt 750 rpx. Auf dem iPhone 6 beträgt die Bildschirmbreite beispielsweise 375 Pixel und es gibt insgesamt 750 physische Pixel, dann 750 Pixel = 375 Pixel = 750 physische Pixel, 1 Pixel = 0,5 Pixel = 1 physisches Pixel.

设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34px
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6s 1rpx = 0.552px 1px = 1.81rpx

rem (root em): Die angegebene Bildschirmbreite beträgt 20rem 1rem = (750/20)rpx.

Vorschlag: Bei der Entwicklung von WeChat-Miniprogrammen können Designer das iPhone6 ​​als Standard für visuelle Entwürfe verwenden.

Stilimport

Verwenden Sie die @import-Anweisung, um externe Stylesheets zu importieren. Auf @import folgt der relative Pfad des externen Stylesheets, das importiert werden muss. und ; gibt das Ende der Anweisung an.
Beispielcode:

/** common.wxss **/
.small-p{
 padding:5px;
}
Nach dem Login kopieren

/** app.wxss **/
@import "common.wxss";
.middle-p:{
 padding:15px;
}
Nach dem Login kopieren

Inline-Stil

MINA-Komponenten unterstützen die Verwendung von Stil- und Klassenattributen, um den Stil der Komponente zu steuern.

Stil: Statische Stile werden einheitlich in Klassen geschrieben. style empfängt dynamische Stile und analysiert sie zur Laufzeit. Schreiben Sie daher keine statischen Stile in style, um die Rendering-Geschwindigkeit nicht zu beeinträchtigen.

<view style="color:{{color}};" />
Nach dem Login kopieren

Klasse: Wird zum Angeben von Stilregeln verwendet. Der Attributwert ist eine Sammlung von Klassenselektornamen (Stilklassennamen), die nicht in den Stilregeln enthalten sein müssen Stilklassenname. Mit Leerzeichen trennen.

<view class="normal_view" />
Nach dem Login kopieren

Selektor

Derzeit unterstützte Selektoren sind:

选择器 样例 样例描述
.class .intro 选择所有拥有class="intro"的组件
#id #firstname 选择拥有id="firstname"的组件
element view 选择所有view组件
element, element view checkbox 选择所有文档的view组件和所有的checkbox组件
::after view::after 在view组件后边插入内容
::before view::before 在view组件前边插入内容

Globaler Stil und lokaler Stil

Die in app.wxss definierten Stile sind globale Stile und gelten für jede Seite. Die in der WXSS-Datei der Seite definierten Stile sind lokale Stile, die nur für die entsprechende Seite gelten und denselben Selektor in app.wxss überschreiben.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einführung in den WeChat-Miniprogramm-Slider

Über die Implementierung des oberen Tabs (Swiper) im WeChat-Miniprogramm Einführung

Über die Funktion von WeChat JS-SDK zum Auswählen von Foto-Uploads für Mobiltelefone

Das obige ist der detaillierte Inhalt vonEinführung in WXSS im WeChat Mini-Programm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage