微信小程序 切换主题色

项目的需求是: 根据后台返回的配色信息,前端根据返回配色信息进行配色全局引用到小程序
百度和Google查了一番,都只查到用添加类的方式,但是不满足需求,因为类里面的颜色都是写死的,我是想要样式动态,最后无奈想到全局变量的方式解决切换主题

具体实现:(在app.js文件中将小程序主题加载完成)

1.png

2.png

3.png

4.png

改变tabbar(我这里只改的图标颜色,如需改变背景色,可添加修改背景样式进行修改)

// tabbar配置
    wx.setTabBarStyle({
      color: '#999999',
      selectedColor: this.globalData.skinBg1,
      backgroundColor: '#ffffff',
      borderStyle: 'white'
    });
// 高亮图标
      wx.setTabBarItem({
        index: 0, //index是指tabbar的下标
        selectedIconPath: '/images/0.png',//需要更换的高亮图标路径,注意是绝对路径(默认图标和颜色 我都是用的灰色)
      });

页面实现改变主题色:

.js文件中
1. data中添加变量  
skin : getApp().globalData.skinBg1
2. onLoad 或者 onShow 声明周期里首先执行(目的是将微信小程序导航栏变成主题色):
getApp().globalData.setBgColor(getApp().globalData.skinBg1)
//getApp().globalData.skinBg1 这是主题颜色(全局变量),不懂仔细看看前面
//getApp().globalData.setBgColor() 这个是改变导航栏主题色方法
.wxml文件
添加行内样式 style="background:{{skin}};color:{{skin}};border-color:{{skin}}"
//根据需求添加某个样式
如果遇到这种的情况,这样处理
 推荐 
//点击推荐后,高亮显示推荐(用主题色高亮显示) 

组件中实现改变主题色:(大致都是一样的处理方式)

![image.png](https://upload-images.jianshu.io/upload_images/13835033-77d2e7c94c8a7975.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

总结: 这种方法虽可以改变主题,但是也是有缺陷,比如每个页面去添加行内样式和每个页面去改变导航栏主题色,都是比较繁琐和麻烦的,而且页面改变导航栏主题色的时候,会有瞬间闪屏(真机上展示效果比编辑器好多了,所以闪屏问题还算能接受),但最后实现了项目需求,也还不错.如你有更好的的方式方法,请留言告知,相互学习才能更快进步.