微信小程序:生命周期

作者: 雷银 | 来源:发表于2019-05-24 17:28 被阅读128次

下面从三个方面来介绍小程序的生命周期:
(1)应用生命周期
(2)页面生命周期
(3)应用及页面生命周期的触发顺序

1.应用生命周期

App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数
(1)onLaunch: 初始化小程序时触发,全局只触发一次
(2)onShow: 小程序初始化完成或用户从后台切换到前台显示时触发
(3)onHide: 用户从前台切换到后台隐藏时触发
(4)onError: 小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
后台: 点击左上角关闭,或者按了设备 Home 键离开微信,并没有直接销毁,而是进入后台
前台:再次进入微信或再次打开小程序,相当于从后台进入前台。
官方介绍 https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

应用生命周期

2.页面生命周期

js文件中定义了一些页面生命周期函数,下面简述下这些生命周期函数的方法作用
(1)onLoad:首次进入页面加载时触发,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
(2)onShow:加载完成后、后台切到前台或重新进入页面时触发
(3)onReady:页面首次渲染完成时触发
(4)onHide:从前台切到后台或进入其他页面触发
(5)onUnload:页面卸载时触发
官方介绍 https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

页面生命周期

3.应用与页面生命周期触发顺序

通过console.log验证它们的触发顺序
(1)从图中可以看出,首次进入小程序会先触发应用生命周期中onLaunch方法和onShow方法,其次触发页面生命周期中onLoad、onShow和onReady方法。


首次进入小程序

(2)前台切换到后台时,先触发页面生命周期中onHide方法,再触发应用生命周期的onHide方法。


从前台切换到后台
(3)后台切换到前台时,先触发应用生命周期中onShow方法,再触发页面生命周期的onShow方法。
从后台切换到前台
以上是对生命周期粗略的认识,如有不足请指正!

相关文章

  • 微信小程序开发 | 把玩系列:各种组件和API实用详解

    新手向!微信小程序把玩系列: 微信小程序把玩《一》:window配置,tabBar底部导航,应用生命周期 微信小程...

  • 微信小程序组件探究和应用

    把玩微信小程序组件 微信小程序把玩《二》:页面生命周期,模块化,数据绑定,view组件 微信小程序把玩《三》:sc...

  • 微信小程序生命周期

    跟APP一样,微信小程序也有自己的生命周期,了解微信小程序的生命周期对于小程序开发者来说非常重要,关系到什么时候加...

  • 微信小程序之生命周期(四)

    微信小程序生命周期分类: 应用生命周期 页面生命周期 一、应用生命周期 App() 函数用来注册一个小程序。接受一...

  • uni-app 微信小程序学习笔记

    微信小程序的生命周期函数 应用的生命周期。onLaunchonShowonHideonError 页面的生命周期o...

  • 前端知识体系6.小程序

    本文目录 1.说下小程序框架的主要文件和目录的作用 2.微信小程序组件的生命周期 3.简单描述下微信小程序页面文件...

  • React生命周期

    什么是生命周期? 在开发微信小程序中,常见的生命周期方法有onLaunch,onLoad,onShow等。生命周期...

  • 小程序教学九(生命周期)

    微信为我们监听小程序和各个页面的状态提供了系统函数让我们知道各个状态,进而进行操作。 小程序的生命周期函数 微信小...

  • 微信小程序模块化开发实践

    微信小程序模块化开发实践 公众号 前栈笔记 关联阅读正版小程序开发之一:语言,生命周期与数据渲染 准备 了解微信小...

  • Vue-day2

    生命周期函数(与微信小程序的生命周期相似) beforeCreate:在创建之前执行 生命周期中的this指向Vu...

网友评论

    本文标题:微信小程序:生命周期

    本文链接:https://www.haomeiwen.com/subject/gdigzqtx.html