微信小程序的框架及工具之 App.Json

app.json的配置（全局配置），主要有五个功能：决定页面的文件路径，配置窗口的表现，配置tab标签导航，设置网络超时时间以及配置debug模式，下面根据以下代码进行讲解

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

（1）页面文件路径：

在app.json中，页面路径的属性名为pages,以数组的形式存储，数组的第一项代表小程序的初始页面，当增加或者删除页面时，都需要对pages中的数组进行修改，在配置完页面路径后，会生成文件路径对名称的文件夹和4个对应名称的文件（.js,  .json,   .wxml,   .wxss）

(2)配置窗口表现

配置窗口表现内容包括导航栏背景色，导航栏标题颜色，导航栏标题文字内容，窗口的背景色，下拉背景字体，liading图样式，以及是否开启下拉刷新设置。这些功能都放在window这个对象里

1）navigationBarBackgroundColor：导航栏背景色

2）navigationBarTextStyle：导航栏标题颜色

3）navigationBarTitleText：导航栏标题文字内容

4）backgroundColor：窗口的背景色

5）backgroundTextStyle：下拉背景字体，loading图样式，仅支持dark/light

6）enablePullDownRefresh：是否开启下拉刷新 

（3）配置tab标签导航

微信小程序配置tab 标签导航，可以配置底部标签导航和顶部标签导航，通过tabBar来配置。tabBar是一个数组，只能配置最少两个，最多五个tab，tab按数组的顺序排序，当position属性值为top时，为顶部标签导航，当position属性值为buttom或者不设置时，为底部标签导航，taeBar的属性如下:

1）color：tab上的文字默认颜色

2）selectedColor：tab上的文字选中时的颜色

3）backgroundColor:tab的背景色

4）borderStytle：tabbar上的边框的颜色，仅支持black/white

5）position：可选buttom/top

6）list：tab的列表，最上2个，最多5个，数组中的每一项都是一个对象

7）pagePath：页面路径，必须在pages中先定义

8）text：tab上按钮文字

9）iconPath：图片路径，icon大小限制为40kb，建议尺寸为81px*81px。当position为top时，此参数无效

10）selectedIconPath：选中时的图片路径，大小参数同上

   "tabBar": {
        "color": "#000000",
        "selectedColor": "#D53C3E",
        "backgroundColor": "#ffffff",
        "borderStyle": "black",
        "position": "bottom",
        "list": [
            {
                "pagePath": "pages/shou/index",
                "text": "首页",
                "iconPath": "./picture/9.jpg",
                "selectedIconPath": "./picture/9.jpg"
            },
            {
                "pagePath": "pages/ziliao/page3",
                "text": "购物车",
                "iconPath": "./picture/1.jpg",
                "selectedIconPath": "./picture/1.jpg"
            },
            {
                "pagePath": "pages/wo/logs",
                "text": "我的",
                "iconPath": "./picture/7.jpg",
                "selectedIconPath": "./picture/8.jpg"
            }
        ]
    },

上述代码是生成三个底部标签导航，生成效果如下，注意对比选中状态和非选中状态的区别

   

 如果设置成顶部标签导航，则效果如下

 

 （4）配置网络超时时间

微信小程序设置网络超时时间是通过network Timeout对象来设置的，可以设置网络请求超时时间，WebSocket的超时时间，uploadFile文件上传超时时间和downloadFile文件下载超时时间，他的属性如下：（单位均为毫秒，默认均为60000）

1）request：wx.request的超时时间

2）connectSocket：wa.connectSocket的超时时间

3）uploadFile：wx.uploadFile的超时时间

4）downloadFile：wx.downloadFile的超时时间

    "networkTimeout": {
        "request": 20000,
        "connectSocket": 20000,
        "uploadFile": 20000,
        "downloadFile": 20000
    },

（5）配置debug模式

配置debug模式是在开发者工具的控制面板，调试信息并以info的形式给出，其信息有Page的注册，页面的路由，数据更新和事件触发，可以帮助开发者快速定位一些常见的问题，具体代码为：   "debug":true

开启debug时，控制台面板的调试信息如下：

 

没有开启debug时，控制台的调试信息如下：