【微信小程序】自定义组件 - 组件所在页面的生命周期

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

2. pageLifetimes 节点

组件所在页面的生命周期函数，需要定义在 pageLifetimes 节点中，示例代码如下：

3.示例- 生成随机的 RGB 颜色值

我的代码

// components/rgb/rgb.js
Component({
  /**
   * 组件的属性列表
   */
  lifetimes:{
    created(){
      console.log('created');
    },
    attached(){
      console.log('attached');
    },
    ready(){
      console.log('ready');
    },
    detached(){
      console.log('detached');
    }
  },
  pageLifetimes:{
    show(){
      this.randomRgb()
      console.log('show');
      
    },
    hide(){
      console.log('hide');
    },
    resize(){
      console.log('resize'); 
    }
  },
  options:{
    pureDataPattern:/^_/
  },
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    _rgb:{
      r:0,
      g:0,
      b:0
    },
    fullColor:''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changR(e){
      if(e.target.dataset.tab === 'add'){
        this.setData({
        '_rgb.r':this.data._rgb.r<255?this.data._rgb.r+5:255
      })
      }
      if(e.target.dataset.tab === 'sub'){
        this.setData({
        '_rgb.r':this.data._rgb.r>0?this.data._rgb.r-5:0
      })
      }
      
    },
    changG(e){
      if(e.target.dataset.tab === 'add'){
        this.setData({
        '_rgb.g':this.data._rgb.g<255?this.data._rgb.g+5:255
      })
      }
      if(e.target.dataset.tab === 'sub'){
        this.setData({
        '_rgb.g':this.data._rgb.g>0?this.data._rgb.g-5:0
      })
      }
    },
    changB(e){
      if(e.target.dataset.tab === 'add'){
        this.setData({
        '_rgb.b':this.data._rgb.b<255?this.data._rgb.b+5:255
      })
      }
      if(e.target.dataset.tab === 'sub'){
        this.setData({
        '_rgb.b':this.data._rgb.b>0?this.data._rgb.b-5:0
      })
      }
    },
    randomRgb(){
      this.setData({
        _rgb:{
          r:Math.floor(Math.random()*256),
          g:Math.floor(Math.random()*256),
          b:Math.floor(Math.random()*256)
        }
      })
    }
  },
  observers:{
   '_rgb.**':function(newRgb){
    this.setData({
      fullColor:`${newRgb.r},${newRgb.g},${newRgb.b}`
    })
    // console.log(this.data.fullColor);
   } 
  }
})