小程序学习：自定义组件

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

本文要创建一个效果如下图的组件，由一个心形图片和右上角的数字构成。

1、创建自定义组件

（1）首先在根目录下新建文件夹components，components下新建like文件夹，like下新建index页面； （2）在 index.json 文件中进行自定义组件声明:

{ "component": true }

（3）在 index.wxml 文件中编写组件模板，在 index.wxss 文件中加入组件样式，它们的写法与页面的写法类似;

编写组件样式时，需要注意以下几点：

组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。继承样式，如 font 、 color ，会从组件外继承到组件内。除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。 #a { } /* 在组件中不能使用 */ [a] { } /* 在组件中不能使用 */ button { } /* 在组件中不能使用 */ .a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */

（4）在index.js 文件中，需要使用 Component 来注册组件，并提供组件的属性定义、内部数据和自定义方法:

Component({ behaviors: [], // 属性定义（详情参见下文） properties: { myProperty: { // 属性名 type: String,//类型（必填） value: ''//属性初始值（选填），默认布尔值初始为false，数字初始为0 observer: function(newVal, oldVal, changedPath){ //属性值变化时的回调函数（选填），也可以写成在methods段中定义的方法名字符串，如'_propertyChange' //newVal是新设置的数据，oldVal是旧数据 } }, myProperty2: String // 简化的定义方式 }, data: {}, // 私有数据，可用于模板渲染 lifetimes: { // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached() { }, moved() { }, detached() { }, }, // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached() { }, // 此处attached的声明会被lifetimes字段中的声明覆盖 ready() { }, pageLifetimes: { // 组件所在页面的生命周期函数 show() { }, hide() { }, resize() { }, }, methods: { onMyButtonTap() { this.setData({ // 更新属性和数据的方法与更新页面数据的方法类似 }) }, // 内部方法建议以下划线开头 _myPrivateMethod() { // 这里将 data.A[0].B 设为 'myPrivateData' this.setData({ 'A[0].B': 'myPrivateData' }) }, _propertyChange(newVal, oldVal) { } } })

下面具体实现。

index.wxml: <view class="container" bind:tap="onLike"> <image src="{{like?yes_url:no_url}}" /> <text>{{count}}</text> </view>

组件中最好不要留有无意义的间距，例如文字的行间距，设置line-height为文字大小可消除行间距。

index.wxss: .container{ display: flex; flex-direction: row; /* 必须指定宽度，否则会出现移动 */ /* width:120rpx; */ padding:10rpx; } .container text{ font-size:24rpx; font-family: "PingFangSC-Thin";//苹果手机的默认字体是“苹方”，而安卓是“思源”。 color: #bbbbbb; line-height:24rpx;//用于消除文字的上下间距 position:relative;//相对定位 bottom:10rpx; left:6rpx; } .container image{ width:32rpx; height:28rpx; } index.js: Component({ properties: { like: Boolean, count: Number, readOnly:Boolean }, data: { yes_url: 'images/like.png', no_url: 'images/like@dis.png' }, methods: { onLike: function (event) { if(this.properties.readOnly){ return } let count = this.properties.count count = this.properties.like ? count - 1 : count + 1 this.setData({ count: count, like: !this.properties.like }) let behavior = this.properties.like ? 'like' : 'cancel' this.triggerEvent('like', { behavior: behavior }, {}) } } })

properties中定义的属性是需要从外部，比如服务器获取的数据； 而data中的数据是从本地加载的，或者是不需要在外部改变的； 但是最终小程序会将properties和data中的数据指向同一个JavaScript对象。

2、使用自定义组件

在需要使用自定义组件的页面的json文件中定义：

{ "usingComponents": { "like-cmp": "/components/like/index", } }

like-cmp是组件的名字。 然后在wxml文件中使用：

<like-cmp bind:like="onLike" like="{{like}}" count="{{count}}" />

自定义组件中的data里的数据是私有的，不能在外部更改，只能被组件自身的wxml文件使用；而properties中的属性可以在外部更改。

3、数据传递的流程

（1）数据从服务器传递到页面的js文件； （2）通过setData将数据绑定到页面的wxml文件中； （3）由于使用了自定义组件，数据通过设置组件属性值的方式传递到组件的wxml中。

4、自定义事件的激活与监听

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html 如果在外部某个页面使用自定义组件时，要给该组件添加监听事件，则该事件的返回值里没有组件的数据。这就需要在自定义组件里的methods中的点击事件中触发一个自定义事件like。

methods: { onLike: function (event) { if(this.properties.readOnly){ return } let count = this.properties.count count = this.properties.like ? count - 1 : count + 1 this.setData({ count: count, like: !this.properties.like }) let behavior = this.properties.like ? 'like' : 'cancel' this.triggerEvent('like', { behavior: behavior }, {}) } }

其中triggerEvent(’’,{},{})用来触发事件behavior，三个参数指定事件名、detail对象和事件选项； 这时，在外部使用自定义组件时就能得到组件中like属性的值,：

<like-cmp bind:like="onLike" class="like" like="{{like}}" count="{{count}}" />

like的值在event.detail中：

onLike:function(event){ let like_or_cancel = event.detail.behavior },

5、组件的生命周期函数

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

created：在组件实例刚刚被创建时执行 attached：在组件实例进入页面节点树时执行 ready：在组件在视图层布局完成后执行 moved ：在组件实例被移动到节点树另一个位置时执行 detached：在组件实例被从页面节点树移除时执行 error： 每当组件方法抛出错误时执行

6、属性值变化时的回调函数observer

属性值的改变情况可以使用 observer 来监听。目前，在新版本基础库中不推荐使用这个字段，而是使用 Component 构造器的 observers 字段代替，它更加强大且性能更好。 数据监听器详见：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/observer.html

比如某一自定义组件要监听来自服务器的数据index，如果index为0~9，要在index前加0，否则不变：

properties: { index:{ type: Number, observer:function(newVal, oldVal, changedPath){ if (newVal < 10) { this.setData({ _index: '0' + newVal }) } } } }, /** * 组件的初始数据, data 的值也会被页面绑定, 但data的值不可以从组件外部设置 */ data: { _index:String//用来接收改变后的index值 }

但是，千万不要在observer函数中修改自身的属性，否则就会无限递归。 应该重新设置一个变量：_index。 也可以这样写：

properties: { index:{ type: Number, observer:'func' } } } }, /** * 组件的初始数据, data 的值也会被页面绑定, 但data的值不可以从组件外部设置 */ data: { _index:String//用来接收改变后的index值 } methosd: { func(newVal, oldVal, changedPath){ if (newVal < 10) { this.setData({ _index: '0' + newVal }) }

事件在组件中的传递：

如果组件里还有组件，即组件嵌套，则当点击页面的组件时，事件响应会从最底层的组件逐级向上传递，最后传给页面的响应函数。

7、组建的behavior行为

behavior可以实现组件的继承机制。 定义方式和组件一样，把组件Component关键字换成Behavior，可以把几个组件共有的属性、方法等放在一个behavior里.

定义Behavior：

let classicBehavior = Behavior({ properties: { type:String, img:String, content:String }, data: { } }) export { classicBehavior }

继承Behavior： properties、data、methods、生命周期函数都可以被组件继承。 在需要继承Behavior的组件里导入：

import {classicBehavior} from '../classic-beh.js' Component({ /** * 组件的属性列表 */ behaviors:[classicBehavior],//若要继承多个Behavior，以逗号分隔 properties: { }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { } })

说明： （1）组件继承符合一般继承规则，如果子类和父类有同名属性，子类属性会覆盖父类属性。

（2）多继承时，且子类没有同名属性而几个父类之间有同名属性是，写在 behaviors:[a, b, c]括号中最后一个会覆盖其他的。

（3）生命周期函数不会有覆盖情况，小程序会依次执行父类的生命周期函数，再执行子类的生命周期函数。

8、组件的hidden属性

当需要组件切换显示/隐藏时，可以使用wx:if条件渲染，也可以给组件加hidden属性 wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

因此一般使用hidden更好。 但是在自定义组件里使用hidden无效。 所以为了让自定义组件也能使用hidden，可以在组件的properties里加入hidden属性，然后在组件的wxml外部的view标签内添加hidden属性：

properties: { hidden:flase }, <view hidden={{hidden}} class="classic-container"> <image src="{{img}}" class="classic-img"></image> <image class='tag' src="images/essay@tag.png" /> <text class="content">{{content}}</text> </view>

在使用该组件时： wx:if 写法：

<movie-cmp wx:if="{{classic.type==100}}" img="{{classic.image}}" content="{{classic.content}}" />

hidden写法：

<movie-cmp hidden="{{classic.type！=100}}" img="{{classic.image}}" content="{{classic.content}}" />

注：如果使用hidden属性，组件不会完整的执行一次生命周期，例如组件生命周期的detach()函数不会触发。 所以如果要执行detach()函数，还应该使用wx:if

9、组件中样式的复用

如果几个组件有相同的样式，则可以通过@import的方式导入共有的样式，实现样式的复用。这是template里的做法。 例如：

@import "../common.wxss";

后面一定要加封号。

10、组件间的通信

父子组件间的基本通信方式有以下几种。

WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据（自基础库版本 2.0.9 开始，还可以在数据中包含函数）。具体在 组件模板和样式 章节中介绍。事件：用于子组件向父组件传递数据，可以传递任意数据。如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

11、点击组件进行页面跳转

点击组件进行页面跳转的事件函数可以直接写在组件里，而不用写在Page页面里，这样就不用在组件和页面之间传递参数了。 例如对于组件book，其bindtap事件写在methods里：

methods: { onTap(event){ const bid = this.properties.book.id wx.navigateTo({ url:`/pages/book-detail/book-detail?bid=${bid}` }) // 降低了组件的通用性 // 非常方便 // 服务于当前的项目 项目组件 // } }

12、组件wxml的slot（插槽）

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html 在组件的wxml中可以包含 slot 节点，用于承载组件使用者提供的wxml结构。

默认情况下，一个组件的wxml中只能有一个slot。需要使用多slot时，可以在组件js中声明启用。

Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, properties: { /* ... */ }, methods: { /* ... */ } })

此时，可以在这个组件的wxml中使用多个slot，以不同的 name 来区分。

<!-- 组件模板 --> <view class="wrapper"> <slot name="before"></slot> <view>这里是组件的内部细节</view> <slot name="after"></slot> </view>

使用时，用 slot 属性来将节点插入到不同的slot上。

<!-- 引用组件的页面模板 --> <view> <component-tag-name> <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 --> <view slot="before">这里是插入到组件slot name="before"中的内容</view> <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 --> <view slot="after">这里是插入到组件slot name="after"中的内容</view> </component-tag-name> </view>

其中，slot的样式可以写在页面的wxss里。 例如，将下图的tag组件后面加上数字： 组件wxml：

<view class="container tag-class "> <slot name="before"></slot> <text >{{text}}</text> <slot name="after"></slot> </view>

页面wxml：

<v-tag tag-class="{{tool.highlight(index)}}" text="{{item.content}}"> <text class="num" slot="after">{{'+'+item.nums}}</text> </v-tag>

页面wxss中定义slot样式：

.num { margin-left: 10rpx; font-size: 22rpx; color: #aaa; }

13、外部样式类externalClass

有时，组件希望接受外部传入的样式类，比如从页面传入样式到组件。此时可以在 Component 中用 externalClasses 定义段定义若干个外部样式类。 组件的js文件：

Component({ externalClasses: ['tag-class'] })

组件wxml：

<view class="container tag-class "> <slot name="before"></slot> <text >{{text}}</text> <slot name="after"></slot> </view>

页面wxml：

<v-tag tag-class="ex-tag" text="{{item.content}}">

页面wxss：

.ex-tag { background-color: #fffbdd; }

注意：在同一个节点上使用普通样式类和外部样式类时，比如container和tag-class，两个类的优先级是未定义的，因此最好避免这种情况。

可以使用!important来使外部样式强制覆盖普通样式。 页面wxss：

.ex-tag { background-color: #fffbdd !important; }

14、区分同一页面下的多个相同组件的点击事件

当一个页面加载了多个相同的组件，当点击其中一个，需要一个id来判断用户点击了哪个组件。 在页面的XML中，给每个组件加入一个data-id：

<van-button data-id="{{item._id}}" size="small" type='primary' plain bind:click='viewItem'>详情</van-button>

这样在每个组件的点击事件中就可以取出该id，从而知道用户点击了哪个组件的按钮：

viewItem:function(event){ //console.log(event); var id = event.currentTarget.dataset.id; wx.navigateTo({ url: '../bookDetail/bookDetail?id='+id, }) },