自定义组件 components的创建和引用
【创建组件】
· 在项目的根目录中，鼠标右键，创建 components -> test 文件夹
· 在新建的 components -> test 文件夹上，鼠标右键， 点击 “新建component”
· 键入组件的名称之后回车，会自动生成组件对应的4个文件，后缀名分别为 .js .json .wxml .wxss
【引用组件】
· 组件的引用方式分为 局部引用 和全局引用 。
· 局部引用 ： 组件只能在当前被引用的页面内使用；
· 全局引用 ：组件可以在小程序每个页面中使用；
【局部引用】
· 在页面.json 配置文件中引用组件的方式 叫做 局部引用。示例
// 在页面.json 文件中 引用组件 { "usingComponents": { "my-test":"/components/test/test" //【 k: 取组件名字。v：组件的路径】 } }
// 在页面的 .wxml 文件中，使用组件 <my-test></my-test> 【使用取的k名字，就可以使用组件了】
【全局引用组件】
在app.json 全局配置文件中 引用组件的方式，叫做全局引用。示例
// 在 app.json 文件中 引用组件 { "usingComponents": { "my-test1":"/components/test/test" //【 k: 取组件名字。v：组件的路径】 } }
// 在 任意 .wxml 文件中，使用组件 <my-test1></my-test1> 【使用取的k名字，就可以使用组件了】
【组件 全局引用 和 局部引用的应用场景】
· 根据组件的 使用频率 和范围 来选择合适的引用方式；
· 如果某个组件 在多个页面中经常被用到，建议使用 全局引用；
· 如果某个组件只在 特定的页面中被用到，建议使用 局部引用
【组件和页面的区别】
从表面来看，组件和页面都是由 .js .json .wxml .wxss 组成的。但是，组件和页面的 .js 与 .json 文件有明显的不同；
~ 组件的.json 文件中需要声明“component”: true属性；
~ 组件的 .js 文件中 调用的是 component() 函数， 页面.js 调用的是 page({})函数；
~ 组件的事件处理函数需要定义到methods 节点中；
【组件的样式隔离】
默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的ui结构，如下：
· 组件 A 的样式不会影响组件 C 的样式
· 组件 A 的样式不会营销小程序页面的样式
· 小程序页面的样式不会影响组件 A 和 C 的样式
好处：~ 防止外界的样式影响组件内部的样式
~ 防止组件的样式破坏外界的样式
【组件样式隔离的注意点】
· app.wxss 中的全局样式对组件 无效
· 只有class 选择器会有样式隔离的效果， id \ 属性、标签 选择器不受样式隔离的影响；
建议： 在组件和引用组件的页面中 建议使用clas 选择器，不要 id 属性 标签选择器；
【修改组件的样式隔离选项】
默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰问题，但有时候，我们希望在外界能够控制组件内部的样式，此时，可以通过 stylelsolation 修改组件的样式隔离选项。如下：
// 方法一： components/test/test.js 组件的.js Component({ options:{ styleIsolation:'isolated' 【isolated 表示启用样式隔离】
},
// 方式二 在组件的 .json 文件中 新增配置【isolated 表示启用样式隔离】
{
"component": true,
"styleIsolation":"isolation"
}
styleIsolation的可选值
| 可选值 | 默认值 | 说明 |
| isolation | 是 | 启用样式隔离，自定义组件内外，使用class样式将不会互相影响 |
| apply-shared | 否 | 表示 页面wxss 样式将影响到自定义组件，但自定义组件wxss中指定的样式不会影响页面 |
| shared | 否 | 表示页面 wxss 样式将影响到自定义组件，自定义组件也会影响页面 和 其他设置了 app-shared / shared 自定义组件 |
【自定义组件的数据】
~自定义组件data数据：在小程序组件中，用于组件模块渲染的私有数据，需要定义到 data节点中
// components/test/test.js Component({ /** * 组件的初始数据 */ data: { count: 0 },
~自定义组件 methods 方法： 在小程序组件中，事件处理函数 和 自定义方法 需要定义到 methods 节点中，如下
// components/test/test.wxml <view> 值是:{{count}} </view> <button bindtap="addCount"> +1 </button>
// components/test/test.js Component({ /** * 组件的方法列表 */ methods: { //定义事件处理函数 addCount(){ this.setData({ count: this.data.count +1 }); //调用自定义的方法 自定义方法建议 _ 开头 this._showCount(); }, // 在methods 内部定义自定义函数 _showCount(){ wx.showToast({ title: 'count 值是：' + this.data.count, icon:'none' }) } },
~ 自定义组件 properties 属性：在小程序组件中， properties是组件的对外属性，用来接收外界传递到组件中的数据
// components/test/test.js Component({ /** * 组件的属性列表 */ properties: { max:{ //创建接收外界传递过来的参数名，max 【方式一 建议使用】 type:Number, // 指定外界传递到内部组件的参数类型 value: 10 // 如果没有传值 则给与默认值 10 }, max2:Number,//创建接收外界传递过来的参数名，max2 【方式二 不建议使用】 },
<my-test max='16' ></my-test> // 外部使用自定义组件并给组件传参
【data 和 properties 的区别】
在小程序的组件中，properties 属性和 data数据的用法：它们都是可读可写的，不过
· data 倾向于 存储组件的私有数据 【vue中 data数据 可读可写，用于存储组件的私有数据】
· properties 倾向于 接收外界传递到组件的数据【vue中 properties数据 可读不可写，仅接收外界传递到组件的数据】
【使用setData 修改 properties 的值】
由于data数据 和 properties属性在本质上没有任何区别，因此 properties 属性的值也可以用于页面渲染，或使用setData 为properties中重新赋值；
// components/test/test.js Component({ /** * 组件的属性列表 */ properties: { max:{ //创建接收外界传递过来的参数名，max 【方式一 建议使用】 type:Number, // 指定外界传递到内部组件的参数类型 value: 10 // 如果没有传值 则给与默认值 10 }, /** * 组件的方法列表 */ methods: { //测试properties 可读可写 通用性 addCount1(){ this.setData({ max: this.properties.max +1 }); } })
<!--components/test/test.wxml--> <view> max：{{max}} </view> <button bindtap="addCount1"> +1 </button>
【自定义组件-数据监听器】
【什么是数据监听器】
数据监听器用于 监听和响应任何属性 和 数据字段的变化，从而执行特定的操作，它类似于 vue 中的 watch监听器。 语法如下：
// components/test/test.js Component({ /** * 事件监听器 */ observers:{ '监听字段1，监听字段2': function(字段1新值,字段2新值){ //要做的事情 } },
【监听器使用案例】
监听a 和 b 值，改变后 将 a + b 新值 赋予 sum 变量
// components/test/test.js Component({ /** * 事件监听器 */ observers:{ 'a, b': function(a,b){ // 监听 a, b //要做的事情 this.setData({ sum: a + b }) } }, /** * 组件的方法列表 */ methods: { // 演示监听器效果 a1(){ this.setData({ a: this.data.a +1 }) }, b1(){ this.setData({ b: this.data.b +1 }) } }, /** * 组件的初始数据 */ data: { sum:0, a:0, b:0, } })
<!--components/test/test.wxml--> <view> {{a}} + {{b}} = {{sum}} </view> <button bindtap="a1"> a+1 </button> <button bindtap="b1"> b+1 </button>
【监听对象属性的变化】
数据监听器支持监听对象中单个或多个属性的变化，语法如下
// components/test/test.js Component({ /** * 事件监听器 */ observers:{ '对象.字段1，对象.字段2': function(字段1新值,字段2新值){ //要做的事情 } },
// 触发此监听器会出现 3 中情况
1、 为字段1 赋值 【this.setData() 设置 this.data.对象.属性1 时候触发】
2、 为字段2 赋值 【this.setData() 设置 this.data.对象.属性2 时候触发】
3、 为 对象 赋值 【this.setData() 设置 this.data.对象 时候触发】
对象属性监听案例如下
<!--components/test2/test2.wxml--> <text>components/test2/test2.wxml</text> <view style="height: 150px; border: solid red 1px; background-color: rgb({{color}});"> {{rgb.r}},{{rgb.g}},{{rgb.b}}:{{color}} </view> <button size="mini" bindtap="r" type="warn">r</button> <button size="mini" bindtap="g" type="primary">g</button> <button size="mini" bindtap="b" type="default">b</button>
// components/test2/test2.js Component({ /** * 组件的初始数据 */ data: { rgb:{ //颜色初始化对象 r: 0, g: 0, b: 0 }, color:'0,0,0', }, /** * 组件的方法列表 */ methods: { r(){ this.setData({ 'rgb.r': Math.floor(Math.random()*256) }) }, g(){ this.setData({ 'rgb.g': Math.floor(Math.random()*256) }) }, b(){ this.setData({ 'rgb.b': Math.floor(Math.random()*256) }) }, }, /** * 监听函数 */ observers:{ 'rgb.r,rgb.g,rgb.b':function(r,g,b){ // 监听对象三个属性 this.setData({ // 重新赋值给 color 变量 color :r +','+g+','+b //也可以这样模板字符串写法【color :`${r},${g},${b}`】
})
}
}
})
如果对象属性太多监听起来麻烦 ，那么可以使用通配符方式编写 如下
/** * 监听函数 */ observers:{ 'rgb.**':function(obj){ // 监听对象所有属性 this.setData({ // 重新赋值给 color 变量 color :obj.r +','+obj.g+','+obj.b //也可以这样模板字符串写法【color :`${obj.r},${obj.g},${obj.b}`】 }) } }
【自定义组件-纯数据字段】
什么是纯数据字段： 纯数据字典指的是 既不会传递给其他组件，也不用于界面渲染的 data 字段；
好处： 提升页面的更新性能；
【纯数据字段使用规则】
在Component 构造器的 options 节点中，指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式字段的 将成为纯数据字段：
// components/test2/test2.js Component({ options:{ pureDataPattern: /^_/ //表示所有字段以 _ 开头的正则，都是纯数据字段 }, /** * 组件的初始数据 */ data: { a:0, //普通字段 _b:0, //纯数据字段
【组件全部生命周期函数】
小程序组件 components 生命周期函数如下：
| component生命周期函数 | 参数 | 说明 | 应用场景 |
| created | 无 | 组件实例刚刚创建时候执行 | 组件实例刚创建好时候 created会执行，~ 此时不能调用 setData ~ 通常在这个生命周期函数中，只应该用于给组件的this 添加一些自定义属性字段 |
| attached | 无 | 组件实例刚进入页面节点树时执行 | 在组件完成初始化完毕、进入页面节点树后 attached会被执行 ~ 此时this.data已被初始化完毕 ~这个生命周期函数很有用，绝大多数的工作可以在这个时机进行（比如 发起网络数据请求） |
| ready | 无 | 组件在视图层布局完成后执行 | |
| moved | 无 | 组件实例被移动位置时候执行 | |
| detached | 无 | 组件实例从页面节点移除时执行 | 在组件离开页面节点树后，detached 会被执行，~退出一个页面时，会触发页面内每个自定义组件的detached 生命周期函数 ~此时合适做一些清理性质的工作；（比如事件监听清理） |
| error | Object err | 组件方法抛出错误时执行 |
【生命周期函数语法格式】
【lifetimes】节点：在小程序组件中，生命周期函数可以定义在 component 构造器第一级参数中，可以在 lifetimes 字段内进行生命【推荐，其优先级最高】
如下：
// components/test2/test2.js // 【推荐】 Component({ lifetimes:{ attached(){}, detached(){} },
// components/test2/test2.js // 旧定义方式【不推荐】 Component({ attached(){}, detached(){} })
【组件所在页面的生命周期】
什么是组件所在页面的生命周期：有时，自定义组件的行为需要依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期函数
在自定义组件中，组件所在页面的生命周期函数有如下：
| 生命周期函数 | 参数 | 说明 |
| show | 无 | 组件所在页面 被展示时候执行 |
| hide | 无 | 组件所在页面 被隐藏时候执行 |
| resize | Object size | 组件所在页面尺寸变化时候执行 |
【pageLifetimes节点】
组件所在页面的生命周期函数，需要定义在组件.js component -> pageLifetimes节点中。示例：
// components/test2/test2.js Component({ //组件所在页面 生命周期函数 pageLifetimes:{ show(){}, hide(){}, resize(){} }
案例演示：比如， 每当触发页面的show 生命周期函数时候，我们希望能够自动生生成一个随机的 rgb颜色值；
// components/test2/test2.js Component({ //组件所在页面 生命周期函数 pageLifetimes:{ show(){ console.log("show"); this._initColor();
} }, methods: { _initColor(){ // 非事件处理函数 建议 _ 开头 this.setData({ '_rgb.r': Math.floor(Math.random()*256), '_rgb.g': Math.floor(Math.random()*256), '_rgb.b': Math.floor(Math.random()*256), }); },
【自定义组件-插槽】
什么是插槽： 在自定义组件的 wxml 结构中，可以提供 <slot> 节点（插槽），用于承载组件使用者提供的 wxml结构：
比如: ~ 小程序页面作为组件使用者 在使用组件时候，为<slot> 占位符 提供具体内容节点。
~ 组件wxml 结构，作为组件封装者在封装组件时候，通过 <slot> 提供内容占位符；
【slot 单个插槽 使用演示】
在小程序中，默认每个自定义组件中只允许使用一个 slot进行占位，这种个数叫做单个插槽
<!--components/test1/test1.wxml--> <text>components/test1/test1.wxml</text> <slot></slot><!--暂时还不知到填什么内容 由组件使用者填入-->
<!--index.wxml--> <my-test1> <view> 组件使用者填的内容 </view> </my-test1>
【启用多个插槽】
需要使用多个 <slot> 插槽时候，可以在组件 .js 文件中，通过 配置方式启用，如下：
// components/test1/test1.js Component({ options:{ multipleSlots: true //启用多个插槽
}
【定义多个插槽】
在组件 wxml 中 使用多个<slot> 定义多个插槽，以不同name 区分
<!--components/test1/test1.wxml--> <text>components/test1/test1.wxml</text> <slot name="before"></slot> <view> 这是一个固定位置 </view> <slot name="after"></slot>
【使用多个 <slot> 插槽】
<!--index.wxml--> <my-test1> <view slot="before"> <!--通过 slot 属性指定给哪个插槽填充内容--> 1111111111111111 </view> <view slot="after"> 22222222222222222222222 </view> </my-test1>
【自定义组件通信-父子间通信】
父子组件的三种通信方式：
~ 属性绑定： 用于父组件向子组件的指定属性设置数据，仅能设置 json 兼容的数据
~ 事件绑定： 用于子组件向父组件传递数据，可以任意数据；
~ 获取组件实例： 父组件可以通过 this.selectComponent() 获取子组件的实例，这样可以直接访问子组件任意数据和方法；
【父子组件间通信-属性绑定】
用于父向子传值,只能传递普通类型数据，不能传递方法
<!--index.wxml 父组件 --> <my-test1 count="2"></my-test1>
<view> 子组件{{count}} // 接收参数并展示 </view>
// components/test1/test1.js Component({ /** * 组件的属性列表 */ properties: { count: Number // 声明传递过来的形参 必须声明参数类型 },
【父子组件间通信-事件绑定】
事件绑定实现 子向父传值，可以传递任何数据类型；
步骤如下：
1 在父组件 js 中，定义一个函数，这个函数通过自定义事件的形式 传递给子组件；
2 在父组件 wxml 中，通过自定义事件的形式，将步骤1 中定义函数引用传递给子组件
3 在子组件的js 中，通过调用 this.triggerEvent('自定义事件名称',{参数对象})，将数据发送到父组件
4 在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据
/** * 子向父传值演示 1 声明一个函数 */ countFunction(e){ console.log("1 声明一个函数"); }
<!-- 子向父传值演示 2 父函数绑定到子组件 传递过去 --> <my-test1 count="2" bind:contFun='countFunction'></my-test1>
/** * 组件的方法列表 */ methods: { _count(){ // 可以设置一个按钮触发该函数 this.setData({ count:this.properties.count +1 }), // 3 触发事件 并获取到 传递过来的参数。 org 为需要传递过父组件的参数 this.triggerEvent('contFun',{org: this.properties.count}); } }
countFunction(e){ console.log("1 声明一个函数"); // 4 通过 e.detail 就可以拿到 子组件传递过来的参数 console.log( e.detail); this.setData({ count: e.detail.org }) },
【父子组件间通信-获取子组件实例】
可以在父组件里调用 this.selectComponent(' id 或 class选择器') 获取子组件的实例对象，直接访问子组件的任意数据和方法，调用时需要传入一个选择器。例如 this.selectComponent(" .my-component");
<!--index.wxml--> <!-- 获取子组件实例演示1 声明 class --> <my-test1 count="2" class='custom1' bind:contFun='countFunction'></my-test1> <!-- 获取子组件实例演示2 声明触发事件获取子组件实例 --> <button bindtap="_getChild"> 获取子组件实例</button>
// pages/info/info.js Page({ /** * 页面的初始数据 */ data: { count:1 }, /** * 获取子组件实例演示 3 声明函数 */ _getChild(){ // 获取子组件节点 const child=this.selectComponent('.custom1'); // 通过 子组件 setData 赋值子组件的data child.setData({ count: child.properties.count + 1 }); // 通过 child 可以直接操作 子组件的方法 child._count(); },
【behaviors】
什么是behaviors ： behaviors 是小程序中 用于实现组件间代码共享的；
behaviors 的工作方式； 每个behaviors 可以包含一组 属性、数据、生命周期函数 和方法。
组件引用它的属性、数据、函数、方法都会合并到组件中去；
每个组件可以引用多个 behavior ，behavior 也可以引用其他 behaviors
【创建behaviors】
创建一个文件夹 创建一个.js文件 使用 module.exports方式共享出去
// behaviors/behavior.js module.exports=Behavior({ data:{ username: 'zs' },//共享出去的数据 properties:{},//共享出去的属性 methods:{}//共享出去的方法 });
【如何使用behaviors】
在需要使用的组件 使用require （）导入behaviors ，挂载后即可访问到 behavior中的数据和方法。示例代码
// components/test1/test1.js //导入behavior const myBehavior=require('../../behaviors/behavior'); Component({ //挂载 behavior behaviors:[myBehavior],
<!--components/test1/test1.wxml--> <view> behavior的数据是:{{username}} </view>
【behavior 中可用的节点】
浙公网安备 33010602011771号