小程序 — 小程序生命周期及页面生命周期

简介: 前言:很多同学容易将小程序生命周期和页面的生命周期混淆为一起,这两个其实应该是不同却又相互关联的生命周期,所以,用实际代码操作并结合官方理论讲讲这个,好好捋捋。

前言:很多同学容易将小程序生命周期和页面的生命周期混淆为一起,这两个其实应该是不同却又相互关联的生命周期,所以,用实际代码操作并结合官方理论讲讲这个,好好捋捋。

1、小程序生命周期

(1)首先小程序的生命周期函数是在app.js里面调用的,App(Object)函数用来注册一个小程序。接受一个 Object 参数,指定其小程序的生命周期回调;一般有onLaunch监听小程序初始化、onShow监听小程序显示、onHide监听小程序隐藏等生命周期回调函数。

小程序生命周期-截图来自小程序官网

(2)看文字对概念有点模糊对不对?理解概念的最好方法就是上手实际操作一遍。那么,我们来看看当打开一个小程序的时候,到底是onLaunchonShowonHide哪个先调用以及什么时候开始调用的。

onLaunch() {
  console.log('onLaunch监听小程序初始化');
}

onShow() {
  console.log('onShow监听小程序显示');
}

onHide() {
  console.log('onLaunch监听小程序隐藏');
}
打开小程序
点击右上角按钮隐藏小程序有再次进入

(3)从中我们可以知道小程序的生命周期函数的调用顺序为:onLaunch>onShow>onHide

2、页面的生命周期

(1)页面生命周期函数就是当你每进入/切换到一个新的页面的时候,就会调用的生命周期函数。Page(Object) 函数用来注册一个页面。接受一个Object类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。

页面生命周期-截图来自小程序官网

(2)老规矩,我们用代码来演示下各个页面生命周期函数的先后顺序。

  onLoad(options) {
    console.log('onLoad监听页面加载');
  }

  onReady() {
    console.log('onReady监听页面初次渲染完成');
  }

  onShow() {
    console.log('onShow监听页面显示');
  }

  onHide() {
    console.log('onHide监听页面隐藏');
  }

  onUnload() {
    console.log('onUnload监听页面卸载');
  }
页面生命周期函数

从中我们可以知道小程序的生命周期函数的调用顺序为:onLoad>onReady>onShow;至于onHide函数就是当隐藏页面的时候触发。

3、小结

由此我们知道了“小程序程序生命周期函数”“页面生命周期函数”的调用顺序;这两者之间的事件顺序一般如上图所示小程序周期函数在前,页面周期函数触发在后;
但是,这 并不是绝对的,比如,有时候就会存在页面onLoad函数比小程序app的onLaunch生命周期函数先调用的情况,那么这时候就可以提出一个问题,那就是如何保证小程序的onLaunch事件的触发一定优先页面的onLoad事件?
这是我们下一章《小程序的因难技巧》要解决的问题。

目录
相关文章
|
7月前
|
缓存 小程序 API
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
12月前
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
11月前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
678 1
|
11月前
|
缓存 小程序 UED
如何利用小程序的生命周期函数实现数据的加载和更新?
如何利用小程序的生命周期函数实现数据的加载和更新?
264 4
|
11月前
|
小程序 UED 开发者
小程序的生命周期函数
小程序的生命周期函数
418 1
|
12月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
小程序 前端开发 生物认证
微信小程序如何将一个按钮放到页面的最底下?
微信小程序如何将一个按钮放到页面的最底下?
1485 5
|
12月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
5月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
388 12
|
8月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
264 0

热门文章

最新文章