2022-01-09 微信小程序笔记(六) 小程序的生命周期

这篇博客详细探讨了微信小程序的生命周期,包括全局、页面和组件的生命周期。在全局生命周期中,重点介绍了onLaunch、onShow、onHide和onError。页面生命周期部分讲解了onLoad、onShow、onReady、onHide和onUnload等方法。组件生命周期则提到了created、attached和detached三个关键阶段,以及定义组件生命周期的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

0.生命周期的直观定义

生命周期定义:在某一时刻会自动调用的钩子回调函数就叫做生命周期

1.小程序的全局生命周期

在这里插入图片描述
在App.js中验证:

// app.js
App({
  // 1 应用第一次启动就会调用的函数
  onLaunch() {
    // 最早的ajax请求 以及获取用户信息  
     console.log('onLaunch 1 应用第一次启动就会调用的函数')
      
  },
  onShow() {
    // 应用被用户看到 就会调用onShow生命周期 
    // 用法当页面重新显示 可以重置新的数据  进行新的ajax请求
    console.log('onShow  应用被用户看到 就会调用onShow生命周期 ')
  },
  onHide(){
    // 应用隐藏的时候就会自动触发
    // 用法 清除定时器 不再占用用户内存 
    console.log('onHide   应用隐藏的时候就会自动触发 ')
  },
  onError(err){
      console.log('onerror',err)
  }
})

结果:
刷新页面:打印onLaunch,加载完后打印onShow,
点击虚拟home键,打印onHide
随便弄个语法错误,打印onError

2.小程序的页面生命周期

在这里插入图片描述
在pages/movies/movies.js中验证:

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      console.log('onload')
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log('onReady  生命周期函数--监听页面初次渲染完成')
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
      console.log('onshow  生命周期函数--监听页面显示')
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log(' onHide  生命周期函数--监听页面隐藏')
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
      console.log(' onUnload生命周期函数--监听页面卸载 ')
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
      console.log('onPullDownRefresh')
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('onReachBottom 页面上拉触底事件的处理函数')
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
      console.log('onshareAppMessage')
  },
  // 页面一滚动就触发了
  onPageScroll() {
      console.log('onpagescroll')
  }
})

结果:
先后打印全局的onLaunch和onShow,
再打印页面的onLoad,onShow,onReady
点击虚拟home键,先隐藏页面的onHide在隐藏全局的onHide,
借助导航组件的第四个跳转方法 <navigator open-type="redirect" url='/pages/test8/test8'>跳页面2 </navigator>,打印onUnload,
页面下拉时,打印 onPullDownRefresh,
网上拉触底了,打印 onReachBottom
点击发送给朋友,打印 onShareAppMessage

页面中的组件加载顺序:onLoad>onShow>onReady

在这里插入图片描述

onLoad(Object query) 页面加载时触发。一个页面只会调用一次,
可以在 onLoad的参数中获取打开当前页面路径中的参数。

onShow() 页面显示/切入前台时触发。

onReady() 页面初次渲染完成时触发。一个页面只会调用一次,
代表页面已经准备妥当,可以和视图层进行交互。

所以加载顺序是先加载onLoad,再是onShow,最后onReady
3.小程序的组件生命周期
定义

组件的生命周期,指的是组件自身的一些函数,
这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
其中,最重要的生命周期有 created,attached和detached ,包含一个组件实例生命流程的最主要时间点。

流程

1.组件实例刚刚被创建好时, created 生命周期被触发。
此时,组件数据 this.data 就是在 Component 构造器中定义的数据 data 。
此时还不能调用 setData 。
通常情况下,这个生命周期只应该用于给组件 this 添加一些自定义属性字段。

2.在组件完全初始化完毕、进入页面节点树后, attached生命周期 被触发。
此时, this.data 已被初始化为组件的当前值。
这个生命周期很有用,绝大多数初始化工作可以在这个时机进行。

3.在组件离开页面节点树后, detached 生命周期被触发。退出一个页面时,如果组件还在页面节点树中,则 detached 会被触发。

组件的生命周期方法定义在哪里

生命周期方法可以直接定义在 Component 构造器的第一级参数中
组件的的生命周期也可以在 lifetimes 字段内进行声明
(这是推荐的方式,其优先级最高)。

在components/tab/index.js中验证

// components/tab/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
      aaa:{
        type:String,
        value:''

      }
  },

  lifetimes: {
    created:function(){
         console.log('组件created')
    },
    
    attached: function() {
      // 在组件实例进入页面节点树时执行
      console.log('组件attached')
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
      console.log('组件 detached')
    },
  },
 

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
     a1(){
       console.log('1')
       this.triggerEvent('a1',123)
     }
  }
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值