小程序中自定义组件所在页面的生命周期函数

「这是我参与2022首次更文挑战的第22天，活动详情查看：2022首次更文挑战」

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

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

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

生命周期函数	参数	描述
show	无	组件所在的页面被展示时执行
hide	无	组件所在的页面被隐藏时执行
resize	Object Size	组件所在的页面尺寸变化时执行

---

如何在组件中监听所在页面的生命周期函数

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

Component({
  pageLifetimes: {
    //页面被展示
    show() {
    
    },
    //页面被隐蔽
    hide() {
    
    },
    //页面尺寸变化
    resize() {
    
    }
  }
})

---

组件中监听所在页面的生命周期函数应用

• 需求分析

  

  在之前# 小程序中自定义组件的数据监听器 文章的示例中，每次加载页面，默认视图的颜色是黑色。通过使用组件监听所在页面的生命周期函数，我们这一版需要把默认的黑色改为随机生成的RGB颜色值，使其达到每次加载页面，用户看得都是不同的颜色

• 需求实现

  根据以上的需求分析，其实现步骤非常简单，具体分为以下俩步

  1. 在 methods 节点中，定义一个随机生成 RGB 颜色的方法

     Component({
         
       ...其他代码...
       methods: {
       
         ...其他代码...
       
         _randomColor() {
           this.setData({
             _rgb: {
               r: Math.floor(Math.random() * 256),
               g: Math.floor(Math.random() * 256),
               b: Math.floor(Math.random() * 256)
             }
           })
         }
       }
     })
     

  2. 在 pageLifetimes 节点中，在 show 这个方法中去调用随机生成的 RGB 颜色的方法

     Component({
         
       ...其他代码...
     
       methods: {
           ...其他代码...
         
           _randomColor() {
             this.setData({
               _rgb: {
                 r: Math.floor(Math.random() * 256),
                 g: Math.floor(Math.random() * 256),
                 b: Math.floor(Math.random() * 256)
               }
             })
           }
         }
       },
       
       pageLifetimes: {
         show() {
           this._randomColor();
         }
       }
     
     })
     

• 实现效果