微信小程序篇】五. 微信小程序的配置文件和（小程序和页面）的生命周期

微信小程序的配置文件和（小程序和页面）的生命周期

1. app.json配置

1.1 pages配置

{
  "pages": [
    "pages/index/index",	// 页面配置 第一行为首页
    "pages/logs/logs"
  ],
  ....
}

1.2 window配置

{
  ...
  "window": {
    "backgroundTextStyle": "light",  //	下拉 loading 的样式，仅支持 dark / light
    "navigationBarBackgroundColor": "#fff",	// 背景颜色
    "navigationBarTitleText": "WeChat",	// 导航栏标题文字内容
    "navigationBarTextStyle": "black"	// 导航栏标题颜色，仅支持 black / white
  },
  ...
}

####1.2.1 更多配置

	{
		"backgroundColor": "#fff", // 窗口的背景色
		"backgroundColorTop":"#fff", // 顶部窗口的背景色，仅 iOS 支持  微信客户端 6.5.16
		"backgroundColorBottom":"#fff", // 底部窗口的背景色，仅 iOS 支持  微信客户端 6.5.16
		"enablePullDownRefresh" : false,// 是否开启当前页面下拉刷新
		"onReachBottomDistance": 50, // 页面上拉触底事件触发时距页面底部距离，单位为px
		"pageOrientation" : "portrait", // 屏幕旋转设置，支持 auto / portrait / landscape 
		"disableScroll" : false, // 设置为 true 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 中设置
		"usingComponents": Object // 自定义组件.... 
	}

1.3 tabBar配置（窗口底部tab栏）

"tabBar":{
	"color": #fff,	// tab 上的文字默认颜色，仅支持十六进制颜色
    "list": [{
      "pagePath": "pages/index/index",	// 必须对应pages，不然不显示
      "text": "首页"
    },{
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  }

1.3.1 其他配置

	"selectedColor": "#c3f3c3",  // tab 上的文字选中时的颜色，仅支持十六进制颜色
	"backgroundColor" : "#c3f3c3",	// tab 的背景色，仅支持十六进制颜色
	"borderStyle" : "#black",	// tabbar 上边框的颜色， 仅支持 black / white
	"position" : "#bottom",	// tabBar 的位置，仅支持 bottom / top
	"custom" : // 自定义 tabBar 2.5.0
	
	"list": [{
      "pagePath": "pages/index/index",	// 页面路径，必须在 pages 中先定义 必须
      "text": "首页"	// tab 上按钮文字	必须
      "iconPath":"图片路径"	//图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
      "selectedIconPath":"图片路径" //选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
    }]

1.4 networkTimeout配置（网络超时）

	...
"networkTimeout":{
    "request":10000,	//wx.request的超时时间，单位：毫秒。默认 60000	
    "connectSotcket":10000,	//wx.connectSotcket的超时时间，单位：毫秒。默认 60000	
    "uploadFile":10000,	//wx.uploadFile的超时时间，单位：毫秒。默认 60000	
    "downloadFile":1000	//wx.downloadFile的超时时间，单位：毫秒。默认 60000	
},
	...

1.5 debug配置

	...
	"debug":true // 开启debug console会出现日志

1.5.1 debug

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

1.6 更多配置看文档

1. functionalPages 插件所有者小程序需要设置这一项来启用插件功能页。基础库 2.1.0 开始支持，低版本需做兼容处理。
2. subpackages 启用分包加载时，声明项目分包结构。写成 subPackages 也支持。微信客户端 6.6.0 ，基础库 1.7.3 及以上版本支持
3. workers 使用 Worker 处理多线程任务时，设置 Worker 代码放置的目录 基础库 1.9.90 开始支持，低版本需做兼容处理。
4. requiredBackgroundModes 申明需要后台运行的能力，类型为数组。微信客户端 6.7.2 及以上版本支持
5. …

2. 页面配置

2.1 index.json

{
	"navigationBarTitleText": "index"
}

index.json主要是该app.json的window配置（目前只支持覆盖winodw配置~~（2020-1-10 小程序更新的有点快~~ ））

3.微信小程序的生命周期

2.1 app.js

//app.js
App({
// 程序初始化执行
	onLaunch: function () {
		console.log("程序初始化执行"); 
	},
	onShow: function() {
		console.log("程序切换前台执行");
	},
	onHide: function(){
		console.log("程序切换后台执行");
	},
	getUserInof:function(){
		console.log("可以在每个page的js里面 通过getApp()来获取整个app，通过app.xxx获取信息")
	},
})

2.2 index.js

onLoad: function (options) {
	console.log("页面初始化执行"); 
},
onReady: function () {
	console.log("页面初次渲染完成执行")
},
onShow: function () { 
	 console.log("页面切换前台执行");
},
onHide: function () { 
	console.log("页面切换后台执行或者跳转到别的页面（页面还活着）执行");
},
onUnload: function () {
	console.log("页面卸载,页面被杀了（每次打开就是新的）就会执行");
},
onPullDownRefresh: function () { 
	console.log("用户下拉执行");
},
onReachBottom: function () {
	console.log("页面上拉触底执行");
},
onShareAppMessage: function () {
	console.log("用户点击右上角分享执行");
}

1.3 参数传递

如果有链接跳转过来就会调用onLoad初始化页面，如果该链接还带有参数，则可以从options中去取

onLoad: function (options) {
	console.log(options);  
},

也可以通过wxml组件 <navigator uri="…/log/logs?id=1" >

onLoad: function (options) {
	console.log(options.id);  
},

redirect 使用这个属性页面就回不来了（会调用onUnload）
<navigator uri="…/log/logs?id=1" redirect >