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

最新推荐文章于 2024-09-02 12:42:48 发布

wyk5939

最新推荐文章于 2024-09-02 12:42:48 发布

阅读量1.9k

点赞数 1

文章标签：微信小程序小程序 css

本文链接：https://blog.csdn.net/m0_73526957/article/details/131716393

版权

本文介绍了如何通过JavaScript控制变量来调整颜色值，并应用到CSS中实现全局主题颜色的切换。在userStyle.js中定义了style1和style2来存储颜色，然后在不同场景下引用这些颜色，如页面背景、文本颜色和tabBar文字颜色。通过更改userStyle.js中的color变量，可以动态地改变主题颜色。此外，还可以结合网络请求和后端数据来实现更复杂的颜色切换逻辑。

摘要由CSDN通过智能技术生成

此功能使用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
}    //分别导出  页面引入时需{}解构

效果。