Es ist relativ einfach, die Skin-Änderungsfunktion auf einem PC oder einem mobilen Endgerät zu implementieren. Das normale CSS muss dann lokal gespeichert werden welches Set aktuell geladen werden soll. In diesem Artikel wird vor allem die Skin-Change-Funktion des WeChat-Applets ausführlich vorgestellt. Interessierte Freunde können darauf verweisen.
Da das WeChat-Applet keine API zum Betreiben von WXSS hat, ist die Implementierungsmethode etwas anders, ungefähr wie folgt:
1. WXSS, das neu gestaltet werden muss, normales WXSS.
2. Führen Sie wxss für das Skinning auf jeder Seite ein (da jede Seite für das Skinning geändert werden muss).
3. Legen Sie den Standard-Skin-Typ in globalData von app.js fest.
4. Wenn jede Seite geladen ist, lesen Sie die Daten im Speicher und legen Sie den Wert des aktuellen Hauttyps fest.
Beispiel:
Schritt 1: Struktur
<view class='page' id='{{SkinStyle}}'>
<view class='header'>
<view class='h-skin iconfont {{SkinStyle!=="normal"?"icon-moon":"icon-sun"}}' bindtap='bgBtn'></view>
</view>
</view>Hinweis: Da die Stammknotenseite des WeChat-Applets nicht direkt sein kann Um die Hintergrundfarbe im Vollbildmodus zu ändern, können Sie nur ein p (Ansicht) mit einer Höhe und Breite von 100 % imitieren. Das Obige ist die Seite „p“ (Ansicht) mit Klasse.
id='{{SkinStyle}}', das Festlegen der ID dient dazu, das Gewicht des WXSS-Stils der Haut entsprechend dem aktuellen Hauttyp größer zu machen als das Gewicht des normalen WXSS-Stils. Daher ist dies manchmal nicht der Fall muss es hinzufügen! wichtig.
Die Stammknotenseite muss width:100%;height:100% in wxss festlegen. Stellen Sie dann die Breite und Höhe von p (Ansicht) mit der Klasse als Seite auf 100 % ein. Dies entspricht einer betriebsbereiten Stammknotenseite.
{{SkinStyle!=="normal"?"icon-moon":"icon-sun"}}Dieser Satz dient zur Bestimmung des aktuellen Hauttyps. Wenn er normal ist, ist er icon-sun. andernfalls ist es Symbol-Mond.
Schritt 2: Style wxss
Haut wxss:
#dark {
background: #333;
}
#dark .header .h-skin{
color: white;
}Normales wxss:
.page .header .h-skin {
color: #060505;
padding: 0 32rpx;
font-size: 40rpx;
}Öffentliche wxss:
page {
height: 100%;
width: 100%;
}
.page {
width: 100%;
height: 100%;
}Hinweis: Es handelt sich jeweils um drei Dateien. Der Skin ist theme.wxss, der normale ist index.wxss und der öffentliche ist com.wxss
Da Skin-Änderungen alle Seiten ändern, empfehle ich @import „../theme-bg/“ von Die WXSS-Themedatei des Skins wird in die Datei com.wxss geladen. Dann importiert der wxss jeder Seite diese öffentliche com.wxss-Datei.
Schritt 3: js
Zuerst: Legen Sie in der app.js-Datei die globalen Daten in Seite fest: Skin: „normal“; das heißt, der Standardwert ist normal Skin
Dann: Fügen Sie auf der Seite, die die Skin-Schaltfläche umschaltet, das Klickereignis der Umschaltschaltfläche bgBtn hinzu:
var app=getApp();
Page({
data:{
SkinStyle:"normal" //这里其实可以不要
},
bgBtn:function(){
if (this.data.SkinStyle==="normal"){
app.globalData.skin = "dark"; //设置app（）中皮肤的类型
this.setData({
SkinStyle: app.globalData.skin //设置SkinStyle的值
})
wx.setStorage({ //设置storage
key: 'skins',
data: app.globalData.skin,
})
}else{
app.globalData.skin="normal";
this.setData({
SkinStyle: "normal"
})
wx.setStorage({
key: 'skins',
data: app.globalData.skin,
})
}
}
})Abschließend: Auf jedem Seite, einschließlich Im onLoad-Ereignis auf der Seite der Seite, die den Skin wechselt, lesen Sie den Speicher und legen Sie den Wert von SkinStyle fest:
onLoad: function (options) {
var that=this;
wx.getStorage({
key: 'skins',
success: function(res) {
that.setData({
SkinStyle: res.data
})
},
})
}Auf diese Weise wird der Die letzte Einstellung kann bei jedem Start automatisch festgelegt werden.
Endgültiges Rendering:
Verwandte Empfehlungen:
Beispiel-Tutorial zur Vue-Skinning-Funktion
Implementierung der Skin-Änderungsfunktion der JQuery-Website code_jquery
Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Skin-Änderungsfunktion des WeChat-Applets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
