轻松上手微信小程序开发——*.json配置

全局配置（app.json）和页面配置（page.json）

app.json 全局配置

app.json的配置并不多，下表列出5个配置项每个配置项的数据并不相同，并不是必须要设置。
全局配置项

配置项	类型	必填	描述
pages	Array	是	设置页面路径
window	Object	否	设置默认页面的窗口表现
tabBar	Object	否	设置底部 tab 的表现
networkTimeout	Object	否	设置网络超时时间
debug	Object	否	设置是否开启 debug 模式

pages配置项

pages（string Array）必填，设置页面路径。接受一个数组，每一项都是字符串，小程序所有页面都需要写在pages数组里面，来指定小程序由哪些页面组成。每一项代表对应页面的“路径+文件名”信息。

pages配置项遵循以下3个原则：

1）数组的第一项代表小程序的开始页面。

2）小程序中新增/减少页面，都需要对 pages 数组进行修改。

3）文件名不需要写文件后缀，因为框架会自动去寻找路径.json、.js、.wxml、.wxss 的 4个文件迚行整合。

例如

{
	"pages" :[
		"pages/index/index",
		"pages/logs/logs"
	]
}

window配置

window（object）非必填配置项，没有配置项时将使用系统默认配置。用来设置默认界面的窗口表现，用于设置小程序的状态栏、导航条、标题、窗口等对象的颜色、背景色、内容等属性。
window配置项

对象	类型	默认值	描述
navigationBarBackgroundColor	HwxColor	#000000	导航栏背景颜色
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black white
navigationBarTitleText	Strjing		导航栏内容
backgroundColor	HexColor	#ffffff	窗口背景颜色，刷新、切换页面时可见
backgroundTextStyle	String	dark	下拉背景字体的样式，仅支持 dark light
enablePullDownRefresh	Boolwan	fasel	是否启用下拉刷新

例如

{

	"window":{
	
		"navigationBarBackgroundColor": "#ff5400",
		
		"navigationBarTextStyle":"black",
		
		"navigationBarTitleText": "Second Chapter",
		
		"backgroundColor": "#999999",
		
		"backgroundTextStyle":"light",
		
		"enablePullDownRefresh": true

	}

}

tabBar配置

tabBar（Object）设置底部 tab 的表现。一般原生 App 底部都会有工具栏，迚行页面切换，对于小程序可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面，实现多页面切换。tabBar 内部是一个“list”数组，只能配置最少 2个、最多 5个tab，tab按数组的顺序排序。

tabBar相关属性配置

对象	类型	必填	默认项	描述
color	HexColor	是		tab上的文字默认颜色
selectedColor	HexColor	是		tab上的文字选中使得颜色
backgroundColor	HexColor	是		tab的背景色
borderStyle	String	否	black	tabBar上边框的颜色，支持black / white
list	Array	是		tab的列表
position	String	否	bottom	tabBar 位置，顶部（top）底部（bottom）

表中 list 的属性

对象	类型	必填	描述
pagePath	String	是	页面路径，必须在 pages 中定义过
text	String	是	tab 上的文字
iconPath	String	是	tab 上icon图片路径
selectedIconPath	String	是	选中 tab 时的图片路径

icon大小限制在40KB

networkTimeout配置项

networkTimeout（Object）设置各种网络请求的超时时间，非必须配置项。可设置网络请求超时相关属性如表2-5所示。所有配置项单位均是毫秒，如果超时不设置，默认使用操作系统内核或遵循服务器WebServer的设定值。

networkTimeout配置项

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

例如

{

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

	}

}

debug配置项

debug（boolean） 设置是否开启debug模式，默认值是false（关闭）状态。可以在开収者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有 Page 的注册，页面路由，数据更新，事件触发。可以帮助开发者快速定位一些常见的问题。

以下配置是打开调试模式：

{
	"debug" :ture
}

开启“调试”功能之后，重启小程序，在Console页面可以看到更多的信息

page.json 页面配置

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

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

{

	"navigationBarBackgroundColor": "#ffffff",
	
	"navigationBarTextStyle": "black",
	
	"navigationBarTitleText": "查看启动日志","backgroundColor": "#ff0589",
	
	"backgroundTextStyle": "dark"

}