微信小程序 主題皮膚切換（switch開關）

 

示例效果：

 

功能點分析：

1.點擊switch開關，切換主題皮膚（包括標題欄、底部tabBar）；
2.把皮膚設置保存到全局變量，在訪問其它頁面時也能有效果
3.把設置保存到本地，退出應用再進來時，依然加載上次設置的皮膚

 

步驟：

1、需要切換的皮膚：新建一個skin目錄，下面寫一個skin.wxss

black_box就是最外面，也是最大的盒子（除了默認的page哈）；  black_box就是切換的皮膚；

還有關鍵一步，在app.wxss文件中把這個皮膚文件引入，因為換膚是所有頁面都變化

@import "skin/skin.wxss";

 通過控制skinStyle的值“black”來改變皮膚樣式，我們還能寫個blue_box的皮膚，然后設置變量為skinStyle為blue就行了

 

<view class= " container {{skinStyle}}_box "></view>

 

2、switch開關： 

 user.wxml：

 

<view class="container {{skinStyle}}_box">　

　　　<switch bindchange="switchChange" color ="#ef384a" class="switch" checked='{{skinSwitch}}'/>

</view>

 

user.js：根據皮膚開關設置皮膚模式（包括標題欄、tabBar等），並保存到本地； 最后，在每個頁面，包括切換皮膚的頁面的Page中的onLoad事件里，設置標題欄背景及SkinStyle的值；

const app = getApp()

Page({
  data: {
      skinStyle: '',
  },
  //皮膚開關
  switchChange: function (e) {
      var that = this;
      //開啟
      if (e.detail.value == true) {
          app.globalData.skin = "black"
          app.setSkinBlackTitle(); //設置標題欄
          app.globalData.skinSwitch = true
          app.setBlackTabBar(); //設置tabBar

      } else {
          app.globalData.skin = 'normal'
          app.setSkinNormalTitle() 
          app.globalData.skinSwitch = false
          app.setNormalTabBar();

      }
      that.setData({
          skinStyle: app.globalData.skin
      })
      //保存到本地
      wx.setStorage({
          key: "skin",
          data: app.globalData.skin
      })
      wx.setStorage({
          key: "skinSwitch",
          data: app.globalData.skinSwitch
      })
  },

  onLoad: function (options) {
      app.setNavBarBg();//設置標題欄背景色
      var that = this 　　　　
      that.setData({
          skinStyle: app.globalData.skin,
          skinSwitch: app.globalData.skinSwitch
      }) 
  }
})

 

app.js:

在app.js的文件中，Page里的globalData中設置：skin:"normal"，即默認為normal皮膚；tabBar數據配置；

 我們要在程序打開時就獲取皮膚設置，所以要在app.js去get與皮膚、標題、tabBar相關的信息：getSkin() 

    //app.js
    App({
 onLaunch: function () { console.log('進入app'); // 展示本地存儲能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) this.login(); 
 this.getSkin(); }, globalData: { userInfo: null, skin: 'normal', skinSwitch: '',  }, //設置tabBar -- 默認模式  setNormalTabBar(){ wx.setTabBarItem({ index: 0, text: '首頁', iconPath: "images/icons/home_1.png", selectedIconPath: "images/icons/home_2.png", }) wx.setTabBarItem({ index: 1, text: '報名', iconPath: "images/icons/apply_1.png", selectedIconPath: "images/icons/apply_2.png", }) wx.setTabBarItem({ index: 2, text: '我的', iconPath: "images/icons/user_1.png", selectedIconPath: "images/icons/user_2.png", }) wx.setTabBarStyle({ color: '#7f8389', selectedColor: '#329fff', backgroundColor: '#f7f7fa', borderStyle: 'black' }) }, //設置tabBar -- 黑色模式  setBlackTabBar(){ wx.setTabBarItem({ index: 0, text: '首頁', iconPath: "images/icons/icon_home_1.png", selectedIconPath: "images/icons/icon_home_2.png", }) wx.setTabBarItem({ index: 1, text: '報名', iconPath: "images/icons/icon_apply_1.png", selectedIconPath: "images/icons/icon_apply_2.png", }) wx.setTabBarItem({ index:2, text: '我的', iconPath: "images/icons/icon_user_1.png", selectedIconPath: "images/icons/icon_user_2.png", }) wx.setTabBarStyle({ color: '#2e3136', selectedColor: '#ef384a', backgroundColor: '#ffffff', borderStyle: 'black' }) }, //皮膚  getSkin: function () { var that = this wx.getStorage({ key: 'skin', success: function (res) { that.globalData.skin = res.data if (that.globalData.skin == 'normal') { that.globalData.skinSwitch = false that.setSkinNormalTitle() that.setNormalTabBar(); } else { that.globalData.skinSwitch = true that.setSkinBlackTitle() that.setBlackTabBar() } } }) }, //導航欄標題背景  setNavBarBg: function () { var that = this if (that.globalData.skin == "normal") { that.setSkinNormalTitle() } else { that.setSkinBlackTitle() } }, setSkinBlackTitle: function () { wx.setNavigationBarColor({ frontColor: '#ffffff', backgroundColor: '#2e3136', }) }, setSkinNormalTitle: function () { wx.setNavigationBarColor({ frontColor: '#000000', backgroundColor: '#ffffff', }) }, });