小程序切换主题配色

版权声明：署名-非商业性使用 转载请保留原文链接及作者。 https://blog.csdn.net/qq_40413396/article/details/85054974

相信大家一定会遇到小程序的主题配色问题，今天分享的内容主要就是如何根据自己的配置切换主题配色配图

1、确定好需要修改的部分，配置主题

  // 可以配置在app.js里面  也可以配置在外层框架 在这里我是配置在app.js然后全局储存了
  globalData: {
    userInfo: null,
    // 主题配色配置
    theme:{
      //顶部配色
      navigationBarColor:"#df4ecd",
      //图标配色
      images:[
        "../../images/addShop.png",
        "../../images/yuyue.png"
      ],
      // body 中含有亮粉的字体配色 ex: 产品活动价格 98
      bodyFontColor:"#df4ecd",
      // 各个栏目标题配色 ex: 活动产品 人员推荐 等
      titleColor:"#e67dd8"
    }
  }

现在主题配置一目了然，然后进行数据绑定，可以通过修改如上配置进行全局的主题修改

2、修改顶部主题NavigationBarColor配色

wx.setNavigationBarColor

    wx.setNavigationBarColor({
      frontColor: '#ffffff', // 必写项
      backgroundColor: app.globalData.theme.navigationBarColor, // 必写项  对应如上配置
      animation: { // 可选项
        duration: 400,
        timingFunc: 'easeIn'
      }
    })

3、绑定page中各个需要变化的

*在这里我做了 图片的切换 文字字体颜色的切换 *

//page js 的配置
Page({
  data: {
    addImg:app.globalData.theme.images[0],
    yyImg: app.globalData.theme.images[1],
    fontColor: app.globalData.theme.bodyFontColor,
    titleColor: app.globalData.theme.titleColor
  }

//wxml 的绑定
<view class='tabHeaderLine' style='background:{{fontColor}}'></view>
<text style='color:{{titleColor}}'>优惠券领取</text>
<image class='addShop' src='{{addImg}}' />
<image class='yuyue' src='{{yyImg}}' />

*** 绑定之后 就可以试一下了 修改最上面的配置进行小程序的主题配色替换吧 ***

*** 哦 对了 如果有需要替换tabBar的配色的 可以根据小程序官方API就行替换 很详细的 ***