示例效果：
功能点分析：
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',
})
},
});