组件基本使用

创建组件

1、在项目的根目录下创建components文件夹，在components文件中定义所有自定义组件。
2、右键点击“新建Component”
3、输入组件名称之后回车，会生成4个文件：.js、.json、.wxml、.wxss

引用组件

局部引用

1、在需要使用组件的页面.json配置文件中的”usingComponents”节点中声明要引入的组件

1
2
3
"usingComponents": {
    "test1":"/components/test1/test1"
  }

全局引用组件

在app.json中和window节点平级声明”usingComponents”节点，该节点以对象的形式呈现，内部写法同上。

1
2
3
"usingComponents": {
    "test1":"/components/test1/test1"
  }

组件和页面的区别

1、组件的.json文件中需要声明”component”:true属性。
2、组件的.js文件中调用的是Component()函数而非Page()函数。
3、组件的事件处理函数需要定义到methods节点中。

样式隔离

隔离特性

1、两个组件的样式不会相互影响
2、小程序页面的样式不会影响组件的样式
3、组件的样式也不会影响小程序的样式
注意：app.wxss的全局样式对组件无效；只用class选择器会有样式隔离，id选择器、属性选择器、标签选择器不受样式隔离的影响。

修改组件的样式隔离选项

有时候我们希望在外界能控制组件内部的样式，这时可以通过组件options选项中的stylesolation属性修改组件的样式隔离选项。
组件.js：

1
2
3
4
5
Component({
  options:{
    styleIsolation:"apply-shared"
  }
})

styleIsolation有以下可选参数：
1、isolated 默认值 启用样式隔离，class指定的样式将不会互相影响。
2、apply-shared 页面wxss样式将影响到自定义组件，但组件wxss中指定的样式不会影响页面。
3、shared 表示页面wxss将影响到自定义组件，自定义组件wxss中指定的样式也会影响页面和其他设置了apply-shared或shared的自定义组件。

properties

用于父组件向子组件传递数据

简单使用

父组件：

1
<test1 max="10"></test1>

子组件：

1
2
3
4
5
6
7
8
9
10
Component({
  properties: {
    //完整写法
    max:{
      type:Number,//数据类型
      value:0//默认值
    },
    max:Number
  }
})

注意事项

在小程序组建中，properties属性是可读写的，data和properties指向了同一对象，所以想要修改properties属性的值也可以使用this.setData()函数。

1
this.properties===this.data;//true

数据监听器

相当于VUE的watch。

监听多个数据

写在组件配置对象的observers属性上，以函数的形式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Component({
  data:{
    val1:0,
    val2:100,
    sum:0
  },
  observers:{
    "val1,val2":function(newVAL1,newVAL2){
      this.setData({
        sum:newVAL1+newVAL2
      })
    }
  }
})

监听对象的属性

1
2
3
4
5
6
7
8
9
10
11
12
Component({
  data:{
    user:{
      userName:"张三"
    }
  },
  observers:{
    "user.张三":(newUser)=>{
      console.log("有属性变化")
    }
  }
})

监听对象所有属性

可以使用通配符**来监听对象中所有属性的变化：

1
2
3
4
5
6
7
8
9
10
11
12
Component({
  data:{
    user:{
      userName:"张三"
    }
  },
  observers:{
    "user.**":()=>{
      console.log("有属性变化")
    }
  }
})

给某数据的某一属性赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Component({
  data:{
    user:{
      userName:"张三"
    }
  },
  methods:{
    changeVal:function(){
      this.setData({
        'user.userName':"李四"
      })
    }
  }
})

纯数据字段

纯数据字段指的是哪些不用于页面渲染的data字段，该字段不会展示在页面上也不会传递给其他组件，设置为纯数据字段有利于提升页面更新的性能。

使用方法

在Component构造器的options节点中，指定pureDataPattern为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段：

1
2
3
4
5
6
7
8
9
Component({
  options:{
    pureDataPattern:/^_/
  },
  data:{
    a:true,
    _a:true
  }
})

组件的生命周期

主要的生命周期钩子

小程序组件的生命周期如下：
img
生命周期钩子写在Component配置对象的lifetimes属性中，以对象的形式：

1
2
3
4
5
6
7
8
9
10
Component({
  lifetimes:{
    created:function(){
      console.log("created")
    },
    attached:function(){
      console.log("attached")
    }
  }
})

其中最重要的生命周期有：
1、created
组件实例刚创建好会触发，此时不能调用setData()，一般在这个生命周期钩子中给this添加一些自定义的属性。
2、attached
组件完全初始化完毕进入页面节点树后会触发，绝大多数初始化在这时候进行。
3、detached
离开页面节点树后触发，一般在这里做清除事件监听等任务。

组件所在页面的生命周期

当自定义组件行为依赖于页面状态时使用。

组件所在页面的生命周期写在Component配置对象的pageLifeTimes属性中，以对象的形式。

1
2
3
4
5
6
7
8
Component({
  pageLifetimes:{
    //可以在生命周期钩子里面通过this.xxx()调用methods的函数等操作
    show:()=>{},
    hide:()=>{},
    resize:()=>{}
  }
})