最近公司接了新活,开发一款微信小程序,借着开发复习一下原生小程序开发的内容 原生微信小程序的语言和vue2有很多相似之处,同样也存在生命周期,不过不同的是Vue2是vue实例的生命周期,在微信小程序中生命周期也有分类,我自己写了一个思维导图供大家参考一下,里面包含了应用生命周期和页面生命周期.组件生命周期下次补上.
微信小程序生命周期分为1.应用生命周期. 2.页面生命周期. 3.组件生命周期 页面生命周期有三个常用的钩子函数
● onLoad 在页面加载完成时执行，只会执行 1 次，常用于获取地址参数和网络请求
● onShow 在页面处于可见状态时执行，常用于动态更新数据或状态
● onHide 在页面处于不见状态时执行，常用于销毁长时间运行的任务，如定时器
onReady 在页面初次渲染完成时执行，只会执行 1 次，常用于节点操作或动画交互等场景 相比之前三个不是很常用
页面生命周期的钩子函数
Page({
onLoad(){
console.log('生命周期页面， 加载完成')
},
onReady(){
console.log('生命周期页面， 页面初次渲染完成')
},
onShow(){
console.log('生命周期页面， 处于可见状态')
},
onHide(){
console.log('生命周期页面， 处于不可见状态')
}
})
应用生命周期 在app.js文件中设置
● onLaunch 小程序启动时执行1次，常用于获取场景值或者启动时的一些参数（如自定义分享）
● onShow 小程序前台运行时执行，常用于更新数据或状态
● onHide 小程序后台运行时执地，常用于销毁长时间运行的任务，如定时器。
示例
// app.js
App({
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
}
})
组件生命周期
组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
其中，最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。
组件生命周期的钩子函数要写在lifetimes中这个是注意点
Component({
lifetimes: {
attached() {
// 在组件实例进入页面节点树时执行
},
detached () {
// 在组件实例被从页面节点树移除时执行
},
}
})
