以前开发微信小程序的时候,只知道顶部导航栏(navigationBar)只能通过配置项配置纯色的背景颜色。前两天看别的小程序,发现他们居然能自定义顶部导航栏(navigationBar)的背景图片,百度了一下,发现微信官方在2018年1月3日新增配置 window.navigationStyle
支持全屏显示小程序,具体如下:
属性 | 类型 | 默认值 | 描述 | 最低版本 |
---|---|---|---|---|
navigationStyle | string | default | 导航栏样式,仅支持以下值:default 默认样式custom 自定义导航栏,只保留右上角胶囊按钮。 | iOS/Android 微信客户端 7.0.0,Windows 微信客户端不支持 |
在项目的 app.json 中的 window 配置项中加入下面的配置项即可。
"navigationStyle": "custom"
配置完成后,微信小程序会全屏显示,顶部的导航栏只留右上角胶囊按钮,因此页面的背景图片就可以贴顶显示了。

该配置项也可以被特定页面的配置覆盖,具体参见:微信小程序不同页面设置不同的顶部导航栏(名称、背景色、文本颜色等)方法