黑马程序员微信小程序学习总结8.数据监听器，生命周期

数据监听器

例子：

监听属性：

监听器案例

wxml:

<!--components/test3/test3.wxml-->
<text>components/test3/test3.wxml</text>
<view class="colorBox" style="background-color: rgb({{fullColor}});">颜色值：{{fullColor}}</view>
<button size="mini" type="default" bind:tap="setR">R</button>
<button size="mini" type="primary" bind:tap="setG">G</button>
<button size="mini" type="warn" bind:tap="setB">B</button>
<view>{{rgb.r}}，{{rgb.g}}，{{rgb.b}}</view>

wxss:

/* components/test3/test3.wxss */
/* 
 line-height: 200rpx;#数值行高
  height: 200rpx;#colorBox颜色框高
  color: white;#文字颜色
  background-color: blue;#文字默认背景，会被style覆盖
  text-align: center;#文字左右居中
  text-shadow: 0rpx 0rpx 2rpx black;#文字阴影
  font-size: 24px;#文字大小
*/
.colorBox {
  line-height: 200rpx;
  height: 200rpx;
  color: white;
  background-color: blue;
  text-align: center;
  text-shadow: 0rpx 0rpx 2rpx black;
  font-size: 24px;
}

js:

// components/test3/test3.js
Component({
  observers:{
    // 多个属性不好写，可以使用rgb.**通配符
    'rgb.r, rgb.g, rgb.b': function(r,g,b){
      this.setData({
        'fullColor': `${r}, ${g}, ${b}`//一层值可以不用单引号直接写fullColor也行。${r}, ${g}, 和 ${b} 是模板字符串的表达式部分，它们会被变量 r、g 和 b 的值所替代，并且最终结果会被转换成字符串。所以反引号 ` ` 用于创建包含动态内容的字符串，从而构造出 fullColor 字符串。
      })
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

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

  /**
   * 组件的方法列表
   */
  methods: {
    setR(){
      this.setData({
        'rgb.r': this.data.rgb.r + 5 > 255? 255:this.data.rgb.r + 5
      });
    },
    setG(){
      this.setData({
        'rgb.g': this.data.rgb.g + 5 > 255? 255:this.data.rgb.g + 5
      });
    },
    setB(){
      this.setData({
        'rgb.b': this.data.rgb.b + 5 > 255? 255:this.data.rgb.b + 5
      });
    }
  }
})

json:

{
  "component": true,
  "usingComponents": {}
}

纯数字字段

如上个案例的rgb（去掉wxml中的最后一个view后）

如何使用

上个例子中：

注意：记得把用到rgb的地方改为_rgb

自定义组件的生命周期

就是在组件生命周期时执行有需要的函数

主要的：

如何使用：lifetimes节点

不推荐使用旧方法

组件所在页面的生命周期

如：组件所在页面显示时设置组件某些值

如何使用（pageLifetimes）

然后将随机设置rgb值的函数在show里面调用即可。

例子：
html：

<!--components/test3/test3.wxml-->
<view class="colorBox" style="background-color: rgb({{fullColor}});">颜色值：{{fullColor}}</view>
<button size="mini" type="default" bind:tap="setR">R</button>
<button size="mini" type="primary" bind:tap="setG">G</button>
<button size="mini" type="warn" bind:tap="setB">B</button>
<view>{{_rgb.r}}，{{_rgb.g}}，{{_rgb.b}}</view>

wxss：

/* components/test3/test3.wxss */
/* 
 line-height: 200rpx;#数值行高
  height: 200rpx;#colorBox颜色框高
  color: white;#文字颜色
  background-color: blue;#文字默认背景，会被style覆盖
  text-align: center;#文字左右居中
  text-shadow: 0rpx 0rpx 2rpx black;#文字阴影
  font-size: 24px;#文字大小
*/
.colorBox {
  line-height: 200rpx;
  height: 200rpx;
  color: white;
  background-color: blue;
  text-align: center;
  text-shadow: 0rpx 0rpx 2rpx black;
  font-size: 24px;
}

json：

{
  "component": true,
  "usingComponents": {}
}

// components/test3/test3.js
Component({
  pageLifetimes:{
    show(){
      this._randomColor()
      console.log("show")
    },
    hide(){
      console.log("hide")
    },
    resize(size){
      console.log("resize")
    }
  },
  lifetimes:{
    created(){
      console.log("~~~~~created")
    },
    attached(){
      console.log("~~~~~attached")
    },
    detached(){
      console.log("~~~~~detached")
    }
  },
  observers:{
    // 多个属性不好写，可以使用rgb.**通配符
    '_rgb.r, _rgb.g, _rgb.b': function(r,g,b){
      this.setData({
        'fullColor': `${r}, ${g}, ${b}`//一层值可以不用单引号直接写fullColor也行。${r}, ${g}, 和 ${b} 是模板字符串的表达式部分，它们会被变量 r、g 和 b 的值所替代，并且最终结果会被转换成字符串。所以反引号 ` ` 用于创建包含动态内容的字符串，从而构造出 fullColor 字符串。
      })
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

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

  /**
   * 组件的方法列表
   */
  methods: {
    _randomColor(){
      this.setData({
        _rgb: {
          // Math.random()生成一个0到1之间的随机浮点数，然后将其乘以256，这样得到的结果就是一个介于0到255.999...之间的数。接着，Math.floor()函数将这个数向下取整，得到一个介于0到255的整数。因此，这段代码生成的值的范围是0到255之间的整数。
          r: Math.floor(Math.random() * 256),
          g: Math.floor(Math.random() * 256),
          b: Math.floor(Math.random() * 256)
        }
      })
    },
    setR(){
      this.setData({
        '_rgb.r': this.data._rgb.r + 5 > 255? 255:this.data._rgb.r + 5
      });
    },
    setG(){
      this.setData({
        '_rgb.g': this.data._rgb.g + 5 > 255? 255:this.data._rgb.g + 5
      });
    },
    setB(){
      this.setData({
        '_rgb.b': this.data._rgb.b + 5 > 255? 255:this.data._rgb.b + 5
      });
    }
  }
})

效果图：

每次重新编译会刷新默认值