小程序生命周期

生命周期

应用的生命周期函数

// app.js文件

App({
	// 小程序初始化完成时，执行此函数，全局触发一次，可以做一些初始化操作
	onLaunch: function(options){ },

	// 小程序启动，或从后台进入前台显示时触发
	onShow: function(options){ },
	
	// 小程序从前台进入后台时触发
	onHide: function(options){ },
})

页面的生命周期函数

// 页面的 .js 文件

Page({
	onLoad: function(options){ },  	// 监听页面加载，一个页面只调用一次
	
	onShow: function(){ },			// 监听页面显示
	
	onReady: function(){ },			// 监听页面的初次渲染完成，一个页面只调用一次
	
	onHide: function(){ },			// 监听页面隐藏
	
	onUnload: function(){ },		// 监听页面卸载，一个页面只调用一次
})

onReady() 是页面初次渲染完成，要对界面内容进行设置的API 如 wx.setNavigationBarTitle，需要在onReady之后执行

组件生命周期

生命周期函数	参数	描述说明
created	无	在组件实例刚刚被创建时执行
attached	无	在组件实例进入页面节点树时执行
ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
detached	无	在组件实例被从页面节点树移除时执行
error	Object Error	每当组件方法抛出错误时执行

组件实例刚被创建好的时候，created生命周期函数会被触发
此时还不能调用setData，通常在这个生命周期函数中，只应该用于给组件的this添加一些自定义的属性字段

在组件完全初始化完毕，进入页面节点树后，attached生命周期函数会被触发
此时this.data已被初始化完毕，发请求获取初始化数据

在组件离开页面节点树后，detached生命周期函数会被触发
退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数

lifetimes

在小程序组件中，生命周期函数可以直接定义在Component构造器的第一级参数中，可以在lifetimes字段内进行声明

在lifetimes配置项中声明的生命周期函数优先级更高，会覆盖直接定义在一级参数中的生命周期函数

Component({
	// 推荐写法
	lifetimes: {
		attached(){ }, 	// 在组件实例进入页面节点树时执行
		detached(){ },	// 在组件实例被从页面节点树移除时执行
	}
	// 旧的定义方式
	attached(){ }, 	// 在组件实例进入页面节点树时执行
	detached(){ },	// 在组件实例被从页面节点树移除时执行
})

组件所在页面的生命周期

当自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期

生命周期函数	参数	描述说明
show	无	组件所在的页面被展示时执行
hide	无	组件所在的页面被隐藏时执行
resize	Object Size	组件所在页面尺寸变化时执行

pageLifetimes

组件所在页面的生命周期函数，需要定义在pageLifetimes节点

Component({
	// 推荐写法
	pageLifetimes: {
		show: function(){ }, // 页面被展示
		hide: function(){ }, // 页面被隐藏
		resize: function(size){ }, // 页面尺寸变化
	}
})