小程序切换主题配色

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

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就行替换 很详细的