小程式切換主題配色

相信大家一定會遇到小程式的主題配色問題，今天分享的內容主要就是如何根據自己的配置切換主題配色配圖

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就行替換 很詳細的 ***