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

这篇具有很好参考价值的文章主要介绍了微信小程序自定义主题颜色【状态栏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
}    //分别导出  页面引入时需{}解构

效果。