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

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>

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

Wxss normal :

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

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

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

Rendu final :

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles connexes :

Introduction aux problèmes et aux différences entre les fonctions apply et Math.max() dans js

Une brève discussion des scénarios d'application de composants intégrés à Vue

Un tutoriel simple sur l'utilisation de less dans vue2

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!