【相关学习推荐：小程序学习教程】
介绍一下在 wxss 中我们 rpx 的应用以及我们对于小程序全局样式以及局部样式的配置，然后我们将详细介绍如何配置我们的 window 导航栏。
【资料图】
关于 rpx 介绍
特别的在我们微信小程序开发中，我们前面提到过推荐使用 iPhone 6 进行开发，因为 iPhone 的 px =375，那么我们 2 rpx= 1 px
关于全局配置和局部配置
一、全局配置的常用配置项
老规矩先用表格展示一下。
| 配置项名称 | 作用 |
|---|---|
| pages | 存放当前小程序所有页面的存放路径 |
| window | 设置小程序窗口的外观 |
| tabBar | 设置小程序底部的 tabBar 效果 |
| style | 是否启用新版的组件的选项 |
pages 我们前面也介绍过，我们当时为了显示我们 list 页面，我们将 pages 的第一条路径改为我们 list 的路径，然后我们的微信小程序的页面就是显示我们的 list 的内容了
window 和 tabBar 我们接下来看一幅图篇，他介绍了我们这几个配置所所用的区域
style 咱们前面在介绍 button 的时候也带大家看过，当我们将 style 删去时，我们的组件样式就变为老版本的
作用图解
二 、window 导航栏
| 属性名 | 类型 | 默认值 | 作用 |
|---|---|---|---|
| navigationBarTitleText | string | 字字符串 | 导航栏标题内容 |
| navigationBarBackgroundColor | Hexcolor | #000000 | 设置导航栏背景颜色（比如荧黄色 #ffa） |
| navigationBarTextStyle | string | white | 设置导航栏标题的颜色（仅含有黑色和白色） |
| backgroundColor | Hexcolor | #ffffff | 窗口的背景颜色 |
| backgroundTextStyle | string | dark | 设置下拉 loading 的样式 仅支持 dark/light |
| enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
| onReachBottomDistance | Number | 50 | 页面上拉触底事件触发阈值（距页面底部距离 单位为 px） |
我们所有的上述设置都是在 app.json 内的 window 里面进行设置！！！接下来我演示一下 navigationBarTitleText 和 下拉相关属性 ，剩下的配置项大家可以自行尝试！
2.1 navigationBarTitleText 配置项
话不多说开始操作！
打开 app.json ，找到 window
在 window 中我们可以看到下面默认的配置项目
"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" },登录后复制我们可以看到第三行的 navigationBarTitleText 即为我们的导航栏标题内容的配置，默认为 Weixin ，比如我更改为 “皮皮的小屋”
"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "皮皮的小屋", "navigationBarTextStyle":"black" },登录后复制效果展示：
2.2 下拉刷新的配置
首先打开 app.json 进入 window 配置，打开下拉功能
"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#ffa", "navigationBarTitleText": "皮皮的小屋", "navigationBarTextStyle":"black", "enablePullDownRefresh": true },登录后复制在最后一行我们将 enablePullDownRefresh 设置为 true 即可
效果展示：
至此我们对于这些配置就进行了简单的介绍，我们在自行尝试这些配置项的时候需要注意的就是我们 onReachBottomDistance ，他的上拉触底的意思就是我们平时刷购物平台的时候，当我们刷新到离底部一定距离的时候，页面会自动刷新下面的数据，我们就是通过 onReachBottomDistance 设置自动刷新的位置
【相关学习推荐：小程序学习教程】
以上就是微信小程序window导航栏配置（实例详解）的详细内容，更多请关注php中文网其它相关文章！
