支付宝小程序顶部透明导航栏配置

实现目标

最近在实现一个支付宝小程序，要实现首页部分tab和部分页面的顶部导航栏透明，不显示标题，使用背景图延伸到状态栏。如下图所示：

错误做法

首先根据官方文档，可以在根目录下的app.json文件中配置window属性transparentTitle，来实现该效果，该属性有三个值：none默认值，表示导航栏一直显示，auto导航栏滑动自适应，always导航栏一直不显示，我们设置为一直不现实，配置如图：
配置内容如下：

{
  "pages": [
    "pages/tabBar/user/user",
    "pages/tabBar/index/index",
    "pages/tabBar/user/user",
    "pages/user/about/about"
  ],
  "window": {
    "defaultTitle": "小程序",
    "allowsBounceVertical":"YES",
    "transparentTitle":"always"
  }
}

后面再在页面配置的*.json文件里面再复制windows下面的内容，并修改transparentTitle值为none，发现没效果。一直没有导航栏，配置如下：

正确做法

后面仔细阅读官方文档，才发现页面配置不需要再写window这个键，应直接配置属性值，
所以正确的页面配置应如下图所示：

配置内容如下：

{
  "defaultTitle":"关于我们",
  "transparentTitle": "auto"
}

这样才能使页面配置的window属性覆盖全局配置，而全局配置可以根据自己应用页面情况选择默认属性值。

总结

• 全局window配置需要添加window键，页面配置不需要添加window键，直接配置window属性，否则配置无效
• 其他与window相关的属性配置同理
  最后总结：（重要的事儿说三遍）看文档一定要仔细！！！看文档一定要仔细！！！看文档一定要仔细！！！