Comment implémenter la fonction de changement de peau de l'applet WeChat

Il est relativement simple d'implémenter la fonction de changement de skin sur PC ou terminal mobile. C'est à peu près le CSS qui doit être modifié, et le CSS normal enregistrez le type de skin actuel puis lisez-le via js et déterminez-le ; quel ensemble doit être chargé actuellement en CSS. Cet article présente principalement en détail la fonction de changement de skin de l'applet WeChat. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Étant donné que l'applet WeChat n'a pas d'API pour faire fonctionner wxss, la méthode d'implémentation est un peu différente, à peu près comme suit :

1. Wxss qui doit être relooké, wxss normal.

2. Introduisez des wxss qui changent de peau à chaque page (car chaque page doit être modifiée pour changer de peau).

　3. Définissez le type de peau par défaut dans globalData de app.js.

4. Lorsque chaque page est chargée, lisez les données dans le stockage et définissez la valeur du type de peau actuel.

Exemple :

Étape 1 : Structure

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

Remarque : Étant donné que la page du nœud racine de l'applet WeChat ne peut pas être directement exploité , pour modifier la couleur de fond plein écran, vous ne pouvez imiter qu'un p (vue) avec une hauteur et une largeur de 100%. Ce qui précède est la page p (vue) avec classe.

id='{{SkinStyle}}', définir l'identifiant consiste à rendre le poids du style wxss de la peau supérieur au poids du style wxss normal en fonction du type de peau actuel, donc parfois il n'y a pas il faut l'ajouter ! important.

La page du nœud racine doit définir width:100%;height:100% en wxss. Définissez ensuite la largeur et la hauteur de p (vue) avec la classe comme page sur 100 %. Cela équivaut à avoir une page de nœud racine opérationnelle.

　{{SkinStyle!=="normal"?"icon-moon":"icon-sun"}}Cette phrase sert à déterminer le type de peau actuel. Si c'est normal, c'est icône-soleil, sinon c'est l'icône-lune.

Étape 2 : Style wxss

Peau wxss :

#dark {
 background: #333;
}
#dark .header .h-skin{
 color: white;
}

Wxss normale :

.page .header .h-skin {
 color: #060505;
 padding: 0 32rpx;
 font-size: 40rpx;
}

Wxss public :

page {
 height: 100%;
 width: 100%;
}
.page {
 width: 100%;
 height: 100%;
}

Remarque : Il s'agit de trois fichiers. Le skin est theme.wxss, le skin normal est index.wxss et le public est com.wxss

Puisque le changement de skin change toutes les pages, je recommande @import "../theme-bg/" de le fichier wxss du thème. "; est chargé dans le fichier com.wxss. Ensuite, le wxss de chaque page @importe ce fichier public com.wxss.

Étape 3 : js

Tout d'abord : dans le fichier app.js, définissez les données globales dans Page : skin : "normal" ; c'est-à-dire que la valeur par défaut est normale ; Skin

Ensuite : Sur la page qui change le bouton skin, ajoutez l'événement clic du bouton bascule 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,
  　　 })   
  }  
 }
})

Enfin : Sur chaque page, y compris Dans l'événement onLoad dans la page de la page qui change de skin, lisez le stockage et définissez la valeur de SkinStyle :

onLoad: function (options) { 
 var that=this;
 wx.getStorage({
 key: 'skins',
 success: function(res) {
  that.setData({
   SkinStyle: res.data
  })
 },
 })
}

De cette façon, le Le dernier paramètre peut être défini automatiquement à chaque démarrage du skin.

Rendu final :

Recommandations associées :

Tutoriel d'exemple de fonction de skinning Vue

Exemple détaillé de jQuery implémentant une fonction de changement de peau basée sur des cookies

Implémentation de la fonction de changement de peau du site Web JQuery code_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!