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

谁践踏了优雅 2023-02-25 11:25 2阅读 0赞

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

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

#### 相关属性及属性值 ####

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

注意：  
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;
    }

#### 效果图 ####

![img][]

[img]: /images/20230209/be589f67da61405590cef3ba99010e1e.png