组件

复用性强

创建组件

• 项目根目录下，新建components

• components---->新建文件夹 mycom--->myCom文件夹右击 新建component 输入组件的名称回车自动生成4个文件

引入组件

全局引入

组件可以在每个小程序页面中使用

多个页面都会用到该组件使用 全局

app.json

注册组件

"usingComponents":{
     "my-com":"/components/myCom/myCom"
},

使用组件

<my-com></my-com>

局部引入

组件只能在当前被引入的页面中使用

页面的json中

{
  "usingComponents": {
    "my-text":"/components/myText/myTest"
  }
}

使用组件

<my-text></my-text>

组件和页面的区别

都是由4个文件组成 .js .json .wxml .wxss

组件

组件的json文件中需要声明 "component": true,

组件的 .js文件中调用Component() 函数

组件的事件处理函数需要定义到methods中

页面

页面的 .js中调用 Page()方法

样式

一般情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的ui结构

• 组件myCom的样式不会影响组件myText

• 组件myCom的样式不会影响小程序页面

• 小程序页面的样式不会影响组件myCom和组件myText

app.wxss中的全局样式对组件无效

只有class选择器有样式隔离的影响，id，标签，属性选择器不受样式隔离的影响

建议使用class选择器

data数据

定义组件的数据

  data: {
    count:0
  },

methods方法

事件处理函数 和自定义方法定义到methods中

methods: {
    addCount(){
      this.setData({
        count:this.data.count+1
      })
      this.showCount()
    },
    showCount(){
      wx.showToast({
        title: 'count值为'+this.data.count,
      })
    }
​
  }

properties

父传子

properties是组件的对外属性，用来接收外界传递给组件中的数据

//父组件
<my-com tit="2202A大哥们好" num="{{20}}"></my-com>

 properties: {
    tit:{
      type:String,   //数据类型
      value:'hello'   //默认值
    },
    num:Number
  },

properties和data的区别

• 小程序的组件中，properties属性和data属性用法相同，都是可读可写的但是：

  • data更倾向于存储组件的私有数据

  • properties 存储外界传递给组件的私有数据

methods: {
    addCount(){
      console.log(this.data)   //{count: 0, tit: "2202A大哥们好", num: 20}
      console.log(this.properties)
      // 本质上一样的，都是可读可写的
      console.log(this.properties===this.data)   //true
    }
 }
​

使用setData修改properties的值

this.setData({
          num:this.properties.num+2
})

数据监听器

监听和响应任何属性和数据字段的变化，从而执行特定的操作

Component({
    observers:{
        '字段A，字段B'：function(字段A的新值，字段B的新值){
            //代码
        }
    }
})

代码

<view class="box">
    <view>{{n1}}+{{n2}}={{sum}}</view>
    <button bindtap="addN1">n1+1</button>
    <button bindtap="addN2">n2+1</button>
</view>

Component({
  /**
   * 组件的初始数据
   */
  data: {
    n1:0,
    n2:0,
    sum:0
  },
​
  observers:{
    'n1,n2':function(newN1,newN2){
      this.setData({
        sum:newN1+newN2
      })
    }
  },
​
  /**
   * 组件的方法列表
   */
  methods: {
    addN1(){
      this.setData({
        n1:this.data.n1+1
      })
    },
    addN2(){
      this.setData({
        n2:this.data.n2+1
      })
    }
  }
})
​

监听对象属性的变化

支持监听对象中单个或多个属性的变化

Component({
  observers: {
    'some.field.**': function(field) {
      // 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
      // （除此以外，使用 setData 设置 this.data.some 也会触发）
      field === this.data.some.field
    },
  },
  attached: function() {
    // 这样会触发上面的 observer
    this.setData({
      'some.field': { /* ... */ }
    })
    // 这样也会触发上面的 observer
    this.setData({
      'some.field.xxx': { /* ... */ }
    })
    // 这样还是会触发上面的 observer
    this.setData({
      'some': { /* ... */ }
    })
  }
})

案例

wxml

{{fullColor}}
<view style="background-color:rgb({{fullColor}});" class="colorbox">
  {{fullColor}}
</view>
<button bindtap="changR" size="mini">R</button>
<button bindtap="changG" size="mini">G</button>
<button bindtap="changB" size="mini">B</button>

js

Component({
  /**
   * 组件的初始数据
   */
  data: {
    rgb:{
      r:0,
      g:0,
      b:0,
    },
    fullColor:'0,0,0'
  },
​
  // 监听对象中属性的变化
  observers:{
    'rgb.r,rgb.g,rgb.b':function(r,g,b){
      this.setData({
        fullColor:`${r},${g},${b}`
      })
    }
  },
​
  /**
   * 组件的方法列表
   */
  methods: {
    changR(){
      this.setData({
        'rgb.r':this.data.rgb.r+5>255?255:this.data.rgb.r+5
      })
    },
    changG(){
      this.setData({
        'rgb.g':this.data.rgb.g+5>255?255:this.data.rgb.g+5
      })
    },
    changB(){
      this.setData({
        'rgb.b':this.data.rgb.b+5>255?255:this.data.rgb.b+5
      })
    }
  }
})
​

组件生命周期

组件全部生命周期

组件主要生命周期

在小程序组件中，最重要的生命周期函数有3个，分别是created，attached，detached

组件实例刚刚被创建好的时候，created生命周期函数会被触发

• 不能调用setData

• 用于给组件的this添加一些自定义的属性字段

组件完全初始化完毕，进入页面节点树后，attached生命周期函数会触发

• this.data已被初始化完毕

• 初始化工作，比如发请求

组件离开页面节点树后，detached生命周期函数会触发

• 退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数

• 清理性质的工作

lifetimes节点

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

组件所在页面的生命周期

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

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

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