uni-app pages.json中globalStyle的navigationBarBackgroundColor配置颜色打包app不生效

uni-app pages.json中globalStyle的navigationBarBackgroundColor配置颜色打包app不生效

项目信息 详情
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 win10
HBuilderX类型 正式
HBuilderX版本 3.1.3
手机系统 Android
手机系统版本 Android 10
手机厂商 小米
手机机型 小米9pro
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX
App下载地址 https://makeup.yashanyun.com/static/uploadfile/file/2021-02-24/6035ae8b3630b.apk

示例代码：

"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#fff",
"backgroundColor": "#fff"
},

操作步骤：

"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#fff",
"backgroundColor": "#fff"
},

预期结果：

"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#fff",
"backgroundColor": "#fff"
},

实际结果：

"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#fff",
"backgroundColor": "#fff"
},

bug描述：

pages.json中globalStyle里面的navigationBarBackgroundColor配置颜色打包app不生效


更多关于uni-app pages.json中globalStyle的navigationBarBackgroundColor配置颜色打包app不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

测试了几遍，好像是app端颜色值现在不支持缩写了，要写6位如：#ffffff，不能缩写成#fff

更多关于uni-app pages.json中globalStyle的navigationBarBackgroundColor配置颜色打包app不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app在Android平台上的问题。navigationBarBackgroundColor在App端需要通过原生导航栏配置来生效，而不仅仅是pages.json中的设置。

解决方案：

  1. 在manifest.json中添加以下配置：
"app-plus": {
    "titleNView": {
        "backgroundColor": "#fff"
    }
}
  1. 或者使用条件编译针对不同平台处理：
"globalStyle": {
    // H5和小程序配置
    "navigationBarBackgroundColor": "#fff",
    // App端配置
    "app-plus": {
        "titleNView": {
            "backgroundColor": "#fff"
        }
    }
}
回到顶部