小程序_动态设置tabBar主题皮肤

序：需要动态设置页面的一些背景、按钮状态、文字的颜色，图片、图标等等，包括tabBar的图标和文字的颜色，切换按钮统一设置，这个在页面上实现比较容易，按理说tabBar的设置也是简单的，确实是！只要你可以调用tabBar组件的方法即可实现切换主题皮肤，关键在于你会不会使用小程序的方法了。

效果图：

1、tabBar自定义

配置自定义tabBar的方法可以参考官方文档，这个就不用我累赘了，先熟悉这个，在言其他;

2、动态设置背景、按钮状态、文字的颜色，图片、图标等等

前提工作：主题样式文件 common/theme.wxss 和主题图片文件夹 /static/image/v1，/static/image/v2，如下图：

在每个需要主题替换样式 xxx.wxss  头部引入主题文件（主题样式文件看你放哪里，自己灵活引用，可以放在 static 文件夹下）

@import "./../common/theme.wxss";

我的 theme.wxss（有人需要，那就贴上吧）

.cover_bg{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: -1;}
.v1_bg{background-image: linear-gradient(#E4EBF5, #c8d0e7);}
.v2_bg{background-color: #2e3237;}

.theme_v1 .tab_bg_br{box-shadow: 0.3rem 0.3rem 0.6rem #9baacf, -0.2rem -0.2rem 0.5rem #eee;}
.theme_v1 .tab_active_br{box-shadow: 0.3rem 0.3rem 0.6rem #9baacf inset,-0.2rem -0.2rem 0.5rem #eee inset, 2px 2px 3px #9baacf, -2px -2px 3px #eee;}

.theme_v2 .tab_bg_br{box-shadow: 0.3rem 0.3rem 0.6rem #000, -0.2rem -0.2rem 0.5rem #505050;color:#b5b7b8;}
.theme_v2 .tab_active_br{box-shadow: 0.3rem 0.3rem 0.6rem #000 inset,-0.2rem -0.2rem 0.5rem #505050 inset, 2px 2px 3px #000, -2px -2px 3px #505050;}

1）首先在 app.js 全局文件中设定一个主题参数 

globalData: {
  theme: 1,  // 主题
}

2）然后在其他页面设定参数

data: {
  theme: 1,
},
onShow(){
  let that = this;
  that.setData({
    theme: app.globalData.theme,
  })
},

.wxml

<view class="limit_width theme_v{{theme}}"> ... </view>

3）最后在设置页面上的操作

setup.wxml

<view class="cover_bg v{{theme}}_bg"></view>
<view class="limit_width theme_v{{theme}}">
  <view class="item">
    <view class="theme_tle">设置主题：</view>
    <view class="flex">
      <view bindtap="themeTab" class="theme_tab {{theme==1?'tab_bg_br':''}}" hover-class="tab_active_br" data-num="1">新绿(默认)</view>
      <view bindtap="themeTab" class="theme_tab {{theme==2?'tab_bg_br':''}}" hover-class="tab_active_br" data-num="2">海蓝</view>
    </view>
  </view>
</view>

setup.js

data: {
  theme: 1,
},
onLoad(options) {
  this.setData({
    theme: app.globalData.theme,
  })
},
// 主题切换（逸曦穆泽）
themeTab(e){
  let num = parseInt(e.currentTarget.dataset.num);
  this.setData({theme: num});
  app.globalData.theme = num;   // 全局更新
  this.getTabBar().watchBack(); // （逸曦穆泽）调用自定义 tabbar 的方法
  // 保存到本地
  wx.setStorage({
    key: "themeSkin",
    data: num,
  })
},

setup.wxss（页面引入主题文件）

/* pages/setup/setup.wxss */
/* @import "/static/theme.wxss"; */
@import "./../common/theme.wxss";
.item{width:80%;margin: auto;margin-top: 30px;}
.flex{display: flex;justify-content: space-around;}
.theme_tle{font-size: 20px;color:#6c7a92;margin-bottom: 15px;}
.theme_tab{display: inline-block;padding: 12px 16px;border-radius: 8px;transition: all .5s ease-in-out;}

3、动态设置tabBar

// （逸曦穆泽）custom-tab-bar/index.js
const app = getApp();
let themeColor = ["#515151","#515151","#000"];
let themeActiveColor = ["#94AC56","#94AC56","#185F95"];
Component({
  data: {
    theme: 1,
    selected: 1,
    color: "#515151",
    selectedColor: "#94AC56",
    list: [{
      "pagePath": "/pages/home/home",
      "iconPath": "/static/image/nav_home.png",
      "selectedIconPath": "/static/image/v1/nav_home.png",
      "text": "首页"
    },{
      "pagePath": "/pages/setup/setup",
      "iconPath": "/static/image/nav_setup.png",
      "selectedIconPath": "/static/image/v1/nav_setup.png",
      "text": "设置"
    }],
  },
  methods: {
    // （逸曦穆泽）监听并回调
    watchBack() {
      var that = this;
      let num = app.globalData.theme;
      let listUpd = [{
        "pagePath": "/pages/home/home",
        "iconPath": "/static/image/nav_home.png",
        "selectedIconPath": "/static/image/v"+num+"/nav_home.png",
        "text": "首页"
      },{
        "pagePath": "/pages/setup/setup",
        "iconPath": "/static/image/nav_setup.png",
        "selectedIconPath": "/static/image/v"+num+"/nav_setup.png",
        "text": "设置"
      }];
      that.setData({
        theme: num,
        color: themeColor[num],
        selectedColor: themeActiveColor[num],
        list: listUpd,
      })
    },
    switchTab(e){
      var that = this;
      const data = e.currentTarget.dataset;
      const url = data.url;
      wx.switchTab({ url });
      that.setData({
        selected: data.index
      });
    }
  },
})

.wxml

<view class="tabbar theme_v{{theme}}"> ... </view>

说简单呢，其实也很简单，只是使用了主题样式文件中的类层级样式，js 控制了 theme 参数；

难点在于 tabbar 的切换，怎么调用？肯定是调用 custom-tab-bar/index.js 下的方法，获取全局主题参数设置进去；还有一个主题回显的问题，可以自己去实现，这个也很简单，当然，实在需要的话去下面留言即可。

效果图就不贴了，这个涉及公司与客户的东西！

我的代码：https://gitee.com/happyacomma/music_theme

参考文章：

微信小程序动态设置tab-bar_今晚吃火锅耶的博客-CSDN博客_微信小程序动态tabbar