微信小程序开发之——比较数字大小-配置文件(2.4)

一 概述

小程序的每一个页面均可以使用json文件对页面的效果进行配置。页面配置分为页面级和应用级，在本项目中，pages/index/index.json是页面级配置文件，而app.json是应用级配置文件

二 页面级配置文件

在页面级配置文件中可以更改页面的导航样式，控制页面是否允许上下滚动等。下面通过表2-5列举常用的页面级配置

属性	说明
navigationBarBackgroundColor	导航栏背景颜色，默认为#000000
navigationBarTextStyle	导航栏标题颜色，仅支持black、white(默认)
navigationBarTitleText	导航栏的标题文字内容
backgroundColor	窗口的背景色，默认为#ffffff
backgroundTextStyle	下拉loading的样式，仅支持dark(默认)、light
enablePullDownRefresh	是否全局开启下拉刷新，默认为false
onReachBottomDistance	页面上拉触底时页面底部距离(单位为px)，默认为50
disableScrol	默认为false。设置为true时，页面整体不能上下移动

在上表中，若将enablePullDownRefresh设为true，页面可以下拉刷新，当下拉刷新操作执行时，就会触发下拉刷新时间onPushDownRefresh，在pages/index/index.js文件中可以找到该事件的处理函数。

onReachBottomDistance主要用于开发自动加载更多的功能，也就是页面中的内容非常长的时候，为了加快加载速度，并不是一次性加载所有的数据，而是先加载一部分数据将页面填满，直到出现滚动条，页面可以向上滚动。当用户上拉时，如果快要到达底部了，就立即加载后面的数据。因此，onReachBottomDistance的值越大，加载的时机越提前。如果达到了给定的值，就会触发上拉触底事件onReachBottom，在pages/index/indes.s文件中可以找到该事件的处理函数。

接下来演示页面级配置的使用，打开pages/index/index.json文件，编写代码如下：

1 2 3 4

{ "navigationBarTitleText": "数值比较", "navigationBarBackgroundColor": "#369" }

上述代码设置了导航栏标题为”数值比较”，颜色为蓝色。运行结果为：

三 应用级配置文件

项目根目录下app.json就是应用级配置文件，其常用配置如下表：

属性	说明
pages	页面路径列表
window	全局的默认窗口表现
tabBar	底部tab栏的表现
networkTimeOut	网络超时时间
debug	是否开启调试模式，默认为false
requireBackgroundModes	需要在后台使用的能力，如音乐播放
plugins	使用到的插件

在上述属性中，pages在前面已经用过；window的值是一个对象，可以将表中的配置写在window中，作为应用级配置使用，从而一次设置多个页面，且优先级低于页面级配置；tabBar、plugins和requiredBackgroundModes会在后面的章节进行讲解；debug开启后可以在控制台中输出调试信息，帮助开发者快速定位到一些常见的问题。

networkTimeout可以设置网络请求过程中的超时时间，详细内容如下表：

属性	类型	说明
request	Number	wx.request()的超时时间(ms)，默认为60000
connectSocket	Number	wx.connectSocket()的超时时间(ms)，默认为6000
uploadFile	Number	wx.uploadFile()的超时时间(ms)，默认为60000
downloadFile	Number	wx.downloadFile()的超时时间(ms)，默认为6000

在上表中，以wx.开头的是小程序中的API，如wx.request()用于发送网络请求，关于这些API的具体使用方法会在后面的章节中讲解

接下来演示应用级配置的使用，修改app.json文件，具体代码如下：

1 2 3 4 5 6 7 8 9 10

{ "pages": [ "pages/index/index" ], "window": { "navigationBarTitleText": "数值比较", "navigationBarBackgroundColor": "#369" }, "debug": true }

在上述代码中，navigationBarTitleText和navigationBarBackgroundColor配置了导航栏的标题和样式，如果将pages/index/index.json文件中的相同配置删除，则应用级配置会生效；debug开启了调试，运行程序后，会在控制台中输出调试信息。下图中可以看到小程序启动过程的信息