小程序的状态栏、导航条、标题、窗口背景色的设置

小程序的状态栏、导航条、标题、窗口背景色的设置

关于小程序导航顶部配置都写在.json文件中。

相关属性及属性值

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如"#000000"
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持black/white
navigationBarTitleText	String		导航栏标题文字内容
navigationStyle	String	default	导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮 微信版本	6.6.0
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉背景字体、loading 图的样式，仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面相关事件处理函数
onReachBottomDistance	Number	50

注意：
1.HexColor（十六进制颜色值），如"#ff00ff"
2.关于navigationStyle

客户端 7.0.0 以下版本，navigationStyle 只在 app.json 中生效。
客户端 6.7.2 版本开始，navigationStyle: custom 对 web-view 组件无效
开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用）可方便切到旧视觉
3.关于navigationBarTextStyle

导航栏标题颜色仅支持black/white

代码展示

在app.json中写如下代码：

"window": {
    "backgroundTextStyle": "light",
    "backgroundColor":"#cccccc",
    "navigationBarBackgroundColor": "#ff9700",
    "navigationBarTitleText": "小程序",
    "navigationBarTextStyle": "white"
  }

注意：
当我们设置 backgroundColor 时，实际在电脑的模拟器中根本看不到效果。这是因为 backgroundColor 指的窗体背景颜色，而不是页面的背景颜色，即窗体下拉刷新或上拉加载时露出的背景。在电脑的模拟器中是看不到这个动作的，所以会让人误以为这个配置是无效的。如果要设置页面背景颜色，得在 wxss 中自定义样式，如下：

page {
    background-color: #cccccc;
}

效果图