微信小程序组件所在页面的生命周期

一 什么是组件所在页面的生命周期

有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期。

例如：每当触发页面的 show 生命周期函数的时候，我们希望能够重新生成一个随机的 RGB 颜色值。

在自定义组件中，组件所在页面的生命周期函数有如下 3 个。

二 pageLifetimes 节点

组件所在页面的生命周期函数，需要定义在 pageLifetimes 节点中。

Component({

  pageLifetimes: {

    show() { // 页面被展示时执行

      console.log('show')

      this._randomColor()

    },

    hide() { // 页面被隐藏时执行

      console.log('hide')

    },

    resize() { // 页面尺寸变化时执行

      console.log('resize')

    }

  }

})

三 小案例——生成随机的 RGB 颜色值

Component({

  methods:{

    // 生成随机 RGB 颜色的方法。非事件处理函数建议以 _ 开头

    _randomColor() {

      this.setData({ // 为 data 里面的 _egb 纯数据字段重新赋值

        _rgb: {

          r: Math.floor(Math.random() * 256),

          g: Math.floor(Math.random() * 256),

          b: Math.floor(Math.random() * 256)

        }

      })

    }

  }

  pageLifetimes: {

    // 组件所在页面被展示时，立即调研 _randomColor 生成随机颜色值

    show() {

      console.log('show')

      this._randomColor()

    }

  }

})