微信小程序app.json设置导航栏背景颜色（navigationBarBackgroundColor）无效问题定位过程

已于 2024-03-31 18:43:22 修改
阅读量1k 收藏 4
点赞数 11
文章标签： 微信小程序
于 2024-03-31 18:41:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/137205931
版权

如下图，今天我在小程序的app.json文件中设置"navigationBarBackgroundColor": “#2b3b4b”，想改变导航栏的背景颜色的，但不生效：
在这里插入图片描述

于是，我重新创建了另外一个小程序，在app.json文件中设置"navigationBarBackgroundColor": “#ff0000”，是可以生效的：
在这里插入图片描述

于是可以断定，是我的小程序哪个方面的问题，不是微信开发者工具的问题。我在app.json文件的pages列表中，删除第一个页面，导航栏的背景色修改生效了：
在这里插入图片描述

在这里插入图片描述

于是断定，是pages/index/index这个页面哪个地方有问题，才导致app.json文件修改导航栏背景颜色不生效。检查index.json，发现自己不知道什么时候在里边写了"navigationBarBackgroundColor": "#00ff00"这条语句，导致全局修改不生效：
在这里插入图片描述

于是把查index.json文件中的"navigationBarBackgroundColor": "#00ff00"这条语句去掉，在app.json设置导航栏背景颜色（navigationBarBackgroundColor）就可以生效了：
在这里插入图片描述

听海边涛声
关注
用Hbuilder编写微信小程序的backgroundColor属性不生效？
m0_58714074的博客
04-04 1099
在Hbuilder的pages.json中的字段写如下代码，但打开小程序页面，背景颜色仍然是白色，并没有改变，这是为什么呢？写在指定页面的"style"字段也是没有用的！！具体原因是因为指的窗体背景颜色，而不是页面的背景颜色，即窗体下拉刷新或上拉加载时露出的背景。在电脑的模拟器中是看不到这个动作的，所以会让人误以为这个配置是无效的。
微信小程序 设置 backgroundColor 无效的问题
weixin_45173576的博客
04-02 4253
当我们在小程序中设置backgroundColor 时，没有效果，页面还是白色，因为backgroundColor 指的是窗体背景颜色而不是页面背景颜色 { "usingComponents": {}, "backgroundColor": "#eb631d", "enablePullDownRefresh": true } backgroundColor 窗体下拉刷新或上拉加载时露出的背景???? 如果要设置页面背景颜色，得在 wxss 中自定义样式，如下： page { backg
微信开发者工具怎么修改导航栏颜色
m0_51519738的博客
01-03 612
改了这个--weui-FG-0 但是没有任何反应，不知道为什么 最新消息---已找到解决办法
微信小程序app.json
2303_77164348的博客
06-21 368
信小程序中的app.json是一个重要的配置文件，用于定义小程序的全局配置。
微信小程序设置页面背景颜色backgroundColor 无效的问题！
前端很杂，故名前端杂货铺 —— coderkey
08-20 6448
（1）原因： 当我们在微信小程序 json 中设置 backgroundColor 时，实际在电脑的模拟器中根本看不到效果。 （2）分析： 这是因为 backgroundColor 指的窗体背景颜色，而不是页面的背景颜色，即窗体下拉刷新或上拉加载时露出的背景。在电脑的模拟器中是看不到这个动作的，所以会让人误以为这个配置是无效的。 （3）解决方案： 如果要设置页面背景颜色，得在 wxss 文件中自定义样式，如下： // .wxss page { background-color: #ededed; }
微信小程序开发中遇上的那些事
前端公虾米
02-02 202
1、app.json配置文件中设置窗口的背景颜色backgroundColor不生效的解决方案： 通过官方文档来看 { "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信
微信小程序--动态设置导航栏颜色 (navigationBarBackgroundColor)
qq_36770411的博客
09-07 6281
如果导航栏被隐藏或者页面没有设置导航栏，设置导航栏颜色将会失败。如果尝试了以上方法仍然无法解决问题，建议检查微信小程序开发工具的版本，确保使用的是最新稳定版，或者尝试重启开发工具和手机。检查是否有其他代码逻辑或插件影响了导航栏的设置。可能存在其他代码或插件对导航栏进行了修改或覆盖导致设置失败。确保使用有效的十六进制颜色值或颜色名称，并且以字符串形式传入。中调用，或者在需要设置导航栏颜色的事件触发时调用。来启用原生导航栏样式，并获得设置导航栏颜色的权限。检查是否有权限设置导航栏颜色。文件中，可以通过设置。
uni-app 设置 navigationBarBackgroundColor 不生效
辽辽无期的博客
12-22 1533
原因可能以下几种情况。
uniapp 微信小程序 navigationBarBackgroundColor 标题栏颜色渐变
maoge_666的博客
07-26 9316
uniapp 微信小程序 navigationBarBackgroundColor 标题栏颜色渐变
微信小程序设置backgroundColor无效
qq_43480830的博客
09-23 1248
微信小程序设置backgroundColor无效
微信开发者工具 在全局配置app.json中设置navigationBarBackgroundColor不生效的问题
最新发布
qq_42972098的博客
08-10 186
把navigationStyle设置为default（原来可能是custom），然后把下方的"renderer": "skyline"改为"renderer": "webview"后保存代码即可。问题：在全局配置app.json中设置了navigationBarBackgroundColor的16进制色值保存后，模拟器并没有让导航栏显示为黑色。
微信小程序-页面配置-顶部导航栏背景色渐变
11-29
自定义tabBar页面的顶部导航栏，并保持导航栏的风格与其他tabBar页面导航栏风格统一，也就是导航栏标题文字排版统一。
2.微信小程序app.json 以及app.js使用配置_APP_微信小程序_
10-01
在微信小程序的开发过程中，`app.json` 和 `app.js` 是两个至关重要的核心配置文件，它们分别负责全局配置和应用程序逻辑控制。 `app.json` 文件是微信小程序的全局配置文件，它定义了小程序的整体结构和一些全局...
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
10-16
本篇文章将详细介绍如何实现微信小程序自定义头部导航栏和导航栏背景图片，以及处理与`navigationStyle`相关的技术问题。 首先，微信小程序提供了`navigationStyle`属性，允许开发者禁用默认的导航栏并自定义样式。...
微信小程序app.json文件常用配置说明
厦门在乎科技
07-09 1959
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 JOSN文件不允许注释，下面为了学习加上注释，粘贴需要的片段去掉注释即可。小程序定义color建议使用16进制颜色 1. pages定义页面路径列表 "pages": [ "pages/news/news", "pages/index/index", "pages/movie/movie", "pages/logs/logs"
微信小程序app.json全局配置
qq_44154912的博客
12-25 951
微信小程序app.json全局配置app.json文件 由于毕业设计是微信小程序,所以最近开始学习小程序,现在记录一下自己的学习心得 项目文件目录 image pages #存放页面 cook #cook页面 cook.js #cook页面的JavaScript文件 cook.json #cook页面的json配置文件 cook.wxml #cook页面的页面文件,类似于html cook.wxss
微信小程序全局配置参数详解app.json
m0_58859743的博客
06-12 5337
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。
小程序 自定义navigationBar的背景颜色
xx2410653967的博客
12-21 741
看需求： 小程序导航栏要求该背景，不是换个颜色就能改变的
微信小程序自定义导航栏单独设置某些页面胶囊背景色，微信小程序setNavigationBarColor无效，微信小程序更改右上角按钮背景色
01-05 6964
前言 我们的小程序导航栏全局用的自定义导航，其中某两个页面的导航栏要有那种科技范儿，将导航栏背景设置成了透明背景，这样导航栏的背景色就跟着页面的背景走了，但是就是右上角的胶囊颜色不跟着变，用微信小程序提供的接口 wx.setNavigationBarColor 设置也不管用，无效，看图： 看配置和代码： 下图这个背景只适用于我们的自定义导航背景，是透明的 下图这个设置是微信小程序自己的接口，最终效果就是上方的白色的胶囊，太…太突兀以及太丑了 正解： 这个好像是之前看手册的时候上边说如果设置成了自定义的
微信小程序导航栏背景颜色渐变怎么实现
07-22
在微信小程序中实现导航栏背景颜色的渐变效果，可以使用小程序的自定义导航栏功能和 CSS 的渐变属性。以下是一种实现方式： 1. 在小程序的 `app.json` 文件中，设置 `"navigationStyle": "custom"`，以启用自定义导航栏。 2. 在页面的 `.json` 文件中，添加自定义导航栏的配置，例如： ```json { "navigationStyle": "custom" } ``` 3. 在页面的 `.wxml` 文件中，创建一个容器元素作为导航栏，并设置相应的样式和渐变属性。例如： ```html <view class="navbar" style="background: linear-gradient(to right, #color1, #color2);"> <!-- 导航栏内容 --> </view> ``` 这里的 `.navbar` 是你自定义的导航栏类名，你可以根据需要自行定义样式。 4. 在页面的 `.wxss` 文件中，为导航栏类名 `.navbar` 添加相应的样式。例如： ```css .navbar { height: 44px; /* 导航栏高度 */ color: #fff; /* 导航栏文字颜色 */ /* 其他样式 */ } ``` 通过以上步骤，你可以在微信小程序中实现导航栏背景颜色的渐变效果。记得根据你的需要调整渐变的颜色和方向，并根据设计要求设置导航栏的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值