前言:小程序独立出来了很多原生APP的组件,在HTML5需要模拟才能实现的功能,小程序里可以直接调用组件。但是样式部分还是有所欠缺,所以总结了微信小程序之自定义组件
一、创建组件:
- 自定义一个components文件夹,用来存放所有自定义的组件。
- 再针对每一个组件创建一个文件夹,用来存放这个组件相关的文件。比如mybox这个组件,那么可以创建一个mybox的一个文件夹。
- 在指定组件的文件夹中右键->新建Component创建组件。这样创建的目的是在json文件中添加"component": true,将其申明为一个组件。
- 在wxml文件中做好组件的节点布局。比如以下代码:
<view class="outter">
<view class="inner">幕课网</view>
</view>
二、使用组件:
- 在需要使用自定义组件的页面的json文件中注册组件。添加类似如下代码:
{
"usingComponents": {
"mybox": "/components/mybox/mybox"
}
}
- 然后在wxml模板文件中使用组件:
<mybox></mybox>
三、给自定义组件添加属性:
- 在组件的js文件中,在properties中添加属性,添加属性的时候,需要指定两个值,一个是type,代表的是这个属性的类型,一个是value,代表的是这个属性的默认值。示例代码如下:
Component({
properties: {
showInner: {
type: Boolean,
value: false
}
}
})
- 然后在wxml模板中就可以使用了。示例代码如下:
<view class="outter">
<view wx:if="" class="inner">幕课网</view>
</view>
- 在使用组件的时候,可以直接在组件上给这个属性设置值:
<mybox showInner="true"></mybox>
- 还有另外一种使用data的形式,data中的数据可以渲染到组件的代码中,但是使用data不能作为属性来使用。
四、在组件中添加节点:
- 在使用小程序内置的组件的时候,比如view,我们还可以在view中添加其他的组件。这个功能可以通过slot节点来实现。示例代码如下:
<view class="outter">
<view wx:if="" class="inner">幕课网</view>
<slot></slot>
</view>
- 以后在使用这个组件的时候,还可以添加自己的节点。示例代码如下:
<mybox showInner="true">
<view>这是index中添加的</view>
</mybox>
- 以上是添加一个slot,如果想要添加多个slot,那么需要在js文件中添加一个multipleSlots属性,示例代码如下:
Component({
options: {
multipleSlots: true
},
- 然后在wxml文件中,需要给每一个slot都指定name。示例代码如下:
<view class="outter">
<slot name="before"></slot>
<view wx:if="" class="inner">幕课网</view>
<slot name="after"></slot>
</view>
- 最后在使用这个组件的时候,也需要指定放在那个slot中。示例代码如下:
<mybox showInner="true">
<view slot="before">这是before的组件</view>
<view slot="after">这是after的组件</vie## 标题w>
</mybox>
组件样式注意事项:
组件对应 wxss 文件的样式,只对组件wxml内的节点生效。编写组件样式时,需要注意以下几点:
- 组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器,请改用class选择器。
- 组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用。
- 子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。
- 继承样式,如 font 、 color ,会从组件外继承到组件内。
- 除继承样式外, app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。
#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点,否则不一定会生效 */
事件:
- 组件可以直接再外面绑定事件。示例代码如下:
// my-component组件代码
<view>
组件内的代码
</view>
然后在使用的时候,直接在上面绑定就可以了。
<my-component bindtap="tapEvent"></my-component>
- 自定义组件事件。直接在组件内绑定事件。并且如果我们想在组件内捕获到事件后,要通知到父组件,那么可以通过triggerEvent方法来触发自定义的事件。示例代码如下:
// my-component组件代码
<view class="outter">
<view class="inner" bindtap="onInnerTapEvent"></view>
</view>
然后在组件的js文件中,使用以下代码进行捕获和传递给父组件。示例代码如下:
Component({
method: {
onInnerTapEvent: function(event){
console.log("组件内监听到了innerTapEvent事件");
var detail = {} // detail对象,提供给事件监听函数
var option = {} // 触发事件的选项
this.triggerEvent("customevent",detail,option);
}
}
})
然后在使用组件的地方,需要给自定义事件绑定监听方法。示例代码如下:
<my-component bindcustomevent="onCustomEventEvent">
</my-component>
其中的detail是在触发innerEvent事件的时候,传递给外面接收这个事件的对象一些额外的信息,option是一些选项。这些选项可以如下:
| 选项名 | 类型 | 是否必填 | 默认值 | 描述 | | — | — | — | — | — | | bubbles | Boolean | 否 | false | 事件是否冒泡 | | composed | Boolean | 否 | false | 事件是否可以穿越组件边界,为false时,事件将只能在引用组件的节点树上触发,不进入其他任何组件内部 | | capturePhase | Boolean | 否 | false | 事件是否拥有捕获阶段 |
生命周期:
组件本身的生命周期:
组件的生命周期,指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
其中,最重要的生命周期是created/attached/detached,包含一个组件实例生命流程的最主要时间点。(注意:在2.2.3基础库之前,生命周期函数写在Component中就可以,在2.2.3后应该写在lifetimes中。)
- 组件实例刚刚被创建好时,created生命周期被触发。此时,组件数据this.data就是在Component构造器中定义的数据data。此时还不能调用setData。通常情况下,这个生命周期只应该用于给组件this添加一些自定义属性字段。
- 在组件完全初始化完毕、进入页面节点树后,attached生命周期被触发。此时,this.data已被初始化为组件的当前值。这个生命周期很有用,绝大多数初始化工作可以在这个时机进行。
- 在组件离开页面节点树后,detached生命周期被触发。退出一个页面时,如果组件还在页面节点树中,则 detached会被触发。