微信小程序的 应用生命周期 以及 页面生命周期 `详解`
2021-07-08 本文已影响0人
lazy_tomato
START
- 番茄又又又来写点啥了，近段时间老是遇到小程序生命周期的问题，包括回答面试啊，自己日常开发中使用，都记得很模糊，就记得几个生命
onShow,onHide，执行顺序也不清晰明了。 - 这次特意去翻看官方文档以及相关的博客，重新整理一下笔记，方便后续忘记的时候复习。
- 当然编写仓促，某些地方或许不准确，望见谅，参考即可。
应用的生命周期
- 官方APP生命周期文档：https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
- 对应文件
文件目录>app.js
说明
5LQ[LD$(U5]ZBI1VUSJ~(YY.png
代码说明
// app.js
App({
// 1.当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onLaunch() {
// 一般用于获取用户信息
console.log("onLaunch")
},
// 2.当小程序启动，或者从后台进入前端显示，就会触发onShow
onShow() {
// 一般做一下数据重置
// 清除定时器
console.log("onShow")
},
// 3.当小程序从前台进入后台会触发onHide
onHide() {
console.log("onHide")
},
// 4.当小程序发生脚本错误，或者api调用失败时，会触发onError并带上错误信息
onError(err) {
// 可以收集`err`用户错误信息
console.log("onError",err)
},
// 5.当小程序出现要打开的页面不存在的情况，会带上页面信息回调该函数
onPageNotFound() {
// 当应用第一次启动找不到入口文件就会触发
console.log("onPageNotFound")
}
})
运行截图
IU.png
页面的生命周期
- 官方页面的生命周期文档：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
- 对应文件
文件目录>page>index(自己定义的文件)
说明
33333333.png
代码
// index.js
// 获取应用实例
Page({
/**
* 页面的初始数据
*/
data: {
list: [
1, 2, 3, 4,23,12,,123,12,312,3,12,312,3,12,312,3,12,312,3,12,31,,1,111,,11,1,1,1,1,,1,1
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数
console.log("页面生命周期", "onLoad",)
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
// 页面展示
console.log("页面生命周期", "onShow",)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
// 页面初次渲染完成 ，一个页面只会调用一次，表示页面以及渲染完成，可以和视图层进行交互
console.log("页面生命周期", "onReady",)
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
//当navigateTo或底部tab切换时调用
console.log("页面生命周期", "onHide",)
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
// 卸载当前页面会触发
// 当redirectTo或navigateBack的时候调用。
console.log("页面生命周期", "onUnload",)
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log("页面生命周期", "onPullDownRefresh",)
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log("页面生命周期", "onReachBottom",)
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
console.log("页面生命周期", "onShareAppMessage",)
},
// 页面尺寸发生改变
onResize(){
// 一般是手机发生横屏竖屏
console.log("页面生命周期", "onResize",)
}
})
效果截图
序列 01_2.gif
TiPS
- 小程序隐藏的时候，页面的
onHide先与应用的onHide - 小程序展示的时候，页面的
onShow后于应用的onShow
先隐藏页面再隐藏应用；先展示应用再展示页面
官方生命周期图解
W$OVJGJQ)Y9B0H6{7)KL4P0.png
END
- 暂时就写到这里啦，┓( ´∀` )┏
