微信小程序自定义主题颜色【状态栏tab样式同步更改】

 此功能使用js控制变量 调整颜色值，赋值给css颜色达到切换自定义颜色效果

1.创建公共样式userStyle.js文件，通过定义style1和style2来控制全局颜色改变。

注意：颜色值务必为十六进制，避免API不兼容颜色

// userStyle.js

let style1="#17d56b"  //绿色
let style2="#fb1238"  //红色

let color=style1  //绑定公共样式的变量

export const userColor = {
  homeColor:
  '--textColor:'+color+';' +
  '--textColor1:'+color+';'
  ,
  ztlStyle:color
}    //分别导出  页面引入时需{}解构


//--textColor 必须为--开头，否则不可使用

2.在index.js中引入userColor并放入data中。

打印userColor    

// index.js
import {userColor} from '../../utils/userStyle'

Page({

  data: {
    userColor:userColor,  //打印输出 {homeColor: "--textColor:#17d56b;-- 
     //textColor1:#17d56b;", ztlStyle: "#17d56b"}
   },

  //生命周期回调—监听页面初次渲染完成
  onReady(){

    //设置页面导航条颜色
    wx.setNavigationBarColor({    
      frontColor: '#ffffff', // 不可为空   前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 
    //#ffffff 和 #000000
      backgroundColor: userColor.ztlStyle, // 不可为空  背景颜色值，有效值为十六进制颜色
    })

  }
})

3.index.wxml中将变量放入Style中。 style="{{userColor.homeColor}}"，把变量绑定到了页面顶级元素上。

<!--index.wxml-->

<view class="container" style="{{userColor.homeColor}}">
  <view class="userinfo">liberty </view>
  <view class="usermotto">holle word</view>
</view>

4./**index.wxss**/     将--textColor

/**index.wxss**/

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color:var(--textColor);  //绑定自定义的颜色
}

.usermotto {
  color:var(--textColor);  //绑定自定义的颜色
  margin-top: 200px;
}

5.app.js   这一步用于更改tabbar文字颜色  通过调用微信官方API   wx.setTabBarStyle 实现

// app.js
import {userColor} from './utils/userStyle'

App({
  onLaunch() {   //加载完成小程序只会执行一次

    wx.setTabBarStyle({
      color: userColor.ztlStyle,   //tab 上的文字默认颜色，HexColor
      selectedColor: '#00FF00',   //tab 上的文字选中时的颜色，HexColor
      // backgroundColor: '#0000FF',  //tab的背景颜色,HexColor
      borderStyle: 'white'     //tabBar上边框的颜色， 仅支持 black/white
    })

  }
 })

效果。

更改主题颜色     由style1  变为  style2 

// userStyle.js

let style1="#17d56b"  //绿色
let style2="#fb1238"  //红色
 
let color=style2  //绑定公共样式的变量  由style1  变为  style2    

export const userColor = {
  homeColor:
  '--textColor:'+color+';' +
  '--textColor1:'+color+';'
  ,
  ztlStyle:color
}    //分别导出  页面引入时需{}解构

效果。

!!!

动态切换可以在 userStyle.js 中添加网络请求，通过判断后台返回的用户类型切换不同的颜色，或直接后端返回颜色值