萤火小程序商城修改页面顶部背景色及字体颜色的方法

修改个人中心页面顶部背景色及字体颜色

修改页面配置文件

修改前端个人中心页面配置文件，文件路径：pages/user/index.json，navigationBarTitleText为顶部标题，navigationBarBackgroundColor为顶部背景颜色，navigationBarTextStyle为顶部字体颜色。需要注意的是顶部字体颜色的值只能是“write”或“black”。根据需要修改为自己中意的颜色。

{
"navigationBarTitleText": "个人中心",
"navigationBarBackgroundColor":"#ffdd00",
"navigationBarTextStyle": "black"
}

修改页面样式文件

修改前端页面样式文件，文件路径：pages/user/index.wxss，其中background-color 项为背景颜色，可根据需要修改，如果要修改文字颜色，可以添加color项。

.user-header {
display: flex;
padding-top: 1px;
width: 100%;
height: 310rpx;
align-content: center;
background-color: #fd0;
background-repeat: no-repeat;
background-position: center right;
background-size: auto 100%;
}

修改全部分类页面顶部背景色及字体颜色

修改前端页面配置文件，文件路径pages/category/index.json，打开文件后添加”navigationBarBackgroundColor”:”#ffdd00″和”navigationBarTextStyle”: “black”两行代码，根据自己的需要修改颜色即可。

{
"navigationBarTitleText": "全部分类",
"navigationBarBackgroundColor":"#ffdd00",
"navigationBarTextStyle": "black"
}

修改购物车页面顶部背景色及字体颜色

修改前端页面配置文件，文件路径pages/flow/index.json，打开文件后添加”navigationBarBackgroundColor”:”#ffdd00″和”navigationBarTextStyle”: “black”两行代码，根据自己的需要修改颜色即可。

{
"navigationBarTitleText": "购物车",
"navigationBarBackgroundColor":"#ffdd00",
"navigationBarTextStyle": "black"
}

通过上述修改可以发现，单独定义页面顶部标题、背景颜色、字体颜色都在配置文件里面修改，小程序前端的配置文件是json的后缀，前端页面的样式文件后缀为wxss。