1.

json配置

2.

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

3.

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

4.

{

5.

"pages":[

6.

"pages/index/index",

7.

"pages/logs/logs"

8.

],

9.

"window":{

10.

"backgroundTextStyle":"light",

11.

"navigationBarBackgroundColor":"#fff",

12.

"navigationBarTitleText":"WeChat",

13.

"navigationBarTextStyle":"black"

14.

}

15.

}

16.

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

17.

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

18.

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

Stringarray

是

设置页面路径

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",//字符串、顶部窗口的背景色，仅支持IOS6.5.16版本

"backgroundColorBottom":"#eeeeee",//字符串底部窗口的背景色，仅支持IOS6.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时，将不会显示icon2、tabBar中的list是一个数组，只能配置最少2个，最多5个tab，tab按数组顺序排序。

属性说明：

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

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

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

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

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

positionstring可选可选值bottom、top

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

19.

属性

20.

类型

21.

必填

22.

说明

23.

pagePath

24.

String

25.

是

26.

页面路径，必须在pages中先定义

27.

text

28.

String

29.

是

30.

tab上按钮文字

31.

IconPath

32.

String

33.

否

34.

图片路径，icon大小限制为40kb，建议尺寸为81px*81培训，当position为top时，此参数无效，不支持网络图片。

35.

selectedIconPath

36.

String

37.

是

38.

选中时的图片路径，icon大小限制为40kb，建议尺寸为81px*81培训，当position为top时，此参数无效

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

39.

属性

40.

类型

41.

必填

42.

说明

43.

request

44.

Number

45.

否

46.

wx.request的超时时间，单位毫秒60000

47.

connectSocket

48.

同上

49.

同上

50.

wx.connectSocket

51.

同上

52.

uploadFile

53.

同上

54.

同上

55.

wx.uploadFile

56.

downloadFile

57.

同上

58.

同上

59.

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通常大家在使用一个工具的时候都会针对各自喜好做一些个性配置，例如：界面颜色、编译配置等等。