L'applet WeChat réalise une fonction de changement de peau-js tutoriel-php.cn

L'applet WeChat réalise une fonction de changement de peau

亚连

Libérer： 2018-05-30 10:54:58

original

2265 Les gens l'ont consulté

Cet article présente principalement en détail la fonction de changement de peau de l'applet WeChat. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

Comment implémenter la fonction de changement de peau sur PC ou terminal mobile ? , c'est à peu près le CSS qui doit être relooké, et le CSS normal ; enregistrez le type de skin actuel localement, puis lisez-le via js et déterminez quel ensemble de CSS doit être chargé actuellement.

É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 utilisée directement, pour modifier l'arrière-plan plein écran color, Il ne peut imiter qu'un p (vue) dont la hauteur et la largeur sont 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 normal :

.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 skin. theme" ; 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" ; Skin

Ensuite : Sur la page qui change le bouton skin, ajoutez l'événement click du bouton switch 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 : OnLoad dans la Page de chaque page, y compris la page qui change de skin Dans l'événement, 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 dernier skin défini peut être automatiquement défini à chaque démarrage.

Rendu final :