一、自定义组件
1、创建组件
在项目的根目录中鼠标右键，创建文件夹名为components，在components文件夹上右键创建组件名为test文件夹，然后在test文件夹上右键新建 component弹出窗口输入组件名test回车即可自动创建后缀名分别为 js，json，.wxml和wxss，如下图显示：
2、引用组件
组件的引用方式分为“局部引用”即：只能在当前被引用的页面内使用，“全局引用”即：组件可以在每个小程序页面中使用。
引用组件方法：在配置文件.json中usingComponents引入组件，如下图所示：
以上示例引入了三个组件，分别为：my-test1、my-test2、my-test3
在页面中使用组件，如：<my-test1></my-test1>
3、组件和页面的区别
从表面来看，组件和页面都是由 .js、.json、.wxml和wxss 这四个文件组成的。但是，组件和页面的,js 与json 文件有明显的不同:
① 组件的.json 文件中需要声明"component": true 属性
② 组件的.js 文件中调用的是 Component() 函数而不是pages()
③ 组件的事件处理函数需要定义到 methods 节点中
4、组件样式的隔离
默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的UI 结构，但如果要想外界能够控制组件样式，那我们需要在.js文件中设置stylelsolation值，如下图：
其中可选择值如下：
isolated：表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响。
apply-shared：表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面。
shared：表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。
建议:在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器。
5、组件数据、属性和方法
数据一般写在data里，如是接收外界传来的数据建议写在properties里，比如在页面中使用组件<my-test1 max="10"></my-test1>，传值max=10，那在组件中接收传值为：
上面声明了一个max，类型为数字，默认值为5
6、纯字段或是方法
纯字段指提不做任何渲染只做内部逻辑用，所以建议使用下划线_来定义，好处是提高效率，如示例：
Component({
options:{
pureDataPattern: /^_/
},
data: {
_rgb: { r: 0, g: 0, b: 0 },
fullColor: '0, 0, 0'
},
methods: {
changeR(){
this.setData({
'_rgb.r': this._changeColor(this.data._rgb.r)
})
},
changeG(){
this.setData({
'_rgb.g': this._changeColor(this.data._rgb.g)
})
},
changeB(){
this.setData({
'_rgb.b': this._changeColor(this.data._rgb.b)
})
},
_changeColor(value) {
return value + 5 > 255 ? 255 : value + 5
}
}
})
二、数据监听器
数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下:
如果是监听对象我们可以写成 "obj.a, obj.b, obj.c, ...":function(a,b,c){} 或 "obj.**":function(obj){}
三、生命周期
组件中可用的生命周期函数如下图：
组件生命周期函数都放在lifetimes下，如示例代码：
有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期。
在自定义组件中，组件所在页面的生命周期函数有如下3个，分别是:
show：组件所在的页面被展示时执行。
hide：组件所在的页面被隐藏时执行。
resize：组件所在的页面尺寸变化时执行。
如下示例代码：
四、插槽
在自定义组件的 wxml结构中，可以提供一个 <slot> 节点(插槽)占位，用于承载组件使用者提供的 wxml结构。
单个插槽使用示例：
在组件页面中定义一个插槽： <slot></slot> 在页面中使用插槽： <my-test1> 这是单个插槽使用 </my-test1>
多个插槽使用，先在js文件里启用多插槽，
options:{
multipleSlots:true
},
使用示例：
在组件中定义多个插槽： <slot name="before"></slot> <slot name="after"></slot> 在页面中使用多个插槽： <my-test2> <view slot="before">这是插槽before里的内容</view> <view slot="after">~~~~~~~~~~~~~~</view> </my-test2>
五、通信
父子组件之间通信有3种方式
1、属性绑定：用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据。
2、事件绑定：用于子组件向父组件传递数据，可以传递任意数据。
①在父组件的js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件；
②在父组件的 wxml中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件;
③在子组件的 js 中，通过调用 thistriggerEvent('自定义事件名称',{/*参数对象*/})，将数据发送到父组件；
④在父组件的is 中，通过 e.detail 获取到子组件传递过来的数据。
3、获取组件实例：父组件还可以通过 this.selectComponent()获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法。
六、Behaviors的定义和使用
behaviors是小程序中，用于实现组件间代码共享的特性，类似于Vue.is 中的“mixins”。
每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。
每个组件可以引用多个 behavior，behavior 也可以引用其它 behavior。
创建实例：
引入：
const myBehaviors = require('../../behaviors/my-behaviors')
Component({
behaviors: [myBehaviors],
//......
})
讨论数量：0