微信小程序 主题皮肤切换（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',
            })
        },   
    });