小程序自定义组件

创建自定义组件

  1. 在项目的根目录下创建一个 components 文件夹
  2. 再在 components 文件夹中，创建自定义组件的文件夹
  3. 选中这个文件夹鼠标右键选择 新建 Component，就自动生成组件相关的文件

自定义组件的特点

  • 自定义组件的 .json 文件
1
2
3
4
5
6
7
{

 "component": true,

 "usingComponents": {}

}
  • 自定义组件的 .js 文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Component({
 /**
 * 组件的属性列表
 */
 properties: {},

 /**
 * 组件的初始数据
 */
 data: {},

 /**
 * 组件的方法列表
 */
 methods: {}
})
  • 自定义组件的方法必须定义在 .js 文件中的 methods 对象中
  • 自定义组件不会受 app.wxss 的样式影响
  • 组件之间存在样式隔离，class选择器样式不会互相影响

自定义组件引用

全局引用

所有组件中的都可以使用

在 app.json 中引用自定义组件

1
2
3
4
5
{
 "usingComponents": {
  "componentName": 'componentPath'
 }
}
  • componentName：自定义组件标签名称
  • componentPath：自定义组件路径

局部引用

只有在引用的组件中才能使用

在组件的 .json 中引用自定义组件

1
2
3
4
5
{
 "usingComponents": {
  "componentName": 'componentPath'
 }
}
  • componentName：自定义组件标签名称
  • componentPath：自定义组件路径

自定义组件样式

小程序提供了 styleisolation 配置项用来设置样式隔离相关配置

可选值 默认值 描述
isolated 是 启用样式隔离
apply-shared 否 页面样式会影响到组件样式，组件样式无法影响到页面样式
shared 否 页面于组件样式互相影响

properties

用于接收外界传递给组件的数据

1
<bottom-bar list="list"></bottom-baar>
1
2
3
4
5
6
7
8
9
10
11
12
13
Component({
 properties: {
  list: {
   // 数据类型
   type: Array,
   // 默认值
   value: []
  }

  /* 简写 */
  list: Array
 }
})

properties 本质上是和 data 没什么区别，可读可写

1
2
// 读
console.log(this.properites.list)
1
2
3
4
// 写
this.setData({
 listL: []
})

数据监听器

用于监听数据或属性发生变化，从而执行对应的操作

小程序的数据监听器与 Vue 的侦听器差不多

监听单个数据

1
2
3
4
5
6
7
Component({
 observers: {
  'list': function(newValue) {
   console.log(newValue)
  }
 }
})

同时监听多个值时

1
2
3
4
5
6
7
Component({
 observers: {
  'list, data.title': function(newListValue, newTitleValue) {
   console.log(newListValue, newTitleValue)
  }
 }
})

监听对象中全部属性

1
2
3
4
5
6
7
Component({
 observers: {
  'data.**': function(NewData) {
   console.log(NewData)
  }
 }
})

监听全部 setData

1
2
3
4
5
6
Component({
 observers: {
  '**': function() {
  }
 }
})

纯数据字段

即不展示在页面上，也不传递给其他的组件的 data 数据

纯数据字段有助于提高页面更新的性能

创建纯数据字段

在组件构造器中的 options 节点中定义 pureDataPattern 配置项，来设置纯数据字段
pureDataPattern 的属性值是正则表达式

1
2
3
4
5
6
Comonent({
 options: {
  /* 指定以 — 开头的 data 数据位纯数据字段 */
  pureDataPattern: /^_/
 }
})

自定义组件生命周期

生命周期函数 参数 描述
created 无 在组件实例刚刚被创建时执行
attached 无 在组件实例进入页面节点树时执行
ready 无 在组件在视图层布完成后执行
moved 无 在组件实例被移动到节点数另一个位置时执行
detached 无 在组件实例被从页面中移除时执行
error Object Error 组件方法抛出错误时执行

created

  • 此时还不能调用 setData() 方法
  • 通常用于给组件的 this 添加一些自定义属性

attached

  • 此时 this.data 已经初始化完毕
  • 绝大部分的数据初始化工作都在这里完成

detached

  • 退出一个页面时，会触发
  • 适合做一些清理性质的工作

lifetimes

新版小程序中，推荐在 lifetimes 节点中声明生命周期钩子函数

1
2
3
4
5
6
7
Component({
 lifetimes: {
  created() {},
  attached() {},
  detached() {}
  }
})

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

生命周期函数 参数 描述
show 无 组件所在页面被展示时执行
hide 无 组件所在页面被隐藏时执行
resize Object Size 组件所在页面尺寸被改变时执行

pageLifetimes

1
2
3
4
5
6
7
Component({
 pageLifetimes: {
  show: function() {},
  hide: function() {},
  resize: function(size) {}
  }
})

插槽

用于承载组件使用者提供的 wxml 结构

小程序的插槽与 Vue 的插槽类似

1
2
3
<view>
 <slot></slot>
</view>
1
2
3
<component-name>
 <text>text</text>
</component-name>

多个插槽

开启多个插槽

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

创建多个插槽

1
2
3
4
<view>
 <slot name="title"></slot>
 <slot name="content"></slot>
</view>

父子组件通信

属性绑定

用于父组件向子组件的指定属性设置数据

1
2
<!-- 父组件 -->
<father list="{{list}}"></father>
1
2
3
4
5
6
/* 子组件 */
Component({
 properites:{
  list: Array
 }
})

事件绑定

用于子组件向父组件之间传递数据
和 Vue 中的子组件向父组件传值方法类似

1
<father list="{{list}}" bind:change="updateList"></father>
1
2
3
4
5
6
7
Component({
 methods:{
  updateList(e) {
   console.log(e.detail.value)
  }
 }
})
1
2
3
4
5
6
7
8
9
10
11
Component({
 properites:{
  list: Array
 },
 methods: {
  changeList() {
   this.triggerEvent('change', {value: this.properites.list})
  }
 }
})

获取事件实例

父组件可以通过 selectComponent() 获取子组件实例对象
通过组件的实例对象获取数据和方法

1
2
3
4
5
6
7
8
Component({
 methoods:{
  getSonData() {
   const son = this.selectComponent('.son')
   onsole.log(son)
  }
 }
})

selectComponent() 的参数是子组件的类名或id名

behaviors

实现组件之间的代码共享

小程序中的 behaviors 类似于 Vue 中的 mixins

每个 behaviors 都有一组属性、数据、生命周期函数、方法
组件引用时，都会被合并到引用组件中

创建 behaviors

1
2
3
4
5
6
module.exports = Behavior({
 properties: {},
 data: {},
 methods: {},
 behaviors: []
})

引用

1
2
3
4
5
const myBehavior = require("../../behaviors/myBehavior.js")

Component({
 behaviors: [myBehavior]
})