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

零下一度
Freigeben: 2017-05-24 09:44:17
Original
3578 Leute haben es durchsucht

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
    Erste Schritte mit der WeChat-Entwicklung (7) Verwendung von weui.wxss

  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.
Erste Schritte mit der WeChat-Entwicklung (7) Verwendung von weui.wxss

[Verwandte Empfehlungen]

1 herunterladen

2.

WeChat-Abstimmungsquellcode

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!

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