微信小程序-如何自定义导航栏?navigationStyle?

小程序是越来越开放了,微信版本 6.6.0可以自定义导航?

先了解下app.json中window配置navigationStyle属性,即导航栏样式,仅支持 default/custom。custom 模式可自定义导航栏,只保留右上角胶囊状的按钮

"window":{
    "navigationBarTitleText": "test",
    "navigationBarTextStyle": "black",
    "navigationBarBackgroundColor": "#aa154e",
    "enablePullDownRefresh": true,
    "backgroundColor": "#aa154e",
    "backgroundTextStyle": "dark",
    "onReachBottomDistance":15,
    "navigationStyle": "custom"
  }

如果设置了"navigationStyle": "custom",则在真机上"navigationBarTitleText": "test"是不起作用的,并且小程序是全屏展示的,因此除了右上角胶囊状的按钮,导航栏处我们可以自由发挥