微信小程序开发学习5（自定义组件）

1、学习目标

1. 能够知道如何自定义小程序组件
2. 能够知道小程序组件中behaviors的作用
3. 能够知道如何安装和配置vant-weapp组件库
4. 能够知道如何使用MobX实现全局数据共享
5. 能够知道如何对小程序的API进行Promise化

2、自定义组件

2.1、创建组件

1. 在项目根目录中，鼠标右键，创建components--->test文件夹
2. 在test文件夹上，鼠标右键,点击新建Componet
3. 键入组件的名称之后回车，会自动生成组件对于的4个文件，后缀名为.js、.json、.wxml和.wxss

注意：为了保证目录结构清晰，建议把不同的组件，存放到单独目录中

2.2、引用组件

组件的引用方式分为：局部引用和全局引用,顾名思义：

1. 局部引用：组件只能在当前被引用的页面内使用
2. 全局引用：组件可以在每一个小程序页面被引用

2.2.1、局部引用

在页面.json配置文件中引用组件的方式，叫做局部引用

{
  "usingComponents": {
    "my-test1":"/components/test1/test"
  }
}

# 在页面使用标签使用组件
<my-test1></my-test1>
1
2
3
4
5
6
7
8

2.2.2、全局引用

在app.json全局文件添加如上代码，即可使用标签使用全局的组件

2.2.3、使用场景

根据组件的使用频率和范围，来选择合适的引用方式

1. 如果某些组件在多个页面中经常被用到，建议进行全局引用
2. 如果某些组件在特定的页面中被用到，建议进行局部引用

2.3、组件和页面的区别

从表面来看，组件和页面都是由js、json、wxl和.wxss这四个文件组成的。但是，组件和页面的js、json文件有明显的不同：

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

3、组件样式

3.1、组件样式隔离

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的U1结构，如图所示：

1. 组件A的样式不会影响组件C的样式
2. 组件A的样式不会影响小程序页面的样式
3. 小程序页面的样式不会影响组件A和C的样式

好处：

• 防止外界的样式影响组件内部的样式
• 防止组件的样式破坏外界的样式

3.2、组件样式隔离的注意点

• app.wxss中的全局样式对组件无效
• 只有class选择器会有样式效果，id选择器、属性选择器、标签选择器不受样式隔离影响

建议：在组件和引用组件页面中建议使用class选择器，不要使用id、属性、标签选择器

3.3、修改组件的样式隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过stylelsolation修改组件的样式隔离选项，用法如下：

// 在组件.js文件中添加如下配置
Component({
    options:{
        styleIsolation:"isolated"
    }
})

// 或在组件.json文件中新增如下配置
{
	styleIsolation:"isolated"
}
1
2
3
4
5
6
7
8
9
10
11

styleIsolation的可选值

4、数据、方法和属性

4.1、data数据

在小程序组件中，用于组件模板渲染的私有数据，需要定义到data节点中

Component({
	/**
     * 组件的初始数据
     */
    data: {
        count:0
    }
})
1
2
3
4
5
6
7
8

4.2、methods方法

在小程序组件中，事件处理函数和自定义方法需要定义到methods节点

建议：自定义方法建议以—开头用于区分

Component({
	/**
     * 组件的方法列表
     */
    methods: {
        addCount(){
            this.setData({
                count:this.data.count+1
            })
            // 调用自定义方法
            this._showCount()
        },
        _showCount(){
            wx.showToast({
              title: 'count是：'+this.data.count,
              icon:'none'
            })
        }
    }
})

// 组件.wxml调用
<view>count的值是：{{count}}</view>
<button bindtap="addCount" type="primary">+1</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

4.3、properties属性

在小程序组件中，properties是组件的对外属性，用来接收外界传递到组件中的数据

Component({
	/**
     * 组件的属性列表
     */
    properties: {
        // 完整格式【有默认值】
        max:{
            type:Number,
            value:10
        },
        // 简化格式，不可以指定默认值
        max2:Number
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在页面引用组合的时候传递值

<my-test1 max="100">my-test1>
1

4.4、data和properties的区别

在小程序的组件中，properties属性和data数据的用法相同，它们都是可读可写的，只不过：

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

properties更倾向于存储外界传递到组件中的数据

showInfo(){
    console.log(this.data) // {count: 0, max: 10, max2: 0}
    console.log(this.properties) // {count: 0, max: 10, max2: 0}
    console.log(this.data === this.properties) // true
}



1
2
3
4
5
6
7
8

4.5、使用setData修改properties的值

由于data数据和properties属性在本质上没有任何区别，因此properties属性的值也可以用于页面渲染或使用setData为properties中的属性重新赋值，示例代码如下：

this.setData({
    count:this.data.count+1,
    max:this.properties.max + 1
})
1
2
3
4

5、数据监听器

5.1、什么是数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于Vu中的watch侦听器。在小程序组件中，数据监听器的基本语法格式如下：

sComponent({
    // 事件监听器
    observers:{
        // 注意先后顺序
        '字段a,字段b':function(字段a的值，字段b的值){
            
        }
    }
})
1
2
3
4
5
6
7
8
9

5.2、数据监听器的基本用法

组件ui结构

<view>{{n1}} + {{n2}} = {{sum}}view>
<button size="mini" bindtap="addn1" type="primary">n1自增button>
<button size="mini" bindtap="addn2" type="default">n2自增button>
1
2
3

组件js文件如下

// components/test2/test2.js
Component({
    /**
     * 组件的初始数据
     */
    data: {
        n1:0,
        n2:0,
        sum:0
    },

    /**
     * 组件的方法列表
     */
    methods: {
        addn1(){
            this.setData({
                n1:this.data.n1 +1
            })
        },
        addn2(){
            this.setData({
                n2:this.data.n2 +1
            })
        },
    },
    // 数据监听器
    observers:{
        'n1,n2':function(new1,new2){
            this.setData({
                sum:new1+new2
            })
        }
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

5.3、捷监听对象属性的变化

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

// 数据监听器
observers:{
    '对象.属性a,对象.属性b':function(属性a的值，属性b的值){
        // 触发的三种情况
        // 1、【属性a变动】使用setData设置this.data.对象.属性a时触发
        // 2、【属性b变动】使用setData设置this.data.对象.属性b时触发
        // 3、【直接为对象赋值】使用setData设置this.data.对象时触发
    }
}
1
2
3
4
5
6
7
8
9

5.4、数据监听器案例

1. 创建新的组件test2

2. 在app.json中引用全局组件

   "usingComponents": {
       "my-test3":"/components/test3/test3"
     }
   1
   2
   3

3. 在页面引用组件

   <my-test3>my-test3>
   1

4. 在组件.js文件中定义data数据

   Component({
       /**
        * 组件的初始数据
        */
       data: {
           rgb:{
               r:0,
               g:0,
               b:0
           },
           fullColor:'0,0,0'
       }
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13

5. 在组件.wxml中渲染ui结构

   
   <view style="background-color: rgb({{fullColor}});" class="colorBox">颜色值为：{{fullColor}}view>
   <button size="mini" bindtap="changeR" type="default">R值修改button>
   <button size="mini" bindtap="changeG" type="primary">G值修改button>
   <button size="mini" bindtap="changeB" type="warn">B值修改button>
   1
   2
   3
   4
   5

   组件.wxss内容如下

   /* components/test3/test3.wxss */
   .colorBox{
   	line-height: 300rpx;
   	color: white;
   	font-size: 30rpx;
   	text-shadow: 0rpx 0rpx 2rpx black;
   	text-align: center;
   }
   1
   2
   3
   4
   5
   6
   7
   8

6. 组件.js方法处理

   /**
    * 组件的方法列表
    */
   methods: {
       changeR(){
           this.setData({
               'rgb.r':this.data.rgb.r + 5 > 255 ? 255:this.data.rgb.r+5
           })
       },
       changeG(){
           this.setData({
               'rgb.g':this.data.rgb.g + 5 > 255 ? 255:this.data.rgb.g+5
           })
       },
       changeB(){
           this.setData({
               'rgb.b':this.data.rgb.b + 5 > 255 ? 255:this.data.rgb.b+5
           })
       }
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20

7. 监听事件变化

   observers:{
       // 监听对象上的三个颜色值属性
       'rgb.r,rgb.g,rgb.b':function(r,g,b){ 
           // 重新赋值fullColor
           this.setData({
               fullColor:`${r},${g},${b}`
           })
       }
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9

   如果某个对象中需要被监听的属性太多，为了方便，可以使用通配符*来监听对象中所有属性的变化

   observers:{
       // 监听对象上的三个颜色值属性 
       'rgb.**':function(boj){ 
           // 重新赋值fullColor
           this.setData({
               fullColor:`${boj.r},${boj.g},${boj.b}`
           })
       }
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9

6、纯数据字段

6.1、什么是纯数据字段

概念：纯数据字段指的是哪些不用于界面渲染的data字段

应用场景：例如有些情况下，某些dta中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这种特性的data字段适合被设置为纯数据字段。

好处：纯数据字段有助于提示页面更新的性能

6.2、使用规则

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

options:{
    // 指定纯数据字段【正则表达式匹配】
    pureDataPattern:/^_/
},

/**
 * 组件的初始数据
 */
data: {
    a:true, // 普通字段
    _b:true // 纯数据字段
}
1
2
3
4
5
6
7
8
9
10
11
12

7、组件生命周期

7.1、组件的生命周期函数

7.2、lifetimes节点【新】

在小程序组件中，生命周期函数可以直接定义在Component构造器的第一级参数中，可以在lifetimes字段内进行声明（这是推荐的方式，其优先级最高）。示例代码如下：

// 推荐新方法创建生命周期函数
lifetimes:{
    created(){
        console.log('created')
    },
    attached(){
        console.log('attached')
    }
},
// 不建议使用下面的方式
created(){
    console.log('created')
},
attached(){
    console.log('attached')
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

如果新旧并存的生命周期将会被新的覆盖旧的

7.2、组件所在页面的生命周期

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

例如：每当触发页面的soW生命周期函数的时候，我们希望能够重新生成一个随机的RGB颜色值。
在自定义组件中，组件所在页面的生命周期函数有如下3个，分别是：

7.3、pageLifetimes节点【界面生命周期】

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

Component({
	// 定义组件在页面的生命周期
pageLifetimes:{
    show(){
        console.log('show')
    },
    hide(){
        console.log('hide')
    },
    resize(){
        console.log('resize')
    }
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

8、插槽

在自定义组件的wxml结构中，可以提供一个节点（插槽)，用于承载组件使用者提供的wXml结构。

8.1、单个插槽

在小程序中，默认每一个自定义组件中只允许使用一个标签进行占位，这种个数上的限制叫做单个插槽

<my-test4>

	<view>这是使用插槽view>
my-test4>
1
2
3
4
5

使用者进行指定的内容填写

<view>
	<view>这是一个组件内部的结构view>
	
	<slot>slot>
view>
1
2
3
4
5
6

8.3、多个插槽

在小程序的自定义组件中，需要使用多个slot插槽时，可以在组件.js文件中，通过如下方式启动

Component({
    options:{
        // 启动多个插槽
        multipleSlots:true
    }
})
1
2
3
4
5
6

8.4、定义多个插槽

可以在组件.wxml中使用多个slot标签，以不同的name来区分不同的插槽

<view>
    <slot name="before">slot>
	<view>这是一个组件内部的结构view>
	
	<slot name="after">slot>
view>

1
2
3
4
5
6
7
8

使用多个插槽

在使用带有插槽自定义组件时，需要使用slot属性来将节点插入到不同的solt中

<my-test4>

	<view slot="before">这是使用插槽1view>
	<view slot="after">这是使用插槽2view>
my-test4>
1
2
3
4
5
6

9、父子组件之间的通信

9.1、父子组件之间通信的3种方式

1. 属性绑定

   用于父组件向子组件的指定属性设置数据，仅能设置json兼容的数据

2. 事件绑定

   用于子组件向父组件传递数据，可以传递任意数据

3. 获取组件实例

   • 父组件还可以通过this.selectComponent()获取子组件实例对象
   • 这样旧可以直接访问子组件的任意数据和方法

9.2、属性绑定

属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递个子组件，父组件实例代码如下

<!--pages/contact/contact.wxml-->
<view>父组件中的count值：{{count}}</view>
<view>~~~~~~~~父子组件之间~~~~~~~~</view>
<my-test5 count='{{count}}'></my-test5>
1
2
3
4

子组件在properties节点中声明对于的属性并使用

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        count:Number
    }
})

// 子组件.wxml使用
<view>子组件中的count值为：{{count}}</view>
1
2
3
4
5
6
7
8
9
10
11

9.3、事件绑定【子组件向父组件传值】

事件绑定用于实现子向父传值，可以传递任何·类型的数据，使用步骤如下：

1. 在父组件的.js文件中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件

   /**
    * 先子组件传递方法
    */
   syncCount(e){
       console.log('syncCount');
   }
   1
   2
   3
   4
   5
   6

2. 在父组件的wxml中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件

   :冒号后面的内容根据自身命名

   <my-test5 count='{{count}}' bind:sync='syncCount'>my-test5>
   1

3. 在子组件的js中，通过调用this.triggerEvent('自定义事件名称',{/*参数对象*/})将数据发送到父组件中

   /**
    * 组件的方法列表
    */
   methods: {
       addCount(){
           this.setData({
               count: this.properties.count +1
           })
            // 触发自定义事件，同步给父组件
           this.triggerEvent('sync',{valus:this.properties.count})
       }
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12

4. 在父组件的js中，通过e.detail获取到子组件传递过来的数据

   /**
    * 先子组件传递方法
    */
   syncCount(e){
       console.log('syncCount：'+e.detail.valus)
       this.setData({
           count:e.detail.valus
       })
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9

9.4、获取组件实例

可以在父组件里调用this.selectComponent('id或class选择器')，获取子组件的实例对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择

<my-test5 count='{{count}}' bind:sync='syncCount' class="customA">my-test5>

<button bindtap="getChild" type="warn">获取子组件的实例对象button>
1
2
3

父组件中的方法定义

getChild(){
     // 通过类名选择器
     const child = this.selectComponent('.customA')
     console.log('获取子组件实例：'+child)
     child.setData({
         // 不能使用this作为指向
         count:child.properties.count + 1
     })
     // 调用子组件里的方法
     child.addCount()
}
1
2
3
4
5
6
7
8
9
10
11

10、behaviors

behaviors是小程序中，用于实现组件间代码共享的特性，类似于vue.js中的mixins

每一个behavior可以包含属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中

每一个组件可以引用多个behavior，behavior也可以引入其他的behavior

10.1、创建behavior

调用Behavior(Objext object)方法即可创建一个共享的behavior实例对象，供所有的组件使用

创建一个my-behavior.js文件

module.exports = Behavior({
	data:{
		username:'zs'
	},
	properties:{

	},
	methods:{
		
	}
})
1
2
3
4
5
6
7
8
9
10
11

10.2、导入并使用behavior

在组件中，使用require()方法导入需要的behavior，挂载后即可访问behavior中的数据或方法

// 导入my-behavior共享组件
const myBehavior = require("../../behaviors/my-behavior")
Component({
    // 引用的behavior
    behaviors:[myBehavior]
})
1
2
3
4
5
6

10.3、behavior中所有可用的节点

常用的节点以及生命周期函数都可以作为共享

10.4、同名字段的覆盖和组合规则

组件和它引用的behavior中可以包含同名的字段，此时可以参考如下3种同名时的处理规则：

1. 同名的数据字段(data)
2. 同名的属性(properties)或方法(methods)
3. 同名的生命周期函数

详细可参考官方文档