原生小程序根据主题色动态配置导航栏颜色-CSDN博客

本文链接：https://blog.csdn.net/ddsuuny/article/details/147469494

1、前言

我的项目是三个小程序，功能相同，但是主题色不同，考虑用一到代码通过控制小程序类型来切换主题色。

我们都知道在小程序app.json文件中，“window”:{navigationBarColor:“#ffffff”}，可以配置小程序的导航栏颜色，在每个页面的index.json文件中navigationBarColor可以单独控制每个小程序的导航栏颜色，但是这两个文件都是静态的，不可动态修改

下面将介绍我是如何做到动态控制的

2、首先app.json和单个页面index.json中的navigationBarColor去掉，在utils文件夹中创建config.js

/**小程序类型
 * 1：zhongyu  中宇
 * 2：ntx 暖天下
 * 3：floorheating 极地阳光
 */
const APPTYPE = 2
// 主题颜色
const themeColorMap = {
  1: '#15c5bb',
  2: '#de5c3f',
  3: '#5091D3'
}
module.exports = {
  themeColor: themeColorMap[APPTYPE], // 小程序类型
}

2、在每个页面中的index.js中，使用 wx.setNavigationBarColor动态设置导航栏颜色，注意：frontColor一定要写，不然会不生效

import {themeColor} from '../../utils/config'
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 根据主题色设置导航栏颜色
    wx.setNavigationBarColor({
      backgroundColor: themeColor,
      frontColor: '#ffffff',
      animation: {
        duration: 0
      }
    })
  },