---

---

前言

开发公司对于目前形式，开发公司微信小程序是一个热门，开发公司那么我们该如何去学习开发公司并且掌握之后去做实际项目呢？
开发公司为此我特意开设此专栏，开发公司在我学习的同时也将其开发公司分享给大家！

开发公司本篇文章首先介绍一下在 中我们 rpx 开发公司的应用以及我们对于小开发公司程序全局样式以及局部开发公司样式的配置，开发公司然后我们将详细介绍如开发公司何配置我们的 window 导航栏。

• 关于 介绍

  1. 开发公司我们在之前进行 HTML 开发公司学习中了解过 px（分辨率）这一个单位，在我们设置组件经常用到，那么在微信小程序中我们用的分辨单位是什么呢？那就是 rpx ，那么他有什么特别的呢，值得专门设置它？

  2. rpx 是微信小程序特有的，解决屏幕自适应的尺寸单位，可以根据屏幕宽度进行自适应,不论大小屏幕,规定屏幕宽为750rpx 通过rpx 设置元素和字体的大小,小程序在不同尺寸的屏幕下,可以实现自动适配 rpx 和 px之间的换算

  特别的在我们微信小程序开发中，我们前面提到过推荐使用 iPhone 6 进行开发，因为 iPhone 的 px =375，那么我们 2 rpx= 1 px

• 关于全局配置和局部配置

  关于全局配置和局部配置我们前面也是以及介绍完毕，感兴趣的小伙伴可以前面考古一下！下面我会专门讲一下在 全局配置中常用的配置项！

如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！

---

一、全局配置的常用配置项

老规矩先用表格展示一下。

• pages 我们前面也介绍过，我们当时为了显示我们 list 页面，我们将 pages 的第一条路径改为我们 list 的路径，然后我们的微信小程序的页面就是显示我们的 list 的内容了

• window 和 tabBar 我们接下来看一幅图篇，他介绍了我们这几个配置所所用的区域

• style 咱们前面在介绍 button 的时候也带大家看过，当我们将 style 删去时，我们的组件样式就变为老版本的

• 作用图解

话不多说，下面我们就来进入我们的导航栏目的讲解！

---

二 、window 导航栏

我们 window 导航栏的设置包括了我们前面图片展示的前两个区域，我们接下来先介绍一下我们 window 节点常见的配置项。

我们所有的上述设置都是在 app.json 内的 window 里面进行设置！！！接下来我演示一下 navigationBarTitleText 和 下拉相关属性 ，剩下的配置项大家可以自行尝试！

2.1 navigationBarTitleText 配置项

话不多说开始操作！

• 打开 app.json ，找到 window

• 在 window 中我们可以看到下面默认的配置项目

    "window":{  "backgroundTextStyle":"light",  "navigationBarBackgroundColor": "#fff",  "navigationBarTitleText": "Weixin",  "navigationBarTextStyle":"black" },
  1
  2
  3
  4
  5
  6

• 我们可以看到第三行的 navigationBarTitleText 即为我们的导航栏标题内容的配置，默认为 Weixin ，比如我更改为 “皮皮的小屋”

  "window":{  "backgroundTextStyle":"light",  "navigationBarBackgroundColor": "#fff",  "navigationBarTitleText": "皮皮的小屋",  "navigationBarTextStyle":"black" },
  1
  2
  3
  4
  5
  6

• 效果展示：

2.2 下拉刷新的配置

关于下拉刷新我相信大家一定经常使用，比如我们使用手机时卡顿了，那么我们习惯性动作就是向下拉动屏幕，这样我们的页面就会重新加载，那么我们如何实现功能呢？

• 首先打开 app.json 进入 window 配置，打开下拉功能

    "window":{  "backgroundTextStyle":"light",  "navigationBarBackgroundColor": "#ffa",  "navigationBarTitleText": "皮皮的小屋",  "navigationBarTextStyle":"black",  "enablePullDownRefresh": true },
  1
  2
  3
  4
  5
  6
  7

• 在最后一行我们将 enablePullDownRefresh 设置为 true 即可

• 效果展示：

至此我们对于这些配置就进行了简单的介绍，我们在自行尝试这些配置项的时候需要注意的就是我们 onReachBottomDistance ，他的上拉触底的意思就是我们平时刷购物平台的时候，当我们刷新到离底部一定距离的时候，页面会自动刷新下面的数据，我们就是通过 onReachBottomDistance 设置自动刷新的位置

---

总结

大家每天都要开开心心的喔，让我们一起快乐的学习吧！