详解微信小程序开发（一） json配置、app.json、page.json

json 配置

app.json 是当前小程序的全局变量，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。

quickstrat项目里面的app.json配置内容如下：

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "WeChat",

    "navigationBarTextStyle":"black"

  }

}

简单说一下这个配置各项的含义：

1、pages字段——用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序定义在哪个目录。

2、Window字段——小程序所有也米阿尼的顶部背景颜色、文字颜色定义在这里的。

详情： app.json文件用来对微信小程序进行全局配置，决定页面文件中的路径、窗口的表现、设置网络超时时间、设置多tab等。一下是一个包含了所有配置选项的app.json:

{

  "pages": [

    "pages/index/index",

    "pages/logs/index"

  ],

  "window": {

    "navigationBarTitleText": "Demo"

  },

  "tabBar": {

    "list": [{

      "pagePath": "pages/index/index",

      "text": "首页"

    }, {

      "pagePath": "pages/logs/logs",

      "text": "日志"

    }]

  },

  "networkTimeout": {

    "request": 10000,

    "downloadFile": 10000

  },

  "debug": true

}

 

App.json配置项列表

 

属性	类型	必填	描述
Pages	String array	是	设置页面路径
Window	Object	否	设置默认页面的窗口表现
tabBar	Object	否	设置底部的tab的表现
NetworkTimeout	Object	否	设置网络超时时间
Debug	Boolean	否	设置是否开启debug模式

Pages 接受一个数组，每一项都是字符串，来指定小程序有哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对pages数据进行修改。  文件名不需要写文件后缀，因为框架会自动去寻找路径下 、.json 、.js、.wxml、.wxss、四个文件进行整合。

pages/index/index.wxml

pages/index/index.js

则需要在app.json中写

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs"

  ]

}

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

{

  "window":{

    "navigationBarBackgroundColor": "#ffffff", // 十六进制，导航栏背景颜色，如“#000000”

    "navigationBarTextStyle": "black", // 字符串、white、导航栏标题颜色仅支持black/white

"navigationBarTitleText": "微信接口功能演示", //字符串、导航标题文字内容

"navigationStyle": "default", // 字符串、导航栏样式，仅支持default/custom.custom模式可自定义导航栏。只保留右上角胶囊状的按钮  （微信版本6.6.0）

"backgroundColor": "#eeeeee", // 十六进制、窗口的背景色

"backgroundColorTop": "#eeeeee", //字符串、顶部窗口的背景色，仅支持IOS  6.5.16版本

"backgroundColorBottom": "#eeeeee", //字符串 底部窗口的背景色，仅支持 IOS 6.5.16版本

"backgroundTextStyle": "light" ，//  字符串、下拉loading的样式，仅支持dark/light

"enablePullDownRefresh": "false" ， //  boolean 、是否开启下拉刷新

"onReachBottomDistance": 50  // number  页面上拉触底事件触发时距页面底部距离，单位为px

  }

}

注：navigationStyle 只在 app.json 中生效。开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用） 可方便切到旧视觉

如 app.json ：

{

  "window":{

    "navigationBarBackgroundColor": "#ffffff",

    "navigationBarTextStyle": "black",

    "navigationBarTitleText": "微信接口功能演示",

    "backgroundColor": "#eeeeee",

    "backgroundTextStyle": "light"

  }

}

tabBar  如果小程序是一个多tab应用（客户端窗口的底部或者顶部有tab栏可以切换页面），可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。

注：1、当设置position为top时，将不会显示icon 2、tabBar中的list是一个数组，只能配置最少2个，最多5个tab，tab按数组顺序排序。

属性说明：

color      hexColor（十六进制） 必填  tab上的文字默认颜色。

selectedColor  十六进制  必填  tab上的文字选中的颜色

backgroundColor  十六进制  必填  tab的背景颜色

borderStyle   string  可选   tabBar上边框的颜色仅支持black/white

List  array 必选  tab的列表详见list属性说明

position  string   可选   可选值bottom、top

其中list 接受一个数组，数组中的每一个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在pages中先定义
text	String	是	tab上按钮文字
IconPath	String	否	图片路径，icon大小限制为40kb，建议尺寸为81px*81培训，当position为top时，此参数无效，不支持网络图片。
selectedIconPath	String	是	选中时的图片路径，icon大小限制为40kb，建议尺寸为81px*81培训，当position为top时，此参数无效

 networkTimeout    可以设置各种网络请求的超时时间

属性	类型	必填	说明
request	Number	否	wx.request的超时时间，单位毫秒60000
connectSocket	同上	同上	wx.connectSocket   同上
uploadFile	同上	同上	wx.uploadFile
downloadFile	同上	同上	wx.downloadFile

 Debug   可以在开发者工具中开启debug模式，在开发工具的控制台面板，调试信息已以info的形式给出，其信息有page的注册，页面路由，数据更新，事件触发。可以帮助开发者快速定位一些常见的问题。

 page.json  

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。页面配置比app.json全局配置简单的多，只是设置app.json中的window配置项的内容。页面中配置项会覆盖app.json的window中相同的配置项。

页面的.json只能设置window相关的配置项，以决定本页面的窗口表现，所以无需写window这个键，如：

navigationBarBackgroundColor 、navigationBarTextStyle  、navigationBarTitleText、backgroundColor、backgroundTextStyle、enablePullDownRefresh、disableScroll（设置为true则页面整体不能上下滚动，值在page.json 中有效，无法再app.json中设置该项）、onReachBottomDistance 等属性。

{

  "navigationBarBackgroundColor": "#ffffff",

  "navigationBarTextStyle": "black",

  "navigationBarTitleText": "微信接口功能演示",

  "backgroundColor": "#eeeeee",

  "backgroundTextStyle": "light"

}

 

工具配置project.config.json  通常大家在使用一个工具的时候都会针对各自喜好做一些个性配置，例如：界面颜色、编译配置等等。