微信小程序（自定义组件）

自定义组件

创建自定义组件

右键新建Component，自动生成四个文件

引用组件

• 局部引用：

  在页面的.json文件中的usingComponents对象引用组件

{
  "usingComponents": {
    "my-test1":"/components/test/test"
  }
}
1
2
3
4
5

​ 在wxml中使用组件

<my-test1>my-test1>
1

• 全局引用

  在app.json中的usingComponents对象引用组件

组件和页面的区别

从文件组成来看，二者相同，但是具体内容会有不同之处

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

自定义组件的样式

样式隔离

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

注意点：

• app.wxss中的全局样式对组件无效
• 只有类选择器无效，id选择器、属性选择器、标签选择器仍会受到影响。因此，在组件和引用组件的页面中建议只使用class选择器

修改样式隔离选项

默认情况下，自定义组件具有样式隔离的特性，但有时我们确实需要对组件内部的样式进行控制

修改方式有两种

• 在组件的.js文件中新增如下配置stylesolation

Component({
	options:{
		stylesolation:'isolated'
	}
})
1
2
3
4
5

• 在组件的.json文件新增stylesolation属性节点

stylesolation的可选值

组件的data和methods

同vue

组件的properties

同vue的props

properties:{
	// 完整定义
	max:{
		type: Number,
		value: 10
	},
	// 简化定义
	max: Number
}
1
2
3
4
5
6
7
8
9

注意：在小程序中，properties和data中的数据都是可读可写的

使用setData可以修改properties的值

数据监听

同vue的watch

  observers:{
    '字段A,字段B':function(newA,newB){
      // do something
    }
  }
1
2
3
4
5

监听对象中的属性

触发对象监听器的3种情况，使用setData

1. 设置A
2. 设置B
3. 设置对象

// 指定监听
  observers:{
    'obj.A,obj.B':function(newA,newB){
      // do something
    }
  }
// 监听所有属性
  observers:{
    'obj.**':function(newObj){
      // do something
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12

使用纯数据字段提升页面性能

什么是纯数据字段

只存在于业务逻辑中，不需要渲染到页面的数据

如何使用纯数据字段

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

  options:{
    // 定义纯数据字段类型
    // 下划线开头的data就是纯数据字段
    pureDataPattern:/^_/
  },
1
2
3
4
5

组件的生命周期函数

周期函数类型

• created：组件实例刚被创建好的时候
  • 此时不能调用setData
  • 在该生命周期中，只应用于给该组件的this添加一些自定义的属性字段
• attached：在组件完全初始化完毕、进入页面节点树后
  • 此时this.data已被初始化完毕
  • 此周期主要用于初始化操作
• detached：组件离开页面节点树之后
  • 退出一个页面时，会触发页面内每个自定义组件的detached
  • 主要做清理性质的操作

定义生命周期函数

小程序中定义生命周期函数有两种方式

• 新版方式（推荐）

lifetimes:{
	attached(){},
	detached(){}
}
1
2
3
4

• 旧版方式

attached(){},
detached(){}
1
2

组件所在页面的生命周期函数

当页面中的组件想在页面的某些生命周期进行操作，则需要用到组件在页面的生命周期函数

如何使用这些生命周期函数呢，还是在组件中

pageLifetimes:{
	show:function(){}, // 页面被展示
	hide:function(){}, // 页面被隐藏
	resize:function(){} // 页面尺寸变化
}
1
2
3
4
5

插槽

单个插槽

小程序默认自定义组件中只能使用一个插槽

多个插槽

需要在.js文件中启用多插槽

Component({
	options:{
		multipleSlots:true
	}
})
1
2
3
4
5

定义方法和vue相同，用name指明

<slot name="before">slot>
<slot name="after">slot>
1
2

使用

<view slot="before">插槽填充内容view>
1

组件间通信

父子组件

1. 属性绑定：父组件向子组件，仅能设置JSON兼容的数据，使用方法同vue
2. 事件绑定：子组件向父组件传递，可以传递任意数据，实现思路同vue

// 子组件 this.triggerEvent == this.$emit
this.triggerEvent('事件名',{参数对象})
1
2

<my-test bind:事件名="syncCount">my-test>
1
2

// 父组件 e.detail接收参数
syncCount(e){
  console.log(e.detail);
}
1
2
3
4

3. 获取组件实例：父组件通过this.selectComponent("id或class选择器")获取子组件实例

<my-test bind:sync="syncCount" id="cA">my-test>
<button bindtap="getChild">获取子组件实例button>
1
2
3

// 父组件
getChild(){
  const child = this.selectComponent('#cA')
  // child中包含子组件的所有信息
  console.log(child);
}
1
2
3
4
5
6

代码共享behaviors

实现组件间的代码共享，类似于mixins混入

创建

在项目根目录创建behavior文件夹用于保存，直接创建js文件

调用Behavior(Object object)方法创建并共享出去

module.exports  = Behavior({
  data:{
    userName: 'zs'
  },
  properties:{},
  methods:{}
})
1
2
3
4
5
6
7

导入并使用

const myBehavior = require('../../behaviors/my-behaviors')
Component({
  behaviors:[myBehavior],
})
1
2
3
4

之后就可以像在普通js文件一样直接使用behaviors中的数据

behaviors中可用节点

冲突规则

冲突解决规则

总的来说就是，以用户最舒服的方式来解决冲突