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

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)
     }
  }
})