微信小程序生命周期详解(分享朋友圈)

APP.js生命周期

App()函数用来注册一个小程序。接受一个object参数，其指定小程序的生命周期函数等

App({
	onLaunch (options) {
		console.log(‘小程序初始化’)
	},
	onShow(options) {
		console.log(‘监听小程序启动或切前台’)
	},
	onHide() {
		console.log(‘监听小程序切后台’)
	},
	onError(msg) {
		console.log(‘错误监听函数’)
	},
	onPageNotFound(res) {
		console.log(‘小程序要打开的页面不存在时触发’, 重定向其他页面);
	}
})

页面生命周期

Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

Page({
  	/*页面的初始数据*/
  	data: {},
 	/*页面生命周期*/
 	onReady() {
    	console.log('监听页面初次渲染完成')
  	},
  	onShow() {
    	console.log('监听页面显示')
  	},
  	onHide() {
    	console.log('监听页面隐藏')
  	},
  	onUnload() {
    	console.log('监听页面卸载')
  	},
  	onPullDownRefresh() {
		console.log('监听用户下拉动作')
  	},
  	onReachBottom() {
		console.log('监听用户上拉动作')
  	},
  	onShareAppMessage(res) {
	  	if (res.from === 'button') {
      		// 来自页面内转发按钮
	    } else {
    		// 来自右上角分享
	    }
		console.log('用户点击右上角分享')
  	},
  	onShareTimeline() {
		console.log('用户点击右上角分享朋友圈')
		return {
	      title: '转发朋友圈标题',
	      query: '自定义页面路径中携带的参数',
	      imageUrl: '自定义图片路径，可以是本地文件或者网络图片'
	    }
	}	
})

开启右上角分享朋友圈 功能 需要同时页面配置 onShareAppMessage()，onShareTimeline() 方法
禁用右上角分享朋友圈 功能，需要页面删除 onShareTimeline() 方法
禁用右上角发送给朋友、分享到朋友圈，需要页面删除onShareAppMessage() 方法(建议: onShareTimeline() 同时删除掉，避免造成业务不清晰)

组件生命周期

Component({
	/*组件的属性列表*/
  	properties: {},

  	/*组件的初始数据*/
  	data: {},

	/*监听*/
	watch: {
		// 只在字段值改变了的时候触发，并且触发时带有参数
	},
  	
	/*监听和响应任何属性*/
	observers: {
		// 无论字段是否真的改变， observers 都会被触发
	},
	
	/*计算属性*/
	computed: {
		// computed 字段状态只能依赖于 data 和其他 computed 字段，不能访问 this 。如果不可避免要访问 this ，则必须使用 watch 代替
	},
	
  	/*组件的方法列表*/
  	methods: {},
	
  	/*组件生命周期*/ 
  	lifetimes: {
	  	created() {
	      console.log("在组件实例刚刚被创建时执行")
	    },
	    attached() { 
	      console.log("在组件实例进入页面节点树时执行")
	    },
	    ready() {
	      console.log("在组件在视图层布局完成后执行")
	    },
	    moved() {
	      console.log("在组件实例被移动到节点树另一个位置时执行")
	    },
	    detached() {
	      console.log("在组件实例被从页面节点树移除时执行")
	    },
	    error() {
	      console.log("每当组件方法抛出错误时执行")
	    }
  	},
  	/*组件所在页面的生命周期 */
   	pageLifetimes: {
    	show() {
        	console.log("页面被展示")
      	},
      	hide() {
	        console.log("页面被隐藏")
      	},
      	resize(size) {
        	console.log("页面尺寸变化")
      	}
   	}
})