【微信小程序】 自定义组件
创建微信小程序组件
在小程序中创建组件：
1、项目根目录中创建【components】目录，存放自定义组件
2、进入components目录，给组件创建一个组件目录
3、右键组件目录，选择【创建Components】
4、之后回车,会自动生成组件对应的4个文件, 后缀名分别为.js, .json, .wxml和.wxss
一、全局组件和局部组件
局部页面引用组件：
在【页面的.json】配置文件中引用组件的方式，叫做“局部引用”。
示例代码如下:
{
"usingComponents": {
"test1": "/components/test1/test1"
}
}
全局引用组件：
在【app.json】中配置组件信息
"usingComponents": {
"test1": "/components/test1/test1"
}
使用组件：
<!-- 全局可以在任意页面中使用引入的组件， 局部组件只允许在引入的页面中使用 --> <test1></test1>
组件和页面的区别
从表面来看，组件和页面都是由.js、 json、 .wxml 和.WXSS这四个文件组成的。
但是，组件和页面的js与.json文件有明显的不同:
● 组件的 json文件中需要声明"component": true属性
● 组件的 js文件中调用的是Component()函数
● 组件的事件处理函数需要定义到methods节点中
二、组件之间的样式隔离问题：
一、组件样式隔离
默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的UI结构
● 组件A的样式不会影响组件C的样式 ● 组件A的样式不会影响小程序页面的样式 ● 小程序页面的样式不会影响组件A和C的样式
好处:
① 防止外界的样式影响组件内部的样式 ② 防止组件的样式破坏外界的样式
二、组件样式隔离的注意点
● app.wxss中的全局样式对组件无效
● 只有class选择器会有样式隔离效果，
id选择器、属性选择器、标签选择器不受样式隔离的影响
建议:在组件和引用组件的页面中建议使用class选择器，不要使用id、属性、标签选择器!
三、修改组件的样式隔离选项
默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。
但有时，我们希望在外界能够控制组件内部的样式，
此时，可以通过stylelsolation 修改组件的样式隔离选项,
用法如下:
// components/test1/test1.js
Component({
options: {
styleIsolation: 'isolated'
}
})
// components/test1/test1.json
{
"component": true,
"usingComponents": {},
"styleIsolation": "isolated"
}
四、 stylelsolation的可选值
isolated 表示启用样式隔离，在自定义组件内外，使用class指定的样式将不会相互影响 apply-shared 表示页面WXSs样式将影响到自定义组件，但自定义组件wxSS中指定的样式不会影响页面
shared 表示页面WxSs样式将影响到自定义组件， 自定义组件Wxss中指定的样式也会影响页面和其他设置了apply-shared或shared的自定义组件
三、Data属性 和 Method方法
和页面一样设置
/**
* 组件的初始数据
*/
data: {
count: 0
},
方法是独立的一个对象存放
/**
* 组件的方法列表
* 在这里编写自定义方法，和事件处理函数
* 自定义方法推荐使用下划线前缀标记
* 如：
* addCount() // 事件执行方法
* _showCount() // 自定义方法
*/
methods: {
addCount() {
this.setData({ count: this.data.count + 1})
this._showCount()
},
_showCount() {
wx.showToast({
icon: 'none',
title: `count值：${this.data.count}`
})
}
}
四、Properties属性
/**
* 组件的属性列表
* 用来接收外部页面或者其他组件传递进来的属性
*/
properties: {
// 和vue一样的写法
max: {
type: Number,
value: 10 // 默认值
}
/**
* 简化写法，不设置默认值
* max: Number
*/
},
组件使用时可以设置值
<test1 max="{{5}}"/>
使用propertis数据
等于max值时无法继续叠加
addCount() {
if (this.data.count === this.properties.max) return
this.setData({ count: this.data.count + 1})
this._showCount()
},
五、data和properties的区别
在小程序的组件中，properties 属性和data数据的用法相同，它们都是可读可写的，只不过:
● data更倾向于存储组件的私有数据 ● properties更倾向于存储外界传递到组件中的数据
两者的地址一致：
this.data === this.properties // true
给properties属性赋值
// 为properties的数据重新赋值
this.setData({ max: this.properties.max + 1 })
六、数据监听器
监听器功能再页面不支持
/**
* 组件的数据监听器
*/
observers: {
// 可以同时监听多个属性， 入参的参数对应属性个数，表示属性更新后的值
'attr1, attr2': function(newValue1, newValue2) {
// todo ...
}
},
演示案例：
组件HTML代码：
<!--components/test2/test2.wxml-->
<text>components/test2/test2.wxml</text>
<view>
{{n1}} + {{n2}} = {{sum}}
</view>
<button size="mini" type="primary" bindtap="addN1">n1增加</button>
<button size="mini" type="primary" bindtap="addN2">n2增加</button>
组件JS代码：
// components/test2/test2.js
Component({
/**
* 组件的数据监听器
*/
observers: {
'n1, n2': function(n1Value, n2Value) {
this.setData({ sum: n1Value + n2Value })
}
},
/**
* 组件的属性列表
*/
properties: { },
/**
* 组件的初始数据
*/
data: { n1: 0, n2: 0, sum: 0 },
/**
* 组件的方法列表
*/
methods: {
addN1() { this.setData({ n1: this.data.n1 + 1 }) },
addN2() { this.setData({ n2: this.data.n2 + 1 }) }
}
})
演示案例2：
一个RGB颜色案例，HTML代码
<!--components/rgbView/rgbView.wxml-->
<text>components/rgbView/rgbView.wxml</text>
<view class="colorBox" style="background-color: rgb({{fullColor}});">
颜色值：{{fullColor}}
</view>
<button size="mini" bindtap="changeR" >R</button> |
<button size="mini" bindtap="changeG" >G</button> |
<button size="mini" bindtap="changeB" >B</button>
<view>
{{rgb.r}}, {{rgb.g}}, {{rgb.b}}
</view>
JS代码：
// components/rgbView/rgbView.js
Component({
observers: {
// 监听，然后重新赋值
'rgb.**': function(newRgb) {
this.setData({
fullColor: `${newRgb.r}, ${newRgb.g}, ${newRgb.b}`
})
}
},
/**
* 组件的属性列表
*/
properties: { },
/**
* 组件的初始数据
*/
data: {
rgb: { r: 0, g: 0, b: 0 },
fullColor: '0, 0, 0'
},
/**
* 组件的方法列表
*/
methods: {
changeR() {
let rValue = this.data.rgb.r + 5
rValue = rValue > 255 ? 255 : rValue
this.setData({ 'rgb.r': rValue })
},
changeG() {
let gValue = this.data.rgb.g + 5
gValue = gValue > 255 ? 255 : gValue
this.setData({ 'rgb.g': gValue })
},
changeB() {
let bValue = this.data.rgb.b + 5
bValue = bValue > 255 ? 255 : bValue
this.setData({ 'rgb.b': bValue })
}
}
})
RGB显示板样式：
/* components/rgbView/rgbView.wxss */
.colorBox {
line-height: 200rpx;
font-size: 24rpx;
color: white;
text-shadow: 0rpx 0rpx 2rpx black;
text-align: center;
}
七、纯数据字段
1.什么是纯数据字段
概念:纯数据字段指的是那些不用于界面渲染的data字段。
应用场景:例如有些情况下，某些data中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前
组件内部使用。带有这种特性的data字段适合被设置为纯数据字段。
好处:纯数据字段有助于提升页面更新的性能。
2.使用规则
在Component构造器的options节点中，指定pureDataPattern为一个正则表达式，
字段名符合这个正则表达式的字段将成为纯数据字段,示例代码如下:
// components/rgbView/rgbView.js
Component({
options: {
// 自定义正则规则来匹配纯数据字段，演示为首字符下划线的属性
pureDataPattern: /^_/
}
}
把之前的JS代码的rgb属性名改为_rgb使用即可：
// components/rgbView/rgbView.js
Component({
options: {
// 自定义正则规则来匹配纯数据字段，演示为首字符下划线的属性
pureDataPattern: /^_/
},
observers: {
// 监听，然后重新赋值
'_rgb.**': function(newRgb) {
this.setData({
fullColor: `${newRgb.r}, ${newRgb.g}, ${newRgb.b}`
})
}
},
/**
* 组件的属性列表
*/
properties: { },
/**
* 组件的初始数据
*/
data: {
_rgb: { r: 0, g: 0, b: 0 },
fullColor: '0, 0, 0'
},
/**
* 组件的方法列表
*/
methods: {
changeR() {
let rValue = this.data._rgb.r + 5
rValue = rValue > 255 ? 255 : rValue
this.setData({ '_rgb.r': rValue })
},
changeG() {
let gValue = this.data._rgb.g + 5
gValue = gValue > 255 ? 255 : gValue
this.setData({ '_rgb.g': gValue })
},
changeB() {
let bValue = this.data._rgb.b + 5
bValue = bValue > 255 ? 255 : bValue
this.setData({ '_rgb.b': bValue })
}
}
})
八、组件的生命周期函数
全部的钩子函数
// components/rgbView/rgbView.js
Component({
lifetimes: {
// 创建完成后执行
created() {},
// 组件实例和页面完成dom绑定后执行，等同vue的mounted
attached() {},
// 组件再页面的视图渲染完成
ready() {},
// 组件被更新后执行(组件实例移动到节点树的新位置)
moved() {},
// 组件从页面的dom树中移除时触发
detached() {},
// 组件发生异常触发
error() {}
}
})
主要的三个函数
2.组件主要的生命周期函数
在小程序组件中，最重要的生命周期函数有3个，分别是created、attached、 detached。 它们各自的特点
如下:
① 组件实例刚被创建好的时候，
created生命周期函数会被触发 ● 此时还不能调 用setData ● 通常在这个生命周期函数中， 只应该用于给组件的this添加一些自定义的属性字段 ② 在组件完全初始化完毕、
进入页面节点树后，attached 生命周期函数会被触发
此时，this.data 已被初始化完毕 ● 这个生命周期很有 用，绝大多数初始化的工作可以在这个时机进行( 例如发请求获取初始数据)
③ 在组件离开页面节点树后，detached生命周期函数会被触发 ● 退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数 ● 此时适合做一些清理性质的工作
九、所属页面的生命周期函数
1.什么是组件所在页面的生命周期
有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期。
// components/rgbView/rgbView.js
Component({
pageLifetimes: {
// 所引用的页面被展示时执行
show() {},
// 所引用的页面被隐藏时执行
hide() {},
// 所引用的页面被尺寸变化时执行, 可以获取size大小
resize(size) {},
}
})
演示案例，在颜色组件中编写一个随机颜色生成的方法：
/**
* 组件的方法列表
*/
methods: {
/**
* 生成随机色彩
*/
_randomColor() {
this.setData({
_rgb: {
r: Math.floor(Math.random() * 256),
g: Math.floor(Math.random() * 256),
b: Math.floor(Math.random() * 256)
}
})
},
}
在页面渲染展示的周期时刻调用：
pageLifetimes: {
// 所引用的页面被展示时执行
show() {
// 在引用页面展示时触发
this._randomColor()
}
}
十、Slot 组件插槽
单个插槽
编写一个组件
<!--components/test4/test4.wxml--> <text>components/test4/test4.wxml</text> <view> <view>这是组件的内部结构</view> <slot></slot> </view>
使用组件：
<test4> <text>这是嵌入组件插槽的部分</text> </test4>
多个插槽
<view> <view>这是组件的内部结构1</view> <slot name="before"></slot> <view>这是组件的内部结构2</view> <slot name="after"></slot> <view>这是组件的内部结构3</view> </view>
微信新版本需要追加JS配置项：
黑马教程演示没有，说明在老版本可以直接配置
// components/test4/test4.js
Component({
options: {
// 开启多插槽支持
multipleSlots: true,
}
}
使用时需要指明名称：
<test4> <text slot="before">这是嵌入组件插槽的部分1</text> <text slot="after">这是嵌入组件插槽的部分2</text> </test4>
十一、组件之间通信问题
1.父子组件之间通信的3种方式
①属性绑定
●用于父组件向子组件的指定属 性设置数据，仅能设置JSON兼容的数据
②事件绑定
● 用于子组件向父组件传递数据，可以传递任意数据
③获取组件实例
● 父组件 还可以通过this.selectComponent()获取子组件实例对象
● 这样就可以直 接访问子组件的任意数据和方法
一、父组件（页面） 向 子组件传递数据：
<father counter="{{val1}}" />
<view> father组件 counter值： {{val1}}</view>
Father组件接参：
// components/father/father.js
Component({
/**
* 组件的属性列表
*/
properties: {
counter: {
type: Number
}
}
})
二、子组件向父组件传递数据
3.事件绑定
事件绑定用于实现子向父传值，可以传递任何类型的数据。使用步骤如下:
① 在父组件的js中，定义一个函数,这个函数即将通过自定义事件的形式，传递给子组件
② 在父组件的wxml中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件
③ 在子组件的js中，通过调用this.triggerEvent(自定义事件名称',{/*参数对象*/ }) ,将数据发送到父组件
④ 在父组件的js中，通过e.detail获取到子组件传递过来的数据
1、Father组件先追加事件和展示
<!--components/father/father.wxml-->
<text>components/father/father.wxml</text>
<view>展示Father组件 counter值：{{counter}}</view>
<button bindtap="addCounter">+1</button>
JS代码，使用事件触发器配置事件和传递值：
/**
* 组件的方法列表
*/
methods: {
addCounter() {
this.setData({ counter: this.properties.counter + 1})
// 给父组件进行同步
this.triggerEvent('sync', { value: this.properties.counter})
}
}
页面使用组件时，绑定对应的接收方法：
<father counter="{{val1}}" bind:sync="syncCounter" />
<view> father组件 counter值： {{val1}}</view>
方法编写：
syncCounter(event) {
// 接收从子组件发送过来的参数
this.setData({ val1: event.detail.value })
},
三、直接获取组件实例实现调用
可在父组件里调用this.selectComponent("id或class选择器")，获取子组件的实例对象,
从而直接访问子组件的任意数据和方法。
调用时需要传入一-个选择器,例如this.selectComponent(".my-component")。
<father
counter="{{val1}}"
bind:sync="syncCounter"
class="cf"
id="componentFather" />
<view> father组件 counter值： {{val1}}</view>
<button bindtap="getComponentFather"> 测试</button>
JS代码：
现版本拿不到组件的方法，data属性可以获取
/**
* 直接获取组件实例
*/
getComponentFather() {
// 或者id选择器 this.selectComponent('#componentFather')
// 或者类选择器 this.selectComponent('.cf')
const father = this.selectComponent('.cf')
console.log(father)
console.log(father.data.counter)
// 拿不到组件方法？ 清空缓存，刷新页面再尝试
father.addCounter()
},
十二、behaviors
1.什么是behaviors
behaviors是小程序中，用于实现组件间代码共享的特性,类似于Vue.js中的"mixins"
2. behaviors的工作方式
每个behavior可以包含一组属性、 数据、生命周期函数和方法。
组件引用它时，它的属性、数据和方法会被合并到组件中。
每个组件可以引用多个behavior, behavior 也可以引用其它behavior。
3.创建behavior
调用Behavior(Object object)方法即可创建一一个共享 的behavior实例对象，供所有的组件使用:
// /behaviors/bhvirs1.js
module.exports = Behavior({
// 属性
properties: {},
// 数据
data: { msg: 'Hello Behaviors!'},
// 方法
methods: {
}
})
4.导入并使用behavior
在组件中，使用require()方法导入需要的behavior,
挂载后即可访问behavior中的数据或方法，
示例代码如下:
// components/father/father.js
const b1 = require('../../behaviors/bhvirs1')
Component({
behaviors: [b1],
})
组件可以展示Behaviors中的值
<view>展示Behvior数据 {{msg}}</view>
对应的所有设置属性：
冲突问题，见官方文档描述
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html
