Das WeChat-Applet realisiert die Hautveränderungsfunktion

Dieser Artikel stellt hauptsächlich die Skin-Änderungsfunktion des WeChat-Applets im Detail vor. Er hat einen gewissen Referenzwert.

Wie implementiert man die Skin-Änderungsfunktion auf einem PC oder einem mobilen Endgerät? , es ist ungefähr das CSS, das neu gestaltet werden muss, und das normale CSS speichert den aktuellen Skin-Typ, liest ihn dann über js und bestimmt, welcher CSS-Satz aktuell geladen werden soll.

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 hautveränderndes WXSS auf jeder Seite ein (da jede Seite geändert werden muss, um die Haut zu verändern).

　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=&#39;page&#39; id=&#39;{{SkinStyle}}&#39;>
 <view class=&#39;header&#39;>
  <view class=&#39;h-skin iconfont {{SkinStyle!=="normal"?"icon-moon":"icon-sun"}}&#39; bindtap=&#39;bgBtn&#39;></view>  
 </view>
</view>

Hinweis: Da die Stammknotenseite des WeChat-Applets nicht direkt bedient werden kann, müssen Sie zum Ändern der Hintergrundfarbe im Vollbildmodus Folgendes tun: Sie können nur ein p (Ansicht) mit einer Höhe und Breite von 100 % imitieren. Das Obige ist die p (Ansicht) mit Klassenseite.

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;
}

Normale 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: Dies sind 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.

Der dritte Schritt: js

Zuerst: Legen Sie in der Datei app.js die globalen Daten in Seite fest: Skin: „normal“; normale Skin

Dann: Fügen Sie auf der Seite, auf der die Skin-Schaltfläche umgeschaltet wird, das Klickereignis der Umschaltschaltfläche hinzu bgBtn:

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: Im onLoad-Ereignis auf der Seite jeder Seite, einschließlich der Seite, auf der der Skin umgeschaltet wird, lesen Sie den Speicher aus 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 kann bei jedem Start automatisch der zuletzt eingestellte Skin eingestellt werden.

Endgültige Darstellung:

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Einführung in die Probleme und Unterschiede zwischen den Funktionen apply und Math.max() in js

Eine kurze Diskussion der in Vue integrierten Komponenten Anwendungsszenarien für Komponenten

Ein einfaches Tutorial zur Verwendung von less in vue2

Das obige ist der detaillierte Inhalt vonDas WeChat-Applet realisiert die Hautveränderungsfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!