7-微信小程序自定义组件

创建

1. 在项目components目录下创建组件文件夹test，
2. 右键test文件夹，新建Component。
3. 键入组件名称test回车自动生成项目文件。
   

引用

局部引用

配置
在页面.json配置文件中引用

	"usingComponents": {
		"test":"/components/test/test"
	}

使用
wxml

<test></test>

全局引用

配置
在app.json配置文件中引用

	"usingComponents": {
		"test":"/components/test/test"
	}

使用
wxml

<test></test>

组件和页面区别

组件和页面结构文件相同。但是.json和.ts文件有明显的不同

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

{
  "component": true,
  "usingComponents": {}
}

ts

// components/test/test.ts
Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

组件样式

官网入口

• 默认情况下组件样式不被外界干扰。
• app.wxss全局样式对组件无效
• 只有class选择器回应样式隔离效果，id、属性、标签选择器不受隔离影响

修改stylesolation组件样式隔离

• isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
• apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
• shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）
  在ts中修改

// components/test/test.ts
Component({
  properties: {
    stylesolation:'isolated'
  },
})

在json中修改

  {
    stylesolation: 'isolated'
  }

数据监听器

官网入口
数据监听器可以用于监听和响应任何属性和数据字段的变化

监听数据变化

例：sum值跟随n1和n2的值改变

wxml

<view class="test">
	<view>{{msg}}</view>
	<view>
		<text>{{n1}}</text>+
		<text>{{n2}}</text>=
		<text>{{sum}}</text>
	</view>
	<view>
		<button bind:tap="addN1">n1++</button>
		<button bind:tap="addN2">n2++</button>
	</view>
</view>

ts

// components/test/test.ts
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 (n1, n2) {
			// 在 numberA 或者 numberB 被设置时，执行这个函数
			this.setData({
				sum: n1 + n2
			})
		}
	}

})

监听属性变化

父组件改变test子组件msg属性，test监听属性msg变化

父组件
wxml

<test msg="{{message}}"></test>
<input type="text" bindinput="changeMsg" value="{{message}}"/>

ts

Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		message: 'hello test'
	},
	changeMsg(e: WechatMiniprogram.CustomEvent) {
		this.setData({
			message: e.detail.value
		})
	}

test组件
ts

Component({
	properties: {
		msg: String
	},
	observers: {
		'msg': function(msg){
			console.log(msg);
		}
	}
})

纯数据字段

纯数据字段是一些不用于界面渲染的 data 字段，可以用于提升页面更新性能。

指定“纯数据字段”的方法是在 Component 构造器的 options 定义段中指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段。

基本使用方法

Component({
  options: {
    pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
  },
  data: {
    a: true, // 普通数据字段
    _b: true, // 纯数据字段
  },
  methods: {
    myMethod() {
      this.data._b // 纯数据字段可以在 this.data 中获取
      this.setData({
        c: true, // 普通数据字段
        _d: true, // 纯数据字段
      })
    }
  }
})

例：比如我们获取一个时间戳，需要将时间戳转换为可读时间的自定义组件。
timestamp属性在页面不需要渲染我们定义为纯数据字段
监听timestamp 转换为timeString用于页面渲染

Component({
  options: {
    pureDataPattern: /^timestamp$/ // 将 timestamp 属性指定为纯数据字段
  },
  properties: {
    timestamp: Number,
  },
  observers: {
    timestamp: function () {
      // timestamp 被设置时，将它展示为可读时间字符串
      var timeString = new Date(this.data.timestamp).toLocaleString()
      this.setData({
        timeString: timeString
      })
    }
  }
})

生命周期

官网入口
组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

其中，最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。

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

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

组件所在页面的生命周期

生命周期	参数	描述	最低版本
show	无	组件所在的页面被展示时执行	2.2.3
hide	无	组件所在的页面被隐藏时执行	2.2.3
resize	Object Size	组件所在的页面尺寸变化时执行	2.4.0
routeDone	无	组件所在页面路由动画完成时执行	2.31.2

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

插槽

在自定义组件的wxml中提供<slot>,用于承载使用者提供的wxml。

单个插槽

默认每个自定义组件中只允许使用一个<slot>进行占位

父组件wxml

<test>
	<view>slot</view>
</test>

test 组件wxml

<view class="test">
	<slot></slot>
</view>

多个插槽

启用

Component({
	options: {
		multipleSlots: true
	},
})

使用：
相当于vue具名插槽
父组件wxml

<test>
	<view slot="fir">first</view>
	<view slot="sec">second</view>
</test>

test 组件wxml

<view class="test">
	<slot name="fir"></slot>
	<slot name="sec"></slot>
</view>

父子组件通信

属性绑定

父组件向子组件传值

父组件wxml

<test msg="{{message}}"></test>

父组件ts

	data: {
		message: 'hello test'
	},

test组件wxml

<view>{{msg}}</view>

test组件ts

Component({
	properties: {
		msg: String
	},
})

事件绑定

子组件向父组件传值

• 父组件定义一个函数，通过自定义事件的形式传递给子组件
• 子组件通过调用this.triggerEvent('myevent', myEventDetail, myEventOption)发送数据到父组件
• 父组件通过e.detail获取子组件传递的数据

父组件
wxml

<test msg="{{message}}" bind:myevent="onMyEvent">
</test>

ts

Page({
  onMyEvent: function(e: WechatMiniprogram.CustomEvent){
    console.log(e.detail) // 自定义组件触发事件时提供的detail对象
  },
})

子组件
wxml

<button bind:tap="onTap">event</button>

ts

// components/test/test.ts
Component({
	methods: {
	  onTap: function(){
        var myEventDetail = {a:1} // detail对象，提供给事件监听函数
        this.triggerEvent('myevent', myEventDetail, myEventOption)
      }
	},
})

获取组件实例

官网入口
可在父组件里调用 this.selectComponent ，获取子组件的实例对象。

调用时需要传入一个匹配选择器 selector，如this.selectComponent(".my-component")。

wxml

<test class="my-component" msg="{{message}}" bind:myevent="onMyEvent">
<button bind:tap="getChildComponent">getChildComponent</button>

ts

  getChildComponent: function () {
    //获取子组件的实例对象
    const child = this.selectComponent('.my-component');
	console.log(child)
	//获取子组件属性
	console.log(child.properties)
	//执行子组件methods方法
	child.addN1()
  },

Behavior

官网入口
behaviors 是用于组件间代码共享的特性，类似于vue中的 “mixins”
每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behavior ，behavior 也可以引用其它 behavior 。

使用Behavior创建共享特性，在组件中使用require导入。在wxml中就可以操作共享数据和方法。

创建

module.exports = Behavior({
	behaviors: [],
	properties: {
		myBehaviorProperty: {
			type: String
		}
	},
	data: {
		n3: 0
	},
	attached: function () { },
	methods: {
		addN3() {
			this.setData({
				n3: this.data.n3 + 1
			})
		},
	}
})

导入并使用

ts

var myBehavior = require('../../behaviors/my-behavior');
Component({
	behaviors:[myBehavior],
})

wxml

	<text>n3={{n3}}</text>
	<button bind:tap="addN3">n3++</button>