微信小程序|微信小程序（3）自定义组件 javascript|前端|微信小程序

1.1组件的创建与引用
在components下新建文件夹，再新建component，会自动生成相应的四个文件
局部引用组件
在页面.json的配置文件中引用组件。

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

全局引用组件
在app.json中配置引用组件
用法同上
1.2自定义组件的样式
1.组件样式隔离的注意点
默认app.wxss中的全局样式对组件无效
只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响
建议：在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器！
2.可以通过styleIsolation修改组件样式的隔离选项
在组件.js的文件中:

Component({ options:{ styleIsolation:'isolated' } })

可选值	描述
isolated(默认值)	表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将：将不会相互影响
apply-shared	表示页面wxss样式将影响到自定义组件，但自定义组件wxss中指定的样式不会影响页面
shared	表示页面wxss样式将影响到自定义组件，自定义组件wxss中指定的样式也会影响页面和其他设置了apply-shared或shared的自定义组件

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

Component({ properties: { count:{//完整定义方式 type:Number,//属性值数据类型 value:10//属性默认值 }, count:Number//简化定义方式 }, })

也可以用setData修改properties的值
1.4数据监听器
数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。

Component({ observers:{ '字段A,字段B':function(字段A的新值,字段B的新值){ //do something } } })

1.5 纯数据字段
纯数据字段指的是那些不用渲染的 data 字段。
应用场景：例如有些情况下，某些 data 中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段。
好处：纯数据字段有助于提升页面更新的性能。
在 Component 构造器的 options 节点中，指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段：

Component({ options:{ //指定_开头的为纯数据字段 pureDataPattern:/^_/ }, data:{ a:true, //普通数据字段 _b:true //纯数据字段 }, }）

1.6组件的生命周期

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

在小程序组件中，最重要的生命周期函数有3个，分别是created、attached、detached。它们各自的特点
如下：
① 组件实例刚被创建好的时候,created 生命周期函数会被触发
此时还不能调用setData
通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段
② 在组件完全初始化完毕、进入页面节点树后,attached 生命周期函数会被触发
此时，this.data 已被初始化完毕
这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）
③ 在组件离开页面节点树后，detached 生命周期函数会被触发
退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数
此时适合做一些清理性质的工作
lifetimes节点：

Component({ lifetimes:{ created(){ console.log('created'); }, attached(){ console.log('attached'); } } })

1.7组件所在页面的生命周期
即自定义组件的行为依赖于页面状态的变化
在自定义组件中，组件所在页面的生命周期函数有如下3个：

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

1.8插槽
在自定义组件的 wxml 结构中，可节点（插槽），用于承载组件使用者提供的wxml结构

//组件这里是组件的内部结构 >

//页面这是通过插槽填充ode内容

启用多个插槽：
在组件js中启用，在wxml中用不同name区分不同的slot

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

//页面 AAA BBB

//组件 name="before"> 这里是组件的内部结构 name="after">

1.9父子组件之间的通信
完整案例
父子组件之间通信的3种方式
1.属性绑定
用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据

子组件在properties中声明并接收
2.事件绑定
事件绑定用于实现子向父传值，可以传递任何类型的数据。使用步骤如下：
① 在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件
② 在父组件的 wxml 中，通过自定义事件的形式，将步骤 1 中定义的函数引用，传递给子组件
③ 在子组件的 js 中，通过调用 this.triggerEvent(“自定义事件名称”, {/* 参数对象 */ ])，将数据发送到父组件
④ 在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据

//父组件自定义事件 syncCount(e){ this.setData({ count:e.detail.value }) },//父组件绑定事件 //子组件触发事件 methods: { addCount(){ this.setData({ count: this.data.count + 1 }) this.triggerEvent('sync',{value:this.properties.count}) } }

3.获取组件实例
父组件还可以通过 this.selectComponent(“id或class选择器”) 获取子组件实例对象
这样就可以直接访问子组件的任意数据和方法

getChild(){ const child = this.selectComponent('.customA') // console.log(child); // child.setData({ //count:child.properties.count + 1 // }) child.addCount() },

1.10 behaviors
behaviors 是小程序中，用于实现组件间代码共享的特性，类似于Vue.js中的“mixins"。
【微信小程序|微信小程序（3）自定义组件】每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。
每个组件可以引用多个behavior, behavior 也可以引用其他behavior。

// 调用 Behavior()方法，创建实例对象 // 并使用module.exports将behavior实例对象共享出去 module.exports = Behavior({ // 属性节点 properties：{}, // 私有数据节点 data：{ username: 'zs'}, // 事件处理函数和自定义方法节点 methods：{}, // 其它节点.. })

behavior中所有可用的节点：
properties,data,methods,behaviors,created,attached,ready,moved,detached.
在组件中，使用 require()方法导入需要的behavior，
挂载后即可访问behavior中的的数据或方法

// 1．使用 require()导入需要的自定义benavior模块 const myBehavior = require("../../behaviors/my-behavior) Component({ // 2．将导入的 behavior 实例对象，挂载到 behaviors 数组节点中，即可生效 behaviors: [myBehavior], // 组件的其它节点... })

同名字段的覆盖和组合规则
组件和它引用的 behavior 中可以包含同名的字段，对这些字段的处理方法如下：
如果有同名的属性 (properties) 或方法 (methods)：

若组件本身有这个属性或方法，则组件的属性或方法会覆盖 behavior 中的同名属性或方法；
若组件本身无这个属性或方法，则在组件的 behaviors 字段中定义靠后的 behavior 的属性或方法会覆盖靠前的同名属性或方法；
在 2 的基础上，若存在嵌套引用 behavior 的情况，则规则为：父 behavior 覆盖子 behavior 中的同名属性或方法。
如果有同名的数据字段 (data)：
若同名的数据字段都是对象类型，会进行对象合并；
其余情况会进行数据覆盖，覆盖规则为：组件 > 父 behavior > 子 behavior 、靠后的 behavior > 靠前的 behavior。（优先级高的覆盖优先级低的，最大的为优先级最高）
生命周期函数不会相互覆盖，而是在对应触发时机被逐个调用：
对于不同的生命周期函数之间，遵循组件生命周期函数的执行顺序；
对于同种生命周期函数，遵循如下规则：
behavior 优先于组件执行；
子 behavior 优先于父 behavior 执行；
靠前的 behavior 优先于靠后的 behavior 执行；
如果同一个 behavior 被一个组件多次引用，它定义的生命周期函数只会被执行一次。