Comment implémenter la fonction de changement de peau de l'applet WeChat-Développement de mini-programmes-php.cn

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

小云云

Libérer： 2018-03-16 09:07:35

original

2767 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

Wxss normale :

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

Copier après la connexion

Wxss public :

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

Copier après la connexion

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: &#39;skins&#39;,
  　　 　　data: app.globalData.skin,
  　　 })
  }else{
   app.globalData.skin="normal";
   this.setData({
    SkinStyle: "normal"
   })
   wx.setStorage({
  　　 　　key: &#39;skins&#39;,
  　　 　　data: app.globalData.skin,
  　　 })   
  }  
 }
})

Copier après la connexion

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: &#39;skins&#39;,
 success: function(res) {
  that.setData({
   SkinStyle: res.data
  })
 },
 })
}

Copier après la connexion

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

Rendu final :