APP、页面和组件的生命周期——微信小程序基础学习

一个对象从创建到消亡，整个过程所经历阶段的集合，称作“生命周期”，整个App对象、page对象和component对象都有他们自己的生命周期。用户在使用小程序时所涉及的各种操作都会触发不同对象的不同生命周期阶段。我们需要来监听某个特定对象的特定阶段，来做一些特定的事

一、app的生命周期

在app.js文件中会有很多很多属性.

App({
  onLaunch (options) {
    // 初始化完成时就会触发
  },
  onShow (options) {
    //  当小程序启动或者从后台进入前台显示时就会触发
  },
  onHide () {
    // 但小程序从前台进入后台时就会触发
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

二、 page的生命周期

    onLoad: function (options) {
        console.log(当页面加载完毕后会触发)
    },

    onReady: function () {
        console.log(当页面初次渲染完成后会触发)

    },

    onShow: function () {
        console.log(当页面显示完毕后会触发)

    },

    onHide: function () {
        console.log(当页面隐藏后会触发)

    },

    onUnload: function () {
        console.log(当页面卸载后会触发)

    },

三、component的生命周期

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

其中，最重要的生命周期是 created，attached，detached ，包含一个组件实例生命流程的最主要时间点。

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

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

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

生命周期方法可以直接定义在 component 构造器的第一级参数中。也就是

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

组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）

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

3.2组件所在页面的生命周期

还有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。其中可用的生命周期包括：

Component({
  pageLifetimes: {
    show: function() {
     console.log("页面被展示")
    },
    hide: function() {
      console.log("页面被隐藏")
    },
    resize: function(size) {
       console.log("页面尺寸变化")
    }
  }
})

四、页面跳转和传值

4.1页面路由

在小程序中所有页面的路由全部由框架进行管理，框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候，页面栈的表现如下：

可以使用 getCurrentPage() 函数获取当前页面栈

路由的触发时机一般有两种，第一种：调用API。第二种：使用组件

需要注意的是：navigateTo，redirectTo 只能打开非 tabBar 页面。

使用方法：

1.使用组件：

<navigator url="/page/6-swiper/6-swiper">
    <scroll-view class="sv" scroll-y scroll-into-view="to3">
        <button>1</button>
        <button>2</button>
        <button id="to3">3</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
    </scroll-view>
</navigator>

  2.调用API

                在.js文件中的处理函数中写入

wx.redirectTo({
              url: '/pages/homepage/homepage',
            })