美文网首页小程序
微信小程序生命周期

微信小程序生命周期

作者: JairusTse | 来源:发表于2017-08-23 01:36 被阅读141次

跟APP一样,微信小程序也有自己的生命周期,了解微信小程序的生命周期对于小程序开发者来说非常重要,关系到什么时候加载数据、显示页面、缓存和恢复页面数据。小程序的生命周期包括两部分,一个是 小程序的生命周期 ,另一个是 页面的生命周期

小程序的生命周期App()

生命周期函数 描述
onLaunch 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
onShow 当小程序启动,或从后台进入前台显示,会触发 onShow
onHide 当小程序从前台进入后台,会触发 onHide

页面的生命周期Page()

生命周期函数 描述
onLoad 监听页面加载
onShow 监听页面初次渲染完成
onReady 监听页面显示
onHide 监听页面隐藏
onUnload 监听页面卸载

一些场景下生命周期的调用

看官网的说明可能不太好理解,下面通过具体场景来了解生命周期函数的调用顺序。

调试环境:
  • 手机:华为荣耀8
  • 系统:Android 7.0
  • 微信版本:6.5.10
  • 小程序基础库版本:1.4.4
流程1:首次启动小程序

App.onLaunch --> App.onShow --> Page.onLoad --> Page.onShow --> Page.onReady

image.png
流程2:小程序进入后台(按Home键/左上角✘)

流程1 --> Page.onHide --> App.onHide

image.png
流程3:小程序从后台重新打开

流程2 --> App.onShow --> Page.onShow

image.png
流程4:按返回键

流程1 --> Page.onUnload(非栈底页面)

image.png

流程1 --> Page.onHide --> App.onHide(栈底页面)

image.png
流程5:从微信消息打开小程序(未安装小程序)(同流程1)
流程6:从微信消息打开小程序(已安装小程序且在后台运行)(同流程3)
流程7:从微信消息打开小程序(已安装小程序且不在后台运行)(同流程1)
流程8:小程序被销毁后重新启动(进入后台一段时间后被系统销毁)(同流程1)

最后贴一张官方的Page生命周期图

mina-lifecycle.png

相关文章

  • 微信小程序开发 | 把玩系列:各种组件和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/nssldxtx.html