阅读 3474

浅谈微信小程序生命周期

一直想着说,写些什么东西来记录下自己的成长史,终于要开始实践了
第一次写博客,望各位大牛指点一二

前言

(1)为什么是微信小程序

今年刚毕业,加上实习的日子,在公司近一年的时间了,期间一直在写小程序的相关功能,对小程序的一些基础功能较为熟悉.

(2)技术 原生js + redux + 微信小程序官方API

今天主要是讲述一下自己对于微信小程序生命周期的了解,虽然已经能在各个平台查询到相关文档,但觉得写出来,能整理下思绪,也望可以得到大牛们的指教.

解析

小程序主要分为两个生命周期:全局的生命周期 + 页面的生命周期
小程序App生命周期

App生命周期主要在app.js中调用,主要是:

  • onLaunch -- 小程序初始化完成,全局只触发一次
  • onShow -- 小程序启动时,或者从后台进入前台
  • onHide -- 小程序从前台进入后台时执行
  • onError -- 小程序运行脚本出错或者api调用失败时执行,会带上错误信息
  • onPageNotFound -- 小程序页面不存在时执行

    执行顺序: onLaunch--> onShow --> onHide

  • 小程序Pages生命周期

    Pages生命周期主要是指各个文件对应的js中的生命周期,主要是:

  • onLoad -- 页面加载时执行,只执行一次
  • onReady -- 页面初次渲染时执行,只执行一次
  • onShow -- 页面展示时执行,执行多次
  • onHide -- 页面从前台进入后台时执行
  • onUnload -- 页面卸载时执行
  • 注意点:当切换页面需要多次渲染数据改变状态,建议在onShow中使用,当只需初始化一次的时候,可在onLoad或者onReady中使用。当需要清除定时器时,可在onUnload中使用

    执行顺序:onLoad --> onShow --> onReady --> onHide

    切换页面时触发的生命周期: 当首次加载A页面,A触发的生命周期为:onLoad --> onShow --> onReady,从A页面切换到B页面时,A页面触发onHide,B页面触发的生命周期顺序与上面一致,当B页面返回到A页面时,触发onUnload,当不清缓存,再次进入A页面时,只触发onShow.

    Pages实例化生命周期

    小程序官方文档中有一张图表明了实例化的过程,我就直接拿过来了,可自行查看 developers.weixin.qq.com/miniprogram…

    解释:如下图

    运行机制

    概念:

    热启动:指的是小程序启动成功后,你点了左上角的x或者按了home键离开小程序,小程序并没有直接被销毁,而是进入了后台运行机制中,当你在一定时间内再次打开该小程序时,小程序这时候从后台又重新进入前台,重新渲染页面,这个过程就是热启动

    冷启动:指的是小程序初次加载(从未打开),或者当你卸载小程序,或者被微信自动销毁的时候,当你再次进入重新加载小程序时,这个过程就是冷启动

    注意点:小程序只有在冷启动的时候,才会触发onLaunch生命周期

    总结

    小程序的一辈子:

  • 打开小程序:(App)onLaunch --> (App)onShow --> (Pages)onLoad --> (Pages)onShow --> (pages)onReady
  • 进入下一个页面:(Pages)onHide --> (Next)onLoad --> (Next)onShow --> (Next)onReady
  • 返回上一个页面:(curr)onUnload --> (pre)onShow
  • 离开小程序:(App)onHide
  • 再次进入:小程序未销毁 --> (App)onShow(执行上面的顺序),小程序被销毁,(App)onLaunch重新开始执行.
  • 文章分类
    前端
    文章标签